...

View Full Version : Help with unordered lists.



effpeetee
01-08-2008, 11:48 AM
In my program "Sources" I use unordered lists for the menus. The validation gives multiple errors. When I correct the errors, the result is a disaster.:mad:

Would someone look to see what I have done wrong. The program is complete with css.
I do not fully understand the mechanism to use bullet, nobullet.
If I construct the lists as I thought was correct, I cannot get the menu to look tidy.:eek:

Help required.

Frank

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

daemonkin
01-08-2008, 12:32 PM
After just a quick glance I have seen that you have misplaced some tags:


<li class="nobullet">

<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics,
and Structure</a></li>
<li><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">What are
Semantics?</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>
<li><a href="http://blog.html.it/layoutgala/">CSS layout gala.</a></li>

</li></ul>


should be:


<li class="nobullet">

<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics,
and Structure</a></li>
<li><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">What are
Semantics?</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>
<li><a href="http://blog.html.it/layoutgala/">CSS layout gala.</a></li>
</ul>
</li>


Your best bet is to construct all the main list elements in each list and then once you have the main list, construct the sub lists inside the required list element:



<li>A sub list
<ul><li>...</li></ul>
</li>


Once you have your list correctly built then you can start stying up how it will look with ids and classes.
You may want to keep all your font sizes the same to avoid jumping when going down the list.
Hope this helps.

D.

effpeetee
01-08-2008, 01:01 PM
Directly I alter the code this way ( which was as I originally wrote it) the display is awful. The code is the way it is because it was the only way I could get it to work. I have also tried altering the (UL class = "bullet") instead of the (li class="bullet") but it makes it worse also.

I'll probably have to use it as it is. The reason for the large text on hover is that my sight is poor and it helps me.

Regards,

Frank

PS I'm still open to suggestions.

bazz
01-08-2008, 02:53 PM
Frank, fristly I would make sure that all the text, whether a link or hovered upon, should be the same size. Presumably you will need it to be the smae size before you hover on it, so that you know what you will hover on? Incidentally, you can hold your ctrl key and scroll your mousewheel, to enable you to read the text more easily. That way, you can have text the size that looks best for 'normally' sighted people but equally important, those with less effective sight can adjust it to suit their own needs.

You need to get your nestings worked out so that the page validates. Only then, should you make up the css to get it to look right. Think about it like this: if the foundations aren't correctly done, how could the walls of a house stand up?

So get the code right and then look at the styles.

Finally, I am not sure what you are wishing to achieve with the class, no bullets. I think it would be easier to add the element to all the li's in a list (as if a default), so that only the main list has bullets. Then you can change the main lists to a symbol or to nohting, whichever you prefer.

bazz

effpeetee
01-08-2008, 03:31 PM
Hi! Bazz,

I really want the display as it is. I have regularised the font-size. The large hover is to help me see. I have poor sight.
If I do all that is needed to validate. The display is awful. I can do better with a simple hyperlinked text list. I can't believe that it is not possible to do such a simple layout as this is.

I'll keep looking. At least it keeps me out of mischief,

Frank

