SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    styling separators

    I'm trying to make the separators for these tabs look good but I am miserably failing, I'd love some tips

    ( the tabs that say article 1, article 2, some pics, important notice, events. I'm currently using and image for the following:

    Code:
    #featured-nav li {
    background: url(images/purple/featured-li-bg.png) no-repeat 1px bottom;
    }
    
    #featured-nav {
    background: url(images/purple/featured-separator.png) no-repeat right 3px;
    }
    here is the site: http://www.at-tayyibaat.net/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,
    I'm trying to make the separators for these tabs look good but I am miserably failing, I'd love some tips
    Hmm it all depends by what you mean by "look good"

    I can't see anything wrong as such so are you asking a design related question about appearance rather than a css code question?

    If there is a bug/problem then we'd need to know how you want it to look. If the question is that you want it to look better then that's a design question but we'd still need to know what you don't like about the current version or what you are aiming for?

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yes it's a design thing. I'm not sure what is wrong with it but I think it needs something to make it look professional. To me it just looks like some lines but I don't know exactly how to make it right.
    How would you do it?

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

    I would probably try for a clearer separation between elements and try to make the active tab lead into the article a bit better.

    Something very roughly like this (but you should get the idea):

    Code:
    #featured-nav {
    	padding:4px 0;
    	height:379px;
    	overflow:hidden
    }
    #featured-nav li {
    	background:none;
    	border-bottom:1px solid #000;
    	border-right:5px solid #000;
    	padding:0;
    }
    #featured-nav li a { padding: 21px 10px 20px 20px; }
    #featured-nav li:last-child { border-bottom:none }
    #featured-nav li.active { border-right:none; }
    #featured-nav li.active a {
    	border:2px solid #000;
    	border-right:none;
    	padding: 19px 10px 18px 18px;
    }
    The above code is over-rides so bookmark css terminal and then you can simply paste the code into the css terminal window and it over-rides the live code so you can see what it looks like. It's very useful for testing things out on a live site without changing the actual code.

    (Bear in mind I'm not a designer as such so not the best person to ask )

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yep I see, it's thinker, looks much better already, I'll work on that. Thanks for the tips


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
  •