...

View Full Version : aligning li content text with custom bullet point image?



LJackson
01-10-2013, 10:43 PM
hi all,

im currently developing a new website for a friend of mine, and i've run into a bit of trouble when trying to use custom images when showing a list.

the trouble being is that the image has a height of 50px and the <li> text appears at the bottom of the image where as i want it to start at the top of the image, hope that makes sence?

my php code for this list is as follows

<ul class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : #print_r($item);
$link = $item->link;
$intro = $item->introtext;
$intro = preg_replace("/<img[^>]+\>/i", "", $intro);

// strip tags to avoid breaking any html
$intro = strip_tags($intro);

if (strlen($intro) > 200) {

// truncate string
$stringCut = substr($intro, 0, 200);

// make sure it ends in a word so assassinate doesn't become ***...
$intro = substr($stringCut, 0, strrpos($stringCut, ' '))."... <a href='$link'>Read More</a>";
}
?>
<li class="news">
<a href="<?php echo $item->link; ?>">
<?php echo "<b>".$item->title."</b>"?></a><br /><?php echo $intro?>
</li>
<?php endforeach; ?>
</ul>

and the css for the .news is

.news{list-style:none; list-style-position:inside; list-style-image:url(../../../images/article_images/newspaper-icon.jpg); }

any help would be appreciated
thanks

Excavator
01-10-2013, 11:18 PM
Hello LJackson,
I actually have a little writeup on exactly this problem - http://nopeople.com/CSS%20tips/li_image/index.html

LJackson
01-10-2013, 11:29 PM
thats great thank you very much for sharing! very interesting indeed

needless to say after reading that i've solved the problem!

THANKS :D

AndrewGSW
01-11-2013, 01:44 AM
@Excavator
I was trying to achieve this using the :before pseudo element but it seems to ignore any settings I apply to the content. Do you know if it is possible? I've tried line-height, vertical-align, etc..

[The image is 18x18]


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
ul {
list-style: none;
height: 30px;
}
li {
height: 30px;
line-height: 30px;
}
li:before {
content: url('images/checkcross.png');
display: inline-block;
vertical-align: baseline;

}
</style>
</head>

<body>
<ul>
<li>The first line</li>
<li>The second</li>
<li>A third</li>
</ul>

</body>
</html>

Excavator
01-11-2013, 03:02 AM
@Excavator
I was trying to achieve this using the :before pseudo element but it seems to ignore any settings I apply to the content. Do you know if it is possible? I've tried line-height, vertical-align, etc..

It's difficult to control the text separate from the image. That was the whole point of putting the image in as a background of the li.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 800px;
margin: 0 auto;
padding: 50px 0 200px;
background: #999;
}
ul {list-style: none;}
li {
line-height: 30px;
margin: 0 0 5px;
padding: 0 0 0 22px;
background: #0f0 url(checkcross.png) no-repeat left center;
}
li#checked {background: #0f0 url(checktick.png) no-repeat left center;}
</style>
</head>
<body>
<div id="container">
<ul>
<li>The first line</li>
<li id="checked">The second</li>
<li>A third</li>
</ul>
<!--end container--></div>
</body>
</html>

AndrewGSW
01-12-2013, 06:14 PM
It's difficult to control the text separate from the image. That was the whole point of putting the image in as a background of the li.

Thank you @Excavator. I wasn't sure if I just wasn't finding the correct CSS. Andy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum