...

View Full Version : problem positioning floats



faclimber
06-05-2007, 03: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>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Usually the first image in the Picture
array in the script is used here.
//-->
<td width=350 height=280>
<img src=Image001.jpg name=PictureBox width=350 height=280>
</td>
</tr>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<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, 04:20 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 )
This is the basic structure you need:


#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;
}



<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 (http://www.quirksmode.org/css/clearing.html) 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, 05: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:thumbsup:

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, 05: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?p=569539&postcount=9
This document type is probably the best for you:


<!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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftraditionalfocus.com%2Fbrcatest.html) 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, 05: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum