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 13 of 13
  1. #1
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Converting to css- is it possible???

    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,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cut-n-paste

    Dude, you've got too much time on your hands...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You soooooooo much!!!!!!!!
    You deserve some kind of award...oh erm yeah.
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by ronaldb66 View Post
    Dude, you've got too much time on your hands...
    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.

  • #6
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by ttttt View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Last edited by _Aerospace_Eng_; 09-21-2006 at 05:49 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Edit: It does work in IE though...

    Thanks,
    Last edited by ttttt; 09-21-2006 at 08:56 PM.
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #11
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please can someone help with making my menu work in firefox?
    Thanks,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What is this doing in the stylesheet?
    Code:
    <!--[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
    Code:
    li:hover ul, li.over ul { display: block; } /* The magic */
    to this
    Code:
    li:hover ul, li.over ul { display: block; position:absolute; z-index:1} /* The magic */
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, it works!!!!
    (sorry if I sound suprised!)
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software


  •  

    Posting Permissions

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