Absolute Position - Center - Max-width
Question
I have som problems, regarding Max-width and Absolute Positioning.
In the top of my site, I have a '100%-width section' with a background-image.
I want a small image partly covering the bottom of the top image. To do so, I use Position:relative on the section (top image) and position:absolute on the small image. So far so good..
My problem is, that i want the small image to be centered and have a max-width, so it aligns to the content on the site. (Which have a max-width of 500px..)
I really can't figure out, how to do it...
So, is there a way to only affect vertically, when using position:absolute, or maybe something else i can do?
I hope it makes sense.. :)
screens: http://cvdmark.com/images_help/screens.jpg
<body>
<section id="img_heading">
<img src="#">
</section>
<section id="content">
<ul>
<li>
</li>
</ul>
</section>
</body>
body {
width:100%;
min-width:100%;
background-color:#000;
float:left;
}
#img_heading{
width:100%;
min-width:100%;
height:150px;
margin-bottom:6em;
background:url(../img/heading_img_test.jpg);
background-position: center center;
float:left;
position:relative;
}
#img_heading > img{
width:90%;
height:100px;
position:absolute;
bottom:-75px;
margin: 0 auto 0 auto;
max-width:500px;
/*left:5%;*/
background-color:#F69;
}
#content{
width:90%;
margin: 0 auto 0 auto;
max-width:500px;
}
#content ul{
width:100%;
list-style-type: none;
}
#content ul li{
width:100%;
float:left;
margin-bottom:30px;
}
JS Fiddle : http://jsfiddle.net/rpatil/ukKgx/
2 answers
solution1
0 2013-12-26 14:05:01
I think what you'd want is to align an absolute position div to the bottom of the section and center it.. (this following assumes you have your content in the section centered too..) replace div with img if you want to and give it your required id.. I ve given "foo-id"
div#foo-id
{
position: absolute;
bottom: 0px; /*since you want it at the bottom of section*/
z-index: 2;
width:90%; /*since your asked for 90%*/
max-width: 500px;
/*the following to center your image*/
margin-left:-45%;
left:50%;
}
Believe that helps!
And here is an updated jsfiddle.. thanks @rubyist.. http://jsfiddle.net/ukKgx/2/
solution2
0 2013-12-26 15:05:35
This is an other solution to make it centred --> jsFiddle
<section style="position: absolute; left: 50%;width:50%">
<div style="position: relative; left: -50%;background-color:#ccc; border: dotted red 1px;width: 90%;max-width:500px;height:150px">
</div>
</section>
If you want to make it more custom, you have to use Javascript onLoad page to calculate screen width % picture width
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.