Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Szablon DIV - problem pomocy..
Forum PHP.pl > Forum > Przedszkole
adi456
26.11.2011, 10:11:37
Witam, mam taki dziwny problem, z tego co czytałem w kursach gdy ustawi się styl float: left ,
element będzie oblewany z prawej strony całą pozostałością na stronie,
analogicznie gdy mam 3 divy w lewym ustawie float: left w prawym float:right, to środek powinien się rozciągać w zależności od rozdzielczości oraz rozmiarów przeglądarki, i tak się dzieje tylko dlaczego prawy div jest na wysokości kończącego się środkowego?

podgląd: http://bazujemy.pl/test/

kod html:
[HTML] pobierz, plaintext 
  1. <html>
  2.  <head>
  3.   <link rel="Stylesheet" type="text/css" href="style.css" />
  4.  </head>
  5.  
  6. <body>
  7. 	<div id="left">
  8. 	lewa
  9. 	</div>
  10. 	<div id="tresc">
  11. 	srodek
  12. 	</div>
  13. 	<div id="right">
  14. 	prawa
  15. 	</div>
  16. </body>
  17. </html>
[HTML] pobierz, plaintext


kod css:
[HTML] pobierz, plaintext 
  1. #left {
  2. float:left;
  3. width: 240px;
  4. border: 1px solid;
  5. }
  6. #tresc {
  7. margin-left:290px;
  8. margin-right:290px;
  9. min-height: 500px;
  10. min-width: 200px;
  11. border: 1px solid;
  12. }
  13. #right {
  14. float:right;
  15. width: 240px;
  16. border: 1px solid;
  17. }
[HTML] pobierz, plaintext
jacobson
26.11.2011, 10:19:24
ja mam cos takiego - o takie chodzilo ?
http://jsfiddle.net/5mJQT/2/
adi456
26.11.2011, 10:23:44
dokładnie o to chodziło ale dołożyłem do środka float: left wykasowałem marginesy efekt mam taki że środek się nie rozciąga
jacobson
26.11.2011, 10:30:21
a chcesz osiagnac zeby wszystkie 3 divy byly dokladnie obok siebie ? ja jak ogladam Twoj przykald w operze to sa obok siebie tylko miedzy trescia a prawym divem jest przerwa.
adi456
26.11.2011, 10:34:53
chce zrobić tak jak jest tu http://bazujemy.pl/test/

ale żeby prawy div był na wysokości pozostałych

po twojej modyfikacji mam tak http://bazujemy.pl/test2/

czyli jest ok gdyby środkowy div dopasowywał się do szerokości w przegladarce

według kursu http://www.kurshtml.edu.pl/css/plynny_szablon,szablon.html kod w test jest poprawny tylko dlaczego to nie działa?
jacobson
26.11.2011, 10:45:53
nie dziala poniewaz min-width najwidoczniej nie dziala przy plywajacych elementach... moze zamiast tego sprobuj ustawic % szerokosc kazdego elementu. np 10% , 80%, 10% albo srodek troche mniejszy ze wzgledu na krawedzie.
Bateria
26.11.2011, 10:48:12
Jestem pewien że chodziło Ci o to:
[HTML] pobierz, plaintext 
  1. #left {
  2. float:left;
  3. width: 20%;
  4. border: 1px solid black;
  5. }
  6. #tresc {
  7. min-width: 59%;
  8. border: 1px solid;
  9. float: left;
  10. }
  11. #right {
  12. float: left;
  13. width: 20%;
  14. border: 1px solid black;
  15. }
[HTML] pobierz, plaintext


Chodzi o to że szerokość okien musisz dopasować "Procentowo" do wielkości okna przeglądarki.
jacobson
26.11.2011, 10:50:00
dokladnie o to mi chodzilo. Ale chyba dziala poprawnie.
Bateria
26.11.2011, 10:51:37
Jak chcesz się odwdzięczyć to kliknij napis 'Pomógł smile.gif'
adi456
26.11.2011, 10:51:38
wykasowałem z przykładu min-height: 500px; min-width: 200px; i dalej to samo, che tylko żeby sodek był elastyczny więc % nie daje rady ponieważ w zależności od szerokości będą robiły się różne odstępy miedzy divami

