Borders

Borders (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

swoosh -> Borders (5/31/2007 11:03:25)
Hey everyone, Dipping into some CSS for a menu, everything is working fine but here is my ordeal (hoping this can be done with what I have): I have a container and within it I have different Items which serve as hyperlinks, If I specify a bottom border to each Item it only applies it to the length of the item and not clear across the container to give it that separated button look. Is there any way that the bottom border can span across the width of the container instead of just the item in the container? Hope I explained this okay, if not let me know

rdouglass -> RE: Borders (5/31/2007 11:24:33)
It might be the 'long way' about it but I will frequently put those types of things inside individual DIV's and put a class on the DIV with 100% width and apply the border to that. Does that make sense? .myLinkDiv { width: 100%; border-bottom: 2px solid #000; } and <div name='container'> <div class='myLinkDiv'><a href='#'>myLink1</a></div> <div class='myLinkDiv'><a href='#'>myLink2</a></div> </div> At least something like that usually works for me. Hope it helps. EDIT: Oh, but you said a menu. That may not work inside a <ul>. What does your current code look like?

Tailslide -> RE: Borders (5/31/2007 11:30:47)
Or you can make the item display:block which will have the same effect without adding extra markup so you'd have <ul id="navlist"> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> </ul> CSS: #navlist li {display:block; border-bottom: 1px solid;} This can also be applied to the link within the list item rather than just the list item - List items used for the menu as that's my preference but it will work for most things.

rdouglass -> RE: Borders (5/31/2007 11:34:52)
[&o] I forgot all about 'block'...

swoosh -> RE: Borders (5/31/2007 11:44:15)

Here is my container and main Items........as you can see with the bolded portion, it only applies it to the width of the main item and not the width of the container. I guess I would have to start over and construct it differently from the replies here to get the effect that I want right? Pardon my ignorance in CSS

width:5.5em;
		padding:20px 10px;
		margin:0px;
		background-color:#bcae5c;
		border-width:2px;
		border-style:solid double;
		border-color:#04090a;

	}


	/*"""""""" (MAIN) Items""""""""*/	
	#qm0 a	
	{	
		padding:0px 15px 0px 0px;
		background-color:transparent;
		color:#ffffff;
		font-family:Arial;
		font-size:1em;
		text-decoration:none;
		font-weight:bold;
		border-width:3px 2px 1px;
		border-style:no 
                  border-bottom:1px solid #ffffff;

Tailslide -> RE: Borders (5/31/2007 11:50:07)
Apart from adding display:block, you've missed off the semi-colon after border-style:no so the rule following it might not be being interpreted properly.

swoosh -> RE: Borders (5/31/2007 11:54:17)
Hi Tail, ooops my bad. That was just a copy and paste error. In the actual code I have "none followed by the semi colon". I'll give the display block a whirl! Thanks so much for the time and assistance. Much appreciated

Page: [1]

4.736328E-02