Top and then Content

Dat

11-11-2009, 05:17 AM

The Top on TOP and Content Below that. How do I do that?

<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen, projection" />
<style type="text/css">
body, html {
font-family: Helvetica, Verdana, Arial, sans-serif;
color:#565656;
font-size: 12px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
a {
color: #EC0A8B;
text-decoration: none;
}
a:hover {

text-decoration: underline;

}
#wrap {
width: 990px;
}

#content {
overflow:auto;
margin-right: 5px;
margin-left: 5px;
margin-top: 30px;
width: 990px;
border-color: #dedfdd;
border-width: 8px;
border-style: solid;
}

#col-left {
float: left;
}

#col-right {
float: right;
}

#main-content {
padding-right: 15px;
margin-left: 15px;
margin-top: 20px;
width: 540px;
}

#main-content .featured {
padding: 15px;
width: 540px;
color: #C4C4C4;
background-color: black;
}

#main-content .featured h2 a {
color:#FFFFFF;
font-family:Georgia;
font-size:19px;
font-weight:normal;
padding:10px 0 2px;
}

#main-content .featured p.post-details {
margin-top: 5px;
margin-bottom: 15px;
padding-left: 17px;
background:transparent url(images/post_details.gif) no-repeat scroll 0;
font-size: 12px;
font-style: italic;
color: #787878;
}

#sidebar {
border-left-color: #9f9f9f;
border-left-style: solid;
border-left-width: 1px;
width: 400px;
}

.post {
}

.left {
float: left;
}

.right {
float: right;
}

#header, #wrap, #footer {
border-width: 1000px;
margin:0 auto;
}

#sidebar .block {
background:transparent url(images/sidebar_separator.gif) repeat-x scroll 0 bottom;
}

#cat-nav {
}

.top-bar {
width: 990px;
}

#cat-nav ul {
background:transparent url(images/secnav-div.png) no-repeat scroll right center;
line-height:1;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:relative;
z-index:100;
}

#cat-nav li {
background:transparent url(images/secnav-div.png) no-repeat scroll left center;
float:left;
height:58px;
width:auto;
}
#cat-nav a {
line-height:16px;
padding:13px 15px;
}
#cat-nav a {
display:block;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:14px;
font-style:italic;
font-weight:700;
line-height:58px;
padding:0 15px;
text-decoration:none;
z-index:100;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div id="navigation">
<div id="page-nav">

</div>
<div id="cat-nav">
<div class="top-bar">
<ul class="left">
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div id="col-left">
<div id="main-content">
<div class="post wrap">
<div class="featured">
<h2>
<a href="#">Molestie innonummy Libero</a>
</h2>
<p class="post-details">
by
<a href="#">Arrangements</a>
on 12/25/09
</p>
<a href="#"><img src="images/thumb.png"</a>
</div>
</div>
</div>
</div>
<div id="col-right">
<div id="sidebar">
<div class="block">
bb
</div>
</div>
</div>
</div>
</div>
</body>
</html>

abduraooft

11-11-2009, 08:06 AM

The Top on TOP and Content Below that. How do I do that? Sorry, that's not clear.

Excavator

11-11-2009, 04:21 PM

Hello Dat,
Your box model (http://www.w3.org/TR/CSS2/box.html)is off and you seem to have divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/).

I changed some widths and heights that didn't work. This is still not valid code and there is a lot to be cleaned up yet, but maybe it's a start for you.
<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen, projection" />
<style type="text/css">
body, html {
font-family: Helvetica, Verdana, Arial, sans-serif;
color:#565656;
font-size: 12px;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
#wrap {
width: 1016px;
margin: 50px auto;
}
#top {
background: #ccc;
}
#navigation {
background: #00f;
}
#page-nav {
height: 20px;
background: #f00;
}
#cat-nav {
background: #fc6;
}
.top-bar {
width: 990px;
overflow: auto;
}
#cat-nav ul {
background:transparent url(images/secnav-div.png) no-repeat scroll right center;
line-height:1;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
z-index:100;
}
#cat-nav li {
background:transparent url(images/secnav-div.png) no-repeat scroll left center;
float: left;
width: 100px;
}
#cat-nav a {
line-height:16px;
padding:13px 15px;
}
#cat-nav a {
display:block;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:14px;
font-style:italic;
font-weight:700;
line-height:58px;
padding:0 15px;
text-decoration:none;
z-index:100;
}
#content {
width: 990px;
overflow:auto;
margin: 30px 5px 0;
border: 8px solid #dedfdd;
}
#col-left {
width: 570px;
float: left;
}

#col-right {
width: 401px;
float: right;
}

#main-content {
padding-right: 15px;
margin-left: 15px;
margin-top: 20px;
width: 540px;
}

#main-content .featured {
padding: 15px;
width: 540px;
color: #C4C4C4;
background-color: black;
}

#main-content .featured h2 a {
color:#FFFFFF;
font-family:Georgia;
font-size:19px;
font-weight:normal;
padding:10px 0 2px;
}

#main-content .featured p.post-details {
margin-top: 5px;
margin-bottom: 15px;
padding-left: 17px;
background:transparent url(images/post_details.gif) no-repeat scroll 0;
font-size: 12px;
font-style: italic;
color: #787878;
}

#sidebar {
border-left-color: #9f9f9f;
border-left-style: solid;
border-left-width: 1px;
width: 400px;
}

.post {
}

.left {
float: left;
}

.right {
float: right;
}

#sidebar .block {
background:transparent url(images/sidebar_separator.gif) repeat-x scroll 0 bottom;
}

a {
color: #EC0A8B;
text-decoration: none;
}
a:hover {

text-decoration: underline;

}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div id="navigation">
<div id="page-nav">

</div>
<div id="cat-nav">
<div class="top-bar">
<ul class="left">
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
<li>
<a href="#">
Category 2
<br/>
<span>Description</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div id="col-left">
<div id="main-content">
<div class="post wrap">
<div class="featured">
<h2>
<a href="#">Molestie innonummy Libero</a>
</h2>
<p class="post-details">
by
<a href="#">Arrangements</a>
on 12/25/09
</p>
<a href="#"><img src="images/thumb.png"</a>
</div>
</div>
</div>
</div>
<div id="col-right">
<div id="sidebar">
<div class="block">
bb
</div>
</div>
</div>
</div>
</div>
</body>
</html>