PDA

View Full Version : Image and text alignment problem



aspekt9
Apr 9th, 2007, 10:50 PM
I'm trying to align an image and it's corresponding 'title' text if you will. I'd like the image to be right below the text and aligning properly and wrapping to a newline if the text extends too far beyond the image. Similar to how facebook does it with their friends block if you're familiar with that at all. The page I'm having problems with is:

On the lower left hand side you can see the problem I'm having.

koyama
Apr 10th, 2007, 01:57 AM
I'm trying to align an image and it's corresponding 'title' text if you will. I'd like the image to be right below the text and aligning properly and wrapping to a newline if the text extends too far beyond the image.
This is basically what you have:


<div id="friends">
<div class="friendline">
Jake Monelongname <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Mark Bier <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Rebeka Adailongname <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
</div>
<div class="friendline">
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
</div>
</div>

This may get you started:


.friend {
float: left;
height: 100px;
width: 80px;
border: 1px solid black;
margin: 5px;
padding: 2px;
}
.friend img {
display: block;
margin: 0 auto;
}



<div id="friends">
<div class="friend">
Jake Monelongname
<img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Rebeka Adailongname
<img src="home.php_files/a.jpg" class="friends" alt="">
</div>
</div>

As a side issue, I wouldn't be using fieldsets the way that you are doing. It is used for grouping form input fileds. If you are using it for stylistic purposes you should probably solve this through CSS instead.

aspekt9
Apr 10th, 2007, 12:24 PM
That didn't really work. It lined the images downward instead of inline. The text as well isn't lined up with the image either.

koyama
Apr 10th, 2007, 01:05 PM
That didn't really work. It lined the images downward instead of inline. The text as well isn't lined up with the image either.
Instead of this:


<div id="friends">
<div class="friend">
Jake Monelongname <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Mark Bier <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Rebeka Adailongname <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
</div>
<div class="friend">

Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
Ryan Wind <img src="http://aspekt.blogdns.com/Boozards/images/a.jpg" class="friends" alt="" />
</div>
</div>
Try this:


<div id="friends">
<div class="friend">
Jake Monelongname <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Mark Bier <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Ryan Wind <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Rebeka Adailongname <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Ryan Wind <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Ryan Wind <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Ryan Wind <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
<div class="friend">
Ryan Wind <img src="home.php_files/a.jpg" class="friends" alt="">
</div>
</div>

It will still need a bit adjustment, but you now get the idea?

aspekt9
Apr 10th, 2007, 01:22 PM
Ahh ok that makes a lot more sense. Now for some reason why isn't my container expanding the background down more? I'm guessing it has something to do with height:100% on my containers but how can I just make it expand down to where the content ends?

koyama
Apr 10th, 2007, 01:53 PM
Now for some reason why isn't my container expanding the background down more? I'm guessing it has something to do with height:100% on my containers but how can I just make it expand down to where the content ends?
(1)
You need to clear your floats.

http://css-discuss.incutio.com/?page=ClearingSpace
http://www.quirksmode.org/css/clearing.html
http://positioniseverything.net/easyclearing.html
(2)
You are using height: 100% several places without knowing exactly what it means. What height: 100% actually means is more complicated than one may think. You probably don't even need this when one considers that you have plenty of content to fill a normal screen downwards. If anything, you should be looking at the min-height property.

(3)
Also, consider adding some space below the bottom of your page so that users can scroll the lower parts up to pleasant reading height.

Example:


html,body {
/* height:100%; */
background:#FFFFFF;
color:#000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:center;
}
body {
margin-bottom: 300px;
}
#container {
width:900px;
margin:0px auto;
text-align:left;
position:relative;
/* height:100%; */
}
#mid-container {
width:900px;
/* height:100%; */
background:#909090;
overflow: hidden;
}

aspekt9
Apr 10th, 2007, 03:45 PM
Worked awesome, thank you for all the help.