[SOLVED] Can anyone help me with some simple css?

Hi guys i am trying to redesign my website in css, but i am having a few probles,

firstly i am using divs to layout my pages but im having trouble adding a boarder around the div, the code i have used is

HTML: Select all

#wrapper {
 border:thick;
 border-color:#000000;
 margin: 0 auto;
 width:960px;
 height:525px;
}

then i use

HTML: Select all

<div id="wrapper">

to call the div
but no border appears, am i doing something wrong?

next, i cant seem to make text in a div appear verticaly central i can do horizontal center but not sure how to do vertical

any help and advice would be great
Thanks
Luke

Try this:

Code: Select all

border: #000 thick solid;

As for the verticle center, try this:

Code: Select all

vertical-align:middle;

__________________
Web Design And Development: Other Road Design | Problems with IE6?: KApp | My Blog: Only Nerds Allowed | Learning PHP? Lessons

CV, I don't think vertical-align will solve the issue - vertical-align is for elements like images relative to the text within the same container.

If CV's border solution does not work, try a pixel value such as;

Code: Select all

border:1px solid #000

hi cloudedvision,

thanks for your help the border worked fine however the vertical alignment didn't here is a link to the page (minus ther border code, not uploaded yet )

http://www.kernow-connect.com/newwebsite.html

cheers
Luke

Oh. No wonder it never worked for me.

__________________
Web Design And Development: Other Road Design | Problems with IE6?: KApp | My Blog: Only Nerds Allowed | Learning PHP? Lessons

Hi Aso,

is it not possible to vertically align text within a AP div, should i add a top margain to center it that way?

cheers for your time and help
Luke

what you could do is something like this:

Code: Select all

#div p {
line-height:100px; /* Div height */
verticle-align:center;
}

HTML: Select all

<div id="div">
<p>Hello there!  This is text!</p>
</div>

Haven't tested it out though.

__________________
Web Design And Development: Other Road Design | Problems with IE6?: KApp | My Blog: Only Nerds Allowed | Learning PHP? Lessons

Hi Luke,

Yeah, vertical alignment is one of CSS's major let-downs (perhaps it's addressed in CSS3?)

Anyway, if the height of div is fixed, you could add some top-padding. For example, if your div is 520px high, use;

Code: Select all

div {
height:260px;
padding:260px 0 0
}

Notice how the total of padding+height equals the *actual* height you want?

You might want to add a bit more height and take off the padding to allow for the natural height of the text.

Cheers guys all sorted, used Aso's method of adding padding, it seems to work ok,

appreciate your help
Luke