Welcome to WebmasterWorld Guest from 54.163.23.73

Forum Moderators: not2easy

Message Too Old, No Replies

page borders

     

mklaro

2:06 am on Jan 5, 2003 (gmt 0)

10+ Year Member



Im trying to get a border on my page using css

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

lorax

2:38 am on Jan 5, 2003 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hello Mike and welcome to WebmasterWorld,
There are a couple of approaches you could use to do this. I assume that you've read some of the well worn threads on CSS here at WebmasterWorld but if not, do a search and you'll find a plethora of stuff.

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.

mklaro

3:16 am on Jan 5, 2003 (gmt 0)

10+ Year Member



hey Lorax thank you for getting back to me so quickly and for your help, but i seem to be having an issue

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]

lorax

3:24 am on Jan 5, 2003 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Give the body element some padding and I think you'll see that bottom border.

body {
padding: 20px;
}

[edited by: Nick_W at 2:58 pm (utc) on Jan. 5, 2003]
[edit reason] at owner request [/edit]

mklaro

3:41 am on Jan 5, 2003 (gmt 0)

10+ Year Member



sorry bout the link... tried your idea and it didn't work.
Im stumped.

lorax

3:42 am on Jan 5, 2003 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Sticky me the style information and your page code. And I'll have a looksy.

mklaro

3:51 am on Jan 5, 2003 (gmt 0)

10+ Year Member



PAGE CODE
-----------------------------------

<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-------------------------

mklaro

3:52 am on Jan 5, 2003 (gmt 0)

10+ Year Member



Sorry I just got what you meant about the sticky....
I'll get the hang of this place sooner or later :)

lorax

3:56 am on Jan 5, 2003 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I just looked at it from the link (so used to not having them).

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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month