...

View Full Version : Driving me mad! Aligning elements



stfc_boy
01-14-2008, 04:34 PM
Hi Guys,

On this page:

http://www.slougheaz.org/test.php

I want to display the text alongside the blue image, but so it's directly alongside the blue box (as you can see the text is bottom to the blue image). I've tried playing with heights in the divs, but to no avail.

Can anyone help?

Thanks

srule_
01-14-2008, 04:48 PM
What to you mean "alongside"? the text appears to be beside the blue box in both ie7 and firefox...

stfc_boy
01-14-2008, 04:51 PM
Sorry, I mean moving the text, up so it's more like this image I created:

http://www.slougheaz.org/alongside.jpg

Thanks

Excavator
01-14-2008, 05:31 PM
Good Morning stfc_boy,
Does this work for you?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.date {
display:inline;
height: 13px;
background: #CCCC99;
font: 11px/1.5 Tahoma, Verdana, sans-serif;
color:#666666;
}
.byline {
display:inline;
height: 13px;
background: #FF99CC;
font: 11px/1.5 Tahoma, Verdana, sans-serif;
font-weight:bold;
}
.date .box {margin: 0 0 -2px 0
}
</style>
</head>
<body>
<div class="date">person name <div class="byline">| Comments ( 1) </div> <img src="http://www.slougheaz.org/tt/images/speech2.jpg" width="14" height="13" alt="" class="box" /></div>
</body>
</html>

stfc_boy
01-14-2008, 06:16 PM
Thanks, although i'd like to understand it. What does .date .box {margin: 0 0 -2px 0 do? Is this line height for both the div and graphic?

Excavator
01-14-2008, 06:24 PM
Thanks, although i'd like to understand it. What does .date .box {margin: 0 0 -2px 0 do? Is this line height for both the div and graphic?

It's just styling the class I gave to your box image. It could be done like this:
.box {margin: 0 0 -2px 0}
but using .date .box {margin: 0 0 -2px 0} is just more specific - it targets the .box inside of .date.

Did that make sense?


..../edit
to further confuse you,
If you wanted to style BOTH .date and .box with something you could do this: .date, .box {margin: 20px 0 0 0;} Now, with the comma seperating them, the 20px top margin would be applied to BOTH classes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum