# Wordpress Abstand zwischen Content->Head



## Grunge (4. März 2015)

Hallo Leute,

habe mit WP nen eigenes Theme gebaut, was eher der Funktionalität, als der optischen dient.

Jedoch habe ich einen Abstand zwischen Head und Content, und zwischen Content und Footer - den will ich weghaben - nur wie!?

hier mal meine css:


```
body        {color: #333; background: #222222; font-family:Verdana;}

#wrapper    {width: 980px; margin:auto; text-align: left; background: #fff; border-radius: 5px;}
#header        {height: auto; padding: 20px; padding-bottom:0px; margin-bottom:0px; margin-top:0px; }
#main       {width: 96%; margin-top:0px; padding:20px; float: left; padding-top:0px;}
#sidebar    {width: 0px; padding: 10px; padding-top: 20px; float: left;}
#footer        {clear: both; height: 100px; padding: 20px; padding-top:0px; }
#test        {height: 25px; background: #41a52a; padding-top:0px; padding-bottom:0px;}
#menu        {height: 25px; background: #41a52a; }
#entry         {padding-top: 0px;}





.menu li {


list-style-type: none;
height: 20px;
float: left; margin-right: 10px;
background: #41a52a;
color: #fff;

}


li.menu-divider:last-child {display:none;}

a:link {color: #fff; text-decoration:none;}
a:visited {color: #fff; text-decoration:none;}
```

hoffe ihr könnt weiterhelfen

DANKE


----------



## Jan-Frederik Stieler (4. März 2015)

Hi,
wir elfen gerne aber den einzigen Abstand den ich im CSS erkenne ist das padding: 20px bei #main was den Abstand verurschaen kkönnte.
Hast du einen Link zu der Seite?

Grüße


----------



## SpiceLab (4. März 2015)

Jan-Frederik Stieler hat gesagt.:


> wir elfen gerne aber den einzigen Abstand den ich im CSS erkenne ist das padding: 20px bei #main was den Abstand verurschaen kkönnte.


*#main* besitzt aber in der weiteren Folge *padding-top:0*, wie auch *#footer* 

Da sich mit dem gezeigten CSS keine Abstände zwischen den genannten Blöcken ergeben, ist vermutlich in ihnen ein weiteres Block-Element (z.B. *h1-6*, *p*) enthalten, dessen voreingestellter Außenabstand greift.

```
/* margin-Reset */
h1,h2,h3,h4,h5,h6,p {margin:0}
```
[edit]Tipp-Ex[/edit]​


----------



## Grunge (4. März 2015)

Sorry, aber das hat leider auch nichts gebracht !?


----------



## SpiceLab (4. März 2015)

Dann poste bitte mal den zugehörigen HTML-Code, und sofern vorhanden, das übrige CSS.

Denn wie schon heute Morgen von mir erwähnt, ergeben sich mit deinem gezeigten CSS(-Ausschnitt) keine Abstände zwischen den drei Blöcken!

Edit-1: Sollte sich statt meinen angenommenen Block-Elementen ein Listenelement darin befinden, worauf der Selektor *.menu li* schließen lässt, müsste hier der Umfluß (float-Regel) der Listenpunkte beendet werden.

Beispiel für *#header*:

```
#header {/* best. Regeln */ overflow:hidden}
```

Edit-2: Da ich mir derzeit nicht ganz sicher bin, ob *#sidebar* in deinem HTML ein direkter Nachbar von *#main* ist, könnte dies eine weitere Ursache sein, da für dieses Element nicht genügend Platz existiert, um sich neben *#main* anzuordnen, das eine Breite von 96% besitzt. Somit ordnen sich die beiden Elemente nicht wie gewünscht nebeneinander, sondern untereinander an.
[edit]Tipp-Ex[/edit]​


----------



## Grunge (4. März 2015)

```
<?php
$db = @new mysqli('localhost', 'd01d439a', 'ECet9bVrA5EZESWG', 'd01d439a');
if (mysqli_connect_errno()) {
    die ('Konnte keine Verbindung zur Datenbank aufbauen: '.mysqli_connect_error().'('.mysqli_connect_errno().')');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
<script src="http://snango.de/model/model/js/jquery-1.11.0.min.js"></script>
<script src="http://snango.de/model/model/js/lightbox.min.js"></script>
<link href="http://snango.de/model/model/css/lightbox.css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?> 
</head>
<body>

<div id="wrapper">

   <div id="header"><a href="index.php"><img src="logo-200os.png" /></a><?php
   $sql="SELECT * FROM wp_online WHERE ip='".$_SERVER['REMOTE_ADDR']."'";
   $result=$db->query($sql);
 $i=0;

 ?><div id="menu"> <table width="100%" border="0">
  <tbody>
    <tr>
      <td align="center"><a style="font-size:13px;" href="?page_id=5">Modell suchen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=7">Modell buchen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=9">Als Modell eintragen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=11">Modell Castings</td></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=13">Wir über uns</a></td>
            <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=39">Login</a></td>
    </tr>
  </tbody>
</table>
 </div>
<a href="?page_id=5"><img src="titelbild.jpg" /> </a>
<div style="vertical-align:middle;" align="right" id="test"><?php while($row=$result->fetch_assoc()) { 
$i++;     
 }
   
   if($i > 0) {
      include "model/usr_menu.php";
   }?></div>
</div><!-- header -->

   <div id="main">  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
               

            <?php the_content(); ?>
         
      <?php endwhile; ?>

       
      <?php endif; ?></div><!-- main -->

   <div id="footer">
   <table cellpadding="0" cellspacing="0" style="border:2px solid #41a62a; font-size:12px; vertical-align:middle;" width="100%" >
  <tbody>
  <tr>
  <td align="left" colspan="3" style="background-color:#41a62a; color:#fff; font-size:14px;" height="25px">Kontakt@TOPNETmodel.de</td>
  <td align="right" style="background-color:#41a62a; color:#fff; font-size:14px;">TEL: 07 31 - 141 163 250</td>
  </tr>
    <tr>
      <td  valign="top" style=" font-size:14px;" width="40px">&nbsp;</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">- Models suchen<br />- Models buchen<br />- Als Model eintragen<br />- Model - Casting</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">- Wir über uns<br />- Kontakt<br />- Job's<br />- Impressum</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">TOPNETmodel.de<br />Thränstrasse 29<br /><br />89077 Ulm</td>
    </tr>
  </tbody>
</table>
   
   </div><!-- footer -->

</div><!-- wrapper -->

</body>
</html>
```

da isser


----------



## SpiceLab (4. März 2015)

Grunge hat gesagt.:


> da isser


Bitte den geparsten PHP-Code!


----------



## Grunge (4. März 2015)

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
<script src="http://snango.de/model/model/js/jquery-1.11.0.min.js"></script>
<script src="http://snango.de/model/model/js/lightbox.min.js"></script>
<link href="http://snango.de/model/model/css/lightbox.css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> - Topnetmodel</title>

<link rel="stylesheet" href="http://snango.de/model/wp-content/themes/tnm/style.css" type="text/css" media="screen" />
<link rel="pingback" href="http://snango.de/model/xmlrpc.php" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://snango.de/model/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://snango.de/model/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1" />

</head>
<body>

<div id="wrapper">

   <div id="header"><a href="index.php"><img src="logo-200os.png" /></a><div id="menu"> <table width="100%" border="0">
  <tbody>
    <tr>
      <td align="center"><a style="font-size:13px;" href="?page_id=5">Modell suchen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=7">Modell buchen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=9">Als Modell eintragen</a></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=11">Modell Castings</td></td>
      <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=13">Wir über uns</a></td>
            <td style="color:#fff;">|</td>
      <td align="center"><a style="font-size:13px;" href="?page_id=39">Login</a></td>
    </tr>
  </tbody>
</table>
 </div>
<a href="?page_id=5"><img src="titelbild.jpg" /> </a>
<div style="vertical-align:middle;" align="right" id="test"><a style="color:#fff;" href="?page_id=37">Sedcard bearbeiten</a> | <a style="color:#fff;" href="?page_id=41">Logout</a>

 </div>
</div><!-- header -->

   <div id="main">                

            <p>Willkommen zur deutschen Version von WordPress. Dies ist der erste Beitrag. Du kannst ihn bearbeiten oder löschen. Um Spam zu vermeiden, geh doch gleich mal in den Pluginbereich und aktiviere die entsprechenden Plugins. So, und nun genug geschwafelt – jetzt nichts wie ran ans Bloggen!</p>
         
       
       
      </div><!-- main -->

   <div id="footer">
   <table cellpadding="0" cellspacing="0" style="border:2px solid #41a62a; font-size:12px; vertical-align:middle;" width="100%" >
  <tbody>
  <tr>
  <td align="left" colspan="3" style="background-color:#41a62a; color:#fff; font-size:14px;" height="25px">Kontakt@TOPNETmodel.de</td>
  <td align="right" style="background-color:#41a62a; color:#fff; font-size:14px;">TEL: 07 31 - 141 163 250</td>
  </tr>
    <tr>
      <td  valign="top" style=" font-size:14px;" width="40px">&nbsp;</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">- Models suchen<br />- Models buchen<br />- Als Model eintragen<br />- Model - Casting</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">- Wir über uns<br />- Kontakt<br />- Job's<br />- Impressum</td>
      <td width="33%" valign="top" style=" font-size:14px; line-height:150%">TOPNETmodel.de<br />Thränstrasse 29<br /><br />89077 Ulm</td>
    </tr>
  </tbody>
</table>
   
   </div><!-- footer -->

</div><!-- wrapper -->

</body>
</html>
```


----------



## SpiceLab (4. März 2015)

Es bleibt dabei: keine Abstände sichtbar. Hab den drei Blöcken jeweils einen Hintergrund gegönnt.


----------



## Grunge (4. März 2015)

ich sehe auf meinem macbook (safari) einen abstand....


----------



## SpiceLab (4. März 2015)

Der Screenshot stammt zwar aus Firefox, gleiches gilt aber neben den anderen Browsern auch für Safari (OS: Win7).


----------



## Grunge (6. März 2015)

ich habe nen weissen abstand nach wie vor?!


----------



## SpiceLab (6. März 2015)

Grunge hat gesagt.:


> ich habe nen weissen abstand nach wie vor?!


Da berichtest du nix neues.

Leider kann ich das Fehlverhalten von Safari(Mac) nicht nachvollziehen.

Edit: Vielleicht ist es zielführender, wenn du die Abstände in einem Screenshot zeigst, um evtl. anhand ihrer Dimension Rückschlüsse ziehen zu können.


----------



## Jan-Frederik Stieler (6. März 2015)

Hi,
hab mal ein jsbin erstellt. Wenn alle mit dem selben Ausgang testen ist es vielleicht leichter die Ursache zu finden.
http://jsbin.com/vijazu/2/edit

Mit Safari 7.1.3 hab ich da auch keinen Abstand außer den 20px Padding-Bottom von #main.
Außerdem sind da noch zwei Fehler im Quellcode, siehe jsBin. Ich hab die jetzt drinnen gelassen damit du die siehst.

Grüße


----------

