Trouble laying out a message list in css

Discussion in 'Web Design and Development' started by CavemanUK, Apr 25, 2010.

  1. CavemanUK macrumors 6502

    CavemanUK

    Joined:
    Jun 29, 2006
    Location:
    Rhyl, North Wales
    #1
    Hi,

    I was wondering if someone could help with with a silly display problem i have my message list code. Im making a basic internal email package. I currently display an 'inbox' that is pretty standard.

    I have it set up to hilight the line when the mouse hovers over it and it links to the specific message when you click anywhere on that line. The problem is, I want a checkbox in there to allow me to multiselect messages for deletion etc. But when I do this, clicking on the checkbox triggers the link to the message. Ive moved the checkbox outside the <a href> tag but now it appears on a different line.

    Can anyone tell me what im doing wrong.

    PHP:
    <ul>

        <?php
        
    while($row mysql_fetch_array($resultMYSQL_ASSOC)) {
        
    ?>    
        
        <li <?php if ($row['message_unread']) {echo "style='font-weight:bold;'";}?>>
            <?php
                            
                
                
    if($row['message_to'] === $_SESSION['db_staffmember_id']) {
                    
    $query="SELECT * FROM StaffMembers WHERE staffmember_id =".$row['message_from'];
                    
    $personname "from:";
                } else {
                    
    $query="SELECT * FROM StaffMembers WHERE staffmember_id =".$row['message_to'];
                    
    $personname "to:";
                }
                    
    $staffresult mysql_query($query) or die('Error, query failed');
                    
    $staffdetails mysql_fetch_array($staffresultMYSQL_ASSOC);
                    
    $personname .= $staffdetails['staffmember_forename']." ".$staffdetails['staffmember_surname'];
                
    ?>
                <span id='messagecheckbox'><input type='checkbox' name='checkbox[]' id='checkbox[]' value='<?php echo $row['message_id'];?>'></span>
                <a href='../messages/message_view.php?messageid=<?php echo $row['message_id'];?>'>
                <span id='messagelistperson'><?php echo croptext($personname,14,"...");?></span>
                <span id='messagelistsubject'><?php echo $row['message_subject'];?></span>
                <span id='messagelistdate'><?php echo ukdatetime($row['message_date']);?></span></a>
        </li>
        <?php
        
    }
        
    ?>
    </ul>

    the css is as follows....

    PHP:
    #subjectline {
    position:absolute;
    color:white;
    top:7px;
    left:20px;
    display:block;
    }

    #messagebody {
        
    max-width788px;
        
    border-styledouble;
        
    border-width0px;
        
    padding-left5px;
        
    padding-bottom10px;
        
    padding-right5px;
        
    padding-top10px;
        
    displayblock;
        
    colorblack;
    }

    #messagedate {
    position:absolute;
        
    font-size0.8em;
        
    color#f8ff4a;
        
    top:12px;
        
    right:12px;
    }

    #messageslist ul {
    font-size0.9em;
    list-
    style-typenone;
    max-width740px;
    }

    #messageslist li {

    width:740px;}

    #messageslist li a { 
            
    border-top-color#959595;
            
    border-bottom-color#c6c6c6; 
            
    border-bottom-stylesolid
            
    border-top-stylesolid
            
    border-bottom-width1px
            
    border-top-width1px
            
    colorblack;
            
    displayblock;
            
    padding5px;
            
    text-decorationnone;              
    }



    #messageslist li a:hover {
            
    background#eeeeee;
    }

    #messageslist a em { 
            
    color#333;
            
    displayblock;
            }


    #messagelistsubject {
            
    positionabsolute;
            
    left:180px;
          
    }

    #messagelistdate {
    positionabsolute;
    right32px;
    font-size.8em;
    }

    #messagecheckbox {
        
        
    text-alignleft;
        
    }

    #idbadge {
        
    positionabsolute;
        
        
        
    z-index1001;
    }

    #idbadge img {
        
    width:60%;
        
    height:60%;
    }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    First thing, it looks like your loop will make several outputs of these lines, and your HTML inside the loop outputs the same id attribute for each iteration. An id value can only appear once per page by definition. You should change those to class attributes to be valid.

    The issue you're having is that the links are being styled as block elements, which means they'll be a new line before and after it. To get around this you need to tell the check box to float left.

    Code:
    #messagecheckbox {  
        text-align: left;
        [B][COLOR="Blue"]float: left;[/COLOR][/B]
    }
     
  3. Cromulent macrumors 603

    Cromulent

    Joined:
    Oct 2, 2006
    Location:
    The Land of Hope and Glory
    #3
    It's also extremely unlikely that you want SQL statements directly in your HTML pages. Move them out to model classes and use controller classes to act as the go between for the model and view classes otherwise you'll have a huge mess on your hands in the future.
     
  4. CavemanUK thread starter macrumors 6502

    CavemanUK

    Joined:
    Jun 29, 2006
    Location:
    Rhyl, North Wales
    #4
    thanks for both your replies guys. i havent had chance to do it yet but the float:left; sounds like what ive missed.

    I was wondering how i go about separating the mysql statements from the .php pages ive created?
     
  5. Cromulent macrumors 603

    Cromulent

    Joined:
    Oct 2, 2006
    Location:
    The Land of Hope and Glory
    #5
    Just stick them in a class in another file. You might have MessageModel.php which the following functions:

    insertMessage()

    deleteMessage()

    editMessage()

    etc etc

    These contain all the necessary code to deal with the raw SQL. Then you might have MessageController.php which executes these functions and processes the raw data and turns it into a form which is useful for your view class. Then in your MessageView.php you just call the functions in MessageController.php and bam you have a reasonable separation of concerns.

    The controller should really decide on which view to display but I get the feeling that your code is quite entangled.

    You can certainly do a better job than I have outlined above but I don't know your code so you'll have to work it out yourself. You could also make things a lot easier on yourself and use the Zend framework (google it).
     

Share This Page