Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How to put two <li> lists side by side. Semantically.

    http://www.exitfegs.co.uk/HoverText.html

    This menu has eight selections which are stacked vertically. How do I go about making it into two four item lists side by side.

    Item one Item five
    Item two Item six
    Item three Item seven
    Item four Item eight

    Frank
    Last edited by effpeetee; 12-27-2007 at 05:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    There are a couple of articles adressing this issue. basically what they say is that it’s currently not possible with one list only and CSS. You can float the list items and make the list that wide that it will fit two items side by side but it will then look like:

    Code:
    li1 li2
    li3 li4
    li5 li6
    For what you want you’d need to put two separate lists side by side.

    Search for “horizontal list” or something like that to find other sources.

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Frank,
    Here is a page I wrote quite a while ago with three lists. It may not be the way I would do it today, but it seems to work okay.

    http://mlafever.jlhaslip.trap17.com/schools.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Frank - happy Boxing Day!

    Have a look at this:
    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>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #CCCCCC;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #header {
    	height: 150px;
    }
    #home {
    	float: left;
    	margin: 22px 0 0 51px;
    }
    #menu {
    	width: 400px;
    	float: right;
    }
    dt {
    	width: 400px;
    	text-align: center;
    }
    dd {
    	width: 200px;
    	float: left;
    }
    </style>
    </head>
    <body>
        <div id="header">
    				<a href="index.html"><img src="http://www.exitfegs.co.uk/home.jpg" alt="return to the home page" width="64" height="32" id="home" /></a>
    		<dl id="menu">
            	<dt>Photos</dt>
                	<dd>
                    	<ul>
                            <li><a href="1.jpg">Tolpuddle martyrs museum.</a></li>
                            <li><a href="4.jpg">Higher Came Farm.</a></li>
                            <li><a href="7.jpg">In a Japanese Garden.</a></li>
                            <li><a href="steve6.jpg">Steve, relaxing on the Bluebell Railway.</a></li>
                        </ul>
                	</dd>
                    <dd>
                        <ul>
                            <li><a href="10.jpg">A bridge somewhere.</a></li>
                            <li><a href="12.jpg">Lawrence of Arabia is buried here.</a></li>
                            <li><a href="13.jpg">Alresford High Street.</a></li>
                            <li><a href="16.jpg">Swanage - Sea front.</a></li>
                        </ul>
                    </dd>
             </dl>
    	</div>
    </body>
    </html>
    Last edited by Excavator; 12-26-2007 at 08:59 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This may be easier though...
    Code:
    ul {
    	width: 250px;
    	float: right;
    	margin: 20px 20px 0 0;
    }
    Code:
      	<ul>
                            <li><a href="1.jpg">Tolpuddle martyrs museum.</a></li>
                            <li><a href="4.jpg">Higher Came Farm.</a></li>
                            <li><a href="7.jpg">In a Japanese Garden.</a></li>
                            <li><a href="steve6.jpg">Steve, relaxing on the Bluebell Railway.</a></li>
                        </ul>
                        <ul>
                            <li><a href="10.jpg">A bridge somewhere.</a></li>
                            <li><a href="12.jpg">Lawrence of Arabia is buried here.</a></li>
                            <li><a href="13.jpg">Alresford High Street.</a></li>
                            <li><a href="16.jpg">Swanage - Sea front.</a></li>
                        </ul>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks Excavator.

    Very crafty. I must admit that I would never have thought of doing it that way. I had in mind all sorts of tortuous methods to achieve this result. All of them failed.
    Seasons greetings to you.
    Thanks again.

    Frank

    Edit. jlhaslip's method is very nice looking, but is rather a lot of code for what I want to do.
    Excavator. Your code works OK except that I cannot get the small Home icon to show through the image.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    ul {
    	width: 250px;
    	float: right;
    	margin: 20px 20px 0 0;
    }Code:
    
    </style>
    
    </head>
    <body>
    <div id="home"><A href="index.html"><IMG style="Z-INDEX: 100; LEFT: 51px; POSITION: absolute; TOP: 22px" height=32 alt="return to the home page" src="home.jpg" width=64 ></A></div>
    
    
      	<ul>
                            <li><a href="1.jpg">Tolpuddle martyrs museum.</a></li>
                            <li><a href="4.jpg">Higher Came Farm.</a></li>
                            <li><a href="7.jpg">In a Japanese Garden.</a></li>
                            <li><a href="steve6.jpg">Steve, relaxing on the Bluebell Railway.</a></li>
                        </ul>
                        <ul>
                            <li><a href="10.jpg">A bridge somewhere.</a></li>
                            <li><a href="12.jpg">Lawrence of Arabia is buried here.</a></li>
                            <li><a href="13.jpg">Alresford High Street.</a></li>
                            <li><a href="16.jpg">Swanage - Sea front.</a></li>
                        </ul>
    
    </body>
    </html>
    Any ideas.
    Last edited by effpeetee; 12-26-2007 at 09:45 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by effpeetee View Post
    Excavator. Your code works OK except that I cannot get the small Home icon to show through the image.

    Any ideas.
    Sure, instead of this
    Code:
    <body>
    <div id="home"><A href="index.html"><IMG style="Z-INDEX: 100; LEFT: 51px; POSITION: absolute; TOP: 22px" height=32 alt="return to the home page" src="home.jpg" width=64 ></A></div>
    
    
      	<ul>
    Get rid of the extra div, give the image a class and style that from the CSS. Like in my first example:
    markup:
    Code:
    <a href="index.html"><img src="http://www.exitfegs.co.uk/home.jpg" alt="return to the home page" width="64" height="32" id="home" /></a>
    and the CSS:
    Code:
    #home {
    	float: left;
    	margin: 22px 0 0 51px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Excavator,

    I still cannot see the Home icon when the image is on screen. It is there on the menu.
    Also, I need to size the picture to 800 x 600.
    Do I need a Div for the image to do this?

    I appreciate your help.

    Frank

    This program works except for the side by side menu.
    http://www.exitfegs.co.uk/HoverText.html
    Last edited by effpeetee; 12-27-2007 at 10:04 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hi Frank,
    On the page you have up on the internet you have a javascript that makes the image load on the same page.
    It looks like on this new version your working on your still just loading the image so there is no menu or home icon.

    Take another look at the version on the internet.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Yes, I know. I just put it up to show what I am aiming for. Your program is also what I want. I just would like to get the icon on display and the image size at 800x600.
    My CSS is just not up to it. Maybe what I want cannot be done. But we are so close to it.

    This is the nearest so far.

    http://www.exitfegs.co.uk/HoverText.html

    Many thanks for your help.

    Frank
    Last edited by effpeetee; 12-27-2007 at 04:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the nearest so far.
    It seems very complicated for such a simple objective.
    It's not exactly semantic.

    http://www.exitfegs.co.uk/HoverText.html

    Many thanks for your help.

    Frank
    Last edited by effpeetee; 12-27-2007 at 05:04 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It has occured to me that my program "Sources", in my signature, does exactly what I need to do. I am now in the process of modifying it to serve again.
    This is the result of the re-write from Aero and using php.
    The small icon can be directed to any chosen href.

    Here it is. http://www.exitfegs.co.uk/Texttoimage.php

    Thanks to everyone for their help.

    Frank
    __________________
    Last edited by effpeetee; 12-29-2007 at 01:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •