Jump to content
Hook

Zmiana na DIVy, problem z repeat

Recommended Posts

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')
}

Edited by Hook

Share this post


Link to post
Share on other sites

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 http://imageshack.us/photo/my-images/440/1111mu.gif/

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

Share this post


Link to post
Share on other sites

Lewy i prawy div ma rozciagac sie w dol zeby polaczyc sie ze stopka tworzac calosc ze stopka. W miare zrozumiale sie wyrazam? Popatrz na zdjecie i przedluz sobie kolory to odkryjesz o co mi chodzi.

Share this post


Link to post
Share on other sites

Zainteresuj się "Faux Columns".


Wykonam:

- kodowanie z .psd do HTML/CSS/JS,

- wdrażanie szablonów pod WordPress, SEOKatalog oraz inne skrypty.

Share this post


Link to post
Share on other sites

div może się rozciągnąć jeśli jego potomek się rozciąga, jeśli rodzic to height:100% nie pomoże. Jeśli to sprawa kolorów, to najprościej ustawić odpowiednio tło w div'ie "body"

Share this post


Link to post
Share on other sites

Konkretny przyklad rozwiazania podaj. Pod samym haslem mam tyle roznych tematow ktore nie ogarniam. Podejrzewam ze robie gdzies banalny blad w kodzie i dlatego krece sie za wlasnym ogonem

Share this post


Link to post
Share on other sites

Przeczytaj na spokojnie którys z dostępnych tutoriali pod podanym wyżej hasłem. Wszystko jest dokładnie opisane.


Wykonam:

- kodowanie z .psd do HTML/CSS/JS,

- wdrażanie szablonów pod WordPress, SEOKatalog oraz inne skrypty.

Share this post


Link to post
Share on other sites

Skorzystalem z tego tutoriala http://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;
}

Edited by Hook

Share this post


Link to post
Share on other sites

Jeśli masz nadal z tym problem to podaj mi na pw link do tej strony.


Wykonam:

- kodowanie z .psd do HTML/CSS/JS,

- wdrażanie szablonów pod WordPress, SEOKatalog oraz inne skrypty.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edited by Hook

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy