W ten sposób wygląda zawartość body:
- Kod: Zaznacz cały
<div id="wrapper">
<div id="header">
<h1>...</h1>
</div>
<div id="content">
<div class="entry">
<h2>...</h2>
<div class="entry_content">
...
</div>
<div class="entry_meta">
...
</div>
</div>
<div id="page_menu">
<div id="meta_menu">
...
</div>
<div id="journal_categories">
...
</div>
<div id="journal_archive">
...
</div>
<div id="blogroll">
...
</div>
</div>
<div id="author_menu">
<div id="about_author">
...
</div>
<div id="del_icio_us">
...
</div>
<div id="flickr">
...
</div>
<div id="last_fm">
<h2>Last.fm</h2>
...
</div>
</div>
<div id="footer">
...
</div>
</div>
Osiągnąć chcę efekt trochę podobny, jak na stronie 5ThirtyOne, tzn. zawartość content jest na białym tle, zawartość page_menu, author_menu i footer na tle innego koloru (dajmy na to, że szarego). Tu właśnie pojawia się problem. Nic nie daje określenie koloru tła dla body w arkuszu styli jako białego, a tła dla tych trzech wymienionych wyżej elementów jako szarego. Reaguje footer (uzyskuje szary kolor), jednak te dwa bloki menu nie reagują, ponieważ bloki poszczególnych menu (journal_archive, journal_categories...) mają określone w arkuszu styli float, zauważyłem że jest to ściśle z tym związane.
Udało mi się obejść ten problem, określając tło body jako szare, a tło header i content białe. Autor 5ThirtyOne doszedł do takiego samego rozwiązania. Osiągnąłem efekt, jak na zrzucie ekranu:
Mógłbym uznać, że wszystko jest w porządku, jednak chciałbym wykombinować coś, co wcześniej wykombinowano na stronie meyerweb.com. Chodzi tylko o to, że kiedy w arkuszu styli określam:
- Kod: Zaznacz cały
.entry_content {
width: 80%;
float: right;
}
.entry_meta {
width: 20%;
float: left;
}
tracę biały kolor tła, widać to na zrzucie ekranu:
Dlaczego tak się dzieje? Co można temu zaradzić? Wiem, że opis problemu jest długi, ale postarałem się go naświetlić jak najdokładniej. Okrutnie mnie ciekawi, co na to można poradzić.
