HTML Forum

**goheadtry** · 05:39 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to the Official American Yard Website</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="Content">
</div>
<div id="navigation"><a href="news" class="navlink">NEWS</a><a href="bio" class="navlink">BIO</a><a href="media" class="navlink">MEDIA</a><a href="photos" class="navlink">PHOTOS</a><a href="forum" class="navlink">FORUM</a>
<a href="store" class="navlink">STORE</a>
<a href="links" class="navlink">LINKS</a>
<a href="fan-club" class="navlink">FAN CLUB</a></div>
<div id="page">
<div id="secthead"><img src="http://www.webmaster-talk.com/images/Aylogo.gif" alt="American Yard " />NEWS</div>
<div class="NewsBoxTitle"><a href="#" class="navicolor">Title of story</a></div>
<div class="NewsBig">
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="NewsBoximages">Images:</div>
<div class="NewsBoxvideo">Videos:</div>
<div class="NewsBoxfoot">Date:01/01/01 | <a href="#" class="navicolor">Permalink |</a> Labels: <a href="#" class="navicolor">test</a>, <a href="#" class="navicolor">test</a>, <a href="#" class="navicolor">test</a>, <a href="#" class="navicolor">test</a>, <a href="#" class="navicolor">test</a></div>
<div class="foot" id="bottom">
  <a href="#">Home</a> <a href="#">News</a> <a href="#">Bio</a> <a href="#">Photos</a> <a href="#">Media</a> <a href="#">Forum</a> <a href="#">Register</a> <a href="#">Store</a> <a href="#">Myspace</a>
<p>Design by John Forbush</p>
</div>
</div>
</body>
</html>

MY css

Code:

    body {
    margin:0px 0px; padding:0px;
    text-align:center;
    background-image:url(../images/stripe_6950d08a11fb9582ae82ba3ca798659b.png);
    }

    .indented
   {
    padding-left: 5px;
    padding-right: 50px;
   }


    .navicolor {
    color: #CCCCCC;
    text-decoration: none;
    letter-spacing: 1px;
    
    }
    a.navicolor:hover {
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 1px;    
    }
    .NewsBoxTitle {
    vertical-align: baseline;
    margin-top: 15px;
    margin-left: 15px;
    height: 40px;
    color: #FFFFFF;
    opacity: 100%;
    margin-right: 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-left: 15px;
    padding-right: 5px;
    display: block;
    font-size: 35px;
    padding-bottom: 15px;
    background-color: #000000;
    background-repeat: no-repeat;
    border-bottom-style: dashed;
    border-bottom-color: #333333;
    padding-top: 5px;
    }
    .NewsBoxfoot {
    svertical-align: baseline;
    margin-left: 15px;
    height: 5px;
    color: #FFFFFF;
    opacity: 100%;
    margin-right: 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-left: 15px;
    padding-right: 5px;
    display: block;
    font-size: 12px;
    padding-bottom: 15px;
    background-color: #000000;
    background-repeat: no-repeat;
    padding-top: 5px;
    border-top-style: dashed;
    border-top-color: #666666;
    }
        .NewsBoximages {
    svertical-align: baseline;
    margin-left: 15px;
    color: #FFFFFF;
    opacity: 100%;
    margin-right: 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-left: 15px;
    padding-right: 5px;
    display: block;
    font-size: 12px;
    padding-bottom: 15px;
    background-color: #000000;
    background-repeat: no-repeat;
    padding-top: 5px;
    border-top-style: dashed;
    border-top-color: #666666;
    height: 500px;
    float: left;
    width: 45%;
    }
            .NewsBoxvideo {
    svertical-align: baseline;
    margin-left: 15px;
    color: #FFFFFF;
    opacity: 100%;
    margin-right: 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-left: 15px;
    padding-right: 5px;
    display: block;
    font-size: 12px;
    padding-bottom: 15px;
    background-color: #000000;
    background-repeat: no-repeat;
    padding-top: 5px;
    border-top-style: dashed;
    border-top-color: #666666;
    width: 45%;
    height: 500px;
    float: left;
    clear: left;
    }
    .NewsBox {
    background-image: url(../images/newsboxbg.jpg);
    height: 171px;
    vertical-align: middle;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 15px;
    padding-right: 5px;
    display: list-item;
    color: #FFFFFF;
    opacity: 95%;
    padding-top: 5px;
    }
    .NewsBig {
    vertical-align: middle;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 15px;
    padding-right: 5px;
    display: list-item;
    color: #FFFFFF;
    opacity: 95%;
    padding-top: 5px;
    background-color: #333333;
    }
#Content {
    width:900px;
    height:450px;
    margin:auto;
    text-align:left;
    background-color:#eee;
    background-image: url(../images/AY---139b.jpg);
    }
    #navigation {
    width: 900px;
    height: 30px;
    background-color: #000000;
    margin:auto;
    text-align: center;
    vertical-align: middle;
    }
    
    .playlist
{
    opacity: .8;
}
a.navlink
{
    float: left;
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 20px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: center;
    width: 100px;
    font-style: normal;
    font-weight: 525;
}

a.navlink:hover
{
    color: #FF0000;
    background-color: #000000;
}
#bottom
{
    width: 900px;
    margin-top: 15px;
    opacity: .9;
}
.foot
{
    width: 900px;
    height: 70px;
    margin: auto;
    background-color: #999999;
    opacity: .6;
    color: #000000;
    margin-top: 15px;
    text-align: center;
}
#page
 {
    width:900px;
    height:100%;
    margin:auto;
    text-align:left;
    background-color:#FFFFFF;
    opacity: .9;
    }
