I have problem with my new website. On IE, Firefox and Opera works ok but on Chrome and Safari not. All in newest version.
Problem is with header, menu on left and right block (#NAGLOWEK, #MENU, #REKLAMA). In Chrome and Safari that blocks are positioned to right side of web browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>STOS</title>
<link rel="stylesheet" href="style5.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="top">
<div id="fixer"></div>
<div id="NAGLOWEK">Nagłówek szablonu</div>
<div id="MENU">Menu nawigacyjne</div>
<div id="REKLAMA">Dodatkowe informacje</div>
</div>
<div id="TRESC">Tre¶ć strony Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat pretium nibh ac hendrerit. Etiam eleifend ipsum eu velit cursus tincidunt. Aenean metus justo, ullamcorper tempor porta non, consectetur vitae lorem. Aliquam sed est arcu. Fusce vitae sapien facilisis odio varius euismod et ut mi. In vitae nibh at nisi gravida dapibus. Nullam ultricies bibendum dapibus. Proin aliquet nisi id enim iaculis feugiat. Nullam vulputate ligula ac tellus ornare tristique. Maecenas ac turpis nulla. In orci nunc, adipiscing sit amet semper nec, consectetur nec velit. Fusce dictum leo ullamcorper ante ornare iaculis. Curabiuam aliquam velit a tortor dignissim sed dictum nunc ornare. Praesent vehicula, nunc a convallis varius, lorem diam vulputate turpis, vitae placerat nibh diam in urna. Praesent nec justo magna. Sed velit ipsum, scelerisque et posuere tempus, porttitor vitae turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque gravida felis, et tincidunt quam rutrum sit amet. Nam malesuada consequat sem, ut molestie urna feugiat vel. Maecenas accumsan tincidunt nisl, non fringilla elit malesuada adipiscing. Nulla ac purus ut ligula imperdiet dignissim nec id massa. Aenean imperdiet fringilla vehicula. Sed commodo libero a lectus imperdiet nec fermentum metus fermentum. Ut eu magna in ante euismod accumsan. Integer quis dolor quis libero condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis, neque ac venenatis eleifend, orci velit tristique nibh, sit amet pellentesque lectus velit malesuada urna. Nunc lectus neque, placerat id pretium ut, tincidunt at libero. Donec aliquet dapibus ultricies. Praesent sollicitudin mauris et purus elementum placerat. Duis laoreet tortor nec nunc tincidunt volutpat. Nullam scelerisque neque est. Duis dapibus dui at metus iaculis quis elementum lorem accumsan. Etiam quis eros non nunc vehicula fermentum et id tellus. Nulla iaculis mauris varius felis tempor at tincidunt libero adipiscing. </div>
<div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>
CSS CODE:
/* CSS Document */
html, body {
background-color: #aff; /* ustalannie koloru tla, koloru fontu, usuwanie marginesow dla glownej strony */
color: #000;
margin: 0;
padding: 0;
}
#main { /* DOADATKOWY BLOK OBEJMUJACY*/
width: 960px;
margin: 0 auto;
}
#fixer { /* DODATKOWY BLOK ZAKRYWAJACY GORE STRONY -odsteb miedzy przegladarka a glownym blokiem (top) 25px */
width: 960px;
height: 25px;
background: #aff;
}
#top { /*blok obejmujacy - containing block*/
width: 960px; /*calosc 780px;*/
margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
top: 0px;
position: fixed;
}
#NAGLOWEK {
background-color: #888;
height: 175px;
}
#MENU {
width: 200px; /*150px;*/
float: left;
overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
background-color: #ccc;
top:200px; /* te 3 linijki odpowiadaja za to ze */
bottom: 25px; /* odrywaja warstwe (fixed) */
position: fixed; /* i rozciagaja automatycznie o 200px od gory i o szerokosc stopki na dole*/
}
#REKLAMA {
width: 160px;
float: right;
overflow: hidden;
background-color: #ccc;
top: 200px;
bottom: 25px; /* te 4 linijki rozciagaja w pione ale licza od lewej krawedzi PRZEGLADARKI a nie TOPu czy MAINa*/
position: fixed;
margin-left: 800px; /*a to zalatwia sprawe :), tyle czasu a to kwestia jednego polecenia */
}
#TRESC {
width: 600px; /* zawartosc, tresc 480px; */
overflow: hidden;
background-color: #fff;
margin: 200px auto 0px 200px;
}
#STOPKA {
clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
background-color: #888;
}
Problem is with header, menu on left and right block (#NAGLOWEK, #MENU, #REKLAMA). In Chrome and Safari that blocks are positioned to right side of web browser.
What is wrong?
Hello 123tomek, Welcome to SitePoint!
The problem is that position:fixed elements are positioned from the viewport. It looks like you may have understood that since you only set top: & bottom: offset positions. If you try to use left: or right: positions on a fixed element within a fixed width page it will not work.
If you nest the fixed element within a float you can control it’s horizontal positions without setting left: or right: positions. It looks like you may have been on the right track but you tried to float and fix at the same time, the fixed positioning wins out over the float.
The problem was right here in chrome and safari, it was using the 800px left margin to position from the left edge of your #main wrapping div.
#REKLAMA {
width: 160px;
[COLOR=Red]float: right;[/COLOR]
overflow: hidden;
background-color: #ccc;
top: 200px;
bottom: 25px; /* te 4 linijki rozciagaja w pione ale licza od lewej krawedzi PRZEGLADARKI a nie TOPu czy MAINa*/
[COLOR=Blue]position: fixed;[/COLOR]
[COLOR=Red]margin-left: 800px;[/COLOR] /*a to zalatwia sprawe :), tyle czasu a to kwestia jednego polecenia */
}
The easiest way to fix this and have it work in all browsers is to nest your fixed side columns in floated parent divs. As I mentioned above, then you do not have to set left and right positions for the fixed divs.
But it’s one little problem wit this. When on #TRESC will be less text is hole between #TRESC and #STOPKA.
The same problem is in demo on http://www.css-lab.com/demos/fixed/cntr-fix-hd-ft-sides.html - it’s visible when you cut some text and change background color.
When on #TRESC will be less text is hole between #TRESC and #STOPKA.
Hi,
If you are wanting a sticky footer then that will require some more work. It sounds like you need to set min-height:100% on your #main div if you do not want to see any gaps (holes) between #TRESC and #STOPKA. The BG color would go on #main then.
#TRESC should be adhered (sticked) to #STOPKA.
Yes, I had mentioned in my last post that I was not sure what you wanted to do with it.
I will make it a sticky footer for now and see if that is what you are wanting.
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>STOS</title>
<style type="text/css">
html, body {
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000;
background-color: #aff;
}
#main {
min-height:100%;
width: 960px;
margin: 0 auto;
background-color: #fff;
}
#top {
width: 960px;
height: 175px;
border-top:25px solid #aff; /*use border in place of #fixer div*/
/*margin: 0 auto;*/
top: 0;
position: fixed;
background-color: #888;
}
#left {/*nest #MENU in floated #left*/
float: left;
width: 200px;
}
#MENU {
width: 200px;
/*float: left;*/
overflow: hidden;
background-color: #ccc;
top: 200px;
bottom: 25px;
position: fixed;
}
#right {/*nest #REKLAMA in floated #right*/
float: right;
width: 160px;
}
#REKLAMA {
width: 160px;
/*float: right;*/
overflow: hidden;
background-color: #ccc;
top: 200px;
bottom: 25px;
position: fixed;
/*margin-left: 800px;*/
}
#TRESC {
width: 600px;
overflow: hidden;
background-color: #fff;
margin: 0 160px 0 200px;
padding:200px 0 50px 0; /*use padding to preserve fixed header and sticky footer*/
}
#TRESC p {margin:1em; line-height:1.3;}
#STOPKA {
width: 960px;
height: 25px;
margin: -50px auto 0;
background-color: red;
}
#innerfoot {
width: 600px;
height: 25px;
margin: 0 0 0 200px;
text-align:center;
background-color: #888;
}
#fixer {
position:fixed;
left:0; bottom:0;
width:100%;
height: 25px;
background: #aff;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
NAGLOWEK szablonu
</div>
<div id="left">
<div id="MENU">Menu nawigacyjne</div>
</div>
<div id="right">
<div id="REKLAMA">Dodatkowe informacje</div>
</div>
<div id="TRESC">
<p>TRESC</p>
<p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque
lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl
elit Mauris odio augue enim.</p>
<p>Interdum Nunc diam pharetra cursus non sed vel libero iaculis neque. Nulla venenatis sed dolor
eget Suspendisse Curabitur Vivamus Pellentesque libero id. Massa non quis purus nulla auctor id vel
eget sem nibh. Montes wisi lacus Lorem semper condimentum eros sapien a Curabitur.</p>
<p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque
lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl
elit Mauris odio augue enim.</p>
</div>
</div><!--end main-->
<div id="STOPKA">
<div id="innerfoot">STOPKA serwisu</div>
</div>
<div id="fixer"></div><!--hide main BG color-->
</body>
</html>
Not exactlly. The last code was much better. Footer was ok in first example and demo on css-lab.
But #TRESC wasn’t.
When is to less text in #TRESC this box didn’t sticky to footer (#STOPKA).
I want that #TRESC always was sticky to footer. For example when I put backgroud image to #TRESC (background: url(“images/somethink.jpg”) repeat; ) then this must be always visible. The background must be visible even when there is not enough text on #TRESC.
For example when I put backgroud image to #TRESC (background: url(“images/somethink.jpg”) repeat; ) then this must be always visible. The background must be visible even when there is not enough text on #TRESC.
If you would have put the BG image on #main then it would have worked. The #main div is the one that has min-height:100%.
But when on resize website to little window, scroll bar must be not inside box #TRESC but on web browser.
You need to remove the fixed positioning and overflow:auto from #TRESC then.
Footer was ok in first example and demo on css-lab.
Yeah, that was a fixed footer, not a sticky footer. We are having some communication problems here.
One question though, Do you want the footer fixed to the very bottom or 25px from bottom like sidebars were originally?
I think I know what you want now though, I’ll post back shortly.
One question though, Do you want the footer fixed to the very bottom or 25px from bottom like sidebars were originally?
I went ahead and left 25px at the bottom like your original example.
This should work according to what you have requested.
