Placing icons with percentages, no css background allowed

Hi,

I’m working up a mobile design page for use within a CMS. The design calls for images to accompany the text on the link. Due to the responsive nature and requirement that editors must be able to change the image, I’m not allowed to just put the icons in as a background image in the CSS, they must be in the flow of the document. I’m also having to use percentages due to it being a mobile page.

At the moment I have the following mark-up:


<nav>
  <ul>
     <li><a href="#"><img /><span>First link</span></a></li>
     <li><a href="#"><img /><span>Second link</span></a></li>
     <li><a href="#"><img /><span>Third link</span></a></li>
     <li><a href="#"><img /><span>Fourth link</span></a></li>
  </ul>
</nav>

I’m floating the <li>s in order to remove the white space.

My main issue at the moment is that the words going onto two lines are wrapping around the images, is there a way to prevent this? (See bottom right on image as example)

I’m really struggling trying to get this as the image attached, can anyone give me a hand with this please.

Thanks!

There probably is a way to do what you want, but I don’t understand what it is that you are trying to do.

Can you post your css code? Or link to the page? It seems like the picture you posted isn’t a screen grab, rather created with graphics software. (The text is sometimes centered, sometimes aligned top, and the last “image” has no margin.)

HI,

To do it perfectly you would need a structure like this:

ie8+


<!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>Untitled Document</title>
<style type="text/css">
ul {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:50%;
	display:table;
}
li {
	display:table-cell;
	width:50%;
	vertical-align:middle;
	border:1px solid #000;
	background:red;
	padding:5px;
}
li a {
	display:table;
	width:100%;
}
li span {
	display:table-cell;
	vertical-align:middle;
	width:30%;
}
li span + span { width:70% }
</style>
</head>

<body>
<ul>
		<li><a href="#"><span><img src="images/zimg1.jpg" width="50" height="50" alt="test"></span><span>First link</span></a></li>
		<li><a href="#"><span><img src="images/zimg2.jpg" width="50" height="50" alt="test"></span><span>Second link with longer text</span></a></li>
</ul>
<ul>
		<li><a href="#"><span><img src="images/zimg3.jpg" width="50" height="50" alt="test"></span><span>Third link</span></a></li>
		<li><a href="#"><span><img src="images/zimg4.jpg" width="50" height="50" alt="test"></span><span>Fourth link</span></a></li>
</ul>
</body>
</html>

If you float it as in your example then you will need a fixed height for each float so that they don’t snag but then you would need to hide any overflow.

Something like:


<!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>Untitled Document</title>
<style type="text/css">
ul {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:50%;
	overflow:hidden;
}
li {
	width:50%;
	float:left;
	height:8em;
	overflow:hidden;
}
li a {
	display:table;
	width:100%;
	height:100%;
	background:red;
	border:1px solid #000;
}
li span {
	display:table-cell;
	vertical-align:middle;
	height:100%;
	padding:5px;
	width:50%
}
</style>
</head>

<body>
<ul>
		<li><a href="#"><span><img src="images/zimg1.jpg" width="50" height="50" alt="test"></span><span>First link</span></a></li>
		<li><a href="#"><span><img src="images/zimg2.jpg" width="50" height="50" alt="test"></span><span>Second link with longer text</span></a></li>
		<li><a href="#"><span><img src="images/zimg3.jpg" width="50" height="50" alt="test"></span><span>Third link</span></a></li>
		<li><a href="#"><span><img src="images/zimg4.jpg" width="50" height="50" alt="test"></span><span>Fourth link</span></a></li>
</ul>
</body>
</html>

Awesome, sorry for the vague post. I got it going by using JS to auto correct the heights of each button.

Paul: Yep, used the overflow to fix it out.

Thanks again,