Jump to content

Two solid line borders side by side


baldhippie

Recommended Posts

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;

}

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Wickham
Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

Guest
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.

Loading...
×
×
  • Create New...