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>
Related
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'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/
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 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;
}
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.