Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Szablon DIV - problem pomocy..
adi456
post
Post #1





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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


Ten post edytował adi456 26.11.2011, 11:53:02
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 18)
jacobson
post
Post #2





Grupa: Zarejestrowani
Postów: 468
Pomógł: 36
Dołączył: 14.12.2010

Ostrzeżenie: (0%)
-----

ja mam cos takiego - o takie chodzilo ?
http://jsfiddle.net/5mJQT/2/

Ten post edytował jacobson 26.11.2011, 10:19:36
Go to the top of the page
+Quote Post
adi456
post
Post #3





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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

Ten post edytował adi456 26.11.2011, 10:30:31
Go to the top of the page
+Quote Post
jacobson
post
Post #4





Grupa: Zarejestrowani
Postów: 468
Pomógł: 36
Dołączył: 14.12.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
adi456
post
Post #5





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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?

Ten post edytował adi456 26.11.2011, 10:40:06
Go to the top of the page
+Quote Post
jacobson
post
Post #6





Grupa: Zarejestrowani
Postów: 468
Pomógł: 36
Dołączył: 14.12.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Bateria
post
Post #7





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 23.11.2011

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Bateria 26.11.2011, 10:50:46
Go to the top of the page
+Quote Post
jacobson
post
Post #8





Grupa: Zarejestrowani
Postów: 468
Pomógł: 36
Dołączył: 14.12.2010

Ostrzeżenie: (0%)
-----

dokladnie o to mi chodzilo. Ale chyba dziala poprawnie.
Go to the top of the page
+Quote Post
Bateria
post
Post #9





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 23.11.2011

Ostrzeżenie: (0%)
-----

Jak chcesz się odwdzięczyć to kliknij napis 'Pomógł (IMG:style_emoticons/default/smile.gif) '
Go to the top of the page
+Quote Post
adi456
post
Post #10





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/sad.gif)

dzięki Bateria działa (IMG:style_emoticons/default/wink.gif)

Ten post edytował adi456 26.11.2011, 10:54:20
Go to the top of the page
+Quote Post
jacobson
post
Post #11





Grupa: Zarejestrowani
Postów: 468
Pomógł: 36
Dołączył: 14.12.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
adi456
post
Post #12





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

jednak dupa... wszystko jest ok dopóki środek nie zapełnie treścią

patrz http://bazujemy.pl/test3/
Go to the top of the page
+Quote Post
Bateria
post
Post #13





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 23.11.2011

Ostrzeżenie: (0%)
----- 

[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ć

Ten post edytował Bateria 26.11.2011, 11:15:08
Go to the top of the page
+Quote Post
adi456
post
Post #14





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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

Ten post edytował adi456 26.11.2011, 11:24:15
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #15





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
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

Go to the top of the page
+Quote Post
adi456
post
Post #16





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #17





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
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
Go to the top of the page
+Quote Post
adi456
post
Post #18





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #19





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Cieszę się, że mogłem pomóc.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 11.10.2025 - 11:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn