Nov 8, 2009

Unordered List Css Layout - two rows of list and sublist

free web hosting
Open Discussion > MODERATED AREA > Computers > Programming Languages > CSS (Cascading Style Sheets)

Unordered List Css Layout - two rows of list and sublist

Lozbo
I have a layout which i want to do fully in CSS.

Im having trouble centering the second list, or sublist which comes from the menu. It doesnt work in IE now, just firefox (Actually the page doesnt even show on IE, nor Opera, i dont know why). I just want it to appear centered, when im hovering the main list, not left aligned...

Here's the link, youll understand when you see it...

http://web.cucea.udg.mx/cucea/graphix/level5/

I also want to fix the background, (i removed the background for now) becouse when i hover the sublist items, the background becomes bigger than the div which serves as background after the main list (the sub list is absolutely positioned, but i saw it in a tutorial i think im giving the right use to it, although the layout kinda breaks a little bit when you make the text bigger).

Thanks.

Comment/Reply (w/o sign-up)

Tyssen
QUOTE(Lozbo @ Dec 7 2005, 10:18 AM)
Actually the page doesnt even show on IE, nor Opera, i dont know why).

It's the HTML comment in your JS (<!--) that's killing it in IE. As for why your 2nd level list isn't working, I'm not sure, but you're referencing the wrong ID in your JS - it should be navlist, not nav (but that doesn't fix it).

Comment/Reply (w/o sign-up)

jlhaslip
Lozbo,

One of the concerns that has been mentioned time and time again about Javascript is that there is a large (and getting larger) number of users who have disabled javascript, but still you insist on using it.
If you insist on using it, take notice of the approach taken by this author. He uses Javascript to HIDE the menu, and then display it on mouse-over. If someone has their javascript un-plugged, they will still see the entire range of menu choices on page load. It is only if they have javascript that the menu dropdowns are taken away.

http://tutorials.alsacreations.com/deroulant/

I think this link originally came from Tyssen. Can't remember for sure.

Comment/Reply (w/o sign-up)

Tyssen
QUOTE(jlhaslip @ Dec 7 2005, 11:49 AM)
One of the concerns that has been mentioned time and time again about Javascript is that there is a large (and getting larger) number of users who have disabled javascript, but still you insist on using it.

Actually Jim, using javascript is the only way to get these type of CSS dropdown menus working for IE browsers as they don't (as yet - IE7 might be different) support hover for any element other than the pseudo classes. (It's still a better option that a DHTML menu which is made up solely of javascript.) The other option is to use something like the whatever:hover, but again, it is affected if JS is turned off.
The solution is to make the links that bring up the dropdown menus go to an actual page as well where the submenu links can be accessed by those who can't see the dropdowns.
And no, I didn't provide that link you've given. wink.gif

 

 

 


Comment/Reply (w/o sign-up)

Lozbo
Well in the first place, that javascript is not at use, all i want is to show the layout in firefox as desired, ill deal with the js later, but thanx for that tip tyssen (about the html comment, i must have missed it, becouse it was working fine in firefox).

But yes, i was about to say that, tyssen is right about the css menu, the only way to get it done is with js, the alternative could be flash but im reluctant to use it, there are bigger issues about flash than with js and i dont mind much about the people with javascript disabled, see, the people that use this site 98.57 percent has it enabled so... (statistics from google analytics, from november 19 to date: 109,440 do have it, against 1,588 which is 1.43 %, on a site that has over 8000 visitors a day).

As i said, my main concern is about the css look and layout, how could i achieve that? (center the second row and maybe improve its rollover status)...

