Layout with floats [Archive] - Dynamic Drive Forums

froggy

11-17-2008, 03:30 PM

Hi there,

As per previous thread I have been advised to try using floats for my website.

I have dont this and so far things are working well. Except my #navigation2. It doesn't appear to put the text in the middle (centred between top and bottom) of the 12px height box. I have put padding-bottom: 5px; to try and move the text up a little but no change. Any ideas?

Here is the css code:

/* CSS Document */
body {
background-image:url(background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a.nav1:link {color: #000000; text-decoration:none; font-size:16px;}
a.nav1:visited {color: #000000; text-decoration:none;font-size:16px;}
a.nav1:hover {color: #FFFFFF; text-decoration:none;font-size:16px;}

a.nav2:link {color: #FFFFFF; text-decoration:none; font-size:12px;}
a.nav2:visited {color: #FFFFFF; text-decoration:none;font-size:12px;}
a.nav2:hover {color: #0099FF; text-decoration:none;font-size:12px;}

p {
padding: 5px 10px;
margin:0px;
font-size:13px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #0099FF;
color:#FFFFFF;
padding:5px 15px;
margin:0px
}

h2 {
font-size:20px;
color:#0099FF;
font-weight:bold;
padding: 5px 10px;
margin:0px;
}
h3 {
font-size:15px;
padding: 5px 10px;
color:#0099FF;

}
h4 {
font-size:10px;
padding:5px;
color:#666666;

}
h5 {
font-size:12px;
padding:5px;
color:#000000;

}
#container {
width: 800px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
#banner {
float:left;
clear:left;
width:263px;
height:135px;
background-image:url(raglanfestlogo.gif);
background-color:#0099FF;
}
#navigation1 {
float: left;
width: 495px;
margin-top:102px;
padding: 4px 0 0 0;
height: 23px;
background-color:#0099FF;
text-align:center;
font-weight:bold;
}
#rightcornerbox {
float:left;
background-image:url(rightcorner.gif);
margin-top:102px;
width: 32px;
height: 33px;
}
#navigation2 {
clear:both;
float: left;
width: 505px;
height: 12px;
padding-bottom:8px;
margin-left:263px;
margin-bottom: 5px;
text-align:middle;
font-weight:bold;
}
#leftlinks {
float: left;
width: 233px;
text-align:center;
background-color:#CCCCCC;
margin: 30px 0 0 0;
padding: 0px 10px 0px 10px;
}
#content {
float: left;
width: 507px;
padding: 15px;
}
#bottomlinks {
clear: left;
float:left;
margin:auto;
padding: 5px;
width:790px;
background-color:#CCCCCC;
border:0.5px solid #000000;
}
#footer {
clear: left;
margin: 0px;
width:790px;
height:20px;
padding: 5px;
text-align: center;
}

froggy

11-17-2008, 04:09 PM

<!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=iso-8859-1" />
<link type="text/css" href="test.css" rel="stylesheet" media="screen" />
<title>Raglan Music Festival</title>
</head>

<body>
<div id="container">
<div id="banner"></div>
<div id="navigation1">
<a class="nav1" href="http://www.raglan-festival.org">About</a>    
<a class="nav1" href="http://www.raglan-festival.org">Contact</a>    
<a class="nav1" href="http://www.raglan-festival.org">Schedule</a>    
<a class="nav1" href="http://www.raglan-festival.org">Sponsors</a>    
<a class="nav1" href="http://www.raglan-festival.org">Links</a>
</div>
<div id="rightcornerbox"></div>
<div id="navigation2">
<a class="nav2" href="http://www.raglan-festival.org">Tickets</a>     
<a class="nav2" href="http://www.raglan-festival.org">Performers</a>     
<a class="nav2" href="http://www.raglan-festival.org">Sessions</a>     
<a class="nav2" href="http://www.raglan-festival.org">Workshops</a>     
<a class="nav2" href="http://www.raglan-festival.org">Venues</a></div>
<div id="leftlinks"><br>
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="170" height="137">
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf">
<param name="quality" value="high">
<embed src="http://lads.myspace.com/videos/vplayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"></embed>
</object>
</p>
<h4>One Step Behind performed in 2008</h4>
<p><img src="armitageskanks600_1-1-1.jpg" width="220" height="148" /></p>
<h4>Armitage Skanks performed in 2008</h4>
<p><img src="advert.jpg" width="170" height="250" /></p>
</div>
<div id="content">
<h2>Raglan Music Festival</h2>
<h3>Bands Wishing to Perform in 2009 </h3>
<p>Any bands wishing to perform at the 2009 Raglan Music festival are invited to submitcapplications through this website. Please <a href="applications.html">click here</a> for further information. Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival. A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival<br>
<br>
A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
Just some of this year many highlights included the Children's workshops on the Saturday morning, Samba Galez, The Albino Frogs, The Devil's Violin, Owen Farr's classical concert, Bridgend Male Voice Choir & Monmouth Big Band at Raglan Castle and top class Madness tribute band One Step Behind.

Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.
<p>Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.
</div>
<div id="mailling"></div>
<div id="bottomlinks"></div>
<div id="footer"></div>
</div>
</body>
</html>

