baldhippie Posted March 25, 2009 Report Share Posted March 25, 2009 What is the code to change" border-right: 1px solid #000000;" into two solid border lines side by side with 5px space inbetween. #navigation { position: absolute; z-index: 1; width: 425px; padding-right:10px; padding-top: 0px; top: 40px; left: 1%; height:100%; border-right: 1px solid #000000; text-align:left; background-image:url(imagesNew/squareTileLighter.gif); background-repeat: repeat; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 25, 2009 Report Share Posted March 25, 2009 (edited) I've just tried this style:- .border3 { border-right: 7px double red; } with this markup:- The text is inside a div with class="border3" has a double border. I tried it with 5px, 7px, and 15px. I noticed that the width of the borders seems to be related to the space, so at 15px it seemed that the two borders and the space were all 5px wide, at 5px the borders seemed to be about 1px but at 7px in IE7 the outer border was slightly thicker than the inner border although Firefox seemed top show a wider space inside 1px borders. For a certain solution, place one div with a single border inside another div with a single border and a space between them created by margins. Edited March 25, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
LSW Posted March 25, 2009 Report Share Posted March 25, 2009 You always have to use extra space for double borders. If you want the borders to be 1 pixel, you have to define it as 3 pixels, 1 each for the lines and one for the space between, that always has to be included. 4 pixels gives you 1 pixel lines and a two pixel space. If it can be divided by three, then it spreads it equally I believe... like the above 15 pixels, 5 each. Quote Link to comment Share on other sites More sharing options...
baldhippie Posted March 27, 2009 Author Report Share Posted March 27, 2009 Using the template that's in the resources folder that comes with Killersites basic web design tutorial video. Tried LSW solution with Wickham code. Doesn't work. The thickness of the borders increases when the space in between the borders increases. These borders seperate the left side navigation from the right side of the page. Doesn't look good. Need two borders 1 px wide side by side with a few pixels space in between to look better than the single border. Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 27, 2009 Report Share Posted March 27, 2009 (edited) I used the method in my last sentence in my post above:- CSS:- .border4 { width: 400px; border-right: 1px solid red; padding-right: 15px; background-color: #eee; } .border4a { width: 400px; border-right: 1px solid green; background-color: #ccc; } HTML markup:- The text is inside a p tag which is inside a div and both have a single right border. It creates a dark gray p tag with a green right border, a space of 15px which has the light gray background-color and a red right border. I don't know how it will work when added to your code, but it does produce two 1px right borders separated by a 15px space when used in isolation. Edit: I used 15px for the space to make it obvious, edit the padding-right to 5px if you want a 5px space. Edited March 27, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.