I want to create a bounding box around the div with a grey border how do i do that Please help.
Please find below my code:
http://codepen.io/anon/pen/gyxpE
CSS:
.box {
border:2px solid #ECF0F1;
}
I want to surround the row with a white border and so on and so forth
Please find my code here : http://codepen.io/anon/pen/gyxpE
I solved my issue:
Used the following CSS:
.box {
width:100%;
display:inline-block;
border:2px solid #ECF0F1;
margin:0;
}
Also removed all the margins from my CSS
Related
I tried all ways to change color of <hr/>:
hr{
border-color: yellow;
background-color: yellow;
color: yellow;
}
but it appears like this in both Chrome and FF:
How can I change its color to pure yellow?
Give hr a style with:
hr{
border:0;
margin:0;
width:100%;
height:2px;
background:yellow;
}
or
border:1px solid yellow;
JsFiddle
You need to get rid of the border or change the border's properties for it work.
From #Darko Z in the comments:
In many browsers the default style for HR is to add some sort of shading to the border so this comes out as dirty #whateverColourYouWant. To get rid of it, setting border explicitly (and not just border-color) is necessary.
To change the color of your horizontal rule, in your <hr/> tag, type the html attribute color="". Then you can go ahead giving it the desired color.
This question already has answers here:
Simple CSS button with a rectangle beneath
(4 answers)
Closed 9 years ago.
I'm trying to create a CSS based 'button' like this:
The blue is just a background, so it's only about the text "Welkom" and the rectangle displayed below.
Whenever it's active or hovered over it should display a rectangle BELOW the button.
HTML: (This is the button)
<li>Welkom</li>
If the below is your HTML:
<li>Welkom</li>
Then you can do this:
li:hover,li:active{
border-bottom:3px solid blue; /*change blue to the color you want*/
}
See this demo
Fiddle in response to comment: Fiddle 2
The above uses box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border(without requiring adjustment) but it will not work in IE9 and below
Fiddle 3 : Will work in all browsers but you will have to adjust the bottom at the center using relative positioning for both li and a tag within it.
you can do that on :hover with a border-bottom:
But you may and a border already without the hover so avoid jumping.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
The code above is not all you may need.
-Sven
EDIT: as you see the other answer, U ay do that on the list element directly.
simple just follow below code:
HTML:
<div class="link">Welkom</div>
CSS:
.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.link a{ font-family:arial; text-decoration:none; color:#fff;
}
.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
On Google chrome, if I have a div within an anchor, randomly the border will change to the text colour. If I inspect the element, the colour switches back instantly to the proper colour. Is there a way I can get around this error?
This is the html: (it doesn't happen every time, spontaneously it will be the wrong colour)
<a href="/about"><div class="navc">
<div class="navt"><?php echo $lang['0']; ?></div>
</div>
</a>
this is the css:
#nav
{
float:left;
width:100%;
height:30px;
background:url('../images/nav.png') repeat-x;
border:1px solid #C2C1C1;
text-shadow:0 1px 0 white
}
#nav a
{
color:black;
text-decoration:none
}
.navc
{
padding:0 10px;
border-left:1px solid #C2C1C1;
border-right:1px solid #EEE;
float:left;
height:100%
}
.navt
{
padding-top:6px
}
As can be seen on the following image,the border of the About navigation button is wrong
Only took me 3 hours to solve this bug (on days like this I feel like Webkit is just as bad as Trident)... but here's the answer:
It only occurs when you have an inline elements inside an anchor (<a>) with a "href" value that has been visited. Such as:
<span>Button</span>
To fix the issue, I added the following CSS:
a {color: blue}
a span,
a:visited span /* Webkit will render a blue border unless this is explicitly specified */
{
border: 1px solid red;
}
I found a solution,
if I use a span instead of a div, the issue doesnt seem to occur.
edit - it occurred once since its been a span, refreshed and it hasn't occurred since.
I just ran into this with some markup like this:
<a href="http://www.google.com" class="outer-link">
<img src="http://google.com/gif.png" />
</a>
My styles looked like this:
img { border: 2px solid gray; }
The gray border was getting turned into the blue link color, here is how I fixed it:
.outer-link { color: gray; }
So even when the img is getting the wrong border, it's defaulting to the gray border color that I specified. I know it's a bit hacky but it works.
I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!