zrobiłem już parę stron i nigdy nie mogłem poradzić sobie z tym problemem i zawsze robiłem każdy div na float: left ale było wszystko na sztywno teraz chce żeby środkowy element był elastyczny no i problem sad.gif

dzięki Bateria działa wink.gif
jacobson
26.11.2011, 10:53:48
znalazlem przed chwila taki link: http://css-tricks.com/138-the-perfect-fluid-width-layout/ moze tutaj znajdziesz cos dla siebie - strona elastyczna z zakresu podanego na niej i udostepniaja swoj kod. Moze Ci pomoze smile.gif
adi456
26.11.2011, 11:01:11
jednak dupa... wszystko jest ok dopóki środek nie zapełnie treścią

patrz http://bazujemy.pl/test3/
Bateria
26.11.2011, 11:14:54 
[HTML] pobierz, plaintext 
  1. #left {background:green;width:280px;float:left;margin-left:-745px}
  2. #right {background:red;width:465px;float:left;margin-left:-465px}
  3. #tresc {background:blue}
[HTML] pobierz, plaintext


Musi działać
adi456
26.11.2011, 11:18:38
dalej źle
http://bazujemy.pl/test5/

tu jest więcej zbudowanej strony
bazujemy.pl/szukaj

jak macie pomysł co z tym można zrobić to piszcie a ja na bierząco będe edytować strone
Kshyhoo
26.11.2011, 11:36:38
Eh, kombinujecie i kombinujecie:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title>Test trzech DIV-ów</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. </head>
  8. <body>
  9.   <style type="text/css">
  10.   #wrapper {
  11.     /* Szerokość całej naszej strony.
  12.     Jeśli nie ustawimy szerokości - nie
  13.     zadziała centrowanie! */
  14.     width: 970px;
  15.     margin: 0 auto; /* Centrowanie całej strony */
  16.   }
  17.   #container {
  18.     float: left;
  19.     /* Jeśli nie dodamy float - nie
  20.     zadziała nam background-color ! */
  21.     background-color: #dedede;
  22.   }
  23.   #header {
  24.     width: 970px;
  25.     height: 85px;
  26.     background-color: lightblue;
  27.   }
  28.   #left {
  29.     float: left;
  30.     width: 195px;
  31.     padding: 5px;
  32.     /* Łącznie: 195 + 2 * (5) = 205px */
  33.     background-color: teal;
  34.   }
  35.   #center {
  36.     float: left;
  37.     width: 550px;
  38.     padding: 5px;
  39.     /* Łącznie: 550 + 2 * (5) = 560px */
  40.     background-color: green;
  41.   }
  42.   #right {
  43.     float: left;
  44.     width: 195px;
  45.     padding: 5px;
  46.     /* Łącznie: 195 + 2 * (5) = 205px */
  47.     background-color: orange;
  48.   }
  49.   #footer {
  50.     float: left;
  51.     width: 970px;
  52.     height: 25px;
  53.     background-color: lightblue;
  54.   }
  55.   </style>
  56.   <div id="wrapper">
  57.     <div id="container">
  58.       <div id="header">
  59.         Tutaj logo...
  60.       </div>
  61.       <div id="left">
  62.         <a href="#">Link 1</a><br />
  63.         <a href="#">Link 2</a><br />
  64.         <a href="#">Link 3</a><br />
  65.         <a href="#">Link 4</a><br />
  66.         <a href="#">Link 5</a>
  67.       </div>
  68.       <div id="center">
  69.         Lorem ipsum dolor sit amet,
  70.         consectetur adipiscing elit.
  71.         Proin at mollis erat. Nam
  72.         luctus nulla aliquam tellus
  73.         vestibulum iaculis. Lorem
  74.         ipsum dolor sit amet,
  75.         consectetur adipiscing elit.
  76.         Curabitur scelerisque massa
  77.         vel augue porttitor tristique.
  78.         Proin ut ipsum a risus tincidunt
  79.         fermentum at vel mi. Integer
  80.         adipiscing suscipit felis id
  81.         eleifend.
  82.       </div>
  83.       <div id="right">
  84.         <a href="#">Link 1</a><br />
  85.         <a href="#">Link 2</a><br />
  86.         <a href="#">Link 3</a><br />
  87.         <a href="#">Link 4</a><br />
  88.         <a href="#">Link 5</a>
  89.       </div>
  90.       <div id="footer">
  91.         Stopka
  92.       </div>
  93.     </div>
  94.   </div>
  95.  
  96. </body>
  97. </html>
