I have a <hr> which isn't showing.
HTML:
<div id="line"><hr /></div>
CSS:
hr {
border: 0;
width: 96%;
color: #FFFF00;
height: 1px;
}
#line {
float: left;
width: 731px;
height: 10px;
}
Any ideas why it's not showing?
try this code :
hr {
border: 0;
clear:both;
display:block;
width: 96%;
background-color:#FFFF00;
height: 1px;
}
JSFiddle link http://jsfiddle.net/EXXrB/
Hope it will help you to resolve your problem.
Remove border: 0; from the css rule for hr
Demo
Simple Way to get best Horizontal Line
. horizontalLine {
border: none;
border-bottom: 1px solid gainsboro;
}
hr
{
border:solid 1px black;
width: 96%;
color: #FFFF00;
height: 1px;
}
If you intend to use border:0px;, then set height:1px; and set background:#FFFF00;
(OR)
border:1px solid #FFFF00; and height:0px;
That might do the trick!
Either stick with border color to show a horizontal line or go with the background color for <HR> tag
Try this
hr {
border: 0;
clear:both;
display:block;
width: 96%;
color: #FFFF00;
height: 1px;
}
Related
When I type this:
<style>
.tavit{
width:400px;
height:300px;
background-color:yellow;
border:dashed; /*First I applied - border:dashed double (In order to get a double dashed border - but it didn't work for some reason*/
border-style:double;
margin:auto;
font-size:medium;
text-align:right;
}
.adom {
color: red;
font-size: xx-large;
text-align: center;
}
</style>
nothing works. Like it's even one or the other. What am I missing?
Thanks
You can simply fix this with one div, you can use outline and border, then use outline-offset property
.test {
background:white;
padding:15px;
border:1px dashed #000;
outline:1px dashed #000;
outline-offset:-5px;
}
<div class="test">see this</div>
There is no border-style as dashed double,
But border-style:double property give two border but as solid lines, so you can use pseudo selector and declare border-style:dashed on both as below,
.tavit {
width: 400px;
height: 300px;
background-color: yellow;
border: dashed;
border-style: dashed;
margin: auto;
font-size: medium;
text-align: right;
position: relative;
}
.tavit:before {
content: "";
width: 94%;
height: 280px;
border-style: dashed;
position: absolute;
left: 2%;
top: 8px;
}
<div class="tavit">
</div>
You can create an outer and inner div and can give border to both of them.
div {
border: 1px dashed black;
}
.outer {
padding: 5px;
}
<div class="outer">
<div class="inner">Long long long text</div>
</div>
I have a small question. Normally I would be ok with the divs rearranging on the screen if the screen is smaller, but for this particular case- I want them to remain the way they are no matter.
I think its the inline-block that may be causing this, but I need all the 4 color rectangles to display the way they display on large screen--throughout (the colorful blocks are 2x2 and the big ones are side by side as well).
When the screen is scaled, it places all on top of one another. I actually do not want this effect--how can this be avoided?
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display: inline-block;
width: 380px;
height: 105px;
margin: 10px;
border: 3px solid #73AD21;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display: inline-block;
width: 350px;
height: 305px;
margin: 10px;
border: 3px solid #d3d3d3;
}
<div class="floating-box2"></div>
<div class="floating-box2"></div>
<div id="expert" class="floating-box">
<img src="image.png"/></div>
<div id="tools" class="floating-box"><img src="image2.png"/></div><br>
<div id="discussions" class="floating-box"><img src="image3.png"/></div>
<div id="corner" class="floating-box"><img src="image4.png"/></div>
when you have a fixed with like you have width:380px it's obvious they won't fit together. you need to set a percentage width.
see here jsfiddle
if you add text , add vertical-align:top to the floating boxes. this is because display:inline-block automatically implies vertical-align:baseline
code:
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display:inline-block;
width: 49%;
height: 105px;
box-sizing:border-box;
border: 3px solid #73AD21;
vertical-align:top;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display:inline-block;
width: 49%;
height: 305px;
border: 3px solid #d3d3d3;
box-sizing:border-box;
vertical-align:top;
}
I think that two images will clarify everything
Now I have (jsfiddle):
And I am wondering is it possible to do that:
You could use :after to hide it, crude I know, but works in the latest browsers:
#column1:after{
display:block;
content:'';
background-color:#f6f6f6;
height:100%;
width:5px;
position:absolute;
top:0;
right:-5px;
}
JSFiddle
Change/add the css:
#column1a {
margin-right: 200px;
border-bottom: 5px solid #E3E3E3;
background-color:#E3E3E3;
padding: 5px;
}
#column1a span { background-color: white; display:block;}
Alter the html to:
<div id="column1a"><span>Ut enim
This is only a rough guide so I'll leave it up to you to tidy up.
Give Like this
#Coloumn1{position:absolute}
Demo > http://jsfiddle.net/TPNpy/285/
Try following code:
#wrapper {
position: relative;
}
#left-section {
position: absolute;
left: 0;
width: 200px;
height: 100px;
border: 3px solid black;
border-right: none;
float: left;
background-color: white;
z-index: 5;
}
#right-section {
position: absolute;
left: 200px;
width: 100px;
height: 300px;
border: 3px solid black;
float: left;
}
<div id="wrapper">
<div id="left-section"></div>
<div id="right-section"></div>
</div>
I want to divide page into two "div"s. Left(25%) and right(75%). And i wanted a border between the two, to separate them. But unless I enter text/image into the "div"s they don't expand.
<div>
<div class="left">
<img src="granted_300_50.png" id="logo">
</div>
</div>
And the css is:
div.left{
background-image: url("flower_ornament2_watermark.png") ;
background-repeat: no-repeat;
background-color:white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
Help?
Digvijay
Setting height in percentage on inline elements works only if the container has a specific height set too, up to the body and html.
This CSS should work:
html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }
Another common workaround is the so called "faux column" method:
http://www.alistapart.com/articles/fauxcolumns/
http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
You can also use display:table; for the container and display:table-cell; for the floated divs. But it's not supported by IE7.
div#container { display:table; }
div.left { display:table-cell; }
Take a look at this:
CSS
.left{
width:25%;
height:100px;
border-right:1px solid #ccc;
}
.right{
width:75%;
height:100px;
border-left:1px solid #ccc;
}
HTML
<div class="left"></div>
<div class="right"></div>
Unless you also set a height on the body and html nodes, they will collapse. You can fix this by setting them to 100% height:
Demo: http://jsfiddle.net/SO_AMK/Nhajy/
CSS:
html, body, div { height: 100%; }
div.left {
background-image: url("flower_ornament2_watermark.png");
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
The other solution is to set a min-height:
Demo: http://jsfiddle.net/SO_AMK/MSLdT/
CSS:
div.left {
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
min-height: 100px;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
you can use something like:
/css code/
height:calc(100%-2px);
border:1px solid black;
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.