SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    problem with fielset layout

    hey folks,
    i have a fieldset. in which the legend the text display. showing 1 of 2 and it has next and previous arrow for going on next record and back. i am having trouble. i have 2 fieldset boxes.floating next to eachother and both have showing 1 of 2 (depending on record set). i can't make the arrows sit at place. here is my code
    Code HTML4Strict:
    <fieldset class="lBox">  
              <?php
     
            if($Prev_Page)
            {
                echo "<span class=\"prv\"><a href='$_SERVER[SCRIPT_NAME]?Page=$Prev_Page'><img title=\"Previous Record\" src=../images/previous.png border=0 /></a></span>";
            }
     
     
             if($Num_Rows != 0)
             {
              ?>
     
                 <legend>&nbsp;Displaying &nbsp;<?php echo $Page; ?>&nbsp;of&nbsp;<?php echo $Num_Rows;?>  Meters</legend>
                <?php
             }
            if($Page!=$Num_Pages)
            {
                echo "<span class=\"nxt\"><a href='$_SERVER[SCRIPT_NAME]?Page=$Next_Page'>&nbsp;<img title=\"Next Record\" src=../images/next.png border=0 /></a></span>
                ";
            }
     
            ?>
    and here is the css
    Code CSS:
    span.prv{width:11px; height:15px;top:-12px; position:relative;}
    span.nxt{width:11px; height:15px;top:-8px;left:180px; position:absolute;}
    need help guys!
    here is a image of what is happening
    All those who wander aren't lost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It would be better if you could show the generated HTML. The PHP code is of no use here.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Generated HTML as in? i didn't got what u mean
    All those who wander aren't lost.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Ralph means; what you see after the page has been parsed by the PHP parser/server and loaded in the browser not the raw PHP statements themselves.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here is the first fieldset
    Code HTML4Strict:
    <fieldset class="lBox">  
     
                 <legend>&nbsp;Displaying &nbsp;1&nbsp;of&nbsp;2</legend>
     
                <span class="nxt"><a href='page.php?Page=2'>&nbsp;<img title="Next Record" src=../images/next.png border=0 /></a></span>
                 <img class="addIcon" src="../images/add.png" title="Add" border="0" href="#" id="view"/>
    </fieldset>
    and the 2nd fieldset
    Code HTML4Strict:
    <fieldset class="rBox"> 
              <span class="prv"><a href='....'><img title="Previous Record" src=../images/previous.png border=0 /></a></span>
                 <legend>&nbsp;Displaying &nbsp;2&nbsp;of&nbsp;3</legend>
                <span class="nxt"><a href='.....'>&nbsp; &nbsp;<img title="Next Record" src=../images/next.png border=0 /></a></span>
    All those who wander aren't lost.

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

    If you want the arrows next to the text then why don't you put them in the same element and then you won't have to position them much ?

    I don't think the legend is the correct element to be applying pagination to as it should be the description for the form controls only.

    Anyway something like this should work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .prv {margin:0 10px 0 0;}
    .nxt {margin:0 0 0 10px;}
    .prv,.nxt,.prv img, .nxt img{
        display:inline;
        border:none;
        text-decoration:none;
    }
    .prv img, .nxt img{vertical-align:middle}
    </style>
    </head>
    <body>
    
    <fieldset class="rBox">
    <legend><a class="prv" href='....'><img title="Previous Record" src="../images/previous.png" alt="prev" /></a>&nbsp;Displaying &nbsp;2&nbsp;of&nbsp;3<a class="nxt" href="#"><img title="Next Record" src="../images/next.png" alt="next"  /></a></legend>
    
    </fieldset>
    </body>
    </html>
    The legend is pretty hard to style at best of times and is best left alone being just a legend describing the form controls contained within the fieldset.

    Pagination is a completely separate element with a different function.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paul is on the right track -- and word of advice, you'll find your code a lot less of a train wreck if you use ECHO instead of constantly dropping in and out of parse mode for no good reason with <?php ?> -- but there's a reason I consider using php as a 'on/off scripter' to be a crutch for people coming from crappy languages instead of using it like a real programming language.

    It also helps not to drag execution to a crawl by doing the double quote escape double quote nonsense. Single quotes are faster, and you don't have to turn the code into a confusing MESS by escaping everything.

    Some carriage returns and tabs wouldn't hurt either... and TITLE doesn't belong on IMG, ALT does. You want to use TITLE put it on the ANCHOR.

    It also wouldn't hurt to get rid of the things that have no business in modern markup like the border attribute, non-breaking spaces to do padding and white-space:nowrap's job, and as paul pointed out lose the span being used to do what can be directly done to the anchor.

    ... and as Paul mentioned, legend is a pain in the ass to style, which is why I usually put a dummy span inside the legend and APO it off the fieldset or div wrapping the fieldset (since fieldsets also are completely unpredictable cross-browser).

    Code:
    <?php
    
    echo '
    <div class="lBox"><fieldset>
    	<legend><span>',(!$Prev_Page ? '' : '
    		<a
    			href="'.$_SERVER[SCRIPT_NAME].'?Page='.$Prev_Page.'"
    			title="Previous Record"
    			class="prv"
    		>
    			<img
    				 src="../images/previous.png"
    				 alt="<<" 
    			/>
    		</a>'),($Num_Rows== 0 ? '' : '
    			Displaying'.$Page.' of '.$Num_Rows.' Meters'
    		),($Page==$Num_Pages ? '' : '
    				<span class=\"nxt\">
    		<a href="'.$_SERVER[SCRIPT_NAME].'?Page='.$Next_Page.'"
    			title="Next Record"
    			class="nxt"
    		>
    			<img 
    				src="../images/next.png"
    				alt=">>"
    			/>
    		</a>'),'
    	</span></legend>';
              
    ?>
    It sucks to put the extra div around the fieldset and the span inside the legend, but you cannot trust either element for to accept styling the same way cross browser but you need them for semantics -- so you have to use semantically neutral wrappers to fix that.

    ... and don't give me that horse hockey you hear from php developers on how it's too hard to make clean code output or use single quotes instead of doubles, because, well... there it is

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    deathshadow the php isn't my designed. neither i like the way that guy writes the code. i m just the designer guy
    All those who wander aren't lost.


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
  •