SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Looking for a fixed width...

    <li style="padding:3; border:0; margin:0; float:left; text-align:center; "><p style=" padding:8px; border:0; margin:0; text-align:center; left:5px;" ><a href="',$uri,'" >',$alt,'</a></p></li>

    Guys I want the text of this variable ',$alt,' which is a piece of text "$alt=Air Jordan exponent" to have a fixed width to avoid it to extend all the way to the right, instead I want the text to go down if it is too long...

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could set a width on the <p> tag.

    Everything inside the <p> is inline and will wrap as appropriate within that width.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you felgall..

    When I fixed a width then the thumbs goes all over


    I think something is wrong with the structure of the <li> tags


    Code:
    <li style="padding:3; border:0; margin:0; float:left; text-align:center; "><p style=" padding:8px; border:0; margin:0; text-align:center; left:5px; width:50;" ><a href="',$uri,'"  >',$alt,'</a></p><a href="',$uri,'" title="',$alt,'" style="padding:0; border:0; margin:0; " ><img  width="',$width,'" height="',$height,'" alt="',$alt,'" src="',$srcp,'"   /></a></li>

    below is the second part of the code above and it contain a picture box.
    Code:
    <a href="',$uri,'" title="',$alt,'" style="padding:0; border:0; margin:0; " ><img  width="',$width,'" height="',$height,'" alt="',$alt,'" src="',$srcp,'"   /></a>
    The way it display is a text above the picture but when a width is fixed the thumbs display not in order they go all over.

    it display a line then the next line display two thumbs and then the next line display all thumbs it goes kind of crazy...

  4. #4
    SitePoint Member hcamelion's Avatar
    Join Date
    Jul 2005
    Location
    Albany, New York
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have never seen a <p> tag used in a list before. Can't you just apply that css to the actual list item <li> ...remember <p> will add padding too which it looks like you are compensating for. Can you provide a link to the page?

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the whole code and the css is below the php script

    PHP Code:
    echo '<ul  id="nav-subjects-thumbs2">',"\n";
        
        foreach(
    $menus as $men) {
            
    $uri 'example2.php?menu='.urlencode($men['id']); 
            
    $srcp $men['img'];
            
    $width 135;
            
    $height 60;
            
    $alt $men['shoename'];

            echo 
    "\n",'<li style="padding:3; border:0; margin:0; float:left; text-align:center; "><p style=" padding:8px; border:0; margin:0; text-align:center; left:5px; width:50;" ><a href="',$uri,'"  >',$alt,'</a></p><a href="',$uri,'" title="',$alt,'" style="padding:0; border:0; margin:0; " ><img  width="',$width,'" height="',$height,'" alt="',$alt,'" src="',$srcp,'"   /></a></li> 
    #nav-subjects-thumbs2{ width:66.0&#37;; height:18.5%; padding:0; margin:0; float:left; left:202px; list-style:none;
    position:absolute; top:900px; text-align:center; font-size:14px; background:#FFFFFF; }


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
  •