ansaurus

Question

CSS margins: aligning a list against a float-left image

Answer 1

A:

How about setting the p margin-left to be set at 30px?

netrox 2009-12-20 04:01:22

I like this because it seems simplest. I added "p {margin-left: 35px;}" to the stylesheet and it seemed to work nicely. However, is this (adding pixel padding) a robust thing to do in general?Here's what it looked like after I made the change:http://i50.tinypic.com/v2wmc6.png

nafe 2009-12-20 11:55:13

Yes. I'd say it's the simplest way with your written HTML.

netrox 2009-12-21 04:55:46

Answer 2

+1 A:

Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"

.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}

.head {
margin-left:0px;
}

While you are at it, just use padding instead of margin for ".comment-contents li":

.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}

I recommend not using padding and margin on a class unless absolutly necessary.

superUntitled 2009-12-20 06:04:54

Almost perfect! Here's what it looked like after I made your changes: i46.tinypic.com/9786xw.png

nafe 2009-12-20 11:59:48

So now the comment head and comment middle both align. The comment tail still seems to a problem because it has a tail-list (which adds more padding?). I can remove this nested list and that will get head, middle and tail aligned -- is that a good fix?

nafe 2009-12-20 12:00:18

Answer 3

+1 A:

Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:

<div class="comment">
     <p class="user">
        <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&amp;d=identicon&amp;r=PG" height="60" width="60">
        </a>
        <a href="#">Nathan</a>, posted 2 hours ago
        <a href="#" class="comment-collapse">[-]</a>
     </p>
     <p>The king took off his hat and looked at it. Instantly an immense
            crowd gathered. The news spread like wildfire. From a dozen leading
            dailies,reporters and cameramen came rushing to the scene pellmell in
            highpowered monoplanes. Hundreds of reserves,responding without
            hesitation to a riotcall,displayed with amazing promptness quite
            unparalleled inability to control the everincreasing multitude,but
            not before any number of unavoidable accidents had informally
            occurred.
     </p>
     <p>Chapter 1 - untitled (eecummings)</p>
  <ul class="commentTools">
    <li class="voteUp"><a href="#">vote up</a></li>    
    <li class="voteDown"><a href="#">vote down</a></li>        
    <li><a href="#">reply</a></li>
    <li><a href="#">permalink</a></li>
    <li><a href="#">offensive?</a></li>
  </ul>
</div>

And the CSS

.comment {
   position:relative;
    padding-left:75px;
}
.comment p {

}
.comment .user img {
  float:left;
  margin-left:-60px;
}
.comment .commentTools {
    padding-left:0;
}
.comment .commentTools li {
   display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
   position:absolute;
   display: block;
   left:0;
}
.comment .commentTools .voteUp {
    top:0;
}
.comment .commentTools .voteDown {
    top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown  a {
  display:block;
  width: 15px;
  height: 15px;
  text-indent:-5000em;
}
.comment .commentTools .voteUp a {
    background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
    background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}

I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.

wheresrhys 2009-12-20 08:34:10

Thanks for your answer. I tried it out. Here's what it looks like: http://i50.tinypic.com/2l9xsh.png

nafe 2009-12-20 12:02:19

Some of the alignments are alittle off... but I think I can see how to fix it up. I'm interested in your use of "background" in the stylesheet to set the vote up/down images -- is this preferable to embedding an <img> tag in the html?

nafe 2009-12-20 12:04:35

The general idea is that, when yo think about it, the vote up arrow's meaning is the words 'vote up'. Putting the text directly in the link means that this info is as clear for somebody who, for wahtever reason, can't use images

wheresrhys 2009-12-21 10:41:27

And updated the CSS so it achieves the right layout

wheresrhys 2009-12-21 10:47:31

ansaurus

tags:

views:

answers:

CSS margins: aligning a list against a float-left image

related questions