Forum Moderators: not2easy
i want the top to be 110px and the bottom to be 110px
with a color of #000033
and in the middle all white...
im trying to figure out how to do this without using a table . Is this possible if so any help would be greatly appreciated.
thanks
Mike
First option: use a div to encapsulate the content. 110px seems pretty narrow so I assume we're talking about a nav area or some other columnized content. Give the div a class name like this:
<div class="narrow">
Content here
</div>
And then your style would be:
.narrow {
border-top: 1px solid #000033;
border-bottom: 1px solid #000033;
}
You'll need to define your margin and padding. If all this sounds new, do a search here for box model and you'll get what you need.
Almost forgot the second option.
Place a <hr> at the top and the bottom. Define the <hr> tag to your needs. Ie:
height: 1px;
width: 110px;
color: #000033;
G.
when i use the exact size i want for instance 150px it only gives me the border on the top not on the bottom.
when i set it to %s it gives me the top and bottom borders, but because of what i am doing i need to use exact px sizes.
<snip>no personal url's please
any help would be great. thanks again for all your help i really appreciate it!
[edited by: Nick_W at 9:11 am (utc) on Jan. 5, 2003]
body {
padding: 20px;
}
[edited by: Nick_W at 2:58 pm (utc) on Jan. 5, 2003]
[edit reason] at owner request [/edit]
<html>
<meta http-equiv="Content-Language" content="en-us">
<title>Welcome</title>
<style type="text/css" media="screen">@import "progress2.css";</style>
<BODY scroll="no">
<div class="type1" style="width: 1176; height: 94">
</div>
<div id="main">
<font color="000044">TEST</font>
</div>
------------------------------------------------
CSS CODE
------------------------------------------------
body {
margin:0px;
color:#ffffff;
background-color:#000033;
}
A{ color: #ffffff; font-family:verdana, arial, helvetica, sans-serif; font-size:11px; text-decoration: none; }
A:link{ color: #ffffff; text-decoration: none; }
A:visited{ color: #ffffff; text-decoration: none; }
A:active{ color: #ffffff; text-decoration: none; }
A:hover{ color: #ffffff; background-color:#000463; font-weight:bold; }
#main {
position:absolute;
top:150px;
bottom:150px;
background-color:#FFFFFF;
height:100%;
width:100%;
padding-left:0px;
padding-right:0px;
padding-top:5px;
padding-bottom:5px
}
--------------------END-------------------------
First off: read up on DOCTYPE declarations at www.w3c.org.
Second: you're missing a closing html tag.
Third: you've got a redundant style declared on the first div. I recommend you execute all of your styles from the style sheet. Mixing can be hazardous as it can get confusing to remember where styles are declared.
Try these for starters.
