problem positioning floats

faclimber · 06-05-2007, 02:31 AM

my goal is to position #content and #slideshow next to each other at the same height. i'm not sure if i should be padding or using margin. i'm new to css and doing my best to hand code the whole thing. ( except javascript )

also, is there a way to change the background color on the text below the slideshow?

thanks for any help.

here is the link:
http://traditionalfocus.com/brcatest.html

and 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=ISO-8859-1" />

<title>Beacon Rock Climbers Association - Home Page</title>

<style type= "text/css">

body {
background-color: black;
}

#container {
width: 590px;
height: 530px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background-image: url(brcabackground.jpg);
background-color: gray;
font-family: arial, sans serif;
font-size: .75em;
}

#container img {
margin-top: 20px;
}

#header img {
margin:0;
display: block;
float: left;
padding-left: 20px;
}

#content {
float: right;
width: 225px;
height: 220px;
border: 1px solid black;
text-align: left;
}

#nav_bar {
float: right;
margin: 0;
padding-right: 80px;
border-left: 2px solid white;
font-size: 1em;
}

#nav_bar ul {
padding-top: 10px;
margin-bottom: -3px;
}

#nav_bar li {
list-style-type: none;
width: 0px;
background-color: gray;
text-align: center;
}

#nav_bar a {
color: white;
text-decoration: none;
}

#nav_bar a:hover {
color: black;
}

#slideshow {
float:left;
padding-top: 90px;
}

</style>

</head>

<body onload=runSlideShow() bgcolor=#000000>

<div id="container">

<div id="header">
<img src="gabes_beacon.gif"alt="brca header"/>
</div>

<div id="nav_bar">
<ul>
<li style="margin-top:40px"><a href="http:www.url.com">home</a></li>
<li><a href="http:www.url.com">pics</a></li>
<li><a href="http:www.url.com">topos</a></li>
<li><a href="http:www.url.com">forum</a></li>
<li><a href="http:www.url.com">contact</a></li>
</ul>
</div>

<div id="content">
<p>this is where the content will be written. this is where the content will be written.
this is where the content will be written.this is where the content will be written.
this is where the content will be written.this is where the content will be written.</p>

</div>

<div id="slideshow">
<table border=0 cellpadding=0 cellspacing=0>
<tr>

<td width=350 height=280>
<img src=Image001.jpg name=PictureBox width=350 height=280>
</td>
</tr>
<tr>

<td id=CaptionBox class=Caption align=center bgcolor=#80C9FF>
This is the default caption.
</td>
</tr>
</table>

</div>

</div>

</body>
</html>

koyama · 06-05-2007, 03:20 AM

Quote:

Originally Posted by faclimber

my goal is to position #content and #slideshow next to each other at the same height. i'm not sure if i should be padding or using margin. i'm new to css and doing my best to hand code the whole thing. ( except javascript )

This is the basic structure you need:

Code:

#header {
	overflow: hidden;
}
#main {
	overflow: hidden;
}
#nav_bar {
	float: left;
}
#slideshow  {
	float:left;
}
#content  {
	float: left;
	width: 225px;
	height: 220px;
	border: 1px solid black;
	text-align: left;
}

Code:

<body>
	<div id="header">
		<img ...>
		<div id="nav_bar"></div>
	</div>
	<div id="main">
		<div id="slideshow"></div>
		<div id="content"></div>
	</div>
</body>

As you can see I have added an extra div called #main. Also, the overflow:hidden is to ensure that #header and #main will contain its floats.

This method for containing floats is not supported in IE6, but for now get your page to display right in Firefox, then repost a link if it is not displaying correctly in IE6 or IE7.

faclimber · 06-05-2007, 04:07 AM

thanks for the help - i wouldn't have thought to lay it out like that. i'm still trying to understand, overflow: hidden; but at this point i'm glad it's working.

here's the updated link:
http://traditionalfocus.com/brcatest.html

thanks again

updated css:

body {
background-color: black;
}

#container {
width: 690px;
height: 530px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background-image: url(brcabackground.jpg);
background-color: 9d9fa1;
font-family: arial, sans serif;
font-size: .75em;
}

#container img {
margin-top: 20px;
display: block;
}

#header {
overflow: hidden;
}

#header img {
margin:0;
display: block;
float: left;
padding-left: 20px;
}

#main {
overflow: hidden;
}

#content {
float: left;
width: 225px;
height: 290px;
border: 1px solid black;
text-align: left;
margin-top: 80px;
margin-left: 65px;
}

#nav_bar {
float: left;
border-left: 2px solid white;
font-size: 1em;
margin-left: 150px;
}

#nav_bar ul {
padding-top: 10px;
margin-bottom: -3px;
}

#nav_bar li {
list-style-type: none;
width: 0px;
background-color: gray;
text-align: center;
}

#nav_bar a {
color: white;
text-decoration: none;
}

#nav_bar a:hover {
color: black;
}

#slideshow {
float:left;
padding-top: 60px;
padding-left: 25px;

}

koyama · 06-05-2007, 04:36 AM

Some suggestions for cleaning your code:

Instead of using XHTML you better use HTML. Why? See what Arbitrator has to say: http://codingforums.com/showpost.php...39&postcount=9
This document type is probably the best for you:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

It won't hurt to fix your coding errors either.

Also, you ought to put your JavaScript and CSS in external files. There are also some coding errors in your CSS. For example, hex color values should start with the #-symbol, otherwise they are ignored.

A table element should probably not be used to hold your slide show images. Ordinary div elements would be better.

Anyway, glad you got it working.

faclimber · 06-06-2007, 04:33 AM

thanks again for your help.

my errors seem to stem from the javascript. i've tried to link it externally but have had no luck. i'll ask over in the javascript forum.

updated page:
http://traditionalfocus.com/brcatest.html