Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post

    problem positioning floats

    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>
    Last edited by faclimber; 06-05-2007 at 05:22 AM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by faclimber View Post
    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.

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    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;

    }

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Some suggestions for cleaning your code:

    Instead of using XHTML you better use HTML. Why? See what Arbitrator has to say: How to validate a page with javascript variables in the <head> section?
    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.

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •