1 Replies - 776 Views - Last Post: 12 March 2013 - 06:47 AM

#1 simon.toms@yahoo.co.uk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 12-March 13

css page alignment

Posted 12 March 2013 - 05:02 AM

hi everyone

I am building only my second ever website and was struggling with the page size/layout and would be very grateful for any help.

basically I was wandering how to either

1) (preferable option) get the page so the content is contained within a centre which scrolls up/down with just a background colour behind to its left and right. (something like what tumblr has).

I have tried to do this and this is my code

<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<DIV id="wrapper"></DIV>

<DIV id="content"> Content Below Here </DIV>

</DIV>
</body>


stylesheet.css

#wrapper 
    {
	margin: 0 auto;
        width: 700px;
	}


	#content 
	{
	    width: 70%;
	}




2) Have the page automatically adjust to the screen size being used.


Thanks in advance to anyone who would be able to help out

Simon

This post has been edited by Atli: 12 March 2013 - 06:35 AM
Reason for edit:: Use [code] tags when posting code.


Is This A Good Question/Topic? 0
  • +

Replies To: css page alignment

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: css page alignment

Posted 12 March 2013 - 06:47 AM

Hey.

There are two things wrong with the HTML you posted for your attempt at the first method.

  • The "wrapper" div is being closed immediately after it's opened. Typically you want a wrapper div to wrap the entire content - which seems to be what you are trying to do - but this closes the wrapper right away this nullifying it's intended effect. You should remove the closing div there.

  • You are missing the required HTML Doctype declaration. All HTML pages should start with a Doctype, so the browser knows what type of HTML it's receiving. I'd suggest either the HTML 4 Transitional or the HTML 5 Doctypes. For example, this is how you'd use the HTML 4 Transitional Doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Site Name</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    </body>
    </html>
    
    

    This is generally considered the very basic HTML structure upon which you should build. The <title> and <meta> tag used there - while not technically required - should always be included. They serve important purposes.

    The same could be written like this in HTML5, for more modern browsers:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Site Name</title>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
    </html>
    
    

    Note the much simpler Doctype declaration and the simpler charset meta tag.


Quote

2) Have the page automatically adjust to the screen size being used.

This is a bit more tricky than you may think. It's what we tend to call "responsive design", and it can take some doing to get this right for an acceptable range of screen sizes. This is a good article to read to get the basic concepts of this way of designing.
- A List Apart - Responsive Web Design
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1