CSS Positioning
I have the beginings of a site which I aim to make XHTML valid. On one page I am having problems with the postioning using CSS. I have been able to to it with tables but obviously want to avoid using them. This is the link to the page
http://minerva.dce.harvard.edu/~tburgess/my_site/pictures.shtml
What I want is to have the two images be under the 2 list item headings and centered. I am newbie to CSS in particular and can't find a solution to this and it's driving me nuts.
The CSS is here;
http://minerva.dce.harvard.edu/~tburgess/my_site/my.css
Thanks
Suzanne posted this at 02:23 — 19th April 2004.
She has: 5,507 posts
Joined: Feb 2000
Have the items in a and text-align: center; that div.
i.e.
list item text
list item text
Fast posted this at 03:20 — 19th April 2004.
They have: 13 posts
Joined: Nov 2001
Ah! It had been suggested to me previously to use text-align: center; but it didn't make any difference at all. Your example makes it much clearer now. I'll try it out. Thanks Suzanne.
Fast posted this at 23:14 — 19th April 2004.
They have: 13 posts
Joined: Nov 2001
Hmm, now I'm confused. You have a class and an id in the div tags, is this permissible? I thought it was one or the other. I thought I had understood your code but evidently I don't. Could you explain a little more, I'm a CSS newbie! Thanks.
Suzanne posted this at 15:46 — 23rd April 2004.
She has: 5,507 posts
Joined: Feb 2000
A class can apply to many different elements at the same time, while an id can only apply to one element on any given "page".
Classes are also cascading, so you can technically have this:
<div class="shouting fineprint alert" id="thisone">YOUR CONTENT</div>And in the CSS:
.shouting {color: black;
text-transform: uppercase;
}
.fineprint {
font-size: small;
}
.alert {
background-color: yellow;
border: 1px solid red;
}
#thisone {
width: 200px;
height: 200px;
clear: both;
}
This would allow you to style other elements as needed to show "shouting", or that the information is "fineprint", or send an "alert" without them all having to be the same thing.
The id, however, says, this one and only this one should be this height, width, et cetera. This allows you to control an element specifically.
Think of classes as general traits that can apply to anyone, anywhere. But id is a fingerprint, or dna -- it only belongs to one element. If you have a name (id) for that element, you can control it with the CSS, JavaScript, et cetera, and use it as an anchor:
<a href="page.html#thisone">go to the div named "thisone"</a>Does that help?
Fast posted this at 03:01 — 24th April 2004.
They have: 13 posts
Joined: Nov 2001
It has made it clear to me that I can have a class and an id together inside a tag which I didn't know you could do. But using your code from your first post places one item below the other which isn't what I wanted to do, so I'm still in the same place I was to begin with!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.