homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
page borders
mklaro

10+ Year Member



 
Msg#: 488 posted 2:06 am on Jan 5, 2003 (gmt 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

 

lorax

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 488 posted 2:38 am on Jan 5, 2003 (gmt 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.

mklaro

10+ Year Member



 
Msg#: 488 posted 3:16 am on Jan 5, 2003 (gmt 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]

lorax

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 488 posted 3:24 am on Jan 5, 2003 (gmt 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]

mklaro

10+ Year Member



 
Msg#: 488 posted 3:41 am on Jan 5, 2003 (gmt 0)

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

lorax

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 488 posted 3:42 am on Jan 5, 2003 (gmt 0)

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

mklaro

10+ Year Member



 
Msg#: 488 posted 3:51 am on Jan 5, 2003 (gmt 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-------------------------

mklaro

10+ Year Member



 
Msg#: 488 posted 3:52 am on Jan 5, 2003 (gmt 0)

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

lorax

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 488 posted 3:56 am on Jan 5, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved