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...


--------------------
Najczęstsze błędy | Jak poprawnie zadać pytanie? | Serwer PHP - od czego zacząć?
SQL Injection | Hashowanie haseł | Jak działają sesje, przykłady

___
The world is yours ...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
xarr
post
Post #2





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

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

Fatalny ten kod, dlatego nie chce mi sie z nim nic robic i nie podam ci gotowca smile.gif
Zamiesc te 2 pozycje menu w dodatkowym divie ktoremu ustaw minimalna wartosc height. Oczywiscie wywal tego float`a z #center, bo to wyglada tak jakbys nie wiedzial co chcesz zrobic winksmiley.jpg

P.S. Zoptymalizuj te css, bo to masakra jest! Nie tworz tez zbednych dodatkowych div`ow. Po co np: definiujesz MMenu i MTopic? Polaczyc! To i tak do jednego celu sluzy, wiec rozbijanie na 2 divy jest pozbawione sensu, a tylko bardziej 'mota'. No i border:1px solid, a nie na odwrot.
Go to the top of the page
+Quote Post
strife
post
Post #3





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

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

No dobrze a co mam wpisać w min-height: questionmark.gif Połączyłem to faktycznie nie wiem po co dwa divy mi wyszły sad.gif Tylko zmierzam do tego, ze gdy nadaje float: left aby były koło siebie to na FF nie wyświetla poprawnie... Podam prosty przykład:

[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>:...Testowy Layout...:</title>
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body >
  10. <div id="centrowanie">
  11.         <div id="Lewe">
  12.         Lewe
  13.         </div>
  14.         <div id="Lewe">
  15.          Lewe
  16.         </div>
  17. </div>
  18. </body>
  19. </html>
[HTML] pobierz, plaintext 

[XML] pobierz, plaintext 
  1. BODY {
  2.  background-color: white;
  3.  margin: 5px 5px 5px 5px;
  4.  color: black;
  5.  font-family: Verdana;
  6.  font-size: 9px;
  7. }
  8. #centrowanie {
  9.   padding: 4px 4px 4px 4px;
  10.   width: 700px;
  11.   margin: auto;
  12.   background-color: #F0F0F0;
  13.   border: 1px solid;
  14. }
  15.  
  16. #Lewe {
  17.  width: 120px;
  18.  float: left;
  19.  border: 1px solid;
  20.  background-color: #FAFAFA;
  21. }
[XML] pobierz, plaintext


Mam nadzieje że ten kod jest bardziej przejrzysty... Nie wiem co już mam wpisywać za długo już przy tym siedzę i dostaje szału! Co do wysokości height - nie moge nadac, gdy ustawie stale to i tak po pewnym czasie rozwijania strony np. dluzszego tekstu, znowu glowny DIV #centrowanie nie bedzie obejmował całości... Dzieje się tak tylko pod FF. Naprawdę nie wiem co robić. Prosze o pomoc.

Pozdrawiam!


--------------------
Najczęstsze błędy | Jak poprawnie zadać pytanie? | Serwer PHP - od czego zacząć?
SQL Injection | Hashowanie haseł | Jak działają sesje, przykłady

___
The world is yours ...
Go to the top of the page
+Quote Post
xarr
post
Post #4





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 smile.gif

Ogolnie jeszcze apropo tego problemu to wlasnie IE i Opera niepoprawnie wyswietlaja ten elemencik 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 smile.gif Nie jestem jednak tutaj pewien, a czasu nie mam za wiele by poszukac dokladnie.

Uzyj google i w3c.org w celu searcha smile.gif Jak cos ciekawego znajdziesz wrzuc tutaj.
Go to the top of the page
+Quote Post
yavaho
post
Post #5





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

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

Uważam ze wszystko sie miesza z powodu "padding".
Jezeli uzywasz tego stylu do elementow blokowych(div, span, itp) to rozne przegladarki roznie to interpretuja. Dla IE paddind to jest wewnetrzy margines od krawedzi bloku, Netscape znowu powieksza caly blok o wartosc jaka jest w padding, a Opera nawet odsuwa tekst od krawedzi bloku o wartosc 2x wieksza niz wartosc w padding.
Dla mnie to jest nienormalne bo wkoncu mamy jakiś standard. Ale aby strona wygladala normalnie we wszystkich przegladarkach to trzeba czasem rezygnowac z pewnych stylow.
A wiec tak: nie uzywaj "padding" dla elementow blokowych (div, span). Uzywaj tego stylu dla tekstu i obrazkow.

Ponizej jest taki prosty przyklad gdzie w jednym miejscu jest okreslony styl tekstu i bloku w ktorym znajduje sie wlasnie ten tekst.
Na kazdej przegladarce inaczej to wyglada (IE, Netscape, Opera) a wiec ktora z nich to prawidłowo wyświetla :?:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. .blok {
  6.   background:#0000ff;
  7.   width:100px;
  8.   height:100px;
  9.   padding:20px;
  10.   margin:50px;
  11.   font-size:14pt;
  12.   color:#93d5fa;
  13. }
  14. -->
  15. </style>
  16. </head>
  17. <body>
  18.    <div class="blok">
  19.        <p>przykładowy tekst</p>
  20.    </div>
  21. </body>
  22. </html>
[HTML] pobierz, plaintext


--------------------
Książki informatyczne • Książki biznesowe
Warsztat: notepad hardcore
Go to the top of the page
+Quote Post
strife
post
Post #6





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

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

Pierwsza rzecz to taka że chcę podziękować serdecznie Wam, za wypowiedź i nakierowanie mnie. Siedziałem 4 godziny, aż w końcu udało się mi osiągnąć to co chciałem... Sami sprawdźcie...

http://www.scarface.fc.pl/Test

Godna uwagi jest linijka:

[XML] pobierz, plaintext 
  1. clear: both;
[XML] pobierz, plaintext


Po jej usunięciu w Firefoxie jest masakra, ale gdy jest jest wszystko dobrze... no i jeszcze początkowa *.

Powiem tak: Veni Vidi Vici... smile.gif


--------------------
Najczęstsze błędy | Jak poprawnie zadać pytanie? | Serwer PHP - od czego zacząć?
SQL Injection | Hashowanie haseł | Jak działają sesje, przykłady

___
The world is yours ...
Go to the top of the page
+Quote Post
xarr
post
Post #7





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

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

Dzisas to o taki efekt ci chodzilo? A ja myslalem ze chciales w wysrodkowanym div`ie miec floaty. Ehhh... no nie ma to jak jasne przedstawienie problemu smile.gif
Na drugi raz nie zamieszczaj przykladow, raczej narysuj w paincie czy innym photoshopie efekt jaki chcesz osiagnac. Bedzie latwiej ci pomoc i napewno odpowiedz uzyskasz szybciej.

Pozdrowka.
Go to the top of the page
+Quote Post
wassago
post
Post #8





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

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

jessuuu... co za ludzie...


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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: 20.08.2025 - 09:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn