SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Tab for My Nav

  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Tab for My Nav

    Hey Guys,

    So just launched this site...

    http://www.lowerys.com/scribbles/

    Was wondering I have a sidenav that slides out but can't tell its a nav. I would like to have a Menu title table hanging out a bit so people know to rollover and text to bevertical on it, would like it up at the top where the first grey box is, whats best way I can accomplish this. How can it be done with current sidenav.

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As a rough start you could do something like this:

    Code:
    .navbar li.icon{position:relative}
    
    .navbar li.icon:after{
    content:"M E N U ";
    display:block;
    width:15px;
    height:60px;
    background:red;
    border:1px solid #000;
    position:absolute;
    top:0;
    right:-16px;
    padding:10px 0 10px;
    }

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, definetly a start, is there any way to rotate the text instead of having it stacked? I hope you know what I mean and also to have the tab that sticks out the whole height of the top grey square, which changes when browser is rezied.

    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can find out how to rotate text from the links below.

    http://snook.ca/archives/html_and_css/css-text-rotation
    http://www.thecssninja.com/css/real-...ation-with-css

    It can be tricky to get right as you have to do strange things for old IE versions.

    You can match the height of the element by using top and bottom instead of height.

    e.g.
    Code:
    .navbar li.icon{position:relative}
    
    .navbar li.icon:after{
    content:"M E N U ";
    display:block;
    width:15px;
    height:auto;
    background:red;
    border:1px solid #000;
    position:absolute;
    top:0;
    bottom:0px;
    right:-16px;
    padding:10px 0 10px;
    }
    However, I'm not sure how that is going to pan out with the text rotation. You may have to use a real element instead of a pseudo element and then use an inner element to transform the text.

    Have a play around and see what happens

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ,

    Apparently the site doesnt work well in IE8, how can I resolve this issue, I'm not sure what is wrong with it as I dont have IE8.

    Thanks,

    Mike

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post

    Apparently the site doesnt work well in IE8, how can I resolve this issue,
    You can resolve it by not using properties that IE8 doesn't understand. If you are going to use the latest css3 properties then you either have to forget about older browsers like IE8 or supply a fallback. You are using things like background-size:cover which ie8 doesn't understand and therefore won't shrink or enlarge images as required. You should supply smaller fixed sized images to ie8 via conditional comments or a suitable fallback method.

    There is no quick solution as its something you need to build in from the ground up but when I looked at the page in IE8 it mainly seemed to be the menu images down the side of the page that were messed up for the reasons I mentioned above. You should create a fixed width and height version for IE8 with suitable images.


    I'm not sure what is wrong with it as I dont have IE8.

    Thanks,

    Mike
    Hi,

    If you have IE9 (or 10) on windows you can use the f12 developer tools and select ie8 mode for testing. It's not very accurate but gives you a rough idea. I use ietester for a more exact rendering but ietester is pretty unstable but crashes quite often but you can start it up again without much harm.

    If you have a Mac system then you can purchase "parallels" and run windows on it for testing.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Apparently the site doesnt work well in IE8, how can I resolve this issue, I'm not sure what is wrong with it as I dont have IE8.
    Mike
    Mike, it sounds like you are not here for guidance, you want an IE8 plug-n-play resolution.

    Here's a different approach instead: Use a background-image that displays "MENU" the way you want it and put it in the container that Paul gave you instead of trying to make cutting edge CSS3 properties that IE8 does not recognize work with IE8. Can you work with the background-mage approach?


    Some thoughts....

    As a web site designer, if you must support IE8 compatibility, take responsiblility for equipping yourself to achieve it:

    Install Windows XP Pro on another PC or another hard drive. It will install IE8. If you require IE8 compatibility, a PC running IE8 must be a primary resource, not an afterthought. The site should be tested frequently in IE8 as it is being developed.

    Alternatively, you can test your code using any of several browser testing services on the internet... some are free.

    Become very familiar with third party IE8 fixes... shivs and the like.

    Do not expect cutting edge CSS3 code to work in IE8. Some doesn't work in IE9, either. Be prepared to accept compromises and advise your clients accordingly.


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
  •