_Aerospace_Eng_
01-08-2008, 04:27 PM
Its validated. I removed excess CSS and I fixed a few IE bugs. I've also streamlined some of your CSS. For example you didn't need the bullet class because all you had to do was set the list style to the ul. Also some of your styles were repeating so I made them classes. I also got rid of the horizontal scrollbar. It also now doesn't require min-width. The links will just flow to the next line as the browser gets resized. Nothing drops out of place. Your main problem was not closing your <li> before you started a new one.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>useful urls</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #551100;
color: #ffffff;
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
font-weight: 900;
}
a:link {
color: #fff;
background-color: inherit;
text-decoration: none;
}
a:visited {
color: #ffff00;
background-color: inherit;
}
a:hover {
color: #ff0000;
background-color: inherit;
}
a:active {
color: #ffffff;
background-color: inherit;
}
a img {
border: 0;
}
#header h2 {
color: #ffffff;
background-color: #551100;
text-align: center;
padding: 6px;
}
#content1 {
width: 32&#37;;
float: left;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
margin-right: .64em;
text-align: left;
}
#content2 {
width: 32%;
float: right;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
}
#content3 {
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
margin-left:33%;
margin-right:33%;
}
.links {
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
padding: 9px;
margin-bottom: 9px;
border: 2px solid yellow;
color: #fff;
}
.links ul {
padding-left: 16px;
margin-left: 16px;
list-style:disc;
}
.links ul a {
text-decoration: none;
}
.links ul a:hover {
font-size: 140%;
font-family: "lucida bright", serif;
color: #0ff;
text-decoration:underline;
}
#valids {
margin: auto;
width: 180px;
}
li.nobullet, li.nobullet ul li {
list-style-type:none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
div.c1 {
margin-left: 2em;
}
</style>
<!--[if IE]>
<style type="text/css">
li.nobullet {
height:1%;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div id="body" class="clearfix">
<div id="header">
<h2>Useful urls from Frank's Den.<a href="http://www.exitfegs.co.uk/index.html">.</a></h2>
</div>
<div id="content1">
<div class="links">
<ul>
<li><a href="http://validator.w3.org/">W3 mark-up validator.</a></li>
<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><a href="http://webdesign.about.com/od/CSS/cascading_style_sheets.htm">Web Design /
cascading style sheets.</a></li>
<li><a href="http://www.imanthony.com/lesson1.php">I'm Anthony.&quot;An introduction to
CSS.&quot;</a></li>
<li class="nobullet">
<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics,
and Structure</a></li>
<li><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">What are
Semantics?</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>
<li><a href="http://blog.html.it/layoutgala/">CSS layout gala.</a></li>
</ul>
</li>
<li> <a href="http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/">6 Keys to Modern CSS-based Layouts</a></li>
<li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-FLOATS/">Simple
clearing of FLOATS by Alex Walker .</a></li>
<li><a href="http://www.positioniseverything.net/easyclearing.html">Clearing &quot;FLOATS&quot; the
old fashioned way.</a></li>
<li><a href="http://www.webreference.com/html/tutorial20/1.html#head-1">Tutorial 20: CSS
&quot;FLOATS&quot;, part 1.</a></li>
<li><a href="http://www.complexspiral.com/publications/containing-FLOATS/">Containing
FLOATS.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.digital-web.com/articles/web_design_101_FLOATS/">Digital Web
on &quot;FLOATS&quot;.</a></li>
<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>
</ul>
</li>
<li> <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS library</a></li>
<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.</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/seynormal/">The alternative to TABLES.</a></li>
<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>
</ul>
</li>
<li> <a href="http://CSScreator.com/">A Cascading Style Sheet learning resource.</a></li>
<li><a href="http://CSScreator.com/?q=divitis">DIVitis: what it is and how to cure
it.</a></li>
<li><a href="http://www.smashingmagazine.com/2007/01/19/53-CSS-techniques-you-couldnt-live-without">53
CSS-techniques you couldn't live without</a></li>
<li><a href="http://www.answersthatwork.com/downright_pages/boot_disks_and_boot_cds.htm">Useful Boot
disks.</a></li>
<li><a href="http://CSS-discuss.incutio.com/?page=classesvsids">Classes or id's?</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->
<div id="content2">
<div class="links">
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">W3 CSS validator.</a></li>
<li><a href="http://www.w3.org/tr/CSS21/cascade.html">Cascading, and Inheritance</a></li>
<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 class="nobullet">
<ul>
<li><a href=
"http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">Various BOX
LAYOUTS.</a></li>
<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://en.neuroticweb.com/recursos/CSS-rounded-box/">More ROUNDED
CORNERS.</a></li>
<li><a href="http://webdesign.about.com/od/CSS/a/aa072406.htm?nl=1">ROUNDED&nbsp;CORNERS
using CSS and no images.</a></li>
</ul>
</li>
<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
Huntinground - 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/">&quot;Ask Felgall.&quot; Free computer help.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://CSS.maxdesign.com.au/">MAX DESIGN - tutorials.</a></li>
<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">&quot;The Elder
G&quot; on Windws XP.</a></li>
<li><a href="http://litmusapp.com/CSSvista/">CSSVISTA. edit your CSS live in IE and
FFox.</a></li>
</ul>
</li>
<li> <a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/internet-explorer.shtml">various
IE BUGS and their solutions?</a></li>
<li><a href="http://www.softcomplex.com/products/tigra_menu/">TIGRA MENU is free
javascript menu.</a></li>
<li><a href="http://sperling.com/examples/menuh/">CSS horizontal DROP-DOWN MENU and
more.</a></li>
<li><a href="http://www.dynamicdrive.com/style/CSSlibrary/category/c2/">CSS library
VERTICAL CSS MENUSs</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>
<li><a href="http://www.alistapart.com/stories/doctype/">Fix your site with the right
DOCTYPE!</a></li>
<li><a href="http://www.htmldog.com/">HTML DOG, the web designer's resource.</a></li>
</ul>
</li>
<li><a href="http://www.templatesforfree.net/">TEMPLATES for free.</a></li>
<li><a href="http://www.wellstyled.com/CSS-nopreload-rollovers.html">CSS technique: fast
rollovers without preload.</a></li>
<li><a href="http://www.fiftyfoureleven.com/">Web development Weblog +
resources.</a></li>
<li><a href="http://www.answersthatwork.com/home_page.htm">ANSWERS that work - home
page.</a></li>
<li><a href="http://www.javascriptkit.com/">Javascript kit.</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->
<div id="content3">
<div class="links">
<ul>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/CSS-tricks.shtml">Ten more CSS
tricks you may not know</a></li>
<li><a href="http://www.ryanfait.com/">Sticky Footer. ryanfait.com</a></li>
<li><a href="http://www.htmldog.com/">HTML and CSS tutorials. and stuff.</a></li>
<li><a href="http://msdn2.microsoft.com/en-us/library/ms535153.aspx">VERTICAL
TEXT.</a></li>
<li><a href="http://www.ssi-developer.net/CSS/vertical-text.html">MORE VERTICAL TEXT.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://bonrouge.com/~disjointed_text">Disjointed Text - hover to
display.</a></li>
<li><a href="http://www.webmasterworld.com/forum83/4161.htm">Taking on IE BUGS
.</a></li>
<li><a href="http://www.satzansatz.de/CSSd/onhavinglayout">On having LAYOUT .</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-lists-menus-listings-tutorial.html">HTML code - HTML LISTS and MENUS.</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-form-forms-tutorial.html">HTML code - HTML forms.</a></li>
</ul>
</li>
<li> <a href="http://www.maxdesign.com.au/presentation/liquid/example13.htm">Liquid DIV insanity!.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/multiple-classes/">Using multiple classes within selectors. </a></li>
<li><a href="http://pmob.co.uk/temp/3colfixedtest_explained.htm">Three Columns Explained.</a></li>
<li><a href="http://www.alistapart.com/articles/holygrail">In Search of the Holy Grail.</a></li>
<li><a href="http://www.alistapart.com/articles/12lessonsCSSandstandards">Lessons for Those Afraid of CSS and Standards.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://css.maxdesign.com.au/floatutorial/">Floatutorial</a></li>
<li><a href="http://www.quirksmode.org/CSS/clearing.html">Clearing FLOATS </a></li>
<li><a href="http://www.positioniseverything.net/explorer.html">CSS BUGS found only in IE versions 5 and higher.</a></li>
<li><a href="http://www.elated.com/articles/CSS-FLOATS/">What are CSS FLOATS. What can you use them for? </a></li>
<li><a href="http://www.boutell.com/newfaq/creating/threecolumnlayout.html">How do I create a three-column CSS layout? </a></li>
</ul>
</li>
<li> <a href="http://webdesign.about.com/od/css/a/aa010702a.htm?nl=1">How to Add CSS Stylesheets to Your Web Pages.</a></li>
<li><a href="http://webdesign.about.com/od/colorcharts/l/bl_csscolors.htm?nl=1">Official CSS COLORS. </a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/ie7-commands.shtml">New CSS commands for Internet Explorer 7.</a></li>
<li><a href="http://www.javascriptkit.com/">Javascript Kit.</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Javascript Reference.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://nopeople.com/CSS/full-height-layout/">Full height Layout.</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end links1 -->
</div>
<!-- end content3 -->
<!-- end clearfix -->
<div class="c1"></div>
</body>
</html>

effpeetee
01-08-2008, 05:02 PM
Its validated. I removed excess CSS and I fixed a few IE bugs. I've also streamlined some of your CSS. For example you didn't need the bullet class because all you had to do was set the list style to the ul. Also some of your styles were repeating so I made them classes. I also got rid of the horizontal scrollbar. It also now doesn't require min-width. The links will just flow to the next line as the browser gets resized. Nothing drops out of place. Your main problem was not closing your <li> before you started a new one.

Now that is very good of you. My main trouble is with my sight as well as my lack of familiarity with css. I have four books on css, but none of them told me what to do when sub-dividing a large list. I shall take careful note of your coding for future use.

Again, many thanks.:thumbsup:

Frank.

EDIT: Ah! I see now. The <li> that I was not closing was the <li class = "nobullet"> I've learned more in this last post than three nights reading in bed.

bazz
01-08-2008, 07:43 PM
I've learned more in this last post than three nights reading in bed.

Frank, I could have that permanently as my sig. :rolleyes:

bazz

effpeetee
01-08-2008, 09:07 PM
Frank, I could have that permanently as my sig. :rolleyes:

bazz
Bazz,
You could do a lot worse.
Without the forum and the coders on it, my days would be very uninteresting.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum