Forum Moderators: not2easy
html:
<div class="center">
<div class="thumb"><img src="/old_thumb.JPG" /></div>
<div class="thumb"><img src="/new_thumb.JPG" /></div>
</div>
css:
.center {
text-align: center;
}
.thumb {
text-align: center;
padding: 7px;
float: left;
height: auto;
min-width: 120px;
font-size: 12px;
}
.thumb a:link {
text-align: center;
}
.thumb a:visited {
text-align: center;
}
.thumb a:hover {
text-align: center;
}
a.thumb img {
border: 1px solid #FFFFFF;
}
a.thumb img:visited {
border: 1px solid #FFFFFF;
}
a.thumb img:hover {
border: 2px solid #FF0000;
}
e.g.:
<p class="center">centered</p>
would work with your css.
Floated elements will not center, they move to the side you indicate.
To center block elements you can use auto margins left and right. (but remember most start out to be as wide as they can so you probably want to make them more narrow to start with.)
Absolute positioned element can also be centered.
You have floated those <div>s left however. There is no text in them so the text-align: center; is pointless in that declaration. IF there was text in <div class="thumb">, THEN that would be different. See sample markup.
I am not clear on the question - on what is supposed to be centered.? Thus, I don't know what fix is best.
<!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></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.center {
text-align: center;
}.thumb {
text-align: center;
padding: 7px;
float: left;
height: auto;
min-width: 120px;
font-size: 12px;
border: .1em solid #000;
}.thumb a:link {
text-align: center;
}/**********NOT NEEDED
.thumb a:visited {
text-align: center;
}
.thumb a:hover {
text-align: center;
}*/a.thumb img {
border: 1px solid #fff;
}a.thumb img:visited {
border: 1px solid #fff;
}a.thumb img:hover {
border: 2px solid #f00;
}
</style>
</head>
<body>
<div class="center">
Centered Text
<div class="thumb"><img src="aaa.jpg" />
<br />
Centered text.
</div>
<div class="thumb"><img src="ddd.gif" /></div>
</div>
<!--##########
any idea why i cant get the div class="center" to actually center on the page?
-->
</body>
</html>
.thumb a:link {
text-align: center;
}.thumb a:visited {
text-align: center;
}.thumb a:hover {
text-align: center;
}a.thumb img {
border: 1px solid #fff;
}a.thumb img:visited {
border: 1px solid #fff;
}a.thumb img:hover {
border: 2px solid #f00;
}
Could be mistaken, but you may not get the expected rendering with this.? At first glance, it isn't pretty. You've got a general class thumb and a <a> classed as 'thumb'. Two different things.
1) Is there a problem with the construction of the CSS? Is there an easier and more effective option for whatever you are trying to achieve - and it is not clear to me what that is.
2) Safer not to reuse class names. .thumb is not the same as a.thumb, and you CAN do it, but could get hard to follow down the road.
3) a.thumb img:visited {
border: 1px solid #fff
}
Is that going to work? First thought is no, not in this construction.
Try:
a.thumb:visited img {
border: 2px solid red;
}
<div class="thumb">
<a class="thumb" href="http://www.example.com"><img src="aaa.jpg" />
</a>
<br />
TEXT
</div>
also, regarding all the extra css stuff, i dont really have a reason for it other then the fact that i'm a beginner and it was the only way i could figure out how to make all the pieces work but if i can take some of that junk out, i'll do it.
please advise. thanks!
First: ditch IE, use any other modern browser instead. IE will only set you on the wrong foot, the last thing you need while learning.
Start out to make the html, e.g. starting from a simple template:
<!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">
<head>
<title>Test</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
</style>
</head>
<body>
</body>
</html>
Now we want two images grouped together ?
<div class="images">
<img src="2s.jpg" alt="madatory" />
<img src="3s.jpg" alt="not forgotten" />
</div>
Note that I have not given a name indicating how what the layout is to do, instead I have described the content. That way if some years down the road we want to change the looks, the name still will make sense.
Also not I'm usign 1/3 of the amount of divs you were using. And I'm even debating if I should have this one at all. In a generalization, the overuse ove div is really bad with beginners in CSS. Fight it! You can style any element, not just a div or a span and there is no need to put everything in a containing box.
So that leaves our html:
<!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">
<head>
<title>Test</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
</style>
</head>
<body>
<p>before</p>
<div class="images">
<img src="1.jpg" alt="madatory" />
<img src="2.jpg" alt="not forgotten" />
</div>
<p>after</p>
</body>
</html>
No errors ? Then let's move on to styling it
.images {
text-align: center;
}
Is all that is need to center those two images.
The images are by default inline elements, so they act as if they were words in a sentence.
Now we can clean it up a bit and add the white borders you wanted - but to see them we'll need to add some background to make them stand out of:
.images {
background-color: silver;
}
.images img {
border: 1px solid #fff;
}
So wait, why is that silver brder sitting thre at the bottom, and not at the top ?
Well the images are sitting on the text basline, and that text line allows for decender characters like q, g, p and y so that's that room you see there.
There are a number of ways to get rid of it, but that flush look of the border isn't nice anyway, so we'll instead create some padding at the top too:
.images {
padding-top: 0.25em;
}
Note I didn't specify it in pixels and instead made it relative to the default font size (just like the space at the bottom is).
Now you wanted some hover effect:
.images img:hover {
border: 1px solid #f00;
}
Is all that is needed to make the border become red when the image is hovered (now take care with such an interface as most visitors will assume things that change color when hovered will allow them to click.
But aside of that, putting it all together:
<!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">
<head>
<title>Test</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
.images {
text-align: center;
background-color: silver;
padding-top: 0.25em;
}
.images img {
border: 1px solid #fff;
}
.images img:hover {
border: 1px solid #f00;
}
</style>
</head>
<body>
<p>before</p>
<div class="images">
<img src="1.jpg" alt="madatory" />
<img src="2.jpg" alt="not forgotten" />
</div>
<p>after</p>
</body>
</html>
Validate the CSS:
[jigsaw.w3.org...]
Next try it in all browsers except for IE.
And then work your way through all the different versions of IE you want to support. I'm sure IE6 will not do the :hover (it only supports hovering on <a> elements) so you can react in two ways: try to fix it, or just leave it as it is and decide it's not worth your time to have that bit of eye candy.
Testing in IE left as an exercise. If you have trouble let us know and I'll help you with the conditional comments you need.
