Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]problem z szablonem na DIVach w IE
interu58
post
Post #1





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

Witam. Stawiam pierwsze kroki w tworzeniu stron przy pomocy CSS. Mam zrobiony szablon strony w psd, pociety i zakodowany. Wszystko pieknie działa wszedzie tylko nie na IE. W innych przeglądarkach strona jest wyśrodkowana a elementy do siebie przylegają. W IE kolumna lewa od prawej sa rozjechane po obu bokach przeglądarki a nagłówek przylega do lewego boku a nie jest na środku. Nie wiem za bardzo co zrobić, co zmienić w CSS, zebys trona była wyśrodkowana a elementy do siebie przylegały, proszę o pomoc bo już tak kombinuję od jakiegoś czasu i nic. Mój kod CSS:


body {
margin : auto;
padding : 0px;
width : 913px;
background-color: #fcf7f1;
scrollbar-base-color: 650c10;
scrollbar-track-color: #e3d6c3;
scrollbar-highlight-color: #e3d6c3;
scrollbar-arrow-color: #e3d6c3;

}



#nagłówek {
width : 913px;
height: 280px;

}

#kolumnaLewa {

width : 252px;
height: 452px;
float : left;
background-color: #e3d6c3

}


#kolumnaPrawa {
width : 641px;
height: 432px;
float : right;
padding : 20px red;
background-color: #e3d6c3; background-image: url(logowp3.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center



}
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 13)
Damonsson
post
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Pokaż tę stronę na żywo.
Go to the top of the page
+Quote Post
viking
post
Post #3





Grupa: Zarejestrowani
Postów: 6 381
Pomógł: 1116
Dołączył: 30.08.2006

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

Co to?
padding : 20px red;

Policz sobie: 641+252+2x20 > 913
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
~viking - stare IE (ew. nowe w Quirks Mode) zachowują się, jak box-sizing: border-box, w którym to paddingi nie mają wpływu na całkowity wymiar.
Go to the top of the page
+Quote Post
interu58
post
Post #5





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

padding 20 red to pomyłka jakaś.

strony jeszcze nie mam na żadnym serwerze, jedynie na moim kompie, więc ciężko pokazać.

chodzi o to, ze ona działa tak jak powinna wszędzie poza IE. jest rozjechana. jak można zrobić żeby prawa i lewa kolumna przylegały do siebie i były wyśrodkowane? robie oddzielny arkusz CSS dla IE, ale nie wiem za bardzo nawet co mam pozmieniać (w sensie jak) nie znam polecenia które by zblizyło kolumne prawą do lewej i wrzuciło wszystko na środek strony.
Go to the top of the page
+Quote Post
XP'ek
post
Post #6





Grupa: Zarejestrowani
Postów: 263
Pomógł: 9
Dołączył: 3.05.2009
Skąd: Wroc

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

spróbuj z dodaniem display:inline-table; // ew. inline // dla lewej i prawej strony

trzymaj (IMG:style_emoticons/default/wink.gif) następnym razem sprawdź wartości ponieważ jeśli dajesz np. width 100 + padding: 20 to twój box będzie miał rozmiar w przeglądarce 140 co za tym idzie przeglądarka Ci wrzuci pod spód

Kod
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dokument bez tytułu</title>
<style type="text/css">
body {
margin : auto;
padding : 0px;
width : 913px;
background-color: #fcf7f1;
scrollbar-base-color: 650c10;
scrollbar-track-color: #e3d6c3;
scrollbar-highlight-color: #e3d6c3;
scrollbar-arrow-color: #e3d6c3;
}
#nagłówek {
width : 913px;
height: 280px;
clear:both;
}

#kolumnaLewa {
width : 250px;
height: 452px;
float : left;
display:inline-table;
background-color: #e3d6c3
}
#kolumnaPrawa {
width : 620px;
height: 432px;
float : right;
display:inline-table;
padding : 20px;
background-color: #e3d6c3; background-image: url(logowp3.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center
}
</style>
</head>
<body>
<div id="nagłówek"></div>

<div id="kolumnaLewa"></div>
<div id="kolumnaPrawa"></div>
</body>
</html>


Ten post edytował XP'ek 25.10.2012, 19:41:22
Go to the top of the page
+Quote Post
interu58
post
Post #7





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