[HTML] pobierz, plaintext

adi456
26.11.2011, 11:44:40
ha kombinujemy bo to nie takie łatwe, float: left w każdym divie to dobry sposób ale tylko wtedy gdy divy mają stałą szerokość w tym przypadku środek ma być elastyczny
Kshyhoo
26.11.2011, 12:02:05
Też nie problem:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title>Test trzech DIV-ów</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. </head>
  8. <body>
  9.   <style type="text/css">
  10.   #wrapper {
  11.     /* Szerokość całej naszej strony.
  12.     Jeśli nie ustawimy szerokości - nie
  13.     zadziała centrowanie! */
  14.     width: 100%;
  15.     margin: 0 auto; /* Centrowanie całej strony */
  16.   }
  17.   #container {
  18.     float: left;
  19.     /* Jeśli nie dodamy float - nie
  20.     zadziała nam background-color ! */
  21.     background-color: #dedede;
  22.   }
  23.   #header {
  24.     100%;
  25.     height: 85px;
  26.     background-color: lightblue;
  27.   }
  28.   #left {
  29.     float: left;
  30. 		display: inline;
  31.     width: 195px;
  32.     padding: 5px;
  33.     /* Łącznie: 195 + 2 * (5) = 205px */
  34.     background-color: teal;
  35.   }
  36.   #center {
  37.     <!-- float: left; -->
  38. 		display: inline;
  39.    <!--  width: 550px; -->
  40.     padding: 5px;
  41.     /* Łącznie: 550 + 2 * (5) = 560px */
  42.     background-color: green;
  43.   }
  44.   #right {
  45.     float: right;
  46. 		display: inline;
  47.     width: 195px;
  48.     padding: 5px;
  49.     /* Łącznie: 195 + 2 * (5) = 205px */
  50.     background-color: orange;
  51.   }
  52.   #footer {
  53.     float: left;
  54.     width: 100%;
  55.     height: 25px;
  56.     background-color: lightblue;
  57.   }
  58.   </style>
  59.   <div id="wrapper">
  60.     <div id="container">
  61.       <div id="header">
  62.         Tutaj logo...
  63.       </div>
  64.       <div id="left">
  65.         <a href="#">Link 1</a><br />
  66.         <a href="#">Link 2</a><br />
  67.         <a href="#">Link 3</a><br />
  68.         <a href="#">Link 4</a><br />
  69.         <a href="#">Link 5</a>
  70.       </div>
  71.       <div id="right">
  72.         <a href="#">Link 1</a><br />
  73.         <a href="#">Link 2</a><br />
  74.         <a href="#">Link 3</a><br />
  75.         <a href="#">Link 4</a><br />
  76.         <a href="#">Link 5</a>
  77.       </div>
  78.       <div id="center">
  79.         Lorem ipsum dolor sit amet,
  80.         consectetur adipiscing elit.
  81.         Proin at mollis erat. Nam
  82.         luctus nulla aliquam tellus
  83.         vestibulum iaculis. Lorem
  84.         ipsum dolor sit amet,
  85.         consectetur adipiscing elit.
  86.         Curabitur scelerisque massa
  87.         vel augue porttitor tristique.
  88.         Proin ut ipsum a risus tincidunt
  89.         fermentum at vel mi. Integer
  90.         adipiscing suscipit felis id
  91.         eleifend.
  92.       </div>
  93.  
  94.       <div id="footer">
  95.         Stopka
  96.       </div>
  97.     </div>
  98.   </div>
  99.  
  100. </body>
  101. </html>
[HTML] pobierz, plaintext
adi456
26.11.2011, 12:24:55
problem rozwiązany dzięki użytkownikowi Kshyhoo odkryłem ciekawa zależność,

mamy 3 divy: lewy (z float left), środek, prawy (z float right)

gdy dam je w kolejności

lewy, środek, prawy - prawy będzie poniżej pozostałych

a gdy dam
lewy, prawy, środek - wszystko jest na jednej wysokości, środkowy div będzie elastyczny

p.s. Kshyhoo display: inline jest niepotrzebne a w moim przypadku rozwala to strone
Kshyhoo
26.11.2011, 12:39:38
Cieszę się, że mogłem pomóc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.