Jump to content

Question about border: stretching it to content?

Recommended Posts

I want to make a menu like this website has:



I have

nav a{	text-decoration:none;	color:#B90000;	font-weight:500;	text-align:left;	border-bottom:1px solid #099;	padding-right:250px;	padding-left:25px;}

but it just drags every border under every word 250 pixels to the right.. I want them to 'stop' at.. the end of the menu?


also, while I'm asking this question, how do I make the border like they have on this website? it's like, black-gray-ish.. how do I style my border like that? or does anyone know where I can find 'proper' styling tutorials for borders? or have they used an image for the border; if so how do I do that?


sorry I'm rather new to this, and thank you in advance!

Edited by enimy6
Link to post
Share on other sites


<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>slide menu</title><style> ul li a{display:block;text-decoration:none;text-align:right;width:30px;height:1.5em;transition-property: width;transition-duration: 0.5s;-webkit-transition-property: width; /* Safari */-webkit-transition-duration: 0.5s; /* Safari */}ul li{list-style-type:none;padding:0;margin:0;}ul li a:hover{width:60px;}</style></head><body><ul><li><a href="#">Click1</a></li><li><a href="#">Click2</a></li><li><a href="#">Click3</a></li></ul><p>Note: This example does not work in IE9 and earlier.</p></body></html>
Link to post
Share on other sites

think of an element divided into multiple boxes inside other boxes. the inner-most box contains all the content (the text and other elements that inside the element you're looking at in question). This content box is inside the padding box. the padding box is merely spacing inbetween the inside content and the border. the next box is ofcourse the border itself. and the last, outer-most box is the margin, which is used to determine spacing from its border and its siblings' margin boundary and parent's content boundary...


the reason your border isn't stopping right under your text is due to you using padding-right instead of margin-right. as for the border styling, that website is using their own special image to draw their border. the closest in-built border you could use is the dotted style:


border-bottom:1px dotted #099;
you could also use dashed style too, but to match that sites border, you need make an image.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...