Trouble laying out a message list in css

CavemanUK · Apr 25, 2010

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($result, MYSQL_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($staffresult, MYSQL_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-width: 788px;
    border-style: double;
    border-width: 0px;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-right: 5px;
    padding-top: 10px;
    display: block;
    color: black;
}

#messagedate {
position:absolute;
    font-size: 0.8em;
    color: #f8ff4a;
    top:12px;
    right:12px;
}

#messageslist ul {
font-size: 0.9em;
list-style-type: none;
max-width: 740px;
}

#messageslist li {

width:740px;}

#messageslist li a { 
        border-top-color: #959595;
        border-bottom-color: #c6c6c6; 
        border-bottom-style: solid; 
        border-top-style: solid; 
        border-bottom-width: 1px; 
        border-top-width: 1px; 
        color: black;
        display: block;
        padding: 5px;
        text-decoration: none;              
}



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

#messageslist a em { 
        color: #333;
        display: block;
        }


#messagelistsubject {
        position: absolute;
        left:180px;
      
}

#messagelistdate {
position: absolute;
right: 32px;
font-size: .8em;
}

#messagecheckbox {
    
    text-align: left;
    
}

#idbadge {
    position: absolute;
    
    
    z-index: 1001;
}

#idbadge img {
    width:60%;
    height:60%;
}

angelwatt · Apr 25, 2010

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]
}

Cromulent · Apr 25, 2010

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.

CavemanUK · Apr 25, 2010

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?

Cromulent · Apr 25, 2010

CavemanUK said:
I was wondering how i go about separating the mysql statements from the .php pages ive created?

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).

Search

Search

Trouble laying out a message list in css

CavemanUK

macrumors 6502

angelwatt

Moderator emeritus

Cromulent

macrumors 604

CavemanUK

macrumors 6502

Cromulent

macrumors 604

Our Staff