Podstrony
- telcocafe
- [PHP+MySQL] Problem z połączeniem mysqli('localhost', 'xxx', 'xxx', 'xxx'
- [php] Dodanie textu do pliku. Problem... :) POMOCY!!!!!!!!!!!!!
- Problem ze zgrywaniem z kamery Problem ze zgrywaniem z kamery
- [JS] Problem ze skryptem pobierającym źródło strony skrypt pobierający źródło strony
- Głupi problem HELP !!!
- [JS, jQuery] Problem z przejściem z JS na jQuery
- [domena] Problem z domeną
- Problem z O/C - Barton 2800+ AMD Athlon XP 2800+ Barton
- [mysql/php]'problem z identyfikatorami [mysql/php]
- [php/mysql]problem z wyświetleniem danych [php/mysql]
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- forum-gsm.htw.pl
telcocafe
Witam!Mam pewien problem, z wyśrodkowaniem strony.
Podejrzewam, że rozwiązanie jest proste ale nie mogę wpaść na pomysł.
Prosiłbym o poradę.
z góry dzięki.
Otóż po każda przeglądarką strona wygląda ok :
http://www.toya.net....risu/reszta.jpg
Natomiast po IE , przyciąga ku lewej stronie:
http://www.toya.net.pl/~crisu/ie.jpg
Kod Strony:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <!--header--> <div id="header"> </div> <!--header end--> <!--menu--> <div id="menu"> <ul> <li><a href="index.php?id=1">Main</a></li> <li><a href="index.php?id=2">FTP</a></li> <li><a href="index.php?id=3">Rejestruj</a></li> <li><a href="index.php?id=4">Galeria</a></li> <li><a href="index.php?id=5">Kontakt</a></li> </ul> </div> <!--menu end--> <!--content--> <div id="content"> <div id="left"> <img src="images/news.jpg" alt="news" > </div> <div id="right"> <h1>TEST</h1><p>enkt wird.</p><h1>logowanie dziala</h1><p>no raczej :D ęóąśłć</p><h1>mistrz</h1><p>[50kg]</p> </div> <div style="clear: both;"> </div> </div> <!--content end--> <!--footer--> <div id="footer"> <p><a href="newsy/admin.php">Copyright</a> © 2007 Krzysztof Bialkowski</p> </div> </body> </html>
CSS:
Kod:
body { background: url(images/bg5.png); /*background: black;*/ margin: 0px; text-align: justify; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333333; } #header { width: 600px; height: 200px; background-image: url(images/logo.jpg); margin: 20px auto auto auto; } #menu { width: 600px; height: 30px; margin: 0px auto; background-color: Fuchsia; } #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu li { display: inline; /* w jednej lini */ } #menu a { display: block; float: left; width: 120px; padding: 7px 0px; text-align: center; text-decoration: none; font-weight: bold; /* pogrubiony */ background: #EEEEEE; color: Black; } #menu a:hover /*po najechaniu */ { background: White; } #content { background-color: #FFFFFF; width: 600px; margin: 0px auto; padding: 5px 0px 0px 0px; } #content h1 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; border-bottom: 1px dotted; } #content h2 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; } #right { float: right; width: 360px; margin-top: 20px; padding-right: 20px; } #left { float: left; width: 180px; margin-top: 20px; padding-left: 20px; padding-right: 20px; } #left p { font: 11px Arial, Helvetica, sans-serif; color: #4b4b4b; } #right p { font: 11px Arial, Helvetica, sans-serif; color: #4b4b4b; } #footer { width: 600px; height: 20px; margin: 0px auto; padding: 5px 0px; background: #EEEEEE; } #footer a { text-decoration: none; color: Black; } #footer p { margin: 0px;/*auto*/ padding-top: 1px; text-align: center; font-size: 11px; color: Black; } #form { float: left; text-align: left; margin: 0px auto; padding: 5px 0px 0px 0px; } #form p { color: Black; font-weight: bold; } #form h1 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; border-bottom: 1px dashed; }
Użytkownik sauron edytował ten post 05 styczeń 2008, 17:04
Powód edycji: poprawa bbcode.
body { ... text-align:center; }
W <body> strony umieśc jednego wielkiego DIVA, który będzie zawierał całość
<body> <div class="wrapper"> ... </div> </body>
i w stylach tego wrappera:
.wrapper { text-align:left; margin: auto; }
W ten sposób będziesz także mógł wyrzucić styl margin z każdej klasy.
dobry pomysł jednak nie działa na IE...
Jak nie działa? Działa :-)
http://www.google.pl...y...+Google&lr=
Tylko wyrzuć ze stylów już nie potrzebne automatyczne marginesy (chociaż wątpię, by one przeszkadzały).
...
text-align jest niepotrzebny :) do wrappera jedynie trzeba dac margin: 0 auto; i juz :)
text-align jest niepotrzebny :) do wrappera jedynie trzeba dac margin: 0 auto; i juz :)
Chyba jednak potrzebny. Bo jak w body{} dam text-align:center; (dla IE) a potem nie odwolam tego we wrapperze (text-align:center;), to poza "blokiem" strony, wyśrodkowane będą wszystkie napisy :)
http://wamper.com.pl/kse/ - działa w IE i FF
- ze względu na to, że ten układ ma stałą szerokość 600 px spróbowałem dać całemu wrapper'owi ujemne marginesy i umieścić bezwzględnie z 50% przesunięciem w lewo, potem tylko ujemny margines na połowę szerokości obiektu czyli -300 px i jest wyśrodkowane :)
PS Wywaliłem wszystkie wartosci auto z pliku css, bo któraś z nich się gryzła z tym sposobem i nie działał. Żeby było wiadomo które usunąłem i w którym miejscu trzebaby zrobić modyfikację, to w ich miejscu jest komntarz /*WYWALONE AUTO */ .
Nie wiem czy ten sposób Ci odpowiada, ale jakby nie patrzył jest wyśrodkowane :)
body { background: url(images/bg5.png); /*background: black;*/ margin: 0px; text-align: justify; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333333; } #wrapper{ width:600px; left:50%; margin-left:-300px; position:absolute; } #header { width: 600px; height: 200px; background-image: url(images/logo.jpg); margin: 20px /*WYWALONE AUTO*/ /*WYWALONE AUTO*/ /*WYWALONE AUTO*/; } #menu { width: 600px; height: 30px; margin: 0px /*WYWALONE AUTO*/; background-color: Fuchsia; } #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu li { display: inline; /* w jednej lini */ } #menu a { display: block; float: left; width: 120px; padding: 7px 0px; text-align: center; text-decoration: none; font-weight: bold; /* pogrubiony */ background: #EEEEEE; color: Black; } #menu a:hover /*po najechaniu */ { background: White; } #content { background-color: #FFFFFF; width: 600px; margin: 0px /*WYWALONE AUTO*/; padding: 5px 0px 0px 0px; } #content h1 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; border-bottom: 1px dotted; } #content h2 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; } #right { float: right; width: 360px; margin-top: 20px; padding-right: 20px; } #left { float: left; width: 180px; margin-top: 20px; padding-left: 20px; padding-right: 20px; } #left p { font: 11px Arial, Helvetica, sans-serif; color: #4b4b4b; } #right p { font: 11px Arial, Helvetica, sans-serif; color: #4b4b4b; } #footer { width: 600px; height: 20px; margin: 0px /*WYWALONE AUTO*/; padding: 5px 0px; background: #EEEEEE; } #footer a { text-decoration: none; color: Black; } #footer p { margin: 0px;/*/*WYWALONE AUTO*/*/ padding-top: 1px; text-align: center; font-size: 11px; color: Black; } #form { float: left; text-align: left; margin: 0px /*WYWALONE AUTO*/; padding: 5px 0px 0px 0px; } #form p { color: Black; font-weight: bold; } #form h1 { padding: 3px 0px 5px 4px; font-size: 15px; color: #2D2D2D; border-bottom: 1px dashed; }
bo IE nie toleruje "auto", nie raz sie o tym przekonalem ;)
Chyba jednak potrzebny. Bo jak w body{} dam text-align:center; (dla IE) a potem nie odwolam tego we wrapperze (text-align:center;), to poza "blokiem" strony, wyśrodkowane będą wszystkie napisy :)
przeca pisze zeby zrezygnowac z text-align do wysrodkowywania :)
bo IE nie toleruje "auto", nie raz sie o tym przekonalem ;)
jaka wersja? 2 ? od zawsze korzystam z auto i zawsze pod IE dziala :)
zle wyrazilem
auto dla margin nie dziala, reszta to nie wiem bo nie uzywalem akurat ;)
jaka wersja? 2 ? od zawsze korzystam z auto i zawsze pod IE dziala :)
Na IE6 też Ci działa? NA IE7 działa sam margin, ale (przynajmniej mi) na szóstce nie chce ;/
Być może jakoś inaczej to wstawiasz, dlatego pokaż fragment kodu z margin i bez text-align, który wyśrodkuje stronę na IE6 :)