Jump to content

web page layout


cranebill
 Share

Recommended Posts

Hi,I have made a css sheet up with a div, I want to partion my page into 3 sections, this is just to let you know what I am trying to achieveok, the first div is great just what I wanted and if I play around I can get the other two to fit so I am happy here.(I am about to contradict myself )When I load my test web site as a web page, it takes up the whole page (div set at 100% width) but when I look at some peoples web pages it looks really smart and it looks like the web page is within the screen (hope that makes sense)example one http://www.heartinternet.co.uk/index.cgi?e...CFQuJ1QodgiIFRAexample two http://www.creative-jar.com/?gclid=CKaAv-u...CFQ6T1Qodb18fRA the second link is what I personally quite like and would like to achieve something like this with my own web pages, is divs the correct way to do this or the best way to do this, I am not ready for any other languages other than html and css at the moment?also are websites designed like this to take into account peoples different screen resolutions ?

Link to comment
Share on other sites

This is a normal variation. The goal is actually to keep the content at a fixed width so you don't have to worry about changing resolutions. To achieve this, you wrap the entire content of your page in a div that's centered and has a fixed width.

Link to comment
Share on other sites

Using div's is the "best" method to achieve this layout.Start with the w3schools tutorials, then, as DD points out above, set a width for the page and centre it. Done.there are about a bazillion templates on the web for this exact layout. happy hunting.

Link to comment
Share on other sites

div.top{background-color:yellow;width:100%;height:10%;}div.left{background-color:green;width:20%;height:80%;}div.right{position: absolute; left: 20%; top: 10%;background-color:blue;width:80%;height:80%;}div.bottom{background-color:yellow;width:100%;height:10%;}this is some code I have tried to segment my page into 4 areas, using % values, the div.right is where my issue lies, it is overlapping, is % the wrong way to do this, or am I missing something fundemental?I an sure I can solve it using fixed widths, I am just trying to see what happens with different valuesalso is there a web standard amount or a recommended amount for how many px a webpage should be maximum width?

Link to comment
Share on other sites

The position:absolute will be messing you up.Study Floats, padding and margins in order to position stuff. It is easier once you grasp the concepts.http://www.jlhaslip.trap17.com/samples/tem...left/index.htmlStudy the css in the sample page, then have a look at this one for a narrow, fixed, centred version.http://www.jlhaslip.trap17.com/samples/tem...w/fw_l_750.html

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...