I've got the following class, which works in all the major browsers except Firefox for PC. Specifically the issue is with the content being on a regular element—Ffx doesn't seem to like it on anything except a ::before or ::after pseudo-element. Trouble is, ::after does not inherit the size of its base element.
html
<span class="col-3 myImg"></span>
css
.col-3 {
width: 25%;
}
.myImg {
/* content: url('img.png'); works in everything by Ffx on PC */
display: block;
position: relative;
}
/* v Needed for Ffx on PC */
.myImg::after {
background: red;
content: url('img.png');
display: block;
max-width: 100%; /* affects only the background colour */
position: absolute;
width: 100%; /* affects only the background colour */
}
I don't want to set a height—I want the height to stay proportional to the width (which is determined by col-# from bootstrap v3).
I don't want to use a bunch of image tags because that means an update will require a bunch of edits (instead of one central one to the css).
Related SO question: Can I change the height of an image in CSS :before/:after pseudo-elements?
JS Fiddle
EDIT I want the image to be 100% the width of the base element (the span) and the image's height to scale proportionately.
Related
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
Brief question:
Does div::after {content: ""; display: block; height: 100%;} only works when div {position: absolute;}?
Also does height: 100% refer to the height of related div tag?
Explains:
I was trying to make a div have the ability to over scroll one page even if it reaches the bottom. So I used the following css:
div::after {
content: "";
display: block;
height: 100%;
}
div {
position: absolute;
top: 0;
bottom: 0;
}
Why ::after height: 100% only works when div has absolute positioning?
Is there any better solution? Because I don't like to add absolute positioning when it's not necessary.
Update 1:
I use Chrome 27
The height: 100% property (or with any percentage value) needs a parent element with some definition of actual height to work. That height definition can itself be a height property setting (but not a min or max version of that), or it can be (as in your case) by a position: absolute that you have also defined the height of by setting the top and bottom properties. Those are your two options besides using javascript (and javascript is only going to be able to help in reading and setting the height of the div so that the ::after can pick it up, since javascript cannot affect the ::after pseudo-element directly).
So the ::after element has the div as its parent, and that is why something explicit needs to be setting the height of the div in order for the ::after pseudo-element to pick up the actual height from it.
i'm trying to use CSS to replace the image in html, so
<img class="flechaTooltip" src="oldpath" />
turns into
.flechaTooltip {
width: 0;
height: 0;
padding: 11px 209px 0 0; /* New image's dimensions here */
background: url(../../nImg/flechaTooltipGris.gif) no-repeat;
/* Removing image from older Opera */
content: "";
display: inline-block;
}
But it doesn't seem to make any effect, any idea why??
-edit-
i have used this technique to replace text for an img, but never tried to replace img for another img
The text-indent only works on inline elements in the flow, so if you'd use it for a line with inline element (or any other inline or inline-block elements) it would work.
However, you can replace an image with another image using CSS if you know the new image's dimensions using the following CSS:
.flechaTooltip {
width: 0;
height: 0;
padding: 50px 300px 0 0; /* New image's dimensions here */
background: url(newpath);
/* Removing image from older Opera */
content: "";
display: inline-block;
}
And here is a jsfiddle for you: http://jsfiddle.net/kizu/kNAgT/4/
No, it doesn't... because an image contains no text to indent.
However, you can achieve the affect you want by wrapping the image in another element, like a p or div.
So
<p class="flechaTooltip"><img src="oldpath" /></p>
Example: http://jsfiddle.net/jasongennaro/v7GyN/
it can be done using javascript, but with CSS alone, is it possible to style a div to overlap exactly any page's document content or viewport (to apply an opaque gray layer on the page)? since a page can have margin for it body element, so styling a div to the width of its body element won't do. (needs to work in IE 6 too)
IF you have a <div> like this:
<div id="cover"></div>
These styles should do it:
#cover {
background-color: #ccc;
opacity: 0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Tested on a page where the body has a margin and it covered the entire viewport for me on IE and FF.
height: 100% won't cover the viewport if document length is less than height of viewport. In this case you will have to use Javascript.
would it be cheating to use IE's ability to execute javascript in CSS?
width:expression(document.body.clientWidth)