I need to create two Horizontal line and between them there is a centered word.
I create this code:
html:
<div class="myRow">preference</div>
css:
.myRow
{color:red;
text-align:center;
border-style:solid;
border-width:medium;
border-color:#b2b2ac white #b2b2ac white;}
Unfortunately, the top border and bottom border are not straight at the ends.
How can I get the perfect rectangle border on the top and bottom of the box?
Borders meet at angles. The angle at which they meet is determined by the relative sizes of each border. If they are equal width, the angle is 45 degrees...if the aren't the same the angle is different.
Example:
.box {
width: 50px;
height: 50px;
margin: 10px 25px;
background: lightblue;
display: inline-block;
}
.large {
border-top: 50px solid red;
border-left: 50px solid green;
}
.medium {
border-top: 50px solid red;
border-left: 10px solid green;
}
<div class="box large"></div>
<div class="box medium"></div>
So, to have a square end, one of the widths needs to zero. In your case as this is needed at both ends, change the side border widths to 0.
.myRow {
color: red;
text-align: center;
border-style: solid;
border-width: medium 0;
border-color: #b2b2ac white;
width: 80%;
margin: 1em auto;
}
<div class="myRow">preference</div>
You can remove the border-left and border-right as below.
.myRow {
color: red;
text-align: center;
border-style: solid;
border-width: medium;
border-color: #b2b2ac white #b2b2ac white;
border-left: none;
border-right: none;
}
<div class="myRow">preference</div>
Try using this below code, hope this works for you.
.myRow {
color:red;
text-align:center;
border-style:solid;
border-width:3px 0;
border-color:#b2b2ac;
}
<div class="myRow">preference</div>
try this out
.myRow {
display: table;
margin: 0 auto;
color: red;
text-align: center;
border-style: solid;
border-width: medium;
border-color: #b2b2ac;
border-left: none;
border-right: none;
}
<div class="myRow">preference</div>
Related
I created class border for a link and put the link into that border. Then when I see by responsive device link is over length form that border while I try to keep sentence into border it has no problem.
How can I resolve it?
My CSS:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
You probably used an element with display: block as a host of your .border class:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<div class="border">
Google
</div>
<div>'s default display value is block, hence full width.
What you need is using an element with display: inline:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<span class="border">
Google
</span>
Or, simply add display: inline to your .border styles:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
display: inline; /* <---- */
}
<div class="border">
Google
</div>
I wrote code to make border appear at the top of the website but the border appears on all 4 sides of the code. Please correct me. JSFiddle.
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-top: thick single #000;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>
That is because of:
the rule border-style: solid.
Remove that:
border-style: solid; /* -- remove this */
border-top: thick solid #000; /* make the style solid here */
border-style applies to all borders. You need to keep your style limited to border-top.
single is not a style. You probably meant solid here.
Fiddle: http://jsfiddle.net/abhitalks/jpo80bjr/3/
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}
.center{ text-align: center; }
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>
Try to define the other borders to 0px, like:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-top: thick single #000;
border-bottom:0;
border-left:0;
border-right:0;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>
You can either write three separate properties:
border-width: ..;
border-style: ..;
border-color: ..;
Or you can combine them into one shorthand property:
border: .. .. ..;
border-style is equivalent to setting the style in border, it applies to all sides. If you just want to set the top border style, there's border-top-style for that. But since you're setting the border-top shorthand property anyway, just get rid of border-style.
That's because you set border-style: solid; which applies to all four borders (top, right, bottom, left) and defaults to black and ~4px. Also, single isn't a valid border value.
Try this:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}
fix your css. some browser auto complete css proporties you did not specify, based on those you did, like border, in your case:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-color: #000;
border-width: thick 0 0 0;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>
Remove border-style: solid; because you are already using in border-top: thick solid #000; and single needs to be solid.
use css:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}
find fiddle demo
Change border-style: solid; to border-top-style: solid;
JSFiddle
#box1
{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top-style: solid;
border-top: thick single #000;
}
.center
{
text-align: center;
}
<div id="box1">
<h3 class="center">CALL US</h3>
</div>
here's the code:
[...]
<style>
.hex {
float: left;
background-color: transparent;}
.top, .bottom {
width: 0;
border-left: 2.2em solid transparent;
border-right: 2.2em solid transparent;}
.bottom{border-top: 1.25em solid #6C6;}
.top{border-bottom: 1.25em solid #6C6;}
.middle{
width: 1.46em;
height: 0.8em;
background: #6C6;
text-align: center;
font-size: 3em;
line-height: 1em;
margin: 0 auto;
border: 1px solid red;}
.hex .middle input{
color: black;
text-align: center;
background: transparent;
border: 1px solid;
width:5em;}
</style>
[...]
<body>
<div class="hex">
<div class="top"></div>
<div class="middle">
<input type="text" class="playerName" id="name1" maxlength="7" value="what" disabled/>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
full example - http://jsbin.com/iqanoh/1
could someone please explain me, why can't I control position of textbox(black) inside the div(red). It does not react for any: margin or padding changes. Generally I'd like to center (horizontally and vertically), but it's always on bottom even a little bit under.
You need to set display: block to the input to make margin take effect. By default input has display: inline and it wont work with margin.
there is a problem in the .middle div
.middle {
background: none repeat scroll 0 0 #66CC66;
border: 1px solid red;
font-size: 3em;
height: 0.8em;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 1.46em;
}
remove font-size, line-height and width from it.
hope this will solve your issue.
I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following:
What I'm not able to do is make this little Triangle shaped trim on Top
is it possible in CSS, if it is, how?
Live Example: http://jsbin.com/owafod/1/
I used CSS triangle generator to create the triangle.
#Nav {
width: 300px;
height: 200px;
background: #333;
}
#Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ffffff transparent transparent transparent;
margin: 0 auto;
}
Here's a solution with borders :
Result :
HTML :
<div id=a></div><div id=b></div>
<div id=c></div>
CSS :
#a {
border-right: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#b {
border-left: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#c {
background: black; height:20px;width:210px
}
Tests
And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :
(the code to make it)
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.