Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

page borders

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

New User

10+ Year Member

joined:Jan 5, 2003
posts:6
votes: 0


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

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

Senior Member from US 

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

joined:Mar 31, 2002
posts:7575
votes: 0


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.

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

New User

10+ Year Member

joined:Jan 5, 2003
posts:6
votes: 0


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]

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

Senior Member from US 

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

joined:Mar 31, 2002
posts:7575
votes: 0


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]

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

New User

10+ Year Member

joined:Jan 5, 2003
posts:6
votes: 0


sorry bout the link... tried your idea and it didn't work.
Im stumped.
3:42 am on Jan 5, 2003 (gmt 0)

Senior Member from US 

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

joined:Mar 31, 2002
posts:7575
votes: 0


Sticky me the style information and your page code. And I'll have a looksy.
3:51 am on Jan 5, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 5, 2003
posts:6
votes: 0


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

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

New User

10+ Year Member

joined:Jan 5, 2003
posts:6
votes: 0


Sorry I just got what you meant about the sticky....
I'll get the hang of this place sooner or later :)
3:56 am on Jan 5, 2003 (gmt 0)

Senior Member from US 

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

joined:Mar 31, 2002
posts:7575
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members