ansaurus

Question

Answer 1

+1 A:

could probably do with seeing the surrounding markup to understand what elements you have in place. You could try having a surrounding div with margin: 0 auto;

You're probably going to need a surrounding div for each level.

John Polling 2008-11-28 15:44:22

Answer 2

A:

Don't waste your time just go here:

http://www.cssmenubuilder.com/build-breadcrumb-menu

DrG 2008-11-28 15:48:20

Answer 3

A:

Thanks for the prompt responses. I'll try out what you are suggesting.

I'm currently trying to do this using a list, although I also got nowhere with divs.

I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.

The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.

I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.

<html>
<body>

<STYLE>
#nav, #nav ul {
    list-style: none;
    margin: 0px;
    width: 700px;
}

#nav li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    background-image: url(/lookandfeel/images/navMenuDiv.gif);
    background-repeat: repeat-x;
}

li#ending {
    background-image: url(/lookandfeel/images/navMenuRight.gif);
    background-repeat: no-repeat;
}

li#start {
    background-image: url(/lookandfeel/images/navMenuLeft.gif);
    background-repeat: no-repeat;
}

.navigation a {
  background-image: url(/pdr/images/navigation.gif);
}
</STYLE>

<ul id="nav" style="width: 100%;border: 1px solid">
  <li id="start" />
  <LI >
    <SPAN class="navigation" >AAAAAAAAAA</SPAN>
  </li>
  <LI >
     <SPAN class=navigation >BBBB</SPAN>
  </li>
  <LI >
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>DDDDDDDDD</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>EEEEEEEE</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
  </li>
  <li>
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
  </LI>
  <li id="ending" />
  </ul>
</body>
</html>

A_M 2008-11-28 16:11:35

Answer 4

A:

Setting the li elements to display: inline, and giving the ul a text-align: justify property will get you part way there (in FFX3 and IE7 at least). However, it does raise some complications when applying the background images.

AaronSieb 2008-11-28 16:28:39

Answer 5

+1 A:

just a couple of other pointers. You should not have empty li tags, that is not semantically correct. Also in an ideal world you should [not give id attributes layout names].[1]

Personally I'd place the starting image on the ul and then place the closing image on the last li.

John Polling 2008-11-28 20:52:51

Answer 6

A:

As much as I dislike to say things can't be done, I think I have to agree with @johnners on the surrounding element for each navigation level. Even if you were to use table layout CSS you would need some sort of surrounding element for each 'row' in order to get the spacing on the left and right correct.

Bryan 2008-12-09 09:51:51

ansaurus

tags:

views:

answers:

How to make floating divs fill up space

related questions