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 7 of 7
  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 I need to improve the look of the navigation,.

    Hello friends,

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

    This is one of my pages which has a listing of useful url's.
    I have attempted to seperate them into like sites with dummy lines, but i do not like the result. Any ideas to make it more useful/attractive would be most welcome. I have very little artistic expertise.
    I thought something along this line:-

    sub1
    sub2
    sub3
    sub1a
    sub1b
    sub1c
    etc.

    Each line staggered sidewise.

    But wide open to any ideas.

    Thank you in advance.

    Frank
    Last edited by effpeetee; 09-28-2007 at 06:56 PM. Reason: Difficulty describing the post.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #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
    Did you validate it? I bet its no longer valid. An unordered list can't be directly inside of another unordered list. It needs to be in an li of the parent unordered list.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    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
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Did you validate it? I bet its no longer valid. An unordered list can't be directly inside of another unordered list. It needs to be in an li of the parent unordered list.
    No. I forgot that. I'll do it as soon as I have finalised it.
    Do you have any pointers as to how to do this in a valid way. I just want to make it more serviceable for users.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    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
    I just said what to do in the post you just quoted. Just put the unordered list INSIDE of an <li></li> that is in the parent <ul></ul>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    effpeetee (09-28-2007)

  • #5
    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
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I just said what to do in the post you just quoted. Just put the unordered list INSIDE of an <li></li> that is in the parent <ul></ul>
    Sorry Aero,
    I will do that.
    I have removed the erroneous post of mine. Don't want to mislead anyone.
    Also removed the validations until confirmed later.

    One of my Bad hair days, today.

    Frank

    EDIT I have obviously mis-understood you. Doing what I thought you said has only increased the validation errors. Will you put me right please.

    New code on site.

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

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

  • #6
    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
    Yes you've misunderstood me. This is your corrected code. I added a new class to your CSS called .nobullet. This is because the li with the ul inside of them would still have the bullet next to them. Had to remove the list-style from those.
    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=iso-8859-1" />
    <title>Useful URLs</title>
    <style type="text/css">
    /*This site was jerry-built by Frank Taylor.
    Re=furbished and largely re-built by VIPStephan and ahallicks from the CodingForms.
    My very grateful thanks to them for their help and patience./
    
    /**********************************//*        ROUNDED CORNERS         *//**********************************/
    * {
    margin: 0;
    padding: 0;
    }
    
    body {
    background-color: #220000;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    margin: 20px 0;
    }
    
    a:link {
    color: #FFF;
    background-color: inherit;
    }
    
    a:visited {
    color: #FFFF00;
    background-color: inherit;
    }
    
    a:hover {
    color: #FF0000;
    background-color: inherit;
    }
    
    a:active {
    color: #FFFFFF;
    background-color: inherit;
    }
    
    .wrapper {
    text-align: left;
    background-color: black;
    color: white;
    margin-top: 0px;
    }
    
    #main {
    float: right;
    width: 100%;
    }
    
    #main p {
    clear: both;
    width: auto;
    text-align: center;
    color: #00F;
    }
    
    a img {
    border: 0;
    }
    
    #main a img {
    border: 2px solid white;
    }
    
    #main a:hover img {
    border-color: orange;
    }
    
    #wrap {
    position: relative;
    width: 950px;
    margin: auto;
    }
    
    #header h1 {
    color: #ff0000;
    text-align: center;
    padding: 10px;
    clear: both;
    }
    
    #content {
    width: 40%;
    float: left;
    padding-left: 90px;
    padding-bottom: 20px;
    text-align: left;
    }
    
    #content2 {
    width: 40%;
    float: right;
    padding-right: 90px;
    padding-bottom: 20px;
    text-align: left;
    }
    
    #links {
    clear: left;
    font: 10px Georgia, "Times New Roman", Times, serif;
    margin-top: 10px;
    }
    
    #links ul {
    padding-left: 16px;
    margin-left: 16px;
    color: white;
    width: 370px;
    }
    
    #links ul a {
    color: white;
    font-size: 1.2em;
    font-weight: normal;
    text-decoration: none;
    }
    
    #links ul a:hover {
    text-decoration: underline;
    }
    
    #links2 {
    clear: left;
    font: 10px Georgia, "Times New Roman", Times, serif;
    margin-top: 10px;
    }
    
    #links2 ul {
    padding-left: 16px;
    margin-left: 16px;
    color: white;
    width: 370px;
    }
    
    #links2 ul a {
    color: white;
    font-size: 1.2em;
    font-weight: normal;
    text-decoration: none;
    }
    
    #links2 ul a:hover {
    text-decoration: underline;
    }
    
    #valids {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 176px;
    margin-top: 12px;
    }
    
    #footer h4 {
    clear: both;
    height: 25px;
    text-align: center;
    padding: 10px;
    color: #ff8800;
    }
    
    div.nifty {
    background: #0000ff;/* Color Nifty */
    }
    
    div.nifty p {
    padding: 12px 10px;
    }
    
    b.rtop, b.rbottom {
    display: block;
    background: #220000;/* This has to match your main background colour */
    }
    
    b.rtop b, b.rbottom b {
    display: block;
    height: 1px;
    overflow: hidden;
    background: #0000ff;/* Color Nifty */
    }
    
    b.r1 {
    margin: 0 5px;
    }
    
    b.r2 {
    margin: 0 3px;
    }
    
    b.r3 {
    margin: 0 2px;
    }
    
    b.rtop b.r4, b.rbottom b.r4 {
    margin: 0 1px;
    height: 2px;
    }
    li.nobullet {
    list-style:none;
    }
    </style>
    </head>
    <body>
    <div id="body">
    	<div id="header">
    		<h1>Useful URLs.</h1>
    	</div>
    	<div id="content">
    		<div id="links">
    			<div class="nifty"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
    				<ul>
    					<li><a href="http://www.alvit.de/handbook/">Web Developer's Handbook.</a></li>
    					<li><a href="http://www.websitebytes.com/articles/index.php"> Webpage Creation HTML Tutorials.</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics, and Structure</a></li>
    							<li><a href="http://creativecoding.webforumz.com/articles/semantics.php">Semantic web design.</a></li>
    							<li><a href="http://www.positioniseverything.net/">Position is everything.</a></li>
    							<li><a href="http://www.brainjar.com/css/positioning/">CSS positioning again.</a></li>
    						</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">Digital Web on "FLOATS".</a></li>
    					<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">Don't sink! Understand "FLOATS".</a></li>
    					<li><a href="http://www.positioniseverything.net/easyclearing.html">Clearing "FLOATS" The Old Fashioned Way.</a></li>
    					<li><a href="http://www.webreference.com/html/tutorial20/1.html#HEAD-1">Tutorial 20: CSS "FLOATS", Part I.</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://www.cssdrive.com/">Categorised CSS Gallery and Examples.</a></li>
    							<li><a href="http://www.snook.ca/jonathan/">Understanding CSS-based Layouts.</a></li>
    							<li><a href="http://www.alistapart.com/articles/slidingdoors/">CSS sliding doors technique.</a></li>
    							<li><a href="http://www.dynamicdrive.com/">Welcome to Dynamic Drive .</a></li>
    							<li><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></li>
    						</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="http://www.projectseven.com/tutorials/css/pvii_columns/">Equal Height CSS Columns.</a></li>
    					<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux columns extend to the bottom.</a></li>
    					<li><a href="http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/">Faux Columns for Liquid Layouts</a></li>
    					<li><a href="http://glish.com/css/">CSS Layout Techniques at 'glish'.</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://webdesign.about.com/od/tables/a/aa122605.htm">Tables for Tabular Data - What is Tabular Data?</a></li>
    							<li><a href="http://accessat.c-net.us/articles/convert.html">Table-based to a CSS layout.</a></li>
    							<li><a href="http://www.hotdesign.com/seybold/">The alternative to tables.</a></li>
    						</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="http://www.tanfa.co.uk/css/examples/">CSS examples - index.</a></li>
    					<li><a href="http://www.positioniseverything.net/explorer/doubled-margin.html">The IE Doubled Float-Margin Bug.</a></li>
    					<li><a href="http://csscreator.com/?q=divitis">Divitis: What It Is And How To Cure It.</a></li>
    				</ul>
    				<b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>
    		</div>
    	</div>
    	<div id="content2">
    		<div id="links2">
    			<div class="nifty"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
    				<ul>
    					<li><a href="http://xhtml.com/en/css/reference/">CSS reference.</a></li>
    					<li><a href="http://xhtml.com/en/xhtml/reference/">XHTML reference.</a></li>
    					<li><a href="http://www.bluerobot.com/web/layouts/">The Layout Reservoir.</a></li>
    					<li><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">Various Box layouts.</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml">Boxes with rounded corners.</a></li>
    							<li><a href="http://www.html.it/articoli/nifty/index.html">'Nifty' Boxes with rounded corners.</a></li>
    							<li><a href="http://bonrouge.com/~home">HTML, CSS, PHP etc. at Bonrouge.</a></li>
    						</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="http://www.cssplay.co.uk/index">Experiments with Style Sheets.</a></li>
    					<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">The Huntingground - a general site.</a></li>
    					<li><a href="http://www.tizag.com/">Welcome to Tizag Tutorials.</a></li>
    					<li><a href="http://www.codingforums.com/index.php">Coding Forums - live help.</a></li>
    					<li><a href="http://www.felgall.com/">Ask Felgall. Free Computer Help.</a></li>
    					<li><a href="http://css.maxdesign.com.au/">MAX&nbsp;DESIGN - Tutorials.</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox image viewer.</a></li>
    							<li><a href="http://www.htmlcodetutorial.com/">Help with HTML, CSS etc.</a></li>
    							<li><a href="http://www.theeldergeek.com/maximize_internet_explorer.htm">The Elder Geek on Windows XP.</a></li>
    							<li><a href="http://litmusapp.com/cssvista/">CSSVista. Edit your CSS live in both IE and Ffox.</a></li>
    							<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml">Various IE bugs and their solutions?</a></li>
    						</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="http://sperling.com/web-tips.php">A Great CSS Horizontal Drop-Down Menu and more.</a></li>
    					<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">CSS Library Vertical CSS Menus</a></li>
    					<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">CSS Library Horizontal CSS Menus</a></li>
    					<li class="nobullet">
    						<ul>
    							<li><a href="http://www.csszengarden.com/?cssfile=http://www.anthonyforsey.com/flower_annimation/sample.css">ZEN GARDEN - The Beauty of Web Design.</a></li>
    							<li><a href="http://www.maxdesign.com.au/presentation/page_layouts/">Sample CSS Page Layouts .</a></li>
    							<li><a href="http://www.w3schools.com/css/css_pseudo_elements.asp">CSS Pseudo-elements and more.</a></li>
    						</ul>
    					</li>
    					<li><a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DOCTYPES to use in your Web document.</a></li>
    				</ul>
    				<b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Compare it to what you have now and try to make sense of it.
    Last edited by _Aerospace_Eng_; 09-28-2007 at 07:13 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    effpeetee (09-28-2007)

  • #7
    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
    Very many thanks Aero,

    I have copied it over and validated it just so that I could put the icons back.
    It is now on site. I will need to print the two versions out to compare them and see what I missed. My sight is not too good, so it's a magnifying glass job.
    I will do it. I want to know what the code does. I find that I learn more from this forum than from all of the books that I bought. There is more to be learnt from people's errors and subsequent guidance from you and the other coders, than just reading books.

    Again, many thanks.

    Frank
    * 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
    •