Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Poprawność vs. FireFox, wyśrodkowanie...
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
strife
15.02.2005, 22:44:33
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...
xarr
16.02.2005, 08:56:33
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.
strife
16.02.2005, 23:15:50
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!
xarr
17.02.2005, 08:35:39
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.
yavaho
17.02.2005, 14:14:15
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
strife
18.02.2005, 01:23:30
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
xarr
18.02.2005, 07:17:32
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.
wassago
19.02.2005, 17:34:36
jessuuu... co za ludzie...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.