Jump to content

Floats, blocks, and alignment...Serious Problems

javajoemorgan

By javajoemorgan
in CSS

Recommended Posts

javajoemorgan Newbie

javajoemorgan

Posted
Posted

I'm wondering if what I'm trying to do can be done outside of tables. Imagine this:

  <ul>	<li>	  <a href="#"><img src="...."/></a>	  <a href="something">Label</a>	</li>	<li>	  <a href="#"><img src="...."/></a>	  <a href="something">Some really long obnoxious label that wraps around the screen</a>	</li>	<li>	  <a href="#"><img src="...."/></a>	  <a href="something">Label</a>	</li>  </ul

It doesn't seem to matter what I do with the CSS or the structure of the HTML, I cannot get the link to the right of the image to align with it horizontally if a label wraps. That is, as long as they don't wrap, everything looks fine.I have tried classes, nested DIVs and SPANs out the wazoo... but if the text wraps, everything beyond it is out of whack. That is... I've even tried this:

  <ul>	<li>	  <div>		<div class="left"><a href="#"><img src="...."/></a></div>		<div class="right"><a href="something">Label</a></div>	 </div>	</li>	<li>	  <div>		<div class="left"><a href="#"><img src="...."/></a></div>		<div class="right"><a href="something">Some really long obnoxious label that wraps around the screen</a></div>	 </div>	</li>	<li>	  <div>		<div class="left"><a href="#"><img src="...."/></a></div>		<div class="right"><a href="something">Label</a></div>	 </div>	</li>  </ul

With the css:

	.left { display:block; width: 4%; float: left; }	.right { display:block; width: 90%; float: right; }

Now, this always aligns along the vertical... meaning the images and labels are all aligned, but they get royally screwed up along the horizontal when a label wraps around.A second issue that must be solved is that when either the label OR the image is clicked, the label (not the image) gets a border around it (using JS changing the class).. and, again, this is an issue. When the label is short, it looks perfect. When the label wraps... so does the border. I think I can solve that by bordering the enclosing div, but it doesn't solve the alignment problem.This seems like it should be really straightforward... but nothing is working.... :)

Link to comment
Share on other sites
S@m Member

S@m

Posted
Posted

You are going to kick yourself when you see how close you were. :)CSS

ul {list-style-type:none; margin:0; padding:0;}ul li {float:left; clear:left;}ul li a {float:left; margin-right:10px;}

HTML

<ul>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li></ul>

You just need to float the list item to keep everything in the same "stack".IE may throw you a curve ball and you might have to specify a width on your list element, so that might be something you will have to add.Don't forget that you can talk to each element within your html. <li>, <a>, <ul> etc.

Link to comment
Share on other sites
newseed Invested Member

newseed

Posted
Posted

If by chance you are using just one kind of image for your bullets then you can lay it out like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Simple Clickable Bulleted List</title><style type="text/css">#listmenu{width: 150px;}#listmenu ul{list-style-type: none;margin: 0;padding: 0;}#listmenu ul li{padding-bottom: 2px; /*spacing for bottom of each menu*/}#listmenu ul li a{color: #800000;background: url(bullet-image-file-here.jpg) no-repeat center left; /*bullet image*/display: block;padding: 3px 0;padding-left: 20px; /*indents the link text only*/text-decoration: none;font: bold 12px Arial;border-bottom: 1px solid #333333;}#listmenu ul li a:visited{color: #FFFFFF;}#listmenu ul li a:hover{color: #333333;background-color: #999999;}</style></head><body><div id="listmenu"><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul></div></body></html>

Link to comment
Share on other sites
javajoemorgan Newbie

javajoemorgan

Posted
  • Author
Posted
You are going to kick yourself when you see how close you were. :)CSS
ul {list-style-type:none; margin:0; padding:0;}ul li {float:left; clear:left;}ul li a {float:left; margin-right:10px;}

HTML

<ul>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a>Label</li></ul>

You just need to float the list item to keep everything in the same "stack".IE may throw you a curve ball and you might have to specify a width on your list element, so that might be something you will have to add.Don't forget that you can talk to each element within your html. <li>, <a>, <ul> etc.

Well, I've been down that road, and herein lies part of the problem. The label needs to be independently "clickable", and, when either the image or the label is clicked, a border is drawn around the label only (done by js in the onclick event that sets the class to "bordered"). So it would need to be more like this:
<ul>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><a href="">Label</a></li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><a href="">Label</a></li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><a href="">Label</a></li></ul>

Again, all fine and dandy, until the label gets so long it wraps. To keep the border from "wrapping", the label has to be wrapped within a "display: block" container, and that container gets the border. So now it evolves to this:

<ul>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><span><a href="">Label</a></span></li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><span><a href="">Label</a></span></li>	<li><a href="" rel="" title=""><img src="" width="" alt="" /></a><span><a href="">Label</a></span></li></ul>

This all works fine at this level. The image or label is clicked, and the span with a block display gets a border. If the line wraps, the border is nice an square around the span, rather than wrapping around with the label. However, when the the label wraps around, the image on the following line doesn't align with it's label. It is offset above it. It doesn't matter if the span is bordered or not. So, if I have:• Extremely long really realy verbose excruciatingly long label• 2nd line label• 3rd line LabelThe image on the 2nd line is aligned with the 2nd line of the wrapped first label. Interestingly enough, the image of the 3rd line is properly aligned with it's label.I've tried every combination of <div><div><a><img/></a></div><div><a>label</a></div></div>with every combination of "display:block;", "display: table-row", "display: table-cell", "float: left", "float: right", etc., etc., etc.... And absolutely nothing I've tried will keep the image following a wrapped label aligned with it's own label.

Link to comment
Share on other sites
javajoemorgan Newbie

javajoemorgan

Posted
  • Author
Posted
If by chance you are using just one kind of image for your bullets then you can lay it out like this:
Hmm... no such luck. It's actually a hierarchical menu with collapsing regions. Any element with children will have one of two images, depending upon the parent being open or closed. The children simply have a bullet.
Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

If you are working with this code in IE, check for a "haslayout" condition. "haslayout affects the display of lists.I have a link somewhere, but I am not on my Dev machine at the moment. I'll try to post back, but google haslayout UL LI for a start.http://www.brunildo.org/test/IEul1.html

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...