SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS slightly wrong a couple of tips please

    I have been helping out one of the best caricKATusrists in the UK swapping some cartoons for some web help and seo and I just tried adding the Google type top bar on the index page (the rest is just WP on suffusion theme)

    But I have some sort of conflict going on with the original CSS for the page and the Google top nav CSS

    The fault makes it display funny and also the display text in the top bar wasn't the blue of the rest of the page so what is that conflicting with the top nav CSS?

    Any pointers please? The thing is here

    Oh and check out my friend JP's art while you take a look as it is absolutely brilliant (Image 4 in the slide is of my own DTTeds characters btw).

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It just looks like the 60px width per <li> in that list is causing the text to break and the overflow:hidden is cutting it off at the 45px height. Why not just remove the 60px width and let the <li>s naturally expand?

  3. #3
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    It just looks like the 60px width per <li> in that list is causing the text to break and the overflow:hidden is cutting it off at the 45px height. Why not just remove the 60px width and let the <li>s naturally expand?
    excellent thanks sdt76 I hand't spotted that tbh

    I now have a different prob though as it is still displaying a bit weird RE the lines coming down form the menus.

  4. #4
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scrub that I fixed the second bit it was a height attribute

    Is it possible to sort of float this menu centre does anyone know? I was under the impression that even if used as centre instead of left it will still break in many places (browsers I mean) anyone know?

  5. #5
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in fact scrub that that breaks the slide menu nav display hmm how do I split those so I can keep the width and height attributes with the 60 in as b4 but make it display fluid/full width/elastic or whatever its called for the top nav?

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrFlicks View Post
    scrub that I fixed the second bit it was a height attribute

    Is it possible to sort of float this menu centre does anyone know? I was under the impression that even if used as centre instead of left it will still break in many places (browsers I mean) anyone know?
    I'm not sure why it would break. Usually centering is done by having a set width for the element and then adding margin:auto (or auto on the left and right) to it.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrFlicks View Post
    in fact scrub that that breaks the slide menu nav display hmm how do I split those so I can keep the width and height attributes with the 60 in as b4 but make it display fluid/full width/elastic or whatever its called for the top nav?
    I don't see a slide navigation, but it sounds like, if you are trying to have a width of 60px for one navigation, and a separate width with elasticity for your global navigation, you would need to separate the navigation classes and define the <li> elements separately. Not sure if I am understanding what you want correctly.

  8. #8
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sdt76 I have solved that float problem with the display text as it did look better once I tried what you said about the 60px thing above

    However I had to change it back as the 60px thing and the height thing I changed afterwards makes the display of the nav under the slide go wrong.

    In other words changing the width and height of the .li changes it for both the top nav and the slide nav which doesn't work as the top nav worked wiht a fluid or let it have no set width and a 30px height setting but I need to work out how to do that just for the top nav

    I think I need to add a second set of li is that right? and rename the top nav li accordingly in the htm page is that right? if so how is the best way to do that?

  9. #9
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm if I change the top nav menu css to menu1 do I change all the items called menu or just the first one 1

    would that work? If I change the top nav menu div to menu1 in the htm page of course.

  10. #10
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I see what you are saying now. Yes, you need to have two unique classes/IDs in which you define the <li> properties and values differently. Having both navigations share the same rule is what is messing it all up.

    So you would have something like: .globalnav ul li {} and for the slide menu you would have .slidemenu ul li {}

    Then you define the styles for each separately, and add the 60px width the the slidemenu class, and keep it out of the globalnav class.

  11. #11
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh so simply changing the top nav menu items to menu1 won't work then? Would it if I changed the li to li1 etc to or do I have to write something else?

  12. #12
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind I sussed it I just called all the ul and li in the top nav ul1 and li1 and it works so that will do I guess

  13. #13
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you change to "menu1" it would make it unique, but semantically, what does menu1 mean? It seems less clear exactly what it is. If you call it something like "globalnav" I know what it pertains to just by looking at it. for the <li> question, you can't make it "menu ul li1 {}" because there is no such element in HTML called li1. To do that you would have to name a class ".li1" and attach it to the <li> element like this <li class="li1">

  14. #14
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that must be what I have done then sdt76 as it works

    I don't really know how to do what you just said as things are set up with two style sheets tbh

    not ideal what I have done though as I have no clue how to set the top ul li height to 30px so it looks nicer on the hover over (in the top nav I mean)


Bookmarks

Posting Permissions

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