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/
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/
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
Related
I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height
To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>
I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks
try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo
I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/
I have a image slider and I am trying to align some explanatory text in the horizontal and vertical centre of each image.
How can I archieve this in HTML/CSS?
Here is my Slider: jsbin
// Note I edited ur jsbin - now the text is visible and the question clear.
You could make a CSS class that looks like:
display:block;
line-height:*same as your slider height*;
margin:0 auto;
position:relative;
z-index:99;
and put within the slider. Some tweaks have to be made to that CSS but the basic idea remains.
Use following HTML and CSS
<article>
<div class="text">hihihi</div>
<img alt="an interesting rock" src="http://placehold.it/300x300/123456/000000/&text=1">
</article>
.text {
color: white;
height: 300px;
position: absolute;
top: 47%;
width: 100%;
}
#slides article {
float: left;
position: relative;
width: 25%;
}
You need to do two changes.
Add position:relative to the parent.
#slides article
{
width:25%;
float:left;
position:relative;
}
Add positions(top, left, bottom, right) to your text class.
.text
{
position:absolute;
display:table;
width:100%;
color:#fff;
height:30px;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
}
The display:table property and fixing some small height with margin:auto will do the magic.
FIDDLE DEMO
I want to built a simple landing page with a header,footer and an image - exactly between the header and the footer (horizontally/vertically centered).
The space between the header/footer and the image should be the same and should depend from the height of the browser-window.
The image has a fixed width (900px) and a fixed hight (600px).
Aw: it is a sticky footer
I have tried something like this:
{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}
my html:
<div class="fbg">
<div class="fbg_resize">
<img src="images/image.png" width="900" alt="" />
</div>
<!--<div class="clr"></div>-->
to get it horizontally centered:
.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}
here is the code that matters:
http://jsfiddle.net/SFWBL/
Have a look at this fiddle for the basic premise, it should be enough to get you started.
HTML
<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>
CSS
html, body{
text-align:center;
height:100%;
width:100%;
margin:0;
padding:0;
}
#header, #footer{
height:50px;
width:100%;
}
#image{
height:50px;
width:50px;
margin:-25px auto 0 -25px;
background:grey;
position:absolute;
top:50%;
left:50%;
}
#header{
background:blue;
}
#footer{
position:absolute;
bottom:0px;
background:red;
}
Instead of using an img, you can try background-image for the div
html, body {
height: 100%;
}
.fbg {
background-image: url(http://lorempixel.com/900/600);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See modified JSFiddle
Relative (percentage) positions are the way to get your elements to recognize the size of the browser window. Since they work on the edges (top, left), you have to use a negative margin to move the item back up half the height of your item. Since you know the fixed height of your image is 600px, you need -300px. You want to give your image:
position: absolute;
top: 50%:
margin-top: -300px;
I have a 3 container structure.
container 1 is of x height...container 2 fills the rest of the window...container 3 SHOULD start after container 2, but its disappeared.
JSFIDDLE
HTML
<header>
</header>
<div id="maincontent">
</div>
<footer>
</footer>
css:
html,body{padding:0; margin:0;}
header{
background-color:red;
height:1.8em;
}
#maincontent{
background-color:black;
position:absolute;
top:1.8em;
bottom:0;
width:100%;
}
footer{
background-color:yellow;
height:50px;
}
How can i get container 3 (footer to follow container 2).
I know its position absolute of container 2 thats causing the problem but thats the only way I can get that container to fill the screen.
I've tryed playing around with margins to no avail;
Clearer explanation of what i'm trying to achieve:
container1 + container 2 = 100% height. Then scroll to see containe 3.
I could acheive this in javascript but was hoping it was possible in css.
Because #maincontent has absolute positioning, footer is behind it below header.Use position: absolute to put footer at the bottom of the page; then change bottom: 0 to bottom: 50px for #maincontent. Fiddle: http://jsfiddle.net/xFWHk/1/
Change #maincontent's bottom property to the height of your footer, ie:
#maincontent {
top: 1.8em;
bottom: 50px /* Height of footer */
}
Here's a fix: http://jsfiddle.net/xFWHk/2/ ... You don't need absolute positioning in your case as "container 2" will follow "container 1" as the natural flow of the document.
CSS:
html, body {height:100%;padding:0; margin:0;}
header{
background-color:red;
height:1.8em;
}
#maincontent{
background-color:black;
width: 100%;
height: 100%;
}
footer{
background-color:yellow;
height:50px;
}
I've solved it, FINALLY!
footer{
background-color:yellow;
height:50px;
width:100%;
position:absolute;
bottom:-50px;
}
added absolute to the footer and a negative margin. Will see how this goes.
I'm finally trying to do away with tables and use CSS.
I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.
These are the 3 layers:
And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:
My 3 base layers are coded like this:
<div id="main" style="width:100%; z-index:1; position:relative;">
<div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
<div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
<div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>
I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?
Somehting like this could help:
JSFiddle: http://jsfiddle.net/DSH5J/
Add:
<div id="square"></div>
#square {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
margin-top:50px;
width:80%;
height:100%;
background-color:#333;
z-index:10;
}
Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways.
margin-left:auto;
margin-right:auto;
Easiest way that I know of to centre a div of known width is to give it the following styles:
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
"Putting my money where my mouth is": http://jsfiddle.net/YVmBU/2/
HTML:
<div id="main">
<div id="header"></div>
<div id="contents-box">
<div id="contents">
<p>Some text</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
</div>
</div>
<div id="footer"></div>
</div>
CSS:
#main {
}
#header {
position: relative;
height:100px;
background:#151515;
z-index: -1;
}
#contents-box {
border: dashed grey 1px; /* for understanding only, remove it in the end */
z-index: 1;
margin-top: -30px;
margin-bottom: -30px;
/* TODO: address min-height; try only one line of text. */
/* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
width: 75%;
height: 100%;
margin: 0 auto;
background: grey;
z-index: 1;
}
#footer {
position: relative;
height:75px;
background:#151515;
z-index: -1;
}
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
Remove the grey dashed border and grey background; those are helpers - to know where each box is and understand what is happening.
By the way, the position: relative needs to be there on the z-index: -1; layers, otherwise the background does not go under. Read on position: this is because things in html have position: static by default, and z-index relies on position for its behaviour.
You can read about this in this page: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.