Skocz do zawartości

Zmiana na DIVy, problem z repeat

Hook

Przez Hook
w HTML i CSS

Rekomendowane odpowiedzi

Hook Newbie

Hook

Opublikowano
Opublikowano

Postanowiłem zmienic stronke zrobiona w tabelkach na DIVy. Generalnie ogarnalem temat ale tylko generalnie. Mam problem z kilkoma detalami i licze na wskazowki doswiadczonych webmasterow.

DIV "pion" nie powiela w dol strony i to samo z divami "Left_menu" oraz "informacje". Te 3 divy powinny powielac sie w pionie wraz z rozszerzaniem diva "tresc" gdy zwieksza sie ilosc tekstu etc.

Ponizej kod html oraz css.

Bede wdzieczny za pomoc ;)

html:

<body>
<div id="body">
  <div id="top">
  </div>
  <div id="top2"> 
  </div>
  <div id="top3">
  </div>
  <div id="top4">
  </div>
  <div id="top5">
  </div>
  <div id="LEFT_MENU">
     <div id="LEFT">
     </div>

  </div>
  <div id="PION">
  </div>
  <div id="TRESC">


</div>

  <div id="INFORMACJE">

</p>
</div>
  <div id="DOL">
  </div>
  <div id="STOPKA"></div>
</div>


</body></html>

CSS:

body,html {
width:100%;
height:100%;
text-align: center;
}

#body {
background-color: #fff;
width: 885px;
height:100%;
border: none;
text-align: center;
}

#top {
width: 885px;
height:130px;

   background-image:url('pics/top.gif');
}
#top2 {
width: 885px;
   height:10px;

background-image:url('pics/top2.gif');
}
#top3 {
width: 183px;
   height: 29px;
float: left;
overflow: hidden;
background-image:url('pics/top3.gif');
background-repeat:no-repeat;
}
#top4 {
min-width: 100px;
height: 29px;
clear: both;

background-image:url('pics/gradient.gif');
background-repeat:repeat;
}
#top5 {
width: 885px;
height: 5px;
float: left;
overflow: hidden;
background-image:url('pics/cien.gif');
}

#LEFT {
width: 170px;
   height: 44px;
float: left;
overflow: hidden;
background-image:url('pics/top4.gif');
}

#LEFT_MENU {
width: 170px;
float: left;
overflow: hidden;
background-image:url('pics/lewy_panel.gif');
background-repeat:repeat-y;
}

#INFORMACJE {
width: 170px;
float: left;
overflow: hidden;
background-image:url('pics/czerwony.gif');
background-repeat:repeat;
}

#TRESC {
width: 536px;
float: left;
overflow: hidden;
background-image: url('pics/element.gif');
}

#PION {
width: 9px;
   height: 100%;
float: left;
overflow: hidden;
background-image:url('pics/top4.gif');
background-repeat:repeat;


}

#DOL {
width: 885px;
height: 14px;
float: left;
overflow: hidden;
background-image:url('pics/bottom.gif')
}

#STOPKA {
width: 885px;
height: 33px;
float: left;
overflow: hidden;
background-image:url('pics/stopka.gif')
}

Odnośnik do komentarza
Udostępnij na innych stronach
Hook Newbie

Hook

Opublikowano
  • Autor
Opublikowano

Jesli w divie TRESC wpisze duzo tekstu to automatycznie mi sie rozciaga ale pozostałe go okalające czyli LEFT MENU, PION, INFORMACJE pozostaja w niezmiennej formie. Chciałbym aby sie wydluzyly do diva DOL.

Tu widac w czym problem https://imageshack.us/photo/my-images/440/1111mu.gif/

Ktos bedzie wogole zainteresowany udzieleniem pomocy czy mam sobie tu darowac?????

Odnośnik do komentarza
Udostępnij na innych stronach
Hook Newbie

Hook

Opublikowano
  • Autor
Opublikowano

Skorzystalem z tego tutoriala https://www.forumweb.pl/viewtopic.php?t=50654

Ruszylem z miejsca bo firefox juz widzi kolumny do stopki ale problem powstal ze srodkowym divem TRESC. Ucielo go do miejsca gdzie konczy sie tresc w bocznych kolumnach. Jakis pomysl?

Wzielem te 3 divy zamknalem w jednym glownym divie. Kod css tego diva

#MIDDLE {
width: 885px;
   height: 100%;
overflow: hidden;
background-image:url('pics/lewy_panel.gif');
background-repeat:repeat;
}

Odnośnik do komentarza
Udostępnij na innych stronach
Hook Newbie

Hook

Opublikowano
  • Autor
Opublikowano

Generalnie tak jest pociety layout 18411045.th.jpg

Uploaded with ImageShack.us

Najwiekszy problem z DIVem TRESC (8) bo teskt albo ucina mi stopka albo stopka najdzie mi na tekst ze niby koniec strony a tekst w najlepsze leci ponizej. Powinno byc ze gdy tekst w TRESCi jest duzy to wydluzaja sie boczne kolumny i dopiero na koniec tekstu pojawia sie stopka.

Odnośnik do komentarza
Udostępnij na innych stronach
Hook Newbie

Hook

Opublikowano
  • Autor
Opublikowano

W firefoxie wszystko jest dobrze.

Problem jest w IE.

np. pod divem top2 (2 na rys.) robi się przerwa na wysokosc top2 czyli kilka px

Identyczne bylo pod top5 ale dalem position: absolute i przerwa zniknela. W przykladzie wyzej to nie dziala bo wywala mi top2 z body

Ostatni bol to miedzy divem dol a stopka wskakuje tło z diva middle (ma ono wysokosc 3px i w divie middle dziala z repeatem)

To jedyne bledy jakie mi zostaly

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności