Mam problem

[dzikyi]

Witam!

Mam malutki problem z wyświetlaniem div'ów na mojej stronie. Link do strony tutaj

Jak widać prawy top nie jest wyświetlany równo z lewym menu. Dlaczego tak się dzieje?

Mam także pytanie dlaczego w IE obramowanie menu i top tak brzydko wygląda?

kod index.html: https://phpfi.com/118041

kod style.css: https://phpfi.com/118042

[Rjan]

Jak widać prawy top nie jest wyświetlany równo z lewym menu. Dlaczego tak się dzieje?

Dlatego, że całość jest kompletnie nieprzemyślana. <br /> pomiędzy divami?

<div id="menu"> i <div id="top_tytul"> są floatowane i występują na jednej wysokości.

Dodatkowo <div id="tlo"> nie jest zamknięty.

Gdybyś chciał mieć <div id="menu_tytul"> i <div id="top_tytul"> ustawione równo to powinieneś właśnie je floatować. Zresztą cała konstrukcja jest skopana, bo raczej powinno być:

<div id="kontener">

<div id="top"></div>

<div id="lewa">

<div id="naglowek_menu"></div>

<div id="tresc_menu"></div>

</div>

<div id="prawa">

<div id="naglowek_tresc"></div>

<div id="tresc_tresc"></div>

</div>

<div id="footer"></div>

</div>

#lewa {float:left;}

#prawa {float:right;}

#footer {clear:both;}

+ cała reszta typu szerokość, margin, padding itp.

Oczywiście zamiast divów nagłówkowych można zdecydowanie lepiej hx, a treść paragrafami lub na listach.

Takie jak obecnie opieranie się na boxach to divitis w najczystszej postaci - wszystkie wady tak niechcianych tabel.

Znając sztywną wysokość topu można się jeszcze pokusić o zmianę kolejności w kodzie (najpierw treść, potem menu, potem top, na koniec stopka) pozycjonując top absolute do kontenera ustawionego relative, ale to już temat na pracę domową

[dzikyi]

Dzięki wielkie za odpowiedź! Zrobiłem tak jak mi napisałeś i muszę stwierdzić że pomogło lecz dalej nie wygląda tak jak bym chciał

Sam zobacz: https://www.strefa7.forall.pl/clubmusic/ (Pod IE to już całkiem źle wygląda, a w FF i Operze nia ma tylko białego tła pod #lewa i #prawa)

index.html: https://phpfi.com/118178

style.css: https://phpfi.com/118179

[Erbit]

Gdybys tylko chcial poczytac przyklejone tematy na pewno znalazłbyś cos dla siebie.. -> https://www.forum.optymalizacja.com/index.php?showtopic=5636 i to nawet w tym dziale...

[Rjan]

Dzięki wielkie za odpowiedź! Zrobiłem tak jak mi napisałeś i muszę stwierdzić że pomogło lecz dalej nie wygląda tak jak bym chciał

Zapomniałeś o <div id="footer"></div> jako elemencie z clear:both;

[dzikyi]

Zrobiłem stopkę lecz dalej jest tak samo https://www.strefa7.forall.pl/clubmusic/

<!-- tlo -->
<div id="tlo">

<!--  logo  -->
<div id="logo_1"></div><div id="logo_2"></div><div id="logo_3"></div><div id="logo_4"></div>
<img src="template/img/logo_5.gif" alt="muzyka klubowa" /><br /><br /><br />
<!--  logo  -->

<!--  lewa - menu  -->
<div id="lewa">
<div id="menu_tytul"><p>menu</p></div>
<div id="menu"><p>menu</p><p>menu</p><p>menu</p></div>
</div>
<!--  lewa - menu  -->

<!--  prawa - top  -->
<div id="prawa">
<div id="top_tytul"><p>top</p></div>
<div id="top"><p>top</p><p>top</p><p>top</p></div>
</div>
<!--  prawa - top  -->

<!--  stopka  -->
<div id="stopka"><p>stopka</p></div>
<!--  stopka  -->

</div>
<!-- tlo -->

/* ************ stopka ************ */
#stopka {
width: 750px;
height: auto;
clear: both;
background-color: #FFFFFF;
}

[raf_79]

Kiedyś miałem problemy podobne do twoich i dostałem linka do tej strony i wiesz co pomogło

miłej lektury i oglądania obrazków

[Rjan]

Poczytaj dokładnie o margin i padding w badzIEwiu. Zupełnie inna interpratacja niż w przeglądarkach.

Zamiast margin dla lewej i prawej użyj relative i:

- dla lewej left:_wartość_marginesu;

- dla prawej right:_wartość_marginesu;

A przede wszystkim sporo poczytaj o css layout.

[dzikyi]

Wielkie dzięki za odpowiedzi! Już sobie poradziłem lecz jak zwykle mam jeszcze inne pytanko

Jak zrobić aby kropkowane obramowanie menu i top'u wyglądało ładnie w IE tak jak w FF?

EDIT:

Już sobie poradziłem z tym problemem! Wystarczyło dodać "border-width: 1px;".

Następnym razem pomyślę zanim napiszę