...

View Full Version : I need to improve the look of the navigation,.



effpeetee
09-28-2007, 01:17 PM
Hello friends,:D

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

_Aerospace_Eng_
09-28-2007, 05:30 PM
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.

effpeetee
09-28-2007, 05:51 PM
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

_Aerospace_Eng_
09-28-2007, 05:55 PM
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>

effpeetee
09-28-2007, 05:59 PM
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

_Aerospace_Eng_
09-28-2007, 06:09 PM
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.

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum