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…
If you just had the line on the background the “buttons” should hide it as they will be on top of the line?
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…
You could use the :before pseudo class on each LI or anchor to draw that line to the left and/or right.
“draw” the line?
thank you…
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.)
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:
<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…
Yes, but we need to see what they will look like in those various scenarios to know how they need to be styled.
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.
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?
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…
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.
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.
Hi,
Here’s a rough mock up of how to do this for ie8+:
<!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>
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…
<!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>
Sorry
It’s useful to have two versions anyway as yours is fluid and mine was a fixed width demo