SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with my xhtml / css template

    hey everyone i am fairly new to css i have manage to search the web and got all that i was looking for but i am having one problem with my template i would like it to expands vertically could someone look at my codes and tell me where i went wrong and how i can fix it please

    Thanks in advance
    Last edited by iRay; Nov 10, 2007 at 04:17. Reason: found what i was looking for

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly... All your layout elements are absolutely positioned which is not a great way to make a nice flowing and expandable layout.

    I would start over

    Below is a more fluid web layout and the footer will expand for the content etc. - have a go at using this layout and see how it turns out...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple Layout - Single Column</title>
    <style type="text/css">
    <!--
    body {
    	margin: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 0.7em;
    }
    #wrapper {
    	margin: 25px auto 0 auto;
    	width: 800px;
    	border: 1px solid #CCCCCC;
    }
    #header {
    	width: 750px;
    	height: 130px;
    	background: #0066CC;
    	color: white;
    	line-height: 130px;
    	padding: 0 0 0 50px;
    	font-size: 2em;
    }
    #nav {
    	width: 800px;
    	height: 32px;
    	background-color: #00509F;
    }
    #nav ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    #nav li {
    	display: inline;
    }
    #nav a {
    	padding: 0 20px;
    	line-height: 32px;
    	color: white;
    	text-decoration: none;
    	font-weight: bold;
    }
    #content {
    	width: 770px;
    	padding: 15px;
    }
    #footer {
    	width: 800px;
    	clear: both;
    	text-align: center;
    	padding: 7px 0;
    	background-color: #0066CC;
    	color: white;
    }
    -->
    </style>
    </head
    <body>
    <div id="wrapper">
    <div id="header">Website</div>
    <div id="nav">
    <ul>
    <li><a href="">LINK</a></li>
    <li><a href="">LINK</a></li>
    <li><a href="">LINK</a></li>
    <li><a href="">LINK</a></li>
    <li><a href="">LINK</a></li>
    </ul>
    </div>
    <div id="content">
      <h1>CONTENT</h1>
      <p>This is the content....</p>
      <p>More content</p>
      <p>More content...</p>
    </div>
    <div id="footer">FOOTER TEXT</div>
    </div>
    </body>
    </html>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •