...

View Full Version : How to put two <li> lists side by side. Semantically.



effpeetee
12-26-2007, 07:24 PM
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

VIPStephan
12-26-2007, 07:33 PM
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:



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.

jlhaslip
12-26-2007, 07:46 PM
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

Excavator
12-26-2007, 08:57 PM
Good morning Frank - happy Boxing Day!

Have a look at this:
<!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>

Excavator
12-26-2007, 09:06 PM
This may be easier though...


ul {
width: 250px;
float: right;
margin: 20px 20px 0 0;
}


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

effpeetee
12-26-2007, 09:25 PM
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.


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

Excavator
12-27-2007, 12:10 AM
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
<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:
<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:

#home {
float: left;
margin: 22px 0 0 51px;
}

effpeetee
12-27-2007, 09:56 AM
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

Excavator
12-27-2007, 10:06 AM
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.

effpeetee
12-27-2007, 12:09 PM
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

effpeetee
12-27-2007, 05:00 PM
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

effpeetee
12-28-2007, 02:18 PM
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.:thumbsup:
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
__________________



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum