Making css Lists like this * please help *

[PixelPerfect]

Hello,

I put a post up before but its very ill worded.

What i am trying to achieve is this :-



I am totaly new to making table-less layouts so i am finding this very hard, i have most of the list already but i can't get the picture and report box on the left as shown in my example, here is a link to the page that's in question and what i have so far :-

http://www.tutorial-zone.co.uk/dev/index.php

Can please someone help me i am really stuck and this is really important.

Thanks in advance
Chris

[Paul O'B]

Hi,

You can just float the images to the left similar to a 2 column layout.

e.g.

                <div class="section clearfix">
                    <div class="side-img">
                        <p><img src="http://www.tutorial-zone.co.uk/dev/images/photoshop.gif" alt="" /></p>
                        <p>Report</p>
                    </div>
                    <dl>
                        <dt><a href="viewtutorial.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="listings">Making A Bubble In Photoshop</a></dt>
                        <dd>this is just a test description to make sure the sites code is working how it should.</dd>
                    </dl>
                    <ul>
                        <li class="no-pad"><strong>Category</strong> : Photoshop</li>
                        <li><strong>Rating</strong> : <img src="http://www.tutorial-zone.co.uk/dev/images/00star.gif" alt="" /></li>
                        <li><strong>Views</strong> : 2 </li>
                        <li class="no-border"><a href="report.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="aff">Report</a></li>
                    </ul>
                </div>
                
                <div class="section clearfix">
                    <div class="side-img">
                        <p><img src="http://www.tutorial-zone.co.uk/dev/images/photoshop.gif" alt="" /></p>
                        <p>Report</p>
                    </div>
                    <dl>
                        <dt><a href="viewtutorial.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="listings">Making A Bubble In Photoshop</a></dt>
                        <dd>this is just a test description to make sure the sites code is working how it should.</dd>
                    </dl>
                    <ul>
                        <li class="no-pad"><strong>Category</strong> : Photoshop</li>
                        <li><strong>Rating</strong> : <img src="http://www.tutorial-zone.co.uk/dev/images/00star.gif" alt="" /></li>
                        <li><strong>Views</strong> : 2 </li>
                        <li class="no-border"><a href="report.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="aff">Report</a></li>
                    </ul>
                </div>
                
                <div class="section clearfix">
                    <div class="side-img">
                        <p><img src="http://www.tutorial-zone.co.uk/dev/images/photoshop.gif" alt="" /></p>
                        <p>Report</p>
                    </div>
                    <dl>
                        <dt><a href="viewtutorial.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="listings">Making A Bubble In Photoshop</a></dt>
                        <dd>this is just a test description to make sure the sites code is working how it should.</dd>
                    </dl>
                    <ul>
                        <li class="no-pad"><strong>Category</strong> : Photoshop</li>
                        <li><strong>Rating</strong> : <img src="http://www.tutorial-zone.co.uk/dev/images/00star.gif" alt="" /></li>
                        <li><strong>Views</strong> : 2 </li>
                        <li class="no-border"><a href="report.php?tid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e" class="aff">Report</a></li>
                    </ul>
                </div>

#content {
 float:left;
}
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}

 /* mac hide \*/
    * html .clearfix {height: 1%;}
      .clearfix {display: block;}
 /* End hide */



.section{clear:both;margin:10px 0}
.section ul{
    list-style:none;
    margin:0;padding:0;
    line-height:.9;
}
.section ul li{
    border-right:1px solid #000;
    padding:0 10px ;
}
.section ul li.no-pad{padding-left:0}
.section ul li.no-border{border-right:none;padding-right:0}

.side-img{
    float:left;
    width:60px;
}
.side-img p{
    border:1px solid blue;
    padding:5px 0;
 text-align:center;
}
.section dl {margin:0 0 0 65px;padding:0}
.section ul {margin:0 0 5px 65px;padding:0}
.section dt {margin:0 0 5px 0}
.section dd {margin:0;padding:0}
.section ul li{display:inline;}
.section dt a{        
    font-size: 1.2em;
    color:#105cb6;
    font-weight:bold;
}

It will need tweaking into position etc but should give you the general idea.

The code you were using in the page is invalid and you cannot wrap block level elements such an h1 inside inline elements like anchors.

In fact you should really only have one h1 per page as a page can really only have one main heading. You would probably get penalised for search engines if you use more than 2 or 3 h1 headings at the most as they will consider it spam.

Minor headings should go in logical order so those headings would be at least h3 headings anyway. However there are better more semantic html elements to use such as dl lists which describe the content much better which is why I have used them above

[PixelPerfect]

Hi Paul,

Thanks ever so much for your reply .. i have just done all the coding into my site with my database info. It displays correctly but with a error !! i now have a huge gap before my content starts to appear on my page is this something like a coding error or is it something i need to adjust in my css. The main design of my page was actually built on one of your pages here is the one i followed :-

http://www.pmob.co.uk/temp/2col_main.htm

just to put you in the mind of what code im using on the css side of things lol.

[PixelPerfect]

arr ha cured it !

What it was is that i already have a #content in my css stylesheet, so i just added float:left; to the other one and removed the duplicate #content and hey presto its all worked out loverly now .. thank you so much for this paul its really appreciated.

Regards
Chris

[PixelPerfect]

arrrrr no i have not cured it !!!, it looked fine in Foxfire and when i checked it in IE all the nav part of my site was missing .... so i removed the float:left; and checked in IE again and now it looks perfect in IE but in Foxfire there is a huge gap again.

What could be causing this ?

[Paul O'B]

Hi,

Yes you need to float #content as well because you will be unable to float elements in that column otherwise because whenever you clear them they will clear the side column as well.

This article explains it:

http://www.pmob.co.uk/temp/flclear1.htm

However it seems that IE wants the floats completely cleared before they start and you will need to add this code into the html.

    <div id="mainnav"> <a href="index.php?PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="tutorials.php?pid=2&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Tutorial</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="submit.php?pid=3&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Submit</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/Forums/?PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Forums</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="affiliates.php?pid=4&PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Affiliates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.php?PHPSESSID=2fc24022c1f3f9ac704d357c9deb116e">Contact
            Us</a> </div>
    <div style="clear:both"></div>
    <div id="sidebar">

(Alternatively wrap the left and right floats in a container with the clear:both applied.)

The navigation should display correctly now

[PixelPerfect]

humm no that din't work neither .. iv actually removed the float:left; from the #content section and in IE it displays fine .. the problem is now in Foxfire.

When i had the float:left; in place it all displayed fine in Foxfire but as soon as i opened up IE the top navigation bar and the whole top of the site messes up .

[Paul O'B]

I have it working locally. You must add the float:left to the content as shown above and then add the clearing div in the html. It will work

Read the link I posted for the explanation why this must be so

[PixelPerfect]

hahaha success i figured it out !!. I have put the contents i am brining out of the database into a new div layer and insted of using #content i made a new class called #content2 and then used the following :

<div id="content2"> ** my database stuff here ** </div> and that worked perfect soo thankyou for your help paul its gone to good use.

Regards
Chris

[Paul O'B]

It looks as though its working in both browsers now but I do notice that your footer is misplaced in IE dues to the dynamic content being added and it forgets where the footer is.

You will need to change the footer technique to this instead.

#footer    {
        font-family: "Trebuchet MS";
        font-size: 12px;
        color:#FFFFFF;
        position:relative;
          width:730px;
        margin:-25px auto 0;
        height: 25px;
        background-color: #357eb3;
        border-top: 0px solid #e9e9e9;
        text-align: center;
}

Then move the footer down the html and outside of the main container altogether like so:

            <span id='tutorialnavselected' class='tutorialnavselected'>1</span> <span id='tutorialnav' class='tutorialnav'><a href='/dev/index.php?page=2' class='aff'>2</a></span> <span id='tutorialnav' class='tutorialnav'><a href='/dev/index.php?page=3' class='aff'>3</a></span> <span id='tutorialnav' class='tutorialnav'><a href='/dev/index.php?page=2' class='aff'>Next</a></span> <span id='tutorialnav' class='tutorialnav'><a href='/dev/index.php?page=13' class='aff'>Last</a></span></div>
        <br/>
    </div>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
</div>
<div id="footer">
    <div class="divider1"></div>
    <div class="blank"></div>
    <!-- for decoration only -->
    <p>&#169; Tutorial-Zone. 2006 — Coding & Design by Chris Baines</p>
</div>
<script type="text/javascript">
var tooltipObj = new formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>

That should cure the problem

[PixelPerfect]

Arrr yeah thats worked ... brillient thanks for all your help Paul.

I really need to learn more css and learn how to understand it more .. but all what you have taught me already is a wealth of information.

Regards
chris