CSS how to align images/text in bulleted lists?

handyman · 03-10-2005, 13:10

Trying to learn html/css to be able to develop articles on the newsweaver system and to ultimatley develop a new web site for out company.

As I'm going through I have hit a snag with bulleted lists using a image as the bullet.

This is the code for the image from the <style>

PHP Code:


			
 ul {list-style-image: url('green_arrow_sml-over.gif');border="0"}

This is the list from the <body>

PHP Code:


			
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

Attached are the image itself and how it shows in IE on my PC.

How can I line these up a bit more, they look bad.

handyman · 03-10-2005, 14:09

Anyone?

Richard M · 03-10-2005, 14:36

This CSS is invalid:
ul {list-style-image: url('green_arrow_sml-over.gif');border="0"}

Should be:
ul {
list-style-image: url('green_arrow_sml-over.gif');
border: none;
}

This article might help:
http://www.alistapart.com/articles/taminglists

handyman · 03-10-2005, 17:06

added the border bit but did not remove it, makes not a jot of difference it being there anyway.

j52c · 03-10-2005, 17:50

This is what I use, delete lines you don't want:-

ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-image: url(your image);
color: #333333;
font-size: 80%;
font-weight: normal;
margin-left: 20px;
padding-left: 20px;
line-height: 1.3em;
}

ikthius · 03-10-2005, 18:06

I think I can see what you are trying to do, in that your trying to make your images come down slightly to be more centralised vertically with the text.

I have played about and the more I have, I think it is a problem with your images more than anything.

they have a slight white edge, but I am not sure if taking it off would help.

sorry, try downloading a program called topstyle3 free version/lite and this will help you with your CSS needs.

ik

EDIT: making your text 20pt makes your images in the middle.
text-size:20pt;

handyman · 03-10-2005, 18:08

can I raise the text would that be easier?

ikthius · 03-10-2005, 18:11

Quote:

Originally Posted by handyman

can I raise the text would that be easier?

no, not really, cause what you are soing is applying it to the <ul> so ewverything in the <UL> is affected.

ik

handyman · 03-10-2005, 18:52

The Text size edit will work fine , cheers for that reps on the way.

Now on to the desgin of the css box's

since I'm limited in time to get this up and running I have got a tempate and am trying to change it to my needs.

the template I have edited is ttached the orig is here.

The image I have used goes in the box just fine however the 2 floating box's refuse to move down

I canny take it anymore :scream:

ikthius · 04-10-2005, 07:57

Quote:

Originally Posted by handyman

The Text size edit will work fine , cheers for that reps on the way.

Now on to the desgin of the css box's

since I'm limited in time to get this up and running I have got a tempate and am trying to change it to my needs.

the template I have edited is ttached the orig is here.

The image I have used goes in the box just fine however the 2 floating box's refuse to move down

I canny take it anymore :scream:

what do you mean the floating boxes, and moving down?
do you mean the 2 side parts, change their top:50px to something else, like 70px or something like that.

ik
EDIT: this is what I have, I have just copied all the code and put it below.
I changed a few things to make the boxes inline, and made the centre box postioned absolutely, like the others. works perfectly in FF, but not so good in IE

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, the holy grail</title>

<style type="text/css">
	@import "all.css"; /* just some basic formatting, no layout stuff */
	
	body {
		margin:10px 10px 0px 10px;
		padding:0px;
		}
	
	#leftcontent {
		position: absolute;
		left:10px;
		top:70px;
		width:200px;
		background:#fff;
		border:1px solid #000;
		}

	#centercontent {
		position:absolute;
		top:70px;
		background:#fff;
		   margin-left: 199px;
		   margin-right:199px;
		border:1px solid #000;
		/*
		IE5x PC mis-implements the box model. Because of that we sometimes have
		to perform a little CSS trickery to get pixel-perfect display across browsers.
		The following bit of code was proposed by Tantek Celik, and it preys upon a CSS
		parsing bug in IE5x PC that will prematurly close a style rule when it runs
		into the string "\"}\"". After that string appears in a rule, then, we can override
		previously set attribute values and only browsers without the parse bug will
		recognize the new values. So any of the name-value pairs above this comment
		that we need to override for browsers with correct box-model implementations
		will be listed below.
		
		We use the voice-family property because it is likely to be used very infrequently,
		and where it is used it will be set on the body tag. So the second voice-family value 
		of "inherit" will override our bogus "\"}\"" value and allow the proper value to
		cascade down from the body tag.

		The style rule immediately following this rule offers another chance for CSS2
		aware browsers to pick up the values meant for correct box-model implementations.
		It uses a CSS2 selector that will be ignored by IE5x PC.
		
		Read more at http://www.glish.com/css/hacks.asp
		*/
		
		voice-family: "\"}\"";
		voice-family: inherit;
		   margin-left: 201px;
		   margin-right:201px;
		}
	html>body #centercontent {
		   margin-left: 201px;
		   margin-right:201px;
		}

	#rightcontent {
		position: absolute;
		right:10px;
		top:70px;
		width:200px;
		background:#fff;
		border:1px solid #000;
		}
	
	#banner {
		background:#fff;
		height:60px;
		border-top:1px solid #000;
		border-right:1px solid #000;
		border-left:1px solid #000;
		voice-family: "\"}\"";
		voice-family: inherit;
		height:60px;
		}
	html>body #banner {
		height:70px;
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#banner h1 {
		font-size:14px;
		padding:10px 10px 0px 10px;
		margin:0px;
		}
	
	#rightcontent p {
		font-size:10px
		}
	
</style>
</head><body>
<div id="banner"><IMG SRC="http://www.purplegriffon.com/header.jpg" ALT="purple griffon.com"></div>
<div id="leftcontent">
	<h1>leftcontent</h1>
<pre>#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
	}</pre>
	<p class="greek">
	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
	</p>
</div>

<div id="centercontent">
	<h1>centercontent</h1>
<pre>#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
	}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
	}</pre>
	<p>This is the most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at <a href="http://www.wrongwaygoback.com">dynamic ribbon device</a> and have since learned that the sweet CSS came from Rob Chandanais of <a href="http://www.bluerobot.com">BlueRobot</a>. Owen also made a very nice <a href="http://members.home.net/bigstripes/tutorial/css_3box_plus_topbox.html">tutorial</a> using this layout technique.</p>
	<p>Read about the IE5x PC workaround in use on this page <a href="hacks.asp">here</a>.</p>
	<p><strong>Scroll down for the source.</strong></p>
	<p class="greek">
	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
	</p>
	<p class="greek">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitÃƒÂ¢Ã¢â€šÂ¬Ã‚Â¡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. 
	</p>
	<br />
</div>

<div id="rightcontent">
	<h1>rightcontent</h1>
<pre>#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
	}</pre>
		<p>
	This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
	</p>
	<p>
	Other Layout Techniques:<br/>
		<a href="7.asp">3 columns, the holy grail</a><br/>
	<a href="9.asp">2 columns, ALA style</a><br/>
	<a href="8.asp">4 columns, all fluid</a><br/>
	<a href="2.asp">3 columns, all fluid </a><br/>
	<a href="3.asp">static width and centered</a><br/>
	<a href="1.asp">nested float</a><br/>
	</p>
	<p>
	Does it <a href="http://validator.w3.org/check?uri=http://glish.com/css/7.asp?noSRC=true">validate</a>?
	</p>
</div>

</body>
</html>