Schmoopy

11-17-2008, 04:19 PM

Snookerman

11-17-2008, 04:22 PM

Hehe, without the space in [/html], I just put that so you would see it.

...just put them in UPPER CASE and it should work
Uppercase or lowercase doesn't matter, it's that he used a space in the tag (which i put there cause i couldn't show it otherwise). Maybe if I write in the wrong order it will show, so this is the close tag: [/html] and this is the open tag: [html].
For css and other code use this close tag: [/code] and this open tag [code]

I know for next time. cheers
It's not just for the next time, you can edit your post's (like I'm doing now)

froggy

11-17-2008, 04:26 PM

hehehe yeah i thought that after. oops

I know for next time. cheers

Snookerman

11-17-2008, 08:47 PM

I'm just reposting your code so I can copy it without the smiley.
body {
background-image:url(background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a.nav1:link {
color: #000000;
text-decoration:none;
font-size:16px;
}
a.nav1:visited {
color: #000000;
text-decoration:none;
font-size:16px;
}
a.nav1:hover {
color: #FFFFFF;
text-decoration:none;
font-size:16px;
}
a.nav2:link {
color: #FFFFFF;
text-decoration:none;
font-size:12px;
}
a.nav2:visited {
color: #FFFFFF;
text-decoration:none;
font-size:12px;
}
a.nav2:hover {
color: #0099FF;
text-decoration:none;
font-size:12px;
}
p {
padding: 5px 10px;
margin:0px;
font-size:13px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #0099FF;
color:#FFFFFF;
padding:5px 15px;
margin:0px;
}
h2 {
font-size:20px;
color:#0099FF;
font-weight:bold;
padding: 5px 10px;
margin:0px;
}
h3 {
font-size:15px;
padding: 5px 10px;
color:#0099FF;
}
h4 {
font-size:10px;
padding:5px;
color:#666666;
}
h5 {
font-size:12px;
padding:5px;
color:#000000;
}
#container {
width: 800px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
#banner {
float:left;
clear:left;
width:263px;
height:135px;
background-image:url(raglanfestlogo.gif);
background-color:#0099FF;
}
#navigation1 {
float: left;
width: 495px;
margin-top:102px;
padding: 4px 0 0 0;
height: 23px;
background-color:#0099FF;
text-align:center;
font-weight:bold;
}
#rightcornerbox {
float:left;
background-image:url(rightcorner.gif);
margin-top:102px;
width: 32px;
height: 33px;
}
#navigation2 {
clear:both;
float: left;
width: 505px;
height: 12px;
padding-bottom:8px;
margin-left:263px;
margin-bottom: 5px;
text-align:middle;
font-weight:bold;
}
#leftlinks {
float: left;
width: 233px;
text-align:center;
background-color:#CCCCCC;
margin: 30px 0 0 0;
padding: 0px 10px 0px 10px;
}
#content {
float: left;
width: 507px;
padding: 15px;
}
#bottomlinks {
clear: left;
float:left;
margin:auto;
padding: 5px;
width:790px;
background-color:#CCCCCC;
border:0.5px solid #000000;
}
#footer {
clear: left;
margin: 0px;
width:790px;
height:20px;
padding: 5px;
text-align: center;
}

