Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z IE i operą - własny szablon
Forum PHP.pl > Forum > Przedszkole
thomson89
2.05.2009, 11:27:10
Witam! Zrobiłem, albo bynajmniej robię swój własny szablon. Jak na razie mam to:
[HTML] pobierz, plaintext 
  1. body {background-color: silver; color: #000; margin: 0; padding: 0; width: 800px; margin: auto;}
  2. #gora {	height: 200px;}
  3. #logo {width: 600px; float: left; overflow: hidden;background-color: white; height: 100px;}
  4. #menu-logo {width: 200px; float: right; overflow: hidden; background-color: white; height: 100px;}
  5. #pasek {background-color: grey; height: 100px;}
  6. #srodek {background-color: white;}
  7. #stopka {clear: both; width: 100%; background-color: #888;}
[HTML] pobierz, plaintext


CODE

<html>
<head>
<title>Moja strona - Strona główna</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="strona">
<div id="gora">
<div id="logo">mateuszkow.oz.pl</div>
<div id="menu-logo">
<ul>
<li>glowna</li>
<li>kontakt</li>
</ul>
</div>
<div id="pasek">jestes tutaj, godzina</div>
</div>
<div id="srodek">
<div id="menu-pion">
<ul>
<li>glowna</li>
<li>kontakt</li>
</ul>
</div>
<div id="tresc">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a

pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a,

convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac

turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac

ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id,

eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non,

consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae,

Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et

ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales

lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis,

porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper

quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem.

In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed

vel lectus. Ut sagittis, ipsum dolor quam.</div>
</div>
<div id="dol">
<div id="stopka">stopka sialalala</div>
<div id="info">links</div>
</div>
</div>

</body>
</html>


I problem polega na tym, ze w operze pomiedzy gora, a srodek jest wielka dziura. Tak jakby divy rozsunely sie miedzy sobą. Natomiast w IE, gora i srodek sa obok siebie. Dlaczego?
potreb
2.05.2009, 11:52:35
Opera i Firefox. Wszystko jest inaczej niż w IE.
Daj doctype dokumentu xhtml czy tam html.
W body ustawiłeś 800px dla szerokości. Powinieneś zrobić dla id strony width 800px, resztą div do niego wpakować.
thomson89
2.05.2009, 11:58:05
To nic nie dało...
athei
2.05.2009, 11:59:01
Po co Ci ten div #strona, korzystaj z html i body. Po co w body 2 różne marginy? Jak ten Twój szablon w ogóle ma wyglądać?
potreb
2.05.2009, 12:05:15
Cytat(thomson89 @ 2.05.2009, 10:58:05 ) *
To nic nie dało...


U mnie wszystko jest dobrze. Poczytaj i poszukaj trochę na temat budowy css i html
I nie opieraj się tylko na IE.
thomson89
2.05.2009, 12:18:40
Testuje na operze i ie, z racji tego ze opera a mozilla niewiele sie róznią...

nie wychodzi mi nadal

http://www.fotosik.pl/pokaz_obrazek/ba9a17e23ec114f1.html

ps: ale gora i srodek wyswietlaja sie normalnie, pozostaje kwestia tej dziury
Hectic
2.05.2009, 12:27:23
Wgraj to gdzieś będzie mi łatwiej to sprawdzić, wtedy Ci poprawię.
potreb
2.05.2009, 12:29:16
Wystarczy, że dodasz sobie dla divów bordery i zobaczysz gdzie leż problem.
thomson89
2.05.2009, 12:50:07
Jak daję border, dla samego diva logo, to pasek zamienia się miejscami z menu-logo.

Proszę bardzo: http://odsiebie.com/pokaz/2573366---56c3.html
potreb
2.05.2009, 14:47:39 
[HTML] pobierz, plaintext 
  1. body {
  2. 	background-color: silver;
  3. 	color: #000;
  4. 	padding: 0;
  5. 	margin: 0 auto;
  6. }
  7.  
  8. #strona {
  9. width: 804px;
  10. border: 1px solid #000;
  11. margin: 0 auto;
  12. }
  13.  
  14.  
  15. #gora {
  16. 	height: 200px;
  17. 	border: 2px solid white;
  18. }
  19.  
  20. #logo {
  21. 	width: 600px;
  22. 	float: left;
  23. 	overflow: hidden;
  24. 	background-color: yellow;
  25. 	height: 100px;
  26.  
  27. }
  28.  
  29. #menu-logo {
  30. 	width: 200px;
  31. 	float: right;
  32. 	overflow: hidden;
  33. 	background-color: blue;
  34. 	height: 100px;
  35.  
  36. }
  37.  
  38. #pasek {
  39. 	background-color: green;
  40. 	height: 100px;
  41. 	clear: both;
  42. }
  43.  
  44.  
  45.  
  46. #srodek {
  47. 	background-color: white;
  48.   display: block;
  49.   padding: 20px;
  50. }
  51.  
  52. ul {
  53. padding: 0;
  54. margin: 0;
  55. list-style: none;
  56. }
  57.  
  58.  
  59. #stopka {
  60. 	clear: both;
  61. 	width: 100%;
  62. 	background-color: #888;
  63. }
[HTML] pobierz, plaintext


Wklej tylko ten css co ci podałem
thomson89
2.05.2009, 15:08:33
Dziekuję.
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.