PDA

View Full Version : CSS Align Issue. Plz Help.



Syrehn
Sep 22nd, 2009, 08:05 PM
I'm designing a site for a friend and I'm trying to get my layout to align to top and can't figure out why it won't.
I'm new to css/div's so I'm not sure what I'm missing.

Can anyone shed some light on this situation for me?

http://www.designfoxmediaworks.com/clients/herbalife_carlene/carlene.html

ckeyrouz
Sep 22nd, 2009, 08:07 PM
add this in your css:


body {
padding:0;
margin:0;
}

Syrehn
Sep 22nd, 2009, 08:23 PM
oh! perfect! thank you so much. i didn't realize i needed to define the body tag, i thought it had something to do with the wrapper id i had applied to my site.

ty so much!

ckeyrouz
Sep 22nd, 2009, 08:27 PM
Most welcome.

Syrehn
Sep 25th, 2009, 06:19 PM
i have another question, on the same site, i'm trying to get my text (use the blue footerbar at the bottom of the page as an expample) to center

when i define this in the css it does center the text but i would also like to align it to the middle, each time i set the align middle tag though it does not work.

is there something else that i have to change first?

Syrehn
Sep 25th, 2009, 06:46 PM
also... if you have a list displayed inline like i do under that blue footerbar, can u set them so that one list item is aligned to the right and one is aligned to the left while keeping them inline?

i've been trying to do this and can't seem to figure it out.

Scriptet
Sep 25th, 2009, 07:44 PM
To vertically center one-line text you give the text a line-height which is the same height as the DIV it's in.

So it seems the height is 25px, just add line-height:25px; to this DIV.

As for the aligning of the list, yes it's possible just give them both a different class then set one to float:right; and the other to float:left;

Syrehn
Sep 25th, 2009, 08:45 PM
oh ok i'll do this. so does the align middle tag not work then?

aaah i never thought to have them float. doh. ty

Syrehn
Sep 25th, 2009, 08:55 PM
so then. what would happen in the case of a double line to align it vertically (see the green footer underneath the slideshow on that same page)

if i set the text height there it messes it up : /

Rowsdower!
Sep 25th, 2009, 08:59 PM
oh ok i'll do this. so does the align middle tag not work then?

aaah i never thought to have them float. doh. ty

The CSS align:middle; is really just for images within text areas. It controls where an image is anchored when it is inline with text (ie. whether it is vertically centered, bottom-justified, or top-justified with the line of text in which it is placed). It really has no other use that I am aware of.

Syrehn
Sep 25th, 2009, 09:12 PM
The CSS align:middle; is really just for images within text areas. It controls where an image is anchored when it is inline with text (ie. whether it is vertically centered, bottom-justified, or top-justified with the line of text in which it is placed). It really has no other use that I am aware of.

oooh ok. i understand. explains why it wasn't working. lol

so how would i go about setting double line text to align to the middle then as if i do it for line height it just causes a mess.

Rowsdower!
Sep 25th, 2009, 09:21 PM
so then. what would happen in the case of a double line to align it vertically (see the green footer underneath the slideshow on that same page)

if i set the text height there it messes it up : /

To align 2 lines vertically do this:

X = your font size in pixels
Y = how much vertical space you want to appear between lines
Z = The height of your container

Set your line-height equal to X+Y
In general, no matter how many lines of text you will have (use "n" for number of lines of text) to vertically center you set your top and bottom margins on the text equal to (Z - n(X+Y))/2

This should vertically center your text every time.

For example...

X = 12px
Y = 5px
Z = 100px

line-height = 17px;
margin-top = 33px;
margin-bottom = 33px;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical and Horizontal Centering</title>
</head>
<body>
<div style="overflow:auto;height:100px;background-color:blue;width:150px;">
<a style="margin:33px 0px;font-size:12px;height:34px;line-height:17px;color:white;display:block;text-align:center;" href="#nogo">An Example of<br/>Two Lines</a>
</div>
</body>
</html>