Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Kilka divów w 1 divie - chocby ich nie było
3miel
post
Post #1





Grupa: Zarejestrowani
Postów: 203
Pomógł: 0
Dołączył: 10.06.2004
Skąd: Gliwice

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


Witam,

mam problem, poniewaz mam jeden glowny DIV (srodek). W nim mam umieszczone 3 wewnetrzne: lewa, srodkowa i prawa.

Gdy ustawie border:1px na ten glowny div to w Firefoxie traktuje to, jak by te 3 poddivy byly poza nim! Dlaczego tak jest? co mam zrobic? probowalem z display:block, position... ale bez skutku..

Proszę o pomoc bo juz siły nie mam.
Go to the top of the page
+Quote Post
batman
post
Post #2





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1




Pokaż kod, który powoduje "wyjeżdżanie" div-ów, to coś się na to poradzi (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
MatheW
post
Post #3





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 29.05.2006
Skąd: Lublin

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


daj na sam koniec głównego diva <br style="clear: both" /> lub inny znacznik z tym stylem.
Go to the top of the page
+Quote Post
mike
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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


Zacznijmy od podstaw XHTMLa:
  1. <style type="text/css">
  2. div#example1 {
  3. width: 200px;
  4. height: 200px;
  5. border: 1px;
  6. }
  7. <div id="example1"></div>

Pytanie: Jakie wymiary ma blok example1 ?
Odpowiedź: To zależy (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
IE: 200x200px
FF, Opera: 202x202px (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Stąd czasem nieścisłości. Oki, to może się przydać, lećmy dalej.

To co chcesz zrobić to:
  1. <style type="text/css">
  2. div#container {
  3. margin: auto;
  4. width: 600px;
  5. overflow: auto;
  6. }
  7.  
  8. div#leftColumn, rightColumn {
  9. float: left;
  10. width: 150px;
  11. height: 200px;
  12. background-color: #f00;
  13. }
  14.  
  15. div#middleColumn {
  16. float: left;
  17. width: 300px;
  18. height: 400px;
  19. background-color: #0f0;
  20. }
  21. <div id="container">
  22. <div id="leftColumn"></div>
  23. <div id="middleColumn"></div>
  24. <div id="rightColumn"></div>
  25. </div>


Wszystko pasuje i przylega.
Ale jak teraz dodasz obramowania ... to w związku z tym od czego zacząłem, w IE będzie to czego się spodziewasz a w FF/Opera bloki polecą na dół.

Oczywiście nie muszę mówić że to FF/Opera poprawnie interpretują kod XHTML a "błędy" wynikaja z tego że koderzy przyzwyczaili się porównywać wszystko do IE (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Mam nadzieję że o to chodziło i wystarczająco naświetliłem sprawę.


P.S.
Pisane z palca i nie testowane, mogła wkraść się literówka.
Go to the top of the page
+Quote Post
Saddam92
post
Post #5





Grupa: Zarejestrowani
Postów: 69
Pomógł: 0
Dołączył: 17.11.2006

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


wystarczy ze dasz
  1. <style type="text/css">
  2. div#container {
  3. margin: auto;
  4. width: 602px; /* o 2 pixele wiekszą szerokość ustawiasz dla FF i OPERY */
  5. overflow: auto;
  6. border: 1px; /* dodajesz ramke */
  7. }
i teraz najważniejsza część programu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
  1. /* hack dla internet explorera */
  2. /*\*/
  3. * html div#container {
  4. width: 600px; /* dla IE zmniejszasz szerokość do poprawnej */
  5. }
  6. /**/

To powinno zadziałać z przykładem podanym przez mike_mech, a jeśli nie to zerknij jeszcze tutaj: http://www.webtips.pl/post6163.html

Pozdrawiam (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
mike
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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


~Saddam92 z tym że mój przykład zadziała w zupełności sam.
A Twoje to jakieś dziwolągi niezgodne z żadnym standardem.

Stosowanie hack'ów to bardzo zły nawyk.
Odradzam je w całości.
Go to the top of the page
+Quote Post
Zajec
post
Post #7





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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


Ludzie, myślicie czasem co piszecie?

Przecież koleś ma problem z tym, że dla IE float nie wyciąga elementu z biegu dokumentu. Jedno z poprawnych rozwiazań przedstawił na początku MatheW, a wy gadacie o czymś zupełnie nie związanym z problemem.

Co więcej, nawet nie wiecie czy 3miel na pewno nie ma DOCTYPE w dokumencie. A może właśnie zrobił XHTML strict i IE traktuje BoxModeling normalnie?!


@3miel najprościej dodać do elementu zawierającego
Kod
overflow: auto;
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 14.10.2025 - 21:55