Musiałbym wtedy dać ilość pikseli na nie wiem, 99999px, żeby uzyskać odpowiedni efekt. Może po prostu wrzucę swój style.css i ktoś popacza, czy jakiejś głupoty nie zrobiłem?
html {
height: 100%;
}
body {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000000;
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial;
color: #a4a4a4;
}
p {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
#main {
width: 980px;
position: relative;
margin: 0 auto; /* center, not in IE5 */
background-image: url(images/background2.png);
background-repeat: repeat-y;
min-height: 100%;
}
#logo-left {
position: relative;
float: left;
width: 338px;
height: 106px;
display: inline;
text-align: right;
}
#logo-center {
float: left;
width: 304px;
height: 106px;
display: inline;
}
#logo-right {
position: relative;
float: left;
width: 338px;
height: 106px;
display: inline;
text-align: left;
}
span {
position: absolute;
bottom: 10px;
right: 0;
}
span2 {
position: absolute;
bottom: 10px;
}
#main2 {
position: relative;
margin: 0 auto; /* center, not in IE5 */
width: 962px;
}
#buttons {
position: relative;
float: left;
width: 962px;
height: 48px;
background-image: url(images/buttons.png);
background-repeat: repeat-x;
}
#news {
position: relative;
float: left;
width: 739px;
/*background-color: #ff0000;*/
top: 5px;
display: inline;
background-image: url(images/background3.png);
}
#menu {
position: relative;
float: left;
display: inline;
width: 219px;
/*background-color: #ff0000;*/
text-align: right;
top: 5px;
left: 5px;
background-image: url(images/background3.png);
}
#footer {
position: relative;
float: left;
width: 962px;
text-align: center;
/*background-color: #ff0000;*/
top: 10px;
background-image: url(images/background3.png);
}
/* ============================================ */
#slideshow {
position: relative;
margin: 0 auto; /* center, not in IE5 */
width: 320px;
height: 240px;
border-style: solid;
border-width: 1px;
border-color: #4f4f4f;
}
#slideshow IMG {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow IMG.active {
z-index: 10;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: 9;
}
/* ============================================ */
To na samym dole to skrypcior na slideshow, raczej nie wart uwagi, ale i tak wklejam.
main to div, który chcę, żeby miał 100%. Cała reszta siedzi w środku.
<div id="main">
<div id="logo-left">
<span>
<a href="#" border="0"><img src="theme/logo/redakcja.png" onmouseover="src='theme/logo/redakcja-active.png'" onmouseout="src='theme/logo/redakcja.png'" border="0"></a>
</span>
</div>
<div id="logo-center">
<a href="#" border="0"><img src="theme/images/logo.png"></a>
</div>
<div id="logo-right">
<span2>
<a href="#" border="0"><img src="theme/logo/ksiega.png" onmouseover="src='theme/logo/ksiega-active.png'" onmouseout="src='theme/logo/ksiega.png'" border="0"></a>
</span2>
</div>
<div id="main2">
<div id="buttons">
</div>
<div id="news">
<br><div id="slideshow">
<img src="theme/slideshow/1.png" alt="Yukie - The Demon Slayer" class="active" />
<img src="theme/slideshow/2.png" alt="Sven Mortais - Revelation" />
<img src="theme/slideshow/3.png" alt="Twierdza Bogow" />
</div>
<br><p><?php $add_site = true; include 'include/news.html'; ?></p><br>
</div>
<div id="menu">
<p><?php $add_site = true; include 'include/menu.html'; ?></p>
</div>
<div id="footer"><p>
Copyright © 2012 by Caesum
<br>Wszystkie prawa zastrzeżone
<br>
<br>Strona działa najlepiej w rozdzielczości 1024x768 pikseli badz wyzszej w przeglądarce Mozilla Firefox<br>
</p></div>
</div>
</div>
Tak wygląda index.
Tak w ogóle to zrobiłem na testowej stronie tak jak napisali
TUTAJ i wszystko zajebiście działa, a więc musi być to problem z moją stroną.
EDIT: Dobra, już wiem co mi rozwala stronę. Kawałek od #news do #footer włącznie. Nie mam jednak pojęcia why.
EDIT2: Znalazłem odpowiedź. float to wszystko powodował(cóż za niespodzianka). Zmieniłem go na:
#news, #menu, #footer {
position: relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
I już jest zajebiście. Ale nie na IE.