I wanted to display an image( width is 1 px and height is 200px ) at the bottom of the page. But, when i use the code below, i see nothing new on the page.
html:
<div id="makeThisBottom">
<ul class="xy">
</ul>
</div>
Here is the css of it:
ul.xy { width:auto; margin: 0; padding: 0; display:block; background:url(images/3006.png) repeat-x bottom left; }
#makeThisBottom{
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
This div and ul are right behind of </body>(So,probably,no overwriting). How can i fix it and what did i do wrong. Thanks
Qualify the height and width of the ul: fsFiddle Demonstration
ul.xy {
width: auto;
margin: 0;
padding: 0;
display:block;
height: 200px;
background: url(images/3006.png) repeat-x;
}
#makeThisBottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
Related
I have two overlapping images in a div that I want to place at the bottom of the mobile responsive page, but I'm having Issues with white space at the end of the page and I'm not sure what to use.
my HTML:
<div id="wrapper">
<img id="purpleMobile" src="./assets/purpleMobile.svg" alt="Purple" />
<img id="rocketMobile" src="./assets/rocketMobile.svg" alt="Rocket" />
</div>
CSS:
#wrapper {
display: flex;
position: relative;
bottom: 1;
left: 0;
width: 100%;
margin-top: auto;
}
#rocketMobile {
left: 0%;
bottom: 0;
position: absolute;
}
#purpleMobile {
right: 0%;
bottom: 0;
position: relative;
}
You need to add a reset in your css. You could try adding this to your css.
body {
padding: 0;
margin: 0;
}
Argus
I've seen that pattern for centering an element on a website in the code of someone else:
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<img src="https://placebear.com/200/300" alt="picture-one" />
It works fine. No doubt !
But I can not imagine what the CSS-code actually does.
I've seen similar code in which positioning was used to extend an child element to the size of it's parent.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
But here it makes no sense to me.
Can someone explain me how these first shown technique work?
What the single properties do and how it finally accomplishes it's result?
I would appreciate it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
It's because the image has its default width and height.
When you use
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Element would get the window size and position the element inside of it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
position: relative;
}
<div id="wrap">
<div id="child"></div>
</div>
So, if you put position relative to #wrap, the position absolute #child will adjust to the parent.
Hope it helps! Cheers!
position: absolute allows you to set the distance of you element from the top, bottom, right and left from the edges of the whole page.
In the second example you have shown even thought the #wrap is set to a height of 800px the #child distance from each side of the page is set to be 0. So therefore it covers the whole page!
Hope this helped!
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: #000; border:1px solid #fff;
}
#container {
width: 100%;
height: 800px;
}
<div id="container">
<div id="inner"></div>
</div>
I have already looked here (How to show text on image when hovering?) to find a solution to this problem but it doesnt 100% work... Because the paragraph is located below the image part of the image is not covered when you hover over it. I want the whole image covered by the text when you hover over the image.
(Look at this: http://jsfiddle.net/rMhGE/ or below.)
The HTML
<body>
<div class="cube1">
<a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg">
<p class="contact">Random Text Here</p></a>
</div>
</body>
The CSS
.cube1 {
position: relative;
width: 400px;
height: 400px;
float: left;
}
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 386px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
}
.cube1:hover .contact {
visibility: visible;
opacity: 1;
}
Any help is appreciated. Thank you.
Remove the height from contact. as well as the margin. You also don't need the width value if you're stretching it with the absolute 0 0 0 0 method.
.contact {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin: 0;
}
change the p {margin:0px} of the p element
or give the class
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 395px;//change height also to cover it completly
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin:0px
}
The image has the text over it, I am not sure what you are trying to do here. What do you mean by "covering the image"?
You need to set margin on the "p" element to 0 and the "height" to 400:
margin:0;
height:400px;
Updated jsFiddle: http://jsfiddle.net/rMhGE/5/
Demo
Remove the height from .contact and apply top: -15px; bottom: -15px;
Alternatively, the best way, set margin: 0; removing height.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
UPDATED PROVIDING CONTEXT FOR THE LAYOUT
I have a relatively simple structure for my page. The page is composed of two div's both absolutely positioned. One is centered within the other.
<div id="protocol_index_body_wrapper">
<div id="protocol_index_body">
</div>
</div>
Which has the corresponding CSS:
#protocol_index_body_wrapper {
background: url("/images/stripe.png") repeat scroll 0 0 transparent;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
}
#protocol_index_body {
width: 960px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The expected behavior is seen in the image above. This behavior is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas?
Try this:
#protocol_index_body {
width: 50px;
margin: 0 auto 0 -25px;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background-color: red;
}
Or ...
#protocol_index_body {
width: 50px;
margin: 0 auto 0 50%;
position: absolute;
top: 0;
left: -25px;
right: 0;
bottom: 0;
background-color: red;
}
Unless you need the parent div to have a fluid width (which would be a little silly when you're setting the child div's width), why not just set the parent div's width and add margin:0 auto?
Okay I played around with it and this works identical in FF, Opera and IE7:
#protocol_index_body_wrapper {
background-color:black;
padding: 0 0 20px 0;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
text-align: center;
width: 100%;
height: 100%;
}
#protocol_index_body {
width: 50px;
margin: 0 auto;
background-color: red;
height: 100%;
}
autoCenterAlign = function() {
var bodyWidth = $("body").innerWidth();
var protocolWidth = $("#protocol_index_body").innerWidth();
if(protocolWidth < bodyWidth) {
$("#protocol_index_body").css("left",((bodyWidth-protocolWidth)/2)+"px");
}
}
window.onload = autoCenterAlign;
window.onresize = autoCenterAlign;
jQuery(window).load(function () {
autoCenterAlign()
});
text-align:center to the wrapper, or <div align=center> (ugly, I know, but works)
or with JS:
document.getElementById("protocol_index_body_wrapper").style.marginRight = (document.body.clientWidth - 50)/2_+"px"
works only on IE6+.