Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Problem z układem div
krzychu0808
post
Post #1





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

Witam mam problem pokaże go na prostym przykładzie chcę aby ten kwadracik żółty był pod szarym Dwa kwadraty

Kod
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Klasa 2 TH | TME | Strona Klasowa</title>
  5. <script type="text/javascript" src="menu.js"></script>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  7. <style type="text/css">
  8. .opis1 {
  9. margin : auto;
  10. padding : 0px;
  11. height : 67px;
  12. float : left;
  13. background-color: #070707;
  14. }
  15. .ikonki {
  16. margin : auto;
  17. padding : 0px;
  18. height : 24px;
  19. float : left;
  20. background-color: #ffe400;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26. <div class="opis1">1111</div>
  27. <div class="ikonki">1111</div>
  28. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trucksweb
post
Post #2





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

temu co ma byc na gorze daj position: absolute
Go to the top of the page
+Quote Post
krzychu0808
post
Post #3





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

Dałem i się zrobiło coś takiego Kwadraciki

Zrobiłem tak
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Klasa 2 TH | TME | Strona Klasowa</title>
  5. <script type="text/javascript" src="menu.js"></script>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  7. <style type="text/css">
  8. .opis1 {
  9. margin : auto;
  10. padding : 0px;
  11. height : 67px;
  12. float : left;
  13. background-color: #070707;
  14. position: absolute;
  15. }
  16. .ikonki {
  17. margin : auto;
  18. padding : 0px;
  19. height : 24px;
  20. float : left;
  21. background-color: #ffe400;
  22. }
  23. </style>
  24. </head>
  25.  
  26. <body>
  27. <div class="opis1">1111</div>
  28. <div class="ikonki">1111</div>
  29. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trucksweb
post
Post #4





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

jak ustawiasz height to ustawiasz takze width- bez tego nie dziala cala warstwa.
tu masz poprawny kod:

[HTML] pobierz, plaintext 
  1. .opis1 {
  2. margin : auto;
  3. padding : 0px;
  4. height : 67px;
  5. width: 20px;
  6. float : left;
  7. background-color: #070707;
  8. position: absolute
  9. }
  10. .ikonki {
  11. margin : auto;
  12. padding : 0px;
  13. height : 24px;
  14. width: 100px;
  15. float : left;
  16. background-color: #ffe400;
  17. }
[HTML] pobierz, plaintext


Ten post edytował trucksweb 13.07.2008, 21:59:56
Go to the top of the page
+Quote Post
krzychu0808
post
Post #5





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

Nadal lipa Kwadraciki

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Klasa 2 TH | TME | Strona Klasowa</title>
  5. <script type="text/javascript" src="menu.js"></script>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  7. <style type="text/css">
  8. .opis1 {
  9. margin : auto;
  10. padding : 0px;
  11. height : 67px;
  12. float : left;
  13. background-color: #070707;
  14. position: absolute;
  15. }
  16. .ikonki {
  17. margin : auto;
  18. padding : 0px;
  19. height : 24px;
  20. width: 100px;
  21. float : left;
  22. background-color: #ffe400;
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div class="opis1">1111</div>
  29. <div class="ikonki">1111</div>
  30. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trucksweb
post
Post #6





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

no przeciez dziala tak jak chciales- masz zolty kwadrat pod szarym, co jeszcze jest nie tak ?
Go to the top of the page
+Quote Post
krzychu0808
post
Post #7





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

umnie w IE 6.0 wyświetla żółty a obok szarego... ale chyba się źle zrozumieliśmy żółty miał być poniżej szarego "pod nim" (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

(IMG:http://elaz.eu/2th/1.jpg)

Ten post edytował krzychu0808 13.07.2008, 22:11:51
Go to the top of the page
+Quote Post
trucksweb
post
Post #8





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Klasa 2 TH | TME | Strona Klasowa</title>
  5. <script type="text/javascript" src="menu.js"></script>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  7. <style type="text/css">
  8. .opis1 {
  9. margin-top : 10px;
  10. padding : 0px;
  11. height : 67px;
  12. width:20px;
  13. float : left;
  14. background-color: #070707;
  15. position:absolute;
  16.  
  17. }
  18. .ikonki {
  19. margin : auto;
  20. padding : 0px;
  21. height : 24px;
  22. width: 100px;
  23. float : left;
  24. position: absolute;
  25. background-color: #ffe400;
  26. }
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. <div class="ikonki">1111</div>
  32. <div class="opis1">1111</div>
  33.  
  34. </body>
[HTML] pobierz, plaintext


trzeba bylo napisac ze to ma byc pod IE
Go to the top of the page
+Quote Post
krzychu0808
post
Post #9





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

Coś ci się chyba pomyliło (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) bo to co napisałeś to jest że szary pasek ma być 10px od górne krawędzi a żółty pozostaje w miejscu ;p a żółty miał być poniżej szarego

(IMG:http://elaz.eu/2th/1.jpg)

i to dla IE 6.0 I FF

Ten post edytował krzychu0808 13.07.2008, 22:17:19
Go to the top of the page
+Quote Post
trucksweb
post
Post #10





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

http://img297.imageshack.us/my.php?image=testpg7.jpg

u mnie: Fx, IE7, IE6 dziala jak powinno
Go to the top of the page
+Quote Post
krzychu0808
post
Post #11





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

ale mi chodzi o taki wygląd (IMG:http://elaz.eu/2th/1.jpg)
Go to the top of the page
+Quote Post
trucksweb
post
Post #12





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

(IMG:http://forum.php.pl/style_emoticons/default/dry.gif) to sie nie zrozumielismy

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Klasa 2 TH | TME | Strona Klasowa</title>
  5. <script type="text/javascript" src="menu.js"></script>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  7. <style type="text/css">
  8. .opis1 {
  9. margin-top : 10px;
  10. padding : 0px;
  11. height : 67px;
  12. width:20px;
  13. float : left;
  14. background-color: #070707;
  15.  
  16.  
  17. }
  18. .ikonki {
  19. margin : auto;
  20. padding : 0px;
  21. height : 24px;
  22. width: 100px;
  23. float : left;
  24. background-color: #ffe400;
  25. }
  26. .test {
  27. width: 100px;
  28. float: left;
  29. }
  30. </style>
  31. </head>
  32.  
  33. <body>
  34. <div class="test">
  35. <div class="opis1">1111</div>
  36. <div class="ikonki">1111</div>
  37.  
  38. </div>
  39. </body>
[HTML] pobierz, plaintext
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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