Butler
Member
Registered: 2nd Jun 05
Location: London
User status: Offline
|
Basically today I created a very basic layout for a website, I am fairly new to all this. The webpage I have made doesnt contain any tables, however there is one thing I want to do on the site I am unsure entirely how to go about it. Here is the code for the page I have made;
quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body{
width:800px;
margin auto;
}
#header{
background-color:red;
font-size:60px;
font-family:helvetica;
letter-spacing:-5px;
margin-bottom:2%;
margin-top:2%;
}
#navigation{
background-color range;
font-family:helvetica;
font-size:14px;
float:left;
width:15%;
}
#content{
background-color:white;
font-family:helvetica;
margin-left:2%;
float:left;
width:83%;
}
img{
float:right;
margin:4px
}
h1{
margin-top%;
{
</style>
</head>
<body>
<div id="header">James Butler's Website.</div>
<div id="left-col">
<div id="navigation">
a navigational link
a navigational link
a navigational link
a navigational link
a navigational link
a navigational link
a navigational link
a navigational link
</div><!-- closes the navigation -->
<div id="content">
Page heading
Fusce a dui sit amet diam aliquet volutpat. Maecenas pede ante, adipiscing sit amet, egestas id; ullamcorper eget, velit! In posuere, augue eu ultricies sodales, est mauris faucibus lacus, commodo eleifend mi ipsum vitae magna. Phasellus nibh ipsum; convallis non, condimentum eget, facilisis eget, turpis. Morbi accumsan sollicitudin eros! Donec ultricies massa convallis nisl. Sed ornare pede non orci. Ut viverra lectus sed nunc. Suspendisse accumsan leo eu sapien. Nunc blandit. Morbi pede. Nam sed est. Duis porta mauris et nulla. Integer non leo. Etiam euismod lorem. Nulla gravida dapibus tortor. Pellentesque pulvinar. Aliquam erat volutpat. Integer ligula felis, scelerisque sed, aliquet iaculis, euismod et, est. Nulla neque.
Sub heading
Vivamus diam quam, consectetuer et, tempor nec, lobortis et, tortor. Aliquam sapien lacus, condimentum et, ultrices et; ultrices vel, nulla? Nunc nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin pretium diam. Curabitur suscipit; tellus vitae feugiat tincidunt, leo lectus rhoncus magna, a mollis risus arcu vel lectus? Curabitur justo purus, commodo sit amet, consequat et, hendrerit et, mauris. Sed varius rhoncus ligula. Sed dignissim, augue a accumsan mattis; eros ante rutrum lacus, nec euismod lacus dolor commodo purus. Donec sagittis. Mauris volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tristique lobortis lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris fermentum quam non sapien. Suspendisse quis nisi vel mauris scelerisque suscipit. Mauris convallis. Duis semper nulla in elit. Maecenas quam turpis, dignissim nec, viverra eu, sodales vitae, tellus! Aenean adipiscing. Nunc eros orci, commodo eget, blandit vitae, mattis sed, nisl. Suspendisse potenti. In hac habitasse platea dictumst. Vivamus porttitor risus ut est. Praesent eget mi. Mauris erat ante, sollicitudin vitae, egestas eget, consectetuer vestibulum, tellus? Donec accumsan. Fusce pulvinar velit eu enim. Maecenas vel neque eu pede faucibus tristique. Maecenas a nibh. Curabitur lobortis vulputate felis! Proin erat orci, vehicula rutrum, accumsan ac, feugiat et, est. Integer odio turpis, posuere nec, porta vitae, semper a; nisi? Morbi a justo in arcu gravida ornare.
</div><!-- closes the content -->
</body>
</html>
By the way some of the code was lost, I saved it in a note on facebook as I didnt have my USB stick at uni, just the links and some text changes.
Anyway the change I want to make is to insert a new box beneath the navigation box on the left hand side. Do I need to create a new style to put the box and the navigation box into. When I created a new box and aligned it left it didnt go beneath the navigational box but jus t next to it.
This probably doesnt make any sense at all? Im very new to all this so apologies, let me know if its all a load of twoddle.
Thanks.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Give the second box the property float:left;.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Wait, misread what you want... One sec.
|
Butler
Member
Registered: 2nd Jun 05
Location: London
User status: Offline
|
Yeah so when I applied float:left to the second box it basically puts it up against the first box, instead of underneath it, which overlaps the content box in the middle. Do you follow? Really do apologise for how confusing it probably is.
|
Butler
Member
Registered: 2nd Jun 05
Location: London
User status: Offline
|
Ok so basically ive managed to get the other box in place, only thing is the content to the right of the boxes isnt staying at the top, the box of content starts where the bottom box on the left hand side ends at the bottom. How can I get it back up to the top?
|
Butler
Member
Registered: 2nd Jun 05
Location: London
User status: Offline
|
Forget the above! I dont know why I didnt think of this before. This is what the page looks like at the moment...
But I want the content part of the page to move up, ive tried changing the style part to 'float:left-top', it moves up but when the content is lower than the side bar it moves all the way over to the left hand side. Here is what id like it to look like ultimately...
Any ideas?
|
Butler
Member
Registered: 2nd Jun 05
Location: London
User status: Offline
|
Right, done that now! I put margin-top:-150px; in the content style, and it moved it up. Now though, I want no margin above the header but ive put a new style for h1 and put margin-toppx; and its not doing anything? Im trying alot of new things, if anyone is competant with html and css and things they can give me a hand please pm me I would much appreciate it.
|
Sam
Moderator
Premium Member
Registered: 24th Dec 99
Location: West Midlands
User status: Offline
|
body {
margin: 0px;
}
[Edited on 26-09-2008 by Sam]
|
|
