div 100% strony, nie okna 7182 6

O temacie

Autor Caesum

Zaczęty 16.04.2012 roku

Wyświetleń 7182

Odpowiedzi 6

Caesum

Caesum

Użytkownicy
posty1727
Propsy2215
NagrodyV
Profesjabrak
  • Użytkownicy
Próbuję i próbuję i qrwa nie działa. Wie ktoś może, co zrobić, by div rozciągnął się na całą wysokość strony? Podkreślam: strony, nie przeglądarki. Próbowałem height/min-height na 100%, oraz ustawianie wysokości html i body na 100%, ale to i tak nie działa. Znacie może jakieś inne sposoby?
 

eto

eto

Użytkownicy
-Banany pod pokładem? -SĄĄĄĄĄĄ
posty1741
Propsy1793
ProfesjaLvl designer
  • Użytkownicy
  • -Banany pod pokładem? -SĄĄĄĄĄĄ
obawiam sie ze tu bylby problem, kazda strona jest inaczej "cala" na innej rozdzielczosci. moze po prostu sprobuj na pikselach, wez sobie taka ich ilosc jaka uwazasz za sluszna
 
Niespełniony Level Designer z ambicjami, zmęczeniem i brakiem czasu...

Caesum

Caesum

Użytkownicy
posty1727
Propsy2215
NagrodyV
Profesjabrak
  • Użytkownicy

Caesum

div 100% strony, nie okna
#2 2012-04-16, 18:45(Ostatnia zmiana: 2012-04-16, 20:01)
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 &#36;add_site = true; include &#39;include/news.html&#39;; ?></p><br>
</div>
<div id="menu">
<p><?php &#36;add_site = true; include &#39;include/menu.html&#39;; ?></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. :|
 

Żelazko

Żelazko

Użytkownicy
Alt Mac Dupy
posty1100
Propsy1208
Profesjabrak
  • Użytkownicy
  • Alt Mac Dupy

Żelazko

div 100% strony, nie okna
#3 2012-04-26, 05:08(Ostatnia zmiana: 2012-04-26, 05:08)
Musiałbyś wjebać jakiś skrypt co czyta jaką rozdzielczość ma ustawiąną user...

Cytuj
I już jest zajebiście. Ale nie na IE.  

Jebać żydów z microsoftu.  :lol2:

Caesum

Caesum

Użytkownicy
posty1727
Propsy2215
NagrodyV
Profesjabrak
  • Użytkownicy
Już nieważne. Udało mi się znaleźć powód dla którego nie chciało działać przy ustawianiu wymiarów html i body i już działa. :)
Nie pamiętam tylko co zrobiłem, więc nie podam co było przyczyną.
 

Zdunek

Zdunek

Administrator
Ken'Udz mistrz stali i runy
posty671
Propsy132
Profesjabrak
  • Administrator
  • Ken'Udz mistrz stali i runy
Już nieważne. Udało mi się znaleźć powód dla którego nie chciało działać przy ustawianiu wymiarów html i body i już działa. :)
Nie pamiętam tylko co zrobiłem, więc nie podam co było przyczyną.

To ja coś podpowiem
w body i w html musi być
min-height:100%;
height:100%;

a w kontenerze w body musi być
min-height:100%;

Mam to zrobione przykładowo na tej stronie
http://covacotrading.com/
 
Po co utrudniać coś co jest proste?

Agencja Interaktywna - CreaWeb.

Caesum

Caesum

Użytkownicy
posty1727
Propsy2215
NagrodyV
Profesjabrak
  • Użytkownicy
Tylko właśnie cały problem u mnie polegał na tym, że mimo ustawienia tego strona i tak nie chciała się wyświetlić na całości. Okazało się to jednak łatwe do naprawienia. Wystarczyło dodać clear: both. :D
 


0 użytkowników i 1 Gość przegląda ten wątek.
0 użytkowników
Do góry