I'm making a webpage and I have three elements positioned at the bottom of the page (the viewport) with some offset in two of them. The work great on everything except the **** problematic Internet Explorer. This is what it looks like in chrome or other real browsers (including Opera, Safari, Android default, Mozilla, etc.):
And from the antique IE:
Here's the HTML:
<span class="subtitle-scroll">Scroll para continuar</span>
<img src="css/images/mouse.png" class="mouse">
<img src="css/images/sprite.png" alt="" class="sprite">
And the CSS:
.subtitle-scroll {
position:absolute;
color:#fff;
font-weight:100;
font-size:24px;
bottom:50px;
left:0;
right:0;
z-index:-1;
margin:auto;
}
.mouse {
position:absolute;
bottom:10px;
left:0;
right:0;
width:20px;
z-index:-1;
margin:auto;
}
.sprite {
max-width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
}
Live Example
Using margin: 0 auto instead of margin: auto for .mouse and .sprite seems to fix the problem with absolute centering for IE. Since you want it bottom-aligned, there's no reason to have auto margins on the top and bottom.
.subtitle-scroll {
position:absolute;
color:#fff;
font-weight:100;
font-size:24px;
bottom:50px;
left:0;
right:0;
z-index:-1;
margin:auto;
}
.mouse {
position:absolute;
bottom:10px;
left:0;
right:0;
width:20px;
z-index:-1;
margin:0 auto;
}
.sprite {
max-width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
right:0;
margin:0 auto;
}
Related
I'm searching a way to place a bottom-border inside a div. I searched around the web including SE) and I've found two solutions that aren't useful for me:
Using box-sizing: border-box;, but it doesn't work for me. It seems that doesn't exists that property (nor Bluefish o Firefox doesn't recognize it )
Using box-shadow, but the shadows surround the entire div and I only want top draw a border at the bottom of the div.
Exists a solution for this? if not, how can I solve the box-sizing property problem?
Thanks!
You can do this using pseudo-elements, simply place a pseudo-element on the bottom with a background of your choice
Bottom only
.box{
width:200px;
height:100px;
background:grey;
padding-bottom:5px;
position:relative;
}
.box:after{
position:absolute;
content:"";
bottom:0;
height:5px;
width:100%;
background:red;
}
<div class="box"></div>
Top only
.box{
width:200px;
height:100px;
background:grey;
padding-top:5px;
position:relative;
}
.box:after{
position:absolute;
content:"";
top:0;
height:5px;
width:100%;
background:red;
}
<div class="box"></div>
Both top and bottom
.box{
width:200px;
height:100px;
background:grey;
padding:5px 0;
position:relative;
}
.box:after{
position:absolute;
content:"";
top:0;
height:5px;
width:100%;
background:red;
}
.box:before{
position:absolute;
content:"";
bottom:0;
height:5px;
width:100%;
background:red;
}
<div class="box"></div>
You can also put it on all four sides
.box{
width:200px;
height:100px;
background:grey;
padding:5px;
position:relative;
}
.box:after{
position:absolute;
content:"";
top:0;
left:0;
height:calc(100% - 10px);
width:calc(100% - 10px);
border:5px solid #00CCFF;
}
<div class="box"></div>
Surely border-bottom solves this?
.box{
width:200px;
height:100px;
background:grey;
border-bottom:5px solid red;
}
<div class="box"></div>
I'm of a mind to say that the box-sizing declaration doesn't do what you think it does.
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
How would i fix this logo to allways be in the center top of the page and doesn't move as browser changes size, so when the browser changes size the logo stays in its old position and will not recenter its self.
Here is my current CSS
CSS
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
Thankyou for your help
CSS
body
{
height: 1000px;
}
#logo {
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
HTML
<div id="logo">
</div>
Fiddle
Remove your margin, left and right properties and add this one:
margin-left:100px;
This way, your image will always be 100px to the right.
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
z-index:1;
top:0px;
margin-left:100px;
}
http://jsfiddle.net/L9tqk/2/
i cant place my footer in correct place
<div id="logo"></div>
<div id="content">
<div id="trans">
<div id="data">
<div id="left"> </div>
<div id="right"> </div>
</div>
</div>
<div id="footer"></div>
#footer {
position:relative;
width:100%;
clear:both;
}
when give
bottom:0;
to #footer normal window it placed correctly, but when window size is changed, the footer position is not correct.
remove position:absolute; from #content #trans and set float to it:
DEMO
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
float:left;
border-radius:5px;
color:Red;
}
Give fixed position to footer.
#footer{
position:fixed;
}
Demo here.
OR:
Give hidden overflow to #content #trans.
Write:
#content #trans{
overflow:hidden;
}
DEMO here.
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
float:left;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
color:Red;
}
OR
#footer {
position:fixed;
bottom:0;
width:100%;
clear:both;
}
Final correct answer : http://jsfiddle.net/L9tqk/11/
change `position: absolute;` to `position: relative;` and
overflow: hidden; add in your `#content #trans`
try this
#footer {
position:absolute;
width:100%;
clear:both;
bottom:0;
}
Change this Css position to relative and it works
#content #trans {
background: rgba(0,0,0,0.3);
width:100%;
height:auto;
position:relative;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
color:Red;
}
The updated fiddle
http://jsfiddle.net/L9tqk/9/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This works for almost all web browsers. It remains fixed and all other contents will be behind it.
This nested div renders differently in FireFox and Chrome. Chrome, with the result I am looking for.
A div that can grow with content, inside of another div that has a padding of 20px.
The effect should look like it has a 20px bar above and below the nested div like this (in Chrome).
http://jsfiddle.net/SEOplay/58xRJ/2/embedded/result/
The code I'm using:
HTML
<section>
<div class="dualContainer">
<div class="dualBgBlock"></div>
<div class="dualMiddle">
<div class="dualContent"></div>
</div>
</div>
</section>
CSS
div.dualContainer {
margin-top:50px;
margin-bottom:20px;
position:relative;
z-index:0;
width:100%;
}
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px;
}
div.dualMiddle {
width:80%;
margin:0 auto;
}
div.dualContent {
background-color:#333;
overflow:hidden;
position:relative;
height:200px;
}
Link to the fiddle:
http://jsfiddle.net/SEOplay/58xRJ/2/
So how can I get FireFox to render my code the way Chrome does?
Padding is in the wrong place. Move it from .dualBgBlock {} to .dualContainer {}
Fiddle Example
CSS:
div.dualContainer {
padding:20px;
}
div.dualBgBlock {
// No padding here
}
move your padding to div.dualMiddle, see demo here
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px; //remove this line
}
div.dualMiddle {
width:80%;
margin:0 auto;
padding:20px; //add this line
}