Podstrony
- telcocafe
- Darmowe statystyki odslon banera dla strony .html Czy istnieja statystyki odslona banera n
- zdjęcie jako tło jak ustawić zdjęcie jako tło strony
- [XHTML/CSS] Opera problem z wyświetlaniem Problem z wyświetlaniem strony w opera
- odświażanie strony w ramce co zorbić, żeby odświażać stronę w ramce
- [HTML/FLASH] Wielkość i wygląd okna ze stroną wielkość okna dopasowana do wielkości strony
- [HTML] Po zastosowaniu ramek do mojej strony stronka nie działa! POMOCY!!!
- Menu html Darmowe menu do strony
- problem z wyszukiwaniem strony w wyszukiwarce??? jw
- [Smarty] Treść strony na smarty?
- [PHP] Podgląd strony w PHP
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- aniadka.keep
telcocafe
witam,chciałem zrobić stronę, opartą na szablonie ma div'ach a nie na tabelce, niestey mam problem.
Kod stylów CSS przeszedł validację i nie ma błędów, najbliżej tego co chcę jest FF: screen
to screen z Opery: screen
to z IE: screen
skąd taka rozbieżność w interpretacji styli???? rozumiałbym, jeżeli były by błędy w kodzie, ale skoro validator twierdzi że jest wszystko OK, więc o co chodzi????
style:
/* * Author */ * { padding: 0; margin: 0; } body { background: url('images/background.png') } #top { height:105px; width: 900px; background: url('images/top.png') no-repeat; margin-left: auto; margin-right: auto; position: relative; top:0; border: thin solid #7f7f7f; } #container { height: auto; width: 900px; margin-left: auto; margin-right:auto; position: relative; display: block; } #left_panel { height: auto; width: 150px; float: left; display: block; } #menu { height: auto; width: 150px; background: url('images/menu_bckgrnd.png'); margin-top: 10px; margin-bottom: 10px; border: thin solid #7f7f7f; position: relative; display: block; } #signing { height: auto; width: 150px; background: url('images/menu_bckgrnd.png'); border: thin solid #7f7f7f; position: absolute; bottom: 0; left: 0; } #content { height: auto; width: 740px; background: url('images/content_bckgrnd.png'); margin-top: 10px; margin-left: auto; border: thin solid #7f7f7f; } #footer { height: 20px; width: 900px; background: url('images/footer.png') no-repeat; margin-left: auto; margin-right: auto; position: relative; bottom:0; border: thin solid #7f7f7f; }
oprócz pozycjonowania - jest problem też z obramowaniem do elementu signin (tego pod menu w FF)
EDIT:
kod strony:
<html> <head> <title>MSH - My Home Site</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- top --> <div id="top"> </div> <!-- container --> <div id="container"> <div id="left_panel" <div id="menu"> <img src="images/menu_title.png" title="menu" /> </div> <div id="signin"> <img src="images/signin_title.png" title="sign in" /> </div> </div> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eu purus. Aliquam elementum lectus a lorem. Quisque in mi. In hac habitasse platea dictumst. Sed quam eros, sodales et, aliquam ac, vulputate sed, metus. Suspendisse mauris velit, congue in, convallis faucibus, fringilla sit amet, mi. Duis tristique mollis leo. Aenean tempor dui et leo. Nullam gravida elit vel metus. Sed sapien ante, imperdiet sit amet, pharetra eget, sollicitudin vitae, metus. Integer a dui nec est viverra condimentum. Aenean molestie, nunc eu accumsan lobortis, urna magna auctor pede, quis sagittis mi enim in ante. Suspendisse ultrices pede. Quisque consectetuer. Donec hendrerit, nisl quis convallis vestibulum, tellus erat condimentum risus, nec euismod nibh leo vitae dolor. Nam sit amet ligula eu quam ornare bibendum. Quisque varius tincidunt sem. Curabitur congue porta risus. Aliquam mattis egestas magna. Pellentesque eget augue non augue interdum consequat. Aenean ornare hendrerit odio. Vivamus et justo eu purus congue tristique. Curabitur placerat tellus ut neque. Vestibulum elementum. Donec a massa. Mauris sit amet ante. Curabitur ac est ac massa convallis ullamcorper. Sed viverra est et velit. Nam scelerisque molestie lectus. Nulla facilisi. Vivamus ac ligula eu elit rutrum posuere. Sed sit amet nibh. Donec suscipit blandit purus. Curabitur a lectus et dolor ornare nonummy. Integer consequat, magna eget cursus viverra, est ipsum lacinia sapien, vulputate vestibulum felis orci fermentum nisi. Morbi turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque auctor, lectus ac porttitor sagittis, est nisi luctus enim, sed iaculis tellus leo et massa. Maecenas mauris ante, scelerisque nec, venenatis quis, dictum ac, massa. Donec id velit. Donec ut ante vitae arcu eleifend hendrerit. Aenean lorem urna, accumsan in, auctor id, gravida blandit, leo. Vivamus erat. Integer lorem tortor, tincidunt sed, volutpat non, hendrerit vitae, ante. In hac habitasse platea dictumst. In tincidunt erat ut ante. Fusce velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in lacus eu ipsum varius congue. Aliquam erat volutpat. Morbi interdum, elit a eleifend pulvinar, justo pede pellentesque urna, eu sagittis lectus lectus a erat. Donec consequat bibendum turpis. Sed mollis. Nunc diam diam, consectetuer a, varius sit amet, luctus sit amet, nunc. Aliquam in massa. Nullam viverra accumsan dui. Phasellus nulla ante, aliquam vitae, bibendum sit amet, vehicula eget, nibh. Phasellus euismod, risus ut sagittis rhoncus, diam lectus euismod nisl, at pretium lacus dui nonummy ante. Aliquam erat volutpat. Suspendisse lobortis nulla a metus. Mauris condimentum, tellus sed tristique ultricies, mauris purus venenatis diam, id pretium magna lacus vitae nisl. Vivamus sit amet erat iaculis ligula condimentum suscipit. In hac habitasse platea dictumst. Donec posuere. Morbi quis dui. Nunc tempor urna sit amet odio. Curabitur consequat urna ut nibh. In ornare diam eget tortor. Nulla enim risus, lacinia eget, sodales vel, blandit sit amet, magna. Cras felis. </div> </div> <!-- footer --> <div id="footer"> </div> </body> </html>
Użytkownik katarina edytował ten post 28 grudzień 2008, 16:15
po pierwsze to nie tyle wina kodu co różnej interpretacji .css przez przeglądarki. Owszem jest to coraz bardziej ujednolicone aczkolwiek w wielu kwestiach nadal jest sporo różnic.
Przejżałem to dość powierzchownie i zakładam, że problem leży w tym, że masz bardzo dużo position: relative/absolute. Często jężeli się robi pierwszy/drugi raz coś takiego to właśnie takie rozjazdy się zdarzają. Też tak raz miałem
Najlepiej jeśli byś się tego pozbył ile się da i operował bardziej marginesami i dopełnieniami (padding) konteneró. Ustawisz kontenery, a wypozycjonować zawartość jest już łątwiej
To moje rady
taka porada co do kontenera:
Aby wyśrodkować DIVa należy użyc kodu:
1. Działa na silniku Gecko, Operze i wszystkich innych przeglądarek które dobrze interpretują CSS.
<div style="margin: 0px auto;"></div>
2. Jak zwykle na IE trzeba sposobu :P
<div style="text-align:center;"></div>
3. W połączeniu:
<div style="margin: 0px auto;text-align:center;"></div>
4. Tylko teraz cała treść w środku będzie wyśrodkowana, więc:
<div style="margin:0px auto;text-align:center;"> <div style="text-align:left;"></div> </div>
i będzie działać na każdej przeglądarce :D