Thanks again dudes!

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : unordered, list, css, layout, rows, list, sublist

  1. Fixed Centred Layout
    Learn how to code that popular Centred/Fixed width layout... (2)
  2. Css Layout Help
    need help with my layout (8)
    http://billy61.trap17.com/divs/modulemaker.php i am rewriting my layout in divs instead of
    tables. the problem i have, is i need the divs with the "L" and "R" in them to extend all the way
    down to the bottom of the "content" div. also, what do i need to do to center the entire thing on
    the webpage? and it appears as though the top center div extends down into the middle div by
    like... maybe 5 px... is this just an illusion or is it really happening? this is the source html
    for the page: CODE "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml....
  3. [problem] Css Unordered List Display Problems Ie6 Bug
    Making unordered list under unordered list couses some padding to appe (2)
    I just started designing something that i thought is gonna be a really simple xHTML strict template.
    Everything is right except that i thought of using unordered list, some other list under that list.
    Well this is the code for the Menu that is cousing me problems CODE               List1
             List2                                    List 2 Sublist                 
                                                  This is really long text that explains a bunch of
    nothing3                          This is really long text that explains a bunch of nothing2 ....
  4. Lists, Unordered And Nested
    some layout tricks (2)
    Unordered lists are one of the three list types in (x)html. The others are Ordered Lists and
    Definiton Lists. The w3c page of information about lists is here They all behave the same as
    (x)html elements, but there are some differences between them. Read the Specification page linked
    above to know more that you need to know about them. Only difference between html4 and xhtml is the
    tags must be lower-case and closed for xhtml to be valid. Ordered Lists have numbers preceding
    them. Paste the following code into a file and display it in your Browser to see the eff....
  5. Help Fix My Site's Css/layout Issues
    Thanks for your time (9)
    The first issue has been resolved. Please goto Post #7 to see the current discussion.
    This is in reference to: http://facesofwar.org/cms/ When you load the page up in Firefox it
    works fine. But when you use I.E. it creates a nasty line break after each of the spans containing
    a dividing line. The relevant html is: CODE
    Home    Iraq    Alt.
    Media    Other    Contact And the relevant css (for
    1280 resolutions) is: CODE .menuOuter {     width: 100%;    ....
  6. Basic Css Layout Issue
    Floated Cell with similar height (5)
    Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem being I
    don't know how to make a floated cell be the same height as another. FOr example CODE
    just some stuff over here! but... over here I have even more stuff to display
    now If I float the left to the left and the right to the right and set ther widths so that they
    will be beside eachother the left div is shorter then the right, which makes sense because there is
    more content in the right. I want to know how to make them the same heigh....
  7. Css Layout: Trouble With Ie
    the scrollbar and margin-bottom (4)
    I have a site which I'm developping and trying to get a frames-like layout design. But IE does
    not propperly show the scrollbox, its hidden behind the fixed divs of the top header and the bottom
    footer... Firefox does alright, so If you dont understand what I mean you can check it out here:
    http://web.cucea.udg.mx/ineser/alap/test.php Seems like Opera and Safari are doing also good...
    And also, the margin of #content (which is the main content area) is not working, becouse it does
    not go up above the footer, I don't know what is going on (that rule is ins....
  8. Moving Ads With Css Layout On Free Hosting
    CSS help (7)
    Can anyone help me how to move top banner from free host? I hear that can be done with css!....
  9. Css Layout Generator - *free*
    Generate a CSS layout for your site (8)
    pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
    alt='smile.gif' /> and it's freely available online.
    http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
    structural elements your site requires (header, footer, columns). Then specify a size in the field
    provided and choose a background color from the color chooser below. The color chooser changes
    values as you move your mouse along a row. To set a value click on the color row to release click
    again. Once the color in the box is th....
  10. Css How To Use It?
    how do you use it to make a custom layout 4 website? (3)
    how you make a custom layout and what is the coding and stuff?....
  11. Css Files, Get Your Css Files Here! [resolved]
    Want a nice CSS layout? (0)
    Alright, if anybody wants a CSS layout; I'll make one for you! Just tell me what you want the
    background color to be, main font color, and the link colors! Then later in the topic I'll post
    them and I'll post the username of the user that requested next to them so you know which one is
    yours! So if anyone wants a CSS File; Ask Mike! >_>....

    1. Looking for unordered, list, css, layout, rows, list, sublist

Searching Video's for unordered, list, css, layout, rows, list, sublist
See Also,
advertisement


Unordered List Css Layout - two rows of list and sublist

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com