SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    adding circles w/psuedo selectors wacks menu out of place.

    Code:
    .navbar .menu >li>a {
    float: none;
    padding: 10px 17px 10px 0px;
    color: #fff;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration: none;
    text-shadow: 0 0px 0 #fff;
    }
    .navbar .menu >li>a::before {
    content: "";
    display: block;
    height: 5px;
    width: 5px;  
    background: silver; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin:0px;
    padding:0px;
    }
    once i add the pseudo selectors the entire menu shifts down. Just add more padding to the li>a?

  2. #2
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    The key is consistency, your selectors should only be formating positioning if they're expanding or hiding it for some reason and doing that in excess tends to cause conflicts and problems much like this in spades.
    Attached Images Attached Images

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Just add more padding to the li>a?
    No, I'd say change display: block on the pseudo element to display: inline-block. Block display means that it must force the rest of the link down to a new line.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ralph thank you!
    genious as always. that worked.
    http://cdiwwwtest.cdicorp.com/engineering
    was wondering if a bulleted list would be better but for some reason (bootstrap) we didn't get it. I thought i'd try the pseudo & it may turn out better? I am going to try to lift it up a bit, going to try line-height?
    Belsnickle. Thank you for your suggestion as well. thought i found it a bit cryptic.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also i could use the ::before to add an background image as well...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm not quite clear on what you are trying to do. Could you clarify a bit?

  7. #7
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally you want to assign your positioning elements to an element level that the links are included in (so say .navbar .menu >li) and then only assign attributes that are changing between the the selector states in the child or selector attributes. That basically stops jumping elements in most cases becuase your positioning doesn't change between states and it keeps your css clean and concise while minimizing potential conflicts.

    Specifically inheriting attributes that are default inherited is prefered if you expect you're going to need state specific modifications to them that way it will apply to all the various iterations.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes sure. sorry. I want to raise the circle at midpoint. I tried positioning w/relative & absolute & line height.
    so far...not there yet.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you want the bullet points there, rather than use ::before, just use the default UL bullets. You can set their distance from the text easily with CSS. Or you can remove the bullets and place a background image on the LIs to create a custom bullet if you don't want the regular bullet. Either way, ::before is not needed.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    732
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yep. for whatever reason we didn't get around some of the settings yet. so i put the ::before as a way around it. I ll go back tomorrow and see if I can find where to enable the bullet bit.

  11. #11
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also regarding your site, you know you can do a position offset for where the background starts now right?

    http://tanalin.com/en/blog/2011/09/c...ound-position/

    It's supported in all major modern browsers. That way your background doesn't start chopped off by the header and end with a bunch of uncovered area near the footer.

    I also am not sure what you're trying to do at this point but as far as my previous comment, if you view the webpage in console you'll usually be able to get a pretty good idea of what elements are being modified by what css that you may or may not be intending and what elements are being subjected to repeated css assignments of the same type (wordpress, which you're using, can be particularly bad at that so it's probably a good second step in diagnosing your problems, the first as always being running a validator.)


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
  •