I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.
How do I do that with CSS?
If your margin is set on the body, then setting the background color of the html tag should color the margin area
html { background-color: black; }
body { margin:50px; background-color: white; }
http://jsfiddle.net/m3zzb/
Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color
Instead of using a margin, could you use a border? You should do this with <div>, anyway.
Something like this?
http://jsfiddle.net/GBTHv/
I needed something similar, and came up with using the :before (or :after) pseudoclasses:
#mydiv {
background-color: #fbb;
margin-top: 100px;
position: relative;
}
#mydiv:before {
content: "";
background-color: #bfb;
top: -100px;
height: 100px;
width: 100%;
position: absolute;
}
JSFiddle
That is not possible du to the Box Model.
However you could use a workaround with css3's border-image, or border-color in general css.
However im unsure whether you may have a problem with resetting.
Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!
html{margin:0;padding:0;}
Are you possibly looking to change the margin color outside the border? Maybe https://www.w3schools.com/css/css_outline.asp[outline][1] outline will help? Particularly
outline-color: green;
Related
How do I create distance between the text and the border below the text as shown in the image attached using sass/css?
I want the distance to be 5px and the font-size of the text to be 15px.
I tried doing
.selected {
color: #284660;
}
.selected:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 5px;
border-bottom: 2px solid #284660;
}
but that created a border that was too wide.
I feel couple of things which can be improved in the above snippet.
You may not need psuedo element for desired effect
You should not use absolute positioning for that , in case you want to use psuedo element
In any case you can try this out.
&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // this should give you some spacing.
}
Try a negative
{
bottom: -5px;
}
Besides the complete lack of knowledge of your DOM profile or what element the & refers to, if you just slap a border and padding on an inline element, you'll have the effect you want.
No need to play with pseudoelements.
<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>
Obviously, you should put that styling info in the css file, I merely inlined it for the example.
Oh and next time, please include sample HTML with your sample CSS. Only reason I even bothered was because the solution was as simple as "What is padding for 15, Trebek?"
Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:
.element {
padding:0 1px;
}
.element:hover {
font-weight:bold;
}
It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?
No JavaScript allowed, unfortunately.
JsFiddle:
http://jsfiddle.net/M9V3Q/
More Info
The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.
You can use this approach:
#hoverEle {
width: 100px;
}
#hoverEle {
display:inline-block;
border:1px solid black;
padding:3px;
text-align: center;
}
#hoverEle:hover {
font-weight:bold;
}
Fiddle: http://jsfiddle.net/M9V3Q/4/
Cons is fixed width.
By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (e.g. #ccc) and, probably, transition effect. I think it is much more better.
Try this fiddle: http://jsfiddle.net/M9V3Q/9/
I think it is much more beautifull even in this variant :)
Try something like:
.element {
padding: 0 1px;
border: 2px solid transparent;
}
.element:hover {
font-weight: bold;
border: none;
}
A fiddle: http://jsfiddle.net/F4knz/
Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.
Need to prefix -moz- or -webkit- for Firefox and safari.
I have a page where I want the border to home more than one line.
h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}
This (when used) displays a border around the text.
However,
I want to home more than I one line in this border.
Help?
use a div with border and inside that place this h2 bord
Is border-style:double; what you are looking for?
Alternatively, if you wanted more than a double border's, or borders of multiple styles you could use multiple nested divs, e.g.
<style>
.inset-border { border: 4px inset Black; }
.double-border { border: 4px double Black; }
</style>
<div class="inset-border">
<div class="double-border">
<h2>content</h2>
</div>
</div>
Standard CSS borders only support at the very most a double line (see #Jaimal's answer).
If you need more than that, you need to try the following:
Additional markup: ie more container elements, each with their own border.
Use :before and :after and give them a border. Done right, they should wrap around the original box and give you extra borders. Won't work in IE6 or IE7.
Use the outline property in addition to the border. Outline works very similarly to border, but does have some slight differences. It can give you a third border box though, if used in addition to border-style:double;. Note that it might not work in older browsers.
CSS3 border-image. Using this, you can define your own graphics for the border, which means you can define as many lines as you like. Note: this definitely won't work in older browsers; it's only a fairly recent addition to CSS.
Use background-image to fake it. If you know the size of your box, this might be the simplest and most cross-browser compatible way to do it. Not so useful if you don't know the size of the box in advance though.
Hope that helps.
I'm assuming you're trying to achieve an 3d/'raised' type of border; if that's so, then you could simply use the border-style: groove: JS Fiddle demo.
However, if you're able, you could use the ::after pseudo-element, and an outset border-style:
h2.bord {
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
position: relative; /* in order to position the pseudo element relative to the parent */
margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}
h2.bord::after {
content: '';
position: absolute;
top: -16px;
left:-16px;
right: -16px;
bottom: -16px;
border: 8px outset green;
}
JS Fiddle demo.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
I would like to put headlines in my site like this: http://cl.ly/0m3F0j392e0G1n0s0T34
What i'd ideally like to do is use text for the headline and then have a 10px by 10px gif repeat horizontally after it.
EDIT: I should add that I would like to use a textured background so I can't set any solid colours to the h2 element.
I have been able to add in the gif after the headline but I can't get it to repeat, even if i add repeat-x. Here's the code i used:
h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}
Are there any workarounds for this or any alternate methods? I'd rather not resort to slicing the entire headline as an image. I've thought about floating the headline to the left then floating an empty div to the right with the gif as a repeating background image but I figure this is what the :after pseudo-element is for, right?
A little hacky and will involve adding overflow-x:hidden; to the parent element, but should do the trick:
h2 {
position: relative;
padding-right: 10px;
float: left;
}
h2::after {
content: '';
position: absolute;
left: 100%;
right: 9999px;
background: url(image.gif);
height: 10px;
width: 9999px;
}
You can set any attributes to your after pseudo element. What I would do it set the content to "" (empty) and then set a width and height to the pseudo element. You can set the background to the repeated gif as normal then.
h2:after {
content: "";
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}
When you use content:url() pressed class create an img element. You need to use background in this case. Like what Erik said.
But if size of your text in heading is not known (aka dynamic content) then pseudo element is not a good work around. You can use a markup like this:
<h1><span>your text content</span></h1>
And then add the repetitive background to h
h1{ background:'url(img/imagehere.gif) repeat-x';}
To hide background in part that text apears make the span's background a solid color
span{background:white}
Update:
if you have a background image under your h1, then you can do this:
Same HTML: <h1><span>your text content</span></h1>
CSS:
say your body have a background image:
body{background-image:(foo)}
then you want bar to be your image to repeat after the heading. You should do this:
h1{background:url(bar)}
And add same background your body have to the span containing your text:
h1 span{background-image:(foo)}
This would solve your problem. Look at this Fiddle to see in action. It's not depended on your text size or anything else.
Note: if you are using an span then you should make it dispaly:inline-block
Update:
Based on your request I rethink on this. I used tables this time. Code without explanation:
HTML
<table>
<tbody>
<tr>
<td><h1>Heading</h1></td>
<td class="pattern"></td>
</tr>
</tbody>
</table>
CSS
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
See in action<
The answer above from Erik Hinton will work if you add "display:block" declaration, as below:
h2:after {
content: "";
display:block;
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}