PDA

Click to See Complete Forum and Search --> : TABLE TO CSS: TEMPLATE FROM alitapart.com

design
06-20-2005, 10:59 AM
NONE
Fang
06-20-2005, 11:25 AM
<div id="pipe">
<ul>
<li class="first">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

</div>
design
06-20-2005, 12:59 PM
NONE
Fang
06-20-2005, 02:05 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>horizontal menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
#pipe {
margin-left:0;
padding-left:0;
display:inline;
}
#pipe li {
margin-left:0;
padding:3px 15px;
border-left:1px solid #000;
list-style:none;
display:inline;
}
#pipe li.first {
margin-left:0;
border-left:none;
list-style:none;
display:inline;
}
-->
</style>

</head>
<body>
<ul id="pipe">
<li class="first"><img src="logo.gif" alt="logo"></li>
<li>[<a href="http://www.link1.com">Mission</a>]</li>
<li>[<a href="http://www.link2.coml">Services</a>]</li>
<li>[<a href="http://www.link3.com">General Experience</a>]</li>
<li>[<a href="http://www.link4.com">Private Sector Experience</a>]</li>
<li>[<a href="http://www.link5.com">Permits Experience</a>]</li>
<li>[<a href="http://www.link6.com">Useful Links</a>]</li>
</ul>
</body>
</html>

Why 2 user names?
rwhite
06-21-2005, 01:30 AM
NONE
the tree
06-21-2005, 02:22 AM
The logo doens't really need to apear in the HTML, at all. The only way I could thing to stop the links from falling under each other when you shrunk the browser was a fixed width. Enjoy.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Just a list</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style type="text/css">

ul#pipe {
margin-left: 0;
padding-left: 100px;
display: block;
list-style:none;
background: url(deilogo.gif) left center no-repeat;
width: 600px;

}

ul#pipe li {
margin-left: 0;
padding: 2px;
float: left;
}


ul#pipe li#active a{
color: #f00;
}
</style>
</head>

<body>
<ul id="pipe">
<li id="active">[<a href="http://www.link1.com">Link1</a>]</li>
<li>[<a href="http://www.link2.com">Link2</a>]</li>
<li>[<a href="http://www.link3.com">Link3</a>]</li>
<li>[<a href="http://www.link4.com">Link4</a>]</li>
<li>[<a href="http://www.link5.com">Link5</a>]</li>
<li>[<a href="http://www.link6.com">Link6</a>]</li>
<li>[<a href="http://www.link7.com">Link7</a>]</li>
</ul>
</body>
</html>
Fang
06-21-2005, 03:04 AM
HTML tutorials (http://www.w3schools.com/default.asp)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>horizontal menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
body { color : #000000;
background-color : #ffffcc;
font-family : "times new roman", serif; }

#pipe {
margin:auto;
width:50em;
border-bottom:5px solid #800;
border-right:1px solid #800;
}
#pipe ul {
margin:0;
padding-left:0;
display:inline;
}
#pipe ul li {
margin-left:0;
padding:3px 5px;
list-style:none;
display:inline;
color:#800;
vertical-align:top;
}
#pipe ul li a {
text-decoration:none;
color:#003add;
}
#pipe img {
vertical-align:bottom;
}
-->
</style>

</head>
<body>
<div id="pipe">
<ul>
<li><img src="deilogo.gif" alt="logo"></li>
<li>[<a href="http://www.link1.com">Mission</a>]</li>
<li>[<a href="http://www.link2.coml">Services</a>]</li>
<li>[<a href="http://www.link3.com">General Experience</a>]</li>
<li>[<a href="http://www.link4.com">Private Sector Experience</a>]</li>
<li>[<a href="http://www.link5.com">Permits Experience</a>]</li>
<li>[<a href="http://www.link6.com">Useful Links</a>]</li>
</ul>
</div>
</body>
</html>