Mam stronę ( http://bit.up.krakow.pl/~kbabel/WP ) podzieloną na 3 divy - logiczne kawałki ('header' w header.php, 'content' w index.php i 'footer' w footer.php).
Teraz: div 'content' zawiera w sobie div - pudełko 'contentbox' - w którym ma w przyszłości wisieć jakaś treść (tekst i w jednym przypadku jakaś galeria).
Problem jest taki, że gdy do owego 'contentbox' wrzucam jakiś el blokowy (np
albo
) między głównymi sekcjami 'header' i 'content' powstaje rozstęp na ok 30 px.
Po drugie, zauważyłem też, że dodając
w header i zmieniając rozmiary tej czcionki na odpowiednio wielki, ma miejsce ten sam efekt odsuwania się - tyle że w tym przypadku cała strona odsuwa sie od górnej krawędzi okna przeglądarki - mimo że tekst pozostaje obrębie swojego diva.
Moja prośba jest taka, czy ktoś znający się na CSS może rzucić okiem na ten kod i powiedzieć mi, gdzie tkwi przyczyna tego problemu i jak mogę go ominąć/naprawić? Myślałem już o nadaniu elementom wewnątrz właściwości display:inline; (działa), ale to takie po macoszemu mi się wydaje...
Tutaj zamieszczam kod strony i css:
kod header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<!-- POCZĄTEK HEAD -->
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php wp_head(); ?>
</head>
<!-- KONIEC HEAD -->
<body>
<div id="header">
<div id="headerbox">
<!-- tytuł galerii -->
<p id="sitename"><?php bloginfo('name'); ?></p>
<!-- wyszukiwarka -->
</div>
</div>
kod index:
<?php get_header(); ?>
<!-- KONIEC HEADER -->
<!-- POCZĄTEK TREŚCI GŁÓWNEJ -->
<div id="content">
<div id="contentbox">
<!-- contentbox: treść bieżącej strony -->
<h1>znacznik h1</h1>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"></a></h2>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<div id="contentdescbox">
<!-- contentdesc: opis bieżącej strony -->
<div id="contentdesc">
<p><?php bloginfo('description'); ?></p>
</div>
</div>
</div>
<!-- KONIEC TREŚCI GŁÓWNEJ -->
<!-- POCZĄTEK FOOTER -->
<?php get_footer(); ?>
kod footer:
<div id="footer">
<div id="footerbox">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="footerborder">
<!-- grafika wyznaczająca koniec strony -->
</div>
<div id="footerend">
<!-- dodatkowe informacje -->
<p>Powered by WordPress version <?php bloginfo('version'); ?></p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
kod CSS:
body
{
background-color:#414141;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header
{
background-color:#efecdd;
height:100px;
margin-top:30px;
}
#headerbox
{
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#sitename
{
margin-left:20px;
position:relative; top: 20px;
font-family: Gill Sans MT, sans-serif;
font-size:30px;
font-weight:bold;
font-style:italic;
color:#efecdd;
text-shadow: 0.1em 0.1em 0.2em #414141;
}
#content
{
background-color:#792a2a;
height:400px;
box-shadow: inset 0px 6px 5px -2px #222222,
inset 0px -6px 5px -2px #222222;
}
#contentbox
{
background-color:#efecdd;
width:1000px;
height:300px;
position:relative; top:30px;
margin-left:auto;
margin-right:auto;
border-top-left-radius:1px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:1px;
box-shadow: 0 0 8px 4px #222222;
}
#contentdescbox
{
width:1000px;
height:50px;
position:relative; top:40px;
margin-left:auto;
margin-right:auto;
}
#contentdesc
{
text-align:center;
color:#efecdd;
}
#footer
{
background-color:#efecdd;
height:120px;
position:relative; bottom:15px;
}
#footerbox
{
width:1000px;
height:120px;
margin-left:auto;
margin-right:auto;
}
#footerbox ul
{
display:block;
list-style:none;
position:relative; top:20px; right:10px;
}
#footerbox li
{
display:block;
float:right;
width:170px;
height:40px;
margin-left:10px;
background-image:url('img/button.png');
}
#footerbox li:hover
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
}
#footerbox a:link, a:visited
{
display:block;
width:170px;
height:40px;
line-height:40px;
outline-style:none;
outline-width:0;
text-decoration:none;
font-size:14px;
font-weight:bold;
color:#efecdd;
text-align:center;
}
#footerbox a:hover
{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
}
#footerborder
{
height:30px;
background-image:url('img/footerborder.png');
}
#footerend
{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerend p
{
font-size:9px;
margin-left:10px;
color:white;
text-align:center;
margin-top:50px;
text-shadow: 0.1em 0.1em 0.2em white;
}
#footerend p:hover
{
text-shadow: 0.3em 0.3em 0.4em white;
}