SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    my gosh, how do I style this... yikes...

    from mockup:

    http://www.mayacove.com/dev/links.gif

    any ideas on how I can best style this, with those lines running across? oh brother....

    thank you....

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,394
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    If you just had the line on the background the "buttons" should hide it as they will be on top of the line?

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you for your response...

    well, here's prob...
    http://www.mayacove.com/dev/nav.jpg

    can't give those li's or a's a bg-color because other bg- has to show thru..
    (you can't see it too well, but you can see there's a bg behind the nav, right? the nav is contained inside #wrapper, which has the bg-img...)
    so how on earth can I solve this?

    thank you.....

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You could use the :before pseudo class on each LI or anchor to draw that line to the left and/or right.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    "draw" the line?

    thank you.....

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Firstly, explain how this will work. We need to see what the links will look like without one highlighted, what they look like on hover etc. (Static images are not enough on elements that change.)

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually, I was under wrong impression...

    they're actually not links... they just need to get highlighted on certain events (they're breadcrumbs, I guess...) so now my markup is:

    Code:
    <ul id="top_nav">
    	<li>1. PICK A DATE</li><li>2. SPECIFY DETAILS</li><li>3. GUEST LIST</li><li class="last">4. SELECT WINE AND SPIRITS</li>
    </ul>
    thank you...

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    they just need to get highlighted on certain events
    Yes, but we need to see what they will look like in those various scenarios to know how they need to be styled.

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    like this....

    http://www.mayacove.com/dev/links.gif

    thank you....

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by maya90 View Post
    like this....

    http://www.mayacove.com/dev/links.gif

    thank you....
    This is another image. Do you have any code that shows how the links should work? If so, we can help you iron out the bugs in the styles.

    If you can post a working page that demonstrates the issue, we will be happy to work with that. Otherwise, a link to the site will do.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    like this....
    Ah, I see ... So that first link will always have a black background, no matter what, and the other links won't change appearance under any circumstances?

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    no.... as you navigate betw diff. sections diff elements on that "breadcrumbs" thing will get highlighted.......

    (but this thing is not a nav, it's just to show "where you are"......;-)

    thank you...

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    no.... as you navigate betw diff. sections diff elements on that "breadcrumbs" thing will get highlighted...
    Ok, that's what I was trying to prompt you to indicate before. So we need to see what these states will look like, so that we can work out what to do with the line under the various circumstances.

  14. #14
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Ralph...

    here's one with another one highlighted...
    http://mayacove.com/dev/links2.jpg

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The second link, when highlighted, has less padding that the first, so there's an inconsistency there. That would be good to sort out first.

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

    Here's a rough mock up of how to do this for ie8+:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background:#252525;
    	color:#fff;
    }
    .steps {
    	list-style:none;
    	margin:0 auto 50px;
    	padding:18px 30px;
    	line-height:1.2;
    	font-size:88%;
    	width:900px;
    	background:#b9b9b9;
    }
    .steps:after {
    	content:".";
    	display:block;
    	clear:both;
    	height:0;
    	visibility:hidden;
    }
    .steps li, .steps a {
    	float:left;
    	color:#666;
    	text-decoration:none;
    	text-transform:uppercase;
    	position:relative;
    	overflow:hidden;
    }
    .steps li { padding:0px 80px 0 5px }
    .steps li a { padding:.75em 5px }
    .steps a:visited { color:#999 }
    .steps li:after {
    	content:" ";
    	position:absolute;
    	top:1.4em;
    	width:999em;
    	border-top:1px solid #999;
    	margin-left:10px;
    }
    .steps li:last-child { padding-right:25px; }
    .steps li:last-child:after { display:none }
    .steps li.last { padding-right:25px; }/* ie8*/
    .steps li.last:after { display:none }/* ie8*/
    
    .steps li.active a {
    	padding:.75em 25px;
    	background:#000;
    }
    </style>
    </head>
    
    <body>
    <ol class="steps">
    		<li class="active"><a href="#">1.Pick a Date</a></li>
    		<li><a href="#">2.Specify Details</a></li>
    		<li><a href="#">3.Guest List</a></li>
    		<li class="last"><a href="#">4.Select Wine and Sprits</a></li>
    </ol>
    <ol class="steps">
    		<li><a href="#">1.Pick a Date</a></li>
    		<li class="active"><a href="#">2.Specify Details</a></li>
    		<li><a href="#">3.Guest List</a></li>
    		<li class="last"><a href="#">4.Select Wine and Sprits</a></li>
    </ol>
    <ol class="steps">
    		<li><a href="#">1.Pick a Date</a></li>
    		<li><a href="#">2.Specify Details</a></li>
    		<li class="active"><a href="#">3.Guest List</a></li>
    		<li class="last"><a href="#">4.Select Wine and Sprits</a></li>
    </ol>
    <ol class="steps">
    		<li><a href="#">1.Pick a Date</a></li>
    		<li><a href="#">2.Specify Details</a></li>
    		<li><a href="#">3.Guest List</a></li>
    		<li class="active last"><a href="#">4.Select Wine and Sprits</a></li>
    </ol>
    </body>
    </html>

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    ninja'd by Paul.

    I'll post this anyway just to show I made an effort. A breadcrumb trail without nav behaviors doesn't seem very practical, but that's what was requested, so...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <meta name="viewport" content="width=device-width">
        <title>template</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1163217-my-gosh-how-do-I-style-this-yikes
    Thread: my gosh, how do I style this... yikes...
    2013.08.11 16:06
    maya90
    -->
        <style type="text/css">
    
    body {
        background:#222;
        text-align:center;
    }
    ul {
        list-style:none;
        background-color:#bbb;
        background-image:url('yourchoice');
        overflow:hidden;
        display:inline-block;    /* use {display:table} if {margin:0 auto} is a "must" */
        vertical-align:middle;
        padding:8px 20px;
        margin:400px 0 0;    /* TEMP margin-top */
    }
    li {
        display:inline-block;
    }
    li + li:before {
        content:"";
        width:30px;
        border-top:1px solid #555;
        display:inline-block;
        vertical-align:middle;
    }
    p {
        display:inline-block;
        border:1px solid transparent;
        color:#555;
        font-size:.8em;
        text-transform:uppercase;
        padding:.9em .75em;
        margin:0 2px;;
    }
    
    /* :hover is for demo only.  In practice, apply these styles by targeting the p id with JavaScript, or whatever nav method is being used. */
    p:hover {
        border:1px solid #555;
        background-color:#222;
        color:#999;
    }
    
        </style>
    </head>
    <body>
    
    <ul id="top_nav">
    	<li><p id="date">1. PICK A DATE</p></li><!--
     --><li><p id="details">2. SPECIFY DETAILS</p></li><!--
     --><li><p id=guests">3. GUEST LIST</p></li><!--
     --><li><p id="bevs">4. SELECT WINE AND SPIRITS</p></li>
    </ul>
    
    </body>
    </html>

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    ninja'd by Paul.
    Sorry

    It's useful to have two versions anyway as yours is fluid and mine was a fixed width demo


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
  •