<!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=iso-8859-1" />
<link type="text/css" href="test.css" rel="stylesheet" media="screen" />
<title>Raglan Music Festival</title>
</head>

<body>
<div id="container">
<div id="banner"></div>
<div id="navigation1">
<a class="nav1" href="http://www.raglan-festival.org">About</a>    
<a class="nav1" href="http://www.raglan-festival.org">Contact</a>    
<a class="nav1" href="http://www.raglan-festival.org">Schedule</a>    
<a class="nav1" href="http://www.raglan-festival.org">Sponsors</a>    
<a class="nav1" href="http://www.raglan-festival.org">Links</a>
</div>
<div id="rightcornerbox"></div>
<div id="navigation2">
<a class="nav2" href="http://www.raglan-festival.org">Tickets</a>     
<a class="nav2" href="http://www.raglan-festival.org">Performers</a>     
<a class="nav2" href="http://www.raglan-festival.org">Sessions</a>     
<a class="nav2" href="http://www.raglan-festival.org">Workshops</a>     
<a class="nav2" href="http://www.raglan-festival.org">Venues</a></div>
<div id="leftlinks"><br>
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="170" height="137">
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf">
<param name="quality" value="high">
<embed src="http://lads.myspace.com/videos/vplayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"></embed>
</object>
</p>
<h4>One Step Behind performed in 2008</h4>
<p><img src="armitageskanks600_1-1-1.jpg" width="220" height="148" /></p>
<h4>Armitage Skanks performed in 2008</h4>
<p><img src="advert.jpg" width="170" height="250" /></p>
</div>
<div id="content">
<h2>Raglan Music Festival</h2>
<h3>Bands Wishing to Perform in 2009 </h3>
<p>Any bands wishing to perform at the 2009 Raglan Music festival are invited to submitcapplications through this website. Please <a href="applications.html">click here</a> for further information. Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival. A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival<br>
<br>
A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
Just some of this year many highlights included the Children's workshops on the Saturday morning, Samba Galez, The Albino Frogs, The Devil's Violin, Owen Farr's classical concert, Bridgend Male Voice Choir & Monmouth Big Band at Raglan Castle and top class Madness tribute band One Step Behind.

Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.
<p>Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.
</div>
<div id="mailling"></div>
<div id="bottomlinks"></div>
<div id="footer"></div>
</div>
</body>
</html>

Snookerman

11-17-2008, 08:57 PM

If I use the code I copied from you, the second menu (navigation2) is vertically centered. However, I don't have the pictures and movie that you have, maybe you could post a link to your site?

froggy

11-17-2008, 09:52 PM

Hello,

I am working offline so the site isnt active yet. Do you need the images or movies as its the menu im having most trouble with.

Also where can i read about how to use this forum? You asked me to resolve a previous thread and i have no idea how!

Thanks its all a little new to me.

Snookerman

11-17-2008, 10:14 PM

Here are some rules and instructions:
http://www.dynamicdrive.com/forums/showthread.php?t=24866

But basically if you have a code, wrap it in code tags like so:

bla bla[/code ] (note I used a space at the end of the end tag because it will be rendered otherwise, don't use the space!). There's also a button for this that looks like this: #

Example:
#nav {
float:left;
}

If you have html code, wrap it in html tags like so:

bla bla bla[/html ] (note i used a space at the end of the end tag for the same reason as before but you of course don't use the space). There's also a button for this that looks like this: <>

Example:[HTML]<div id="nav"><ul>
<li class="menu"><a href="google"><span id="link">broken google link</span></a></li>
</ul></div>

If you want to mark a part of the code inside the code use icode tags: bla bla[/icode ], button looks like this: #i

Example:[CODE]#nav {
float:[ICODE]right;
}

If you want to edit something just click the edit button bellow the post you want edit. When editing, if you ad new info that you want to mark, you can wrap it in edit tags: bla bla edit[/edit ] (same space thing).

Example:[edit]bla bla edit

When your issue or problem has been resolved, i.e. a solution has been found, go to the first post and edit it, you will then be able to ad a prefix to the title that says Resolved. That will show others that the problem has been fixed.

Hope that is clear enough, if you have any questions just ask.