I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>
Related
I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.
I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color).
Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.
I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.
Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/
Add -
#outer {
overflow: hidden;
}
and it will work.
More information on the overflow property can be found on MDN.
Use this:
#outer { overflow: hidden; }
or this:
#inner1 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
Or you maybe can try this:
#outer div:first {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
(Note: I haven't tested the last option above).
here is the update jsfiddle
http://jsfiddle.net/V98h7/1/
To just round border corners border-radius can take 4 values TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS
so border-radius: 20px 20px 0 0; will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.
Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
This reference was found here http://css3please.com/
by https://stackoverflow.com/a/7052769/9071880
Try giving the container div a slightly larger border radius (on the top two corners) than the header div.
I have a div that contains some text and the div has a background color. I would like a border around the div but I would like it so that there is 1px of white between the div and the border on all sides. Is this possible?
I've tried to use border: 3px double #000; but unfortunately this did not have the desired effect. The border ended up inside the div and the space between the two borders was the same colour as the background of the div.
I hope I have explained my query clearly. Thanks in advance for any help.
You can achieve this by using the CSS3 box-shadow property and setting the spread and blur to low values. Check it out at http://www.sitepoint.com/css3-multiple-borders/
I'd recommend going with the css3 technique but if you do need to support older browsers such as ie8/7/6 then just have a div wrapped around another element.
.box {border:1px solid red;}
.box > div {padding:2px;}
<div class="box">
<div>Hello</div>
</div>
How about wrapping the div within antoher div? Something like...
<div style='background-color: white; padding: 1px; border: 1px solid black;'>
<div style='background-color: yellow;'>my text stuff goes here</div>
</div>
if you have to support only modern browser you can use CSS3 and define multiple borders on the same element with images or solid colours, otherwise styling :after or :before pseudoelements:
see
http://tnels.com/2010/09/13/multiple-borders-in-css3/
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I'm trying to make a border for the top of a div element. The border is a 1px thick solid line, and it is to make a noticeable division between the footer and the website content. However, I don't want the border to span the whole width of the footer. I'd instead like it to be shorter (by maybe 10 pixels or so on each side) and centered. How should I do this? Does it require me to use an image?
You mean something like this: http://jsfiddle.net/8ZSSc/
Or, if you always wanted exactly 10px short of each side regardless of page size:
http://jsfiddle.net/8ZSSc/2/
Just use the <hr /> tag to make a horizontal line, and set the width for that.
I guess you are looking for something like this:
<div style="width: 95%; border-top: 1px solid; margin: auto;"></div>
Add another div above the footer, add a top border, and use padding to make it narrower:
.footer-line {
border-top: ...
margin-right: 10px;
margin-left: 10px;
}
You could have another very skinny div, just above the footer.
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>