#secthead
{
    height:100px;
    background-image: url(../images/sectheadbg.jpg);
    font-size: 50px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    letter-spacing: 5px;
    color: #333333;
    padding-left: 25px;
    display: block;
    padding-top: 15px;
    padding-bottom: 0px;
}

I am trying to make the rest of the layout line up like this I can't figure out how to do this.

Can someone tell me what I need to do to make this work

**vangogh** · 08-07-2008, 08:47 PM

I'm doing this quickly, but I think this will work for what you want. Here's the basic html structure I would use

HTML Code:

<div id="wrapper">
 <div class="NewsBoxtitle"></div>
 <div class="NewsBig"></div>
 <div class="NewsBoximages"></div>
 <div class="NewsBoxvideo"></div>
 <div class="NesBoxfoot"></div>
 <div class="foot"></div>
</div>

And here's some of the css. I'm only including what I think is the css needed to control your layout

Code:

.wrapper {width: 980px; margin: 0 auto}
.NewsBoxtitle
.NewsBig
.NewsBoximages {float: left; width:490px}
.NewsBoxvideo {float: left; width:490px}
.NewsBosfoot {clear: both}
.foot

Ok that's not a lot of css I know, but you shouldn't need much specific to making the layout work.

I gave the wrapper a width and set it to be centered in the page. The centering part isn't really relevant to your question, but the width would be. If you mean for the layout to fill the entire screen you can do away with the wrapper or just set its width to 100%

.NewsBoxtitle and .NewsBig just need to have a width of 100%, but they should by default, which is why I didn't set the width for either. The same will be true of .NewsBoxfoot and .foot.

With the the two divs that are acting as columns you want to float both left and give each a width that's half the overall width of the wrapper. I used 490px since it's half of 980px. You could alternately use 50%

One thing to keep in mind though is if you're adding borders or margins to push the two columns apart a little it'll change what you need to specify as the widths. The concept is still the same, but it may not be 50% width for each.

Because the two column divs have been floated they're removed from the normal document flow. The clear: both on .NewsBoxfoot ensures that that div will sit below the two column divs as though they were still part of the document flow.

Hope that helps.

**LadynRed** · 08-07-2008, 09:15 PM

Wow.. no offense but your CSS is so disorganized.

Here's what you need to fix:

Quote:

.foot
{
/* width: 900px;*/
height: 70px;
margin: auto;
background-color: #999999;
opacity: .6;
color: #000000;
margin-top: 15px;
text-align: center;
}
#page
{
position: relative;
width:900px;
height:100%;
margin:auto;
text-align:left;
background-color:#FFFFFF;
opacity: .9;
}

#bottom
{

/*width: 900px;*/
margin: 15px auto;
opacity: .9;
}

.NewsBig {
vertical-align: middle;
margin-left: 15px;
margin-right: 15px;
padding-left: 15px;
padding-right: 15px;
display: list-item;
color: #FFFFFF;
opacity: 95%;
padding-top: 5px;
background-color: #333333;
border: 1px solid red;
}

.NewsBoximages {
/*vertical-align: baseline;*/
float: left;
height: 500px;
width: 43%;
margin-left: 15px;
margin-right: 15px;
color: #FFFFFF;
opacity: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 5px 15px 15px;
/* display: block;*/
font-size: 12px;
background-color: #000000;
background-repeat: no-repeat;
border-top-style: dashed;
border-top-color: #666666;

}
.NewsBoxvideo {
/* vertical-align: baseline;*/
width: 45%;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 15px;
color: #FFFFFF;
opacity: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0 5px 0 15px;

/*display: block;*/
font-size: 12px;
background-color: #000000;
/* background-repeat: no-repeat;*/
border-top-style: dashed;
border-top-color: #666666;

/* clear: left;*/
}

.NewsBoxTitle {
vertical-align: baseline;
margin: 15px;
/* margin-top: 15px;
margin-left: 15px;
margin-right: 15px;*/
height: 40px;
color: #FFFFFF;
opacity: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 5px 15px 15px;
/*padding-left: 15px;
padding-right: 5px;
padding-top: 5px;*/
display: block;
font-size: 35px;

background-color: #000000;
/* background-repeat: no-repeat;*/
border-bottom-style: dashed;
border-bottom-color: #333333;

}
.NewsBoxfoot {
/*vertical-align: baseline;*/
margin-left: 15px;
margin-right: 15px;
height: 1em;
color: #FFFFFF;
opacity: 100%;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
padding:5px 5px 15px 15px;
/*padding-left: 15px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 15px;*/
/*display: block;*/

background-color: #000000;
background-repeat: no-repeat;

border-top-style: dashed;
border-top-color: #666666;
clear: both;
}

You're going to need a 'fix' for IE6 on the images and video boxes because of the float: left with the left margin. That means conditional comments and a separate css file with just the fixes for IE in it.

**goheadtry** · 08-08-2008, 10:25 AM

This is a universal css for the whole site.

**LadynRed** · 08-08-2008, 03:03 PM

And the problem is ? If you want the boxes set up the way you described, what I gave you is what needs to be done. If you have to change or add rules, then do it, but sometimes one size does not fit all.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!