...

View Full Version : Converting to css- is it possible???



ttttt
09-20-2006, 09:32 PM
Hi, I have just finished redesigning my site, however, I'm sad to say it, it's tabled. You see, the reason I made it tabled, was because the menu on the left, needs to be the same length as the changeable length body. Is it possible to create a non-tabled version? The link is http://riseofthetechnophobe.co.uk/
Thanks,

_Aerospace_Eng_
09-20-2006, 10:04 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<title>Rise Of The Technophobe - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/images/favicon.ico">
<style type="text/css">
body
{
background: #E2E2E2;
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p,h1,h2,h3,h4,h5,td,tr
{
color: #666666;
padding-left: 5px;
padding-right: 5px;
}
a:link
{
color: #666666;
text-decoration: underline;
}
a:visited
{
color: #666666;
text-decoration: underline;
}
a:active
{
color: #666666;
text-decoration: underline;
}
#container {
background:#FFF;
min-width:600px;
}
#header {
padding:2px;
}
/*menu begins*/
#horiznav {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
text-align:center;
position:relative;
}
#horiznav li {
display:inline;
}
#leftnav {
margin:0;
padding:0;
list-style:none;
width:20%;
float:left;
}
#leftnav li {
padding:10px 0;
border-bottom:2px solid #E2E2E2;
margin:0 10px;
}
#leftnav li.last {
border-bottom:0;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
height:0;
}
#content {
margin-left:20%;
}
#content p {
margin:0;
padding:10px 0;
}
#content h1 {
margin:0;
padding:5px 0;
font-size:150%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#leftnav {
margin-right:-3px;
}
#content {
height:1%;
margin-left:0;
}
.outer {
padding-left:600px;
float:left;
}
.minwidth {
margin-left:-600px;
}
#container {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
<div class="minwidth">
<div id="container">
<div id="header"><img src="/images/header.jpg" width="100%" alt=""></div>
<ul id="horiznav">
<li><a href="/index.php">Home</a></li>
<li><a href="/tutorials.php">Tutorials</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/rss.php">RSS</a></li>
<li><a href="/login.php">Login</a></li>
<li><a href="/contact.php">Contact Us</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/help.php">Help</a></li>
<li><a href="/about.php">About</a></li>
</ul>
<ul id="leftnav">
<li><a href="/index.php">Home</a></li>
<li><a href="/tutorials.php">Tutorials</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/rss.php">RSS</a></li>
<li><a href="/login.php">Login</a></li>
<li><a href="/contact.php">Contact Us</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/help.php">Help</a></li>
<li class="last"><a href="/about.php">About</a></li>
</ul>
<div id="content">
<h1>Title</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie elit in massa. Nullam dictum, lorem at rutrum feugiat, turpis augue faucibus ante, nec rutrum odio quam eget sapien. Nullam et mi. Pellentesque nisi. Duis leo diam, placerat eget, faucibus in, hendrerit ac, ipsum. Mauris mattis. Aliquam blandit fringilla dui. Aliquam hendrerit dolor ac lorem. Morbi euismod euismod ligula. Vivamus elementum libero id mauris. Maecenas sollicitudin est et odio. </p>
<p> Nunc vulputate accumsan risus. Morbi nulla justo, gravida ac, gravida sed, blandit commodo, lorem. Suspendisse potenti. Aliquam erat volutpat. Maecenas dolor tellus, commodo sit amet, dignissim non, porta sed, urna. Duis nisl tellus, nonummy vel, lacinia sit amet, mattis a, diam. Ut nec ante convallis ligula cursus consectetuer. Donec a elit sit amet est dapibus commodo. Fusce congue nisl. Integer dui nisi, elementum ac, ultrices at, tempus et, nibh. </p>
<p> Donec pellentesque. Integer egestas. Aliquam interdum consectetuer nulla. Quisque fringilla euismod augue. Nunc massa nunc, pretium eu, lobortis eu, tincidunt sed, turpis. Fusce laoreet. Duis ornare, velit nec aliquet mollis, magna libero facilisis turpis, in semper mauris sem et elit. Nam risus felis, ultrices nec, aliquet in, dapibus dignissim, metus. Sed vel dui ac odio ultrices porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus erat vel elit. Sed hendrerit, odio ut fringilla accumsan, velit turpis nonummy nibh, et nonummy ligula dui sollicitudin mauris. Suspendisse quis neque et turpis tristique vestibulum. Quisque posuere luctus enim. Vestibulum vestibulum nonummy ligula. </p>
</div>
<div class="clear">&nbsp;</div>
</div>
</div>
</div>
</body>
</html>

ronaldb66
09-21-2006, 09:22 AM
Dude, you've got too much time on your hands... :D

ttttt
09-21-2006, 03:36 PM
Thank You soooooooo much!!!!!!!!
You deserve some kind of award...oh erm yeah.

VIPStephan
09-21-2006, 04:49 PM
Dude, you've got too much time on your hands... :D

Hm, I guess if you start building up a library (since a lot of people come with such problems) then you just cut and paste it, and tweak it for the current "client"... shouldn't take too much time. :)
But maybe I'm wrong and Aero is just a supernatural talent.

ttttt
09-21-2006, 04:55 PM
Hm, I guess if you start building up a library (since a lot of people come with such problems) then you just cut and paste it, and tweak it for the current "client"... shouldn't take too much time. :)
But maybe I'm wrong and Aero is just a supernatural talent.
I'm sure he's just a supernatural talent and he eats HTML manuals for breakfast.

_Aerospace_Eng_
09-21-2006, 05:29 PM
I'm sure he's just a supernatural talent and he eats HTML manuals for breakfast.

Late at night when I have no Homework. I turn on the music and code away. Oh and I don't read books unless its for school.

ttttt
09-21-2006, 06:14 PM
I've tried adding in a cool menu, but it doen't quite work perfectly!
If you mouseover the second menu items, the list disappears, and, under forum, one of the li's is underlined. Can you help?
Thanks,

_Aerospace_Eng_
09-21-2006, 06:41 PM
Validate your code. You've put li's in places its not allowed to go. http://validator.w3.org
You should probably read this article as it will give you more details on how to make your menu properly. Currently you are doing it improperly.
http://alistapart.com/articles/horizdropdowns

ttttt
09-21-2006, 08:53 PM
Well, it now validates, but the mouseover still doesn't work properly. The second and later li's disappear when the mouse moves toward them.
I have already used that tutorial to create the original menu.
It does work in IE though...
Thanks,

ttttt
09-22-2006, 09:51 PM
Please can someone help with making my menu work in firefox?
Thanks,

_Aerospace_Eng_
09-22-2006, 10:48 PM
What is this doing in the stylesheet?

<!--[if lte IE 6]>
<style type="text/css">
#leftnav {
margin-right:-3px;
}
#content {
height:1%;
margin-left:0;
}
.outer {
padding-left:600px;
float:left;
}
.minwidth {
margin-left:-600px;
}
#container {
width:100%;
}

<![endif]-->
It can't go in there. And change this

li:hover ul, li.over ul { display: block; } /* The magic */
to this

li:hover ul, li.over ul { display: block; position:absolute; z-index:1} /* The magic */

ttttt
09-23-2006, 10:31 AM
Thank you, it works!!!!
(sorry if I sound suprised!)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum