I have a question regarding the div element border
I am trying to create bunch of divs that acts like a table
so
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>
My css is
.div{
border: solid 1px black;
}
All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.
I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?
Thanks a lot!
Remove the top border from every element except of the first one.
.div {
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
}
.div:first-child {
border-width: 1px;
}
Here's an example of the difference.
did you tryed write something like this :
.div {
border:1px solid black;
border-bottom:0;
}
.div:last-child {
border-bottom:1px solid black;
}
Try to add this to your styles.
<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>
Then add this to your body:
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>
Related
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
My border is not showing up around my image, I'm not quite sure what the issue could be. I just need a small black border around the photo. My website is http://www.welovetile.com. I can't figure out what the problem could be. Thanks.
CSS:
#kitchen {
height:250px;
width:346px;
background-image:url(images/kitchenbg.jpg);
}
#kitchen img
{
top: 50%;
left: 50%;
width: 316px;
height: 228px;
margin-top:11px;
margin-left:15px;
border-color:#000000;
border-width:thin;
}
HTML:
<div id="kitchen">
<img src="images/kitchen.jpg" alt="Kitchen Tile Job"/>
</div>
Borders have three main pieces: a width, a style, and a color; the style is required for any of the others to work.
Try adding the style:
border-style: solid;
Also, you can specify all these in the same line of css:
border: thin solid black;
Updated
As pointed out by Wesley, border-style is the only required one.
From http://www.w3schools.com/css/css_border.asp :
None of the border properties will have ANY effect unless the border-style property is set!
You're missing:
border-style: solid;
You can put border width/style/color in one row like this:
Border: 1px solid black;
try this:
border: 1px solid #F4F1E8;
box-shadow: 1px 1px 3px #4C4843;
Add a border style property as well, for example border-style: solid;.
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}
as you can see in the image, it isn't just a dashed border.. but it's like.. a double dashed border where each dash is offset by the other.
How do I make this with CSS?
You can simulate this with nested divs.
HTML:
<div class="border1">
<div class="border2">
<!-- Your content here -->
</div>
</div>
CSS:
.border1 {
border: 1px gray dotted;
}
.border2 {
border: 1px gray dotted;
width: 100%;
height: 100%;
}
Also, here's a fiddle to see this in action.
If you want a border around the whole element, use border+outline, Fiddle: http://jsfiddle.net/fEwEp/
<div>Border around box</div>
div {
border: 1px #333 dashed;
outline: 1px #333 solid;
}
If you only want a border at one side (eg top), nest two divs, and add borders to them.Fiddle: http://jsfiddle.net/fEwEp/1/
<div class="border-top">
<div>Border at top</div>
</div>
.border-top {
border-top: 1px #333 solid;
}
.border-top > div {
border-top: 1px #333 dashed;
}
I'm not quite sure how it works off hand, but you could use border-image.