|
| |
|
|
swoosh
Posts: 1428
Joined: 5/18/2002
From: Beaver Falls, PA
Status: offline
 |
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
_____________________________
Swoooosh
Just Do It!
|
|
|
|
rdouglass
Posts: 9167
From: Biddeford, ME USA
Status: offline
|
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?
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 5/31/2007 11:40:41 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
swoosh
Posts: 1428
Joined: 5/18/2002
From: Beaver Falls, PA
Status: offline
|
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;
_____________________________
Swoooosh
Just Do It!
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
swoosh
Posts: 1428
Joined: 5/18/2002
From: Beaver Falls, PA
Status: offline
|
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
_____________________________
Swoooosh
Just Do It!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I forgot all about 'block'...
