enimy6 Posted October 31, 2013 Share Posted October 31, 2013 (edited) I want to make a menu like this website has: http://www.h3ostudio.com/ 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 October 31, 2013 by enimy6 Link to comment Share on other sites More sharing options...
davej Posted November 1, 2013 Share Posted November 1, 2013 ??? <!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 comment Share on other sites More sharing options...
Hadien Posted November 1, 2013 Share Posted November 1, 2013 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now