SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <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!778623846.png

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    ie8+
    Code:
    <!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:

    Code:
    <!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>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •