Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Poprawność vs. FireFox, wyśrodkowanie..., float: left działa, ale bez tego... :(
strife
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

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

Witam,

Najpierw pozwolicie że umieszczę poniżej kod, zanim przejdę do rzeczy:

style.css
[XML] pobierz, plaintext 
  1. body{
  2.  
  3.  background: white;
  4.  margin: auto;
  5.  font-family: Verdana;
  6.  font-size: 12px;
  7.  
  8. }
  9.  
  10. #center{
  11.  
  12.  
  13.   float: left;
  14.   margin: auto;
  15.   border: solid 1px;
  16.   padding: 2px 2px 2px 2px;
  17.   width: 500px;
  18.  
  19. }
  20.  
  21. #Mheader{
  22.  
  23.  
  24.  margin-bottom: 10px;
  25.  background-color: #F0F0F0;
  26.  border: solid 1px;
  27.  border-color: black;
  28.  padding-left: 4px;
  29.  padding-right: 4px;
  30.  padding-bottom: 2px;
  31.  padding-top: 2px;
  32.  
  33.  
  34.  
  35. }
  36.  
  37. #MMenu{
  38.  
  39.    float: left;
  40.  
  41. }
  42.  
  43. #MTopic{
  44.  
  45.  margin-left: 4px;
  46.  background-color: #F0F0F0;
  47.  border: solid 1px;
  48.  border-color: black;
  49.  padding-left: 4px;
  50.  padding-right: 4px;
  51.  padding-bottom: 2px;
  52.  padding-top: 2px;
  53.  width: 100px;
  54.  
  55. }
[XML] pobierz, plaintext


index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <title>Test</title>
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body >
  10.  
  11. <div id="center">
  12.         <div id="Mheader">
  13.          Header
  14.         </div>
  15.  
  16.         <div id="MMenu">
  17.                 <div id="MTopic">
  18.                     Menu
  19.                 </div>
  20.         </div>
  21.  
  22.          <div id="MMenu">
  23.                 <div id="MTopic">
  24.                     Menu
  25.                 </div>
  26.         </div>
  27.  
  28. </div>
  29. </body>
  30. </html>
[HTML] pobierz, plaintext


Tak więc chodzi mi aby kolumny Menu były koło siebie, aby to zrobić użyłem:
[XML] pobierz, plaintext 
  1. float: left;
[XML] pobierz, plaintext


Jest wszystko dobrze na Operze i IE, ale po włączeniu FireFox'a obramowanie zawarte w:
[XML] pobierz, plaintext 
  1. #center{
  2.   margin: auto;
  3.   border: solid 1px;
  4.   padding: 2px 2px 2px 2px;
  5.   width: 500px;
  6. }
[XML] pobierz, plaintext

Nie obejmuje całej treści, problem udało mi się rozwiązać wpisując właśnie w #center, float: left; - ale po takiej operacji centrowanie strony juz nie działa...

Jeśli ktoś wie jak temu zaradzić, a konkretniej jak usunąć ten problem z Firefox'a będe wdzięczny.

Pozdrawiam!

BTW.

Przepraszam że tak długo...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
xarr
post
Post #2





Grupa: Zarejestrowani
Postów: 105
Pomógł: 0
Dołączył: 5.12.2004

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

Nie min-height, bo tego nie skuma IE. Chodzilo mi o minimalna wartosc potrzebna na to twoje menu np: height:20px; W tamtym przykladzie chodzilo chyba o menu poziome wiec wystarczylo by takie cos. W tym cudzie powyzszym to dobry przyklad aby zaczac pozycjonowac. Nie warto i nie zaleca sie stosowania duzej ilosci floatow do pozycjonowania glownych okien witryny, bo ogolnie przestaje sie to zachowywac jak powinno. Chodzi o kolejnosc wyswietlania, ktora w tak zrobionej www przypomina uklad tabelkowy, z ktorego m.in w tym celu sie rezygnuje. To moze srednio jest zwiazane z twoim problemem, ale jednak warto to wiedziec. Jaka jest, wiec metoda? Pozycjonowanie relatywne i absolutne. W glownym, centrowanym okienku uzyj position: relative, a w nim, kazdy element wypozycjonuj absolutnie (position:absolute) ustawiajac odpowiednio inne wartosci (left, right, top). Uzywajac tej opcji usun floata.
Niestety mam malo czasu wiec nic ci nie napisze, ale pobaw sie w pozycjonowanie. To jak ustawianie klockow na monitorze (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ogolnie jeszcze apropo tego problemu to wlasnie IE i Opera niepoprawnie wyswietlaja ten elemencik (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Z tego co pamietam z notatek w3c to float opuszcza uklad w jakim jest i jak sama nazwa wskazuje plywa przy krawedzi ktora kazales mu oplywac i tylko tyle (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Nie jestem jednak tutaj pewien, a czasu nie mam za wiele by poszukac dokladnie.

Uzyj google i w3c.org w celu searcha (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Jak cos ciekawego znajdziesz wrzuc tutaj.
Go to the top of the page
+Quote Post

Posty w temacie
- strife   Poprawność vs. FireFox, wyśrodkowanie...   15.02.2005, 22:44:33
- - xarr   Fatalny ten kod, dlatego nie chce mi sie z nim nic...   16.02.2005, 08:56:33
- - strife   No dobrze a co mam wpisać w min-height: Połączyłe...   16.02.2005, 23:15:50
- - xarr   Nie min-height, bo tego nie skuma IE. Chodzilo mi ...   17.02.2005, 08:35:39
- - yavaho   Uważam ze wszystko sie miesza z powodu "paddi...   17.02.2005, 14:14:15
- - strife   Pierwsza rzecz to taka że chcę podziękować serdecz...   18.02.2005, 01:23:30
- - xarr   Dzisas to o taki efekt ci chodzilo? A ja myslalem ...   18.02.2005, 07:17:32
- - wassago   jessuuu... co za ludzie...   19.02.2005, 17:34:36

« Następny starszy · CSS · 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 · Przełącz na: Linearny+ · Drzewo

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

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