niestety to nie działa. display:inline-table nic mi nie zmienia a po zmianie całego kodu na taki jak napisałeś w IE strona jest nadal rozjechana a dodatkowo prawa kolumna poszła w dół w innych przeglądarkach (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
XP'ek
post
Post #8





Grupa: Zarejestrowani
Postów: 263
Pomógł: 9
Dołączył: 3.05.2009
Skąd: Wroc

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

usuń display inline-table z mojego kodu i sprawdź ew. zmniejsz prawej kolumny width jeszcze o kilka px albo nawet narazie daj mu 400px
Go to the top of the page
+Quote Post
interu58
post
Post #9





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

to nic nie daje. w innych przeglądarkach zepsuło a w IE nawet nie drgnęło. te wymiary generalnie pasują i strona wygląda dobrze w chromie czy operze. w IE prawa i lewa kolumna zamiast być przy sobie na środku są rozjechane jedna do lewego boku druga do prawego ...i ani drgnie.
Go to the top of the page
+Quote Post
XP'ek
post
Post #10





Grupa: Zarejestrowani
Postów: 263
Pomógł: 9
Dołączył: 3.05.2009
Skąd: Wroc

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

a to tezeba było od razu pisać że Ci klei do przeglądarki (IMG:style_emoticons/default/smile.gif) wsadź prawą i lewą w div'a o wymiarach jak nagłówek powinno zadziałać (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
interu58
post
Post #11





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

to też nic nie daje. prawa kolumna zlaczyła się z lewa i wyśrodkował się nagłówek dopiero po zmianie marginesu z auto na: margin-left : 170px;
margin-right : 170px;

ale obawiam się, ze to będzie działac tylko w tej konkretnej przeglądarce (IE 9) i na konkretnej rozdzielczości...więc marne rozwiązanie.
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #12





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Tak więc nie będziesz zadowolony jak zobaczysz swoją stronkę na starszych przeglądarkach, a przecież jeszcze wiele osób używa starszej wersji IE niż 9.
http://www.my-debugbar.com/wiki/IETester/HomePage

Po pierwsze, nie zmieniaj wymiarów body tylko opakuj treść strony w kontener. Kod HTML powinien wyglądać tak:

[HTML] pobierz, plaintext 
  1. <div id="container">
  2. <div id="naglowek"></div>
  3. <div id="kolumnaLewa"></div>
  4. <div id="kolumnaPrawa"></div>
  5. <div class="clear"></div>
  6. </div>
[HTML] pobierz, plaintext


Teraz możesz zająć się css:

[HTML] pobierz, plaintext 
  1. body {
  2. margin : 0px;
  3. padding : 0px;
  4. background-color: #fcf7f1;
  5. scrollbar-base-color: 650c10;
  6. scrollbar-track-color: #e3d6c3;
  7. scrollbar-highlight-color: #e3d6c3;
  8. scrollbar-arrow-color: #e3d6c3;
  9. text-align: center;  <!-- wyśrodkowanie bloków dla IE -->
  10. }
  11.  
  12. #container {
  13. margin: auto; <!-- wyśrodkowanie bloków dla innych przeglądarek -->
  14. width : 913px;
  15. padding: 0px;
  16. }
  17.  
  18. #nagłówek {
  19. width : 913px;
  20. height: 280px;
  21. }
  22.  
  23. #kolumnaLewa {
  24. width : 252px;
  25. height: 452px;
  26. float : left;
  27. background-color: #e3d6c3
  28. }
  29.  
  30. #kolumnaPrawa {
  31. width : 621px;
  32. height: 432px;
  33. float : right;
  34. padding : 20px;
  35. background-color: #e3d6c3; background-image: url(logowp3.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center;
  36. }
  37.  
  38. .clear {
  39. clear: both;
  40. }
[HTML] pobierz, plaintext


Ten post edytował b4rt3kk 26.10.2012, 10:32:20
Go to the top of the page
+Quote Post
interu58
post
Post #13





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 25.10.2012

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

dzięki wielkie. teraz działa. zastanawia mnie tylko dlaczego po wyrzuceniu text-align: center; (tekst ma nie być wyśrodkowany) strona znowu się rozjedzona? da się to przeskoczyć zostawiając to polecenie i dodając oddzielny styl do każdego tekstu na stronie.
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #14





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Cytat(interu58 @ 26.10.2012, 15:25:19 ) *
dzięki wielkie. teraz działa. zastanawia mnie tylko dlaczego po wyrzuceniu text-align: center; (tekst ma nie być wyśrodkowany) strona znowu się rozjedzona? da się to przeskoczyć zostawiając to polecenie i dodając oddzielny styl do każdego tekstu na stronie.


No niestety, żeby dopasować niektóre rzeczy pod IE, która stosuje własne standardy, trzeba stosować takie sztuczki. Żeby reszta divów miała normalne położenie tekstu (czyli od lewej) wystarczy dopisać:

[HTML] pobierz, plaintext 
  1. div {
  2. text-align: left;
  3. }
[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
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: 5.10.2025 - 06:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn