Fullscreen-website with position property

[Criz]

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

Thanks!!


P.S. Sorry for my bad English, I hope I made myself understood

[learnweb]

Hi there.

I guess you are using DIVs and not tables to lay out your website?

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.

e.g.

<div id="fullScreenDiv" style="width:100%;">
<div id="header" style="width: 100%;"></div>
<div id="navigation" style="width: 100%;"></div>
</div>

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

e.g.

<div id="fullScreenDiv" style="width:100%;">
<div id="container" style="margin: 0 auto; width: 980px;">
<div id="header" style="width: 100%;"></div>
<div id="navigation" style="width: 100%;"></div>
</div>
</div>

Hope this helps!

Let me know if you need any further advice

Web Tuition Norwich
...teaching you what you want to learn

[Criz]

Thank you for reacting on my post. The problem is still not resolved..

I tried the methode you wrote but the header en topbar are still 980px width.

Cause you gave the container an width of 980px and you put the navigation and header in the container, they can't get any wider then 980px, or do I not get it?

Hope you can help me further

[jamaks]

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

#container{width:100%;min-width:980px;}

Jim