I have meet a interesting problem here.
my structure is
body
|----site-wrapper
|-----cover-wrapper
both the height is set to 100%, when I set the site-wrapper background color, it looks fine,
but when I set cover-wrapper background color, it only wrapper the background color to fit the content(some text), not expand to the whole screen, I have tried both on Chrome and Firefox. check the effect here: http://jsfiddle.net/h82Ne/
Here is the css:
html{
height: 200%
}
body {
height: 100%;
background-color: #333;
}
.site-wrapper {
display: table;
width: 100%;
height: 50%; /* For at least Firefox */
min-height: 50%;
background-color: #000;
}
.cover-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
background-color: #0f0;
}
If you are looking to get the .cover-wrapper to cover the entire page you can use:
.cover-wrapper {
width: 100%;
height: 100%; /* For at least Firefox */
position: absolute;
top: 0;
bottom: 0;
background-color: #0f0;
}
This will cause it to act more like an overlay.
The problem solved, it make by my own mistake, i miss css for site-wrapper-inner here.
Sorry about that
Related
I'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.
My HTML ...
<div id="sitemap" >
<img src="img.jpg" class="center"/>
<a href="url1.html" id='id1'></a>
</div
And the CSS ...
#sitemap img{
max-width: 100vw;
max-height: 100vh;
position: relative;
}
#sitemap a {
display: block;
position: absolute;
}
#sitemap a:hover {
background: rgba(255, 255, 0, 0.5);
border-radius: 20px;
}
a#archive {
top: 48%;
margin-left: 14%;
width: 20%;
height: 15%;
}
This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?
So you know the reason.
This is because of the div(id=sitemap)'s width.
How about this one?
#sitemap {
/* for debug background-color: red; */
/* make sure the div width only size of contents */
display: inline-flex;
/* You set position relative to "img", but it semmed doesn't work because it isn't a parent‐child relationship */
position: relative;
}
#sitemap img{
max-width: 100vw;
max-height: 100vh;
/* position: relative; */
}
a#archive {
/* I think it's good enough setting two properties, unless you aren't particular about the details. */
top: 10%;
left: 10%;
}
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
I am wanting to keep one image in place while the background image is scalable in browser.
When I use the height: XXXpx; it will not scale correctly. I've also tried using percentages for the height.
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
width: 100%;
}
.big-o {
position: absolute;
top: 360px;
margin-left: 7%;
width: 200px;
height: 358px;
}
www.georges.larsonplusyou.com
Thank you guys.
Try removing the inline style for width from your html, and then change your selector to style the image itself as follows:
.big-o img {
position: absolute;
top: 360px;
margin-left: 7%;
max-width: 100%
width: auto;
height: auto;
}
This worked in my browser, but I would suggest using media-queries for responsive design. I think you need to do a width: auto\9; if the webpage will be used in Internet Explorer because there's a bug.
Here is my code:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
}
<div id="my_div"></div>
I'm trying to make the image responsive through the max-width:100% property but it is not working
My Question: Is it possible to do such a thing?
Edit
The question is not a duplicate, I want the dimensions to scale automatically on screen resize while the other question sets a fixed size to the image
Try this:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
If this doesn't work, try removing the :before pseudo-element
#my_div
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
Without seeing the context of your html, this is the best solution I can offer. We'll need more information in order to understand your situation better.
I confess I'm not entirely sure what effect you are after but I think this might be a better option for you.
Don't put the image in the content property...make that pseudo-element 100% size of the div and use a background image.
A couple of options for you.
.my_div {
position: relative;
height: 150px;
border: 1px solid grey;
width: 75%;
margin: 1em auto;
}
.my_div:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-image: url(http://lorempixel.com/g/400/200/);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cover:before {
background-size: contain;
}
<div class="my_div"></div>
<div class="my_div cover"></div>
JSfiddle Demo
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.