 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 405
|
 Posted: Wed Jul 23, 2008 6:43 am layout issues |
 |
|
|
I have a background of blue and a header and container, but I cant get the container to align in the center with the background either side. The centercontent is sitting along the bottom of the page. I am just starting this website from scratch and thought I could do it.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="container">
<div id="header"><br><br><br><br>
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul></div>
<div id="leftcontent"></div>
<div id="centercontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,
consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam
nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus
dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu
non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros
eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula,
ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor,
sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec,
faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna.
Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam
interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis
fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit
ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi
egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum
purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus,
accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum
aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In
eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris
in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
</div></div>
<div id="rightcontent">
</div></div></body>
</html> |
the css is:
| Code: |
* {margin: 0;padding: 0;}
html body #container {height: auto;}
html {height: 100%;}
body {text-align:center;font-family: helvicta, sans-serif;font-size:1.00em;background:blue;}
#container{width: 900px;height: 600px;text-align:left;}
#header {width: 900px;height: 70px;background:white;border-bottom:8px solid #F0F000;}
#nav {
float:left;
width:100%;
background:#F0F000;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#nav ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#nav a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#nav a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
color:#FFF;
}
#nav a:hover {
background-position:0% -42px;
}
#nav a:hover span {
background-position:100% -42px;}
#centercontent {width:350px;height:600px;background:white;display:inline;}
#leftcontent {width:200px;height:600px;background:#F0F000;}
#rightcontent {width:200px;height:600px;background:white;float:right;}
|
I have yet to do the footer.[/code] |
|
sticks464
Joined: 31 Dec 2006
Posts: 1179
|
| Posted: Wed Jul 23, 2008 7:59 am |
|
|
|
Add margins to the container
| Code: |
| #container{width: 900px;height: 600px;text-align:left; margin:0 auto;} |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Jul 23, 2008 1:14 pm re |
|
|
|
yes that done it, why did'nt I think of margins! thanks,
Except my center content text is still at the bottom, and now I have added margins to everything the right side has gone. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Jul 23, 2008 2:30 pm re |
|
|
|
| fixed it now |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
