If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Fullscreen-website with position property

Hello,

I'm building my new portfoliowebsite with XHTML and CSS and the problem is I'm not an expert.

My website will be al fullscreen-website with a few backgroundimages like the topbar (which is an image I repeat to 100% width) and my header. I seriously have no idea how I can do this.. Ohyeah, I'm also using a contrainer with 1000px in the center of my site.

First I tried to use the "position: absolute;" in CSS. The problem is because of the width of my container the website is not fullscreen but 1000px width in the center.

Then I tried the "position:fixed;" property in the topbar and header, but then if I scroll down the topbar and header will be visible at the top of the screen.

How to fix the issue? Who can help me so I can finish my portfoliowebsite

One thing you always need to bear in mind with 100% wide sites is that on different screen resolutions things can seem out of place, so you could find on one monitor the site looks great, but on another, a bit of text may drop below an image for instance.

To achieve what you're doing, I would first create a div with a width of 100%, leave out any "position" attributes as it is fine to use the default positioning.

Within this div, you can effectively create the rest of your elements. You will need to give all of these elements (header, navigation, content) a width of 100% so that they stretch across the page.

Doing all of the above should give you a site where it will always be the width of the browser.

I would, however, give some thought to using a "container" div that is a set width to avoid any potential issues with things moving about. You can still achieve the look of a full screen website by strategically using background images to give this impression.

So, within your 100% wide div, you could now create a 1000px wide "container" div. Although I would actually suggest 980px to be compatible with most resolutions.

To centre this "container" div, give it styling of "margin: 0 auto". This will ensure it stays centered across any resolution. You can then put your header, navigation, content etc into this container and everything will centred and at a set width on the page

Hi, you could set the container width to 100% since as you rightly suggest setting it to 980px restricted this as your maximun width. However the problem comes when you are viewing on smaller monitor sizes when your content is going to be sqeezed and depending on how it is constructed likely to move out of position. The answer could be