Abstand zwischen header und Hauptbereich

Beitrag von **Patrick** » Mo 11. Apr 2011, 18:01

Hallöle,

bin gerade dabei eine seite für meine verlobte zu basteln.
Nun habe ich ein problem, was mich etwas ärgert, da ich es nicht gelöst bekomme.

Ich möchte gerne einen Abstand zwischen Header und Hauptbereich haben. das gleiche
auch zwischen hauptbereich und footer.

Wie zum teuefel bekomme ich das hin? Kann mir da einer helfen?

Hier die seite
www.denkmalerei.de

vielen Dank im voraus

LG
Patrick

Beitrag von **goefi-chiangmai** » Mo 11. Apr 2011, 18:25

mach in dein css menu vom Inhalt die gewünschte pixelzahl als abstand rein mit:

margin-top: 20px;
margin-bottom: 20px;

Beitrag von **Patrick** » Mo 11. Apr 2011, 18:45

super, vielen Dank Peter.

Nun hat sich herausgestellt, dass es ein weiteres Problem gibt.
Ich wollte in dem Abstand zwischen Header und Hauptbereich
eine Reihe mit Navigationsbuttons einbauen. Wie geht das den
jetzt, dass ich in diesem Abstand eine art Balken mit den Navi-
buttons einbinden kann. Hoffe ich habs etwas verständlich rüber
gebracht

.

Oder besser mal so gesagt.
ganz oben ist der Headerbereich (hellblau). Direkt unter dem header
will ich eine Menüleiste(?) haben. Und dann soll der Hauptbereich kommen.

Oh gott, ich habs nicht so mit dem erklären

vielleicht klappts trotzdem *lach*

lg

Beitrag von **goefi-chiangmai** » Mo 11. Apr 2011, 18:51

erstellst einen neuen Div nach dem header white:100%

Beitrag von **Patrick** » Mo 11. Apr 2011, 19:02

hoho, wie geht das denn jetzt?

muss ich das in dem style oder in der css machen?

ist das so richtig?

Code: Alles auswählen

<div id="navileiste">

lg

Beitrag von **goefi-chiangmai** » Mo 11. Apr 2011, 19:14

Beides.
In der CSS musst dein menü erstellen! (sonnst weiss er ja nicht wo die daten holen)

und im Style, das ist schon richtig, was da gezeigt hast, aber vergiss den Div nicht zu schliessen

Beitrag von **Patrick** » Mo 11. Apr 2011, 20:12

hmm, aus irgend einen grund bekomme ich es zum verzweifen nicht hin :LL

ich hab es jetzt so gemacht
teil für den style

Code: Alles auswählen

<div id="abstandunten" >
</div>

und das hab ich in dem css teil eingebunden

Code: Alles auswählen

#abstandunten {
         
      margin-top: 30px;
      float: center;
}

Warum klappt das nicht?

Mal der gesamte code

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
         
         
         <meta http-equiv="Content-Type"
         content="text/html; charset=iso-8859-1">
         <meta name="robots" content="INDEX,FOLLOW">
         <meta name="keywords"content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
         
         
         <style>
         
         
         
         
         
         
         a:link {font-family:verdana;color:#000000;font-size:14px;text-decoration:none}
         
         a:visited {font-family:verdana;color:#000000;font-size:14px;text-decoration:none}
         
         a:active {font-family:verdana;color:#000000;font-size:14px;text-decoration:none}
         
         a:hover {font-family:verdana;color:#600000;font-size:14px;text-decoration:none}
         
         textarea {color:#000;font-size:12px;font-family:verdana;background-color:#FFFEED;border:solid 1px #000}
         
         
         body {
         background-color: #39C6DE;
         background-image: url(   );
         background-attachment: fixed;
         background-repeat: repeat;
         background-position: 50% 0;
         font-family:verdana;
         font-size:14px;
         color:#7f543d;
         }
     
     
         #aussen {
         width: 1012px;
         margin-right: auto;
         margin-left: auto;
         background-color: transparent;
         border: 0px;
         background-image: url(http://i53.tinypic.com/2m3pctk.jpg);
         background-attachment: fixed;
         background-repeat: repeat;
         background-position: center center;
         }
     
     
         #header {
         width: 1012px;
         background-color: transparent;
         height: 188px;
         background-image: url(http://i51.tinypic.com/mtbh1d.gif);
         }
     
     
         #navi {
         float: left;
         width: 180px;
         border: 0px solid #FFFFFF;
         background-color: none;
         background-image: none;
         background-repeat: repeat-y;
         font-size: 16px;
         text-align: center;
         padding:12px;
         }
     
     
         A.menulink:link, A.menulink:visited, A.menulink:active {
         display: block;
         width: 150px;
         height:35px;
         line-height:35px;
         text-align: center;
         text-decoration: none;
         font-family: verdana;
         font-size: 15px;
         color: #000000;
         background-color: none;
         background-image: url(http://i56.tinypic.com/jrr39t.gif);
         border-style: solid;
         border-width: 2px;
         border-color: #7f543d;
         }
         A.menulink:hover {
         border-style: solid;
         border-width: 2px;
         border-color: #600000;
         color: #600000;
         background-color: none;
         }
         
         A.menu:link, A.menu:visited, A.menu:active {
         display: block;
         width: 150px;
         height:25px;
         line-height:25px;
         text-align: center;
         text-decoration: none;
         font-family: verdana;
         font-size: 14px;
         color: #000000;
         background-color: transparent;
         border-style: solid;
         border-width: 0px;
         border-color: none;
         }
         
         A.menu:hover {
         border-style: solid;
         border-width: 0px;
         border-color: transparent;
         color: #600000;
         background-color: none;
         }
         
         #inhalt {
         float: left;
         width: 750px;
         background-color: none;
         color:#7f543d;
         padding:12px;
         }
     
         h1 {
         color:#FF0000;
         font-family:trebuchet ms;
         font-size:24px;
         text-align:left;
         text-decoration:none;
         }
     
         h2 {
         color:#7f543d;
         font-family:trebuchet ms;
         font-size:20px;
         text-align:left;
         }
         
         
      
      #abstandunten {
         
      margin-top: 30px;
      float: center;
     
      }
         
         
         
         #footer {
         float: left;
         width: 1012px;
         height: 155px;
         color:#441000;
         line-height:180px;
         font-family:Impact;
         font-size:20px;
         padding-left:20px;
         background-color: transparent;
         background-image: url(http://i51.tinypic.com/30mmm85.jpg);
         background-repeat: no-repeat;
         }
         .clear {
         clear: both;
         }
         
         
         
         
         
         
         
         
         
         
         
         </style>
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         </head>
         
         <body>
         <div id="aussen">
         
         <div id="header">
         </div>
         
         <div id="navi">
         <table width="180" align="right" valign="right" border="0" cellpadding="2" cellspacing="0">
         <tr><td><a href="startseite_standart_20643694.html" class="menulink">Link 1</a></td></tr>
         <tr><td><a href="http://backside.computer4um.de" target=_blank class="menulink">Link 2</a></td></tr>
         <tr><td><a href="www.denkmalerei.de" class="menulink">Link 3</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 4</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 5</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 6</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 7</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 8</a></td></tr>
         <tr><td><a href=" www.denkmalerei.de " class="menulink">Link 9</a></td></tr>
         <tr><td><a class="menulink" target="_self" href="javascript:untermenu('4087587');">Untermenü</a><div id="4087587" style="display: none">
         <a class="menu" target="_self" href="startseite_standart_20643694.html">Home & Info</a>
         <a class="menu" target="_blank" href="http://denkmalerei.de">Denkmalerei</a></div></td></tr>
         <tr><td><a href="guestbook.html" class="menulink">Gästebuch</a></td></tr>
         </table>
         </div>
         
         
         <div id="inhalt">
         <div>
         
         %content%
         
         <center><b><h2>Hier ist der komplette inhalt der seiten</h2></b></center>
         
         <!--Hier ist der komplette inhalt der seiten-->
         
         
         
         
         
         </div>
         </div>
      
      <div id="abstandunten" >
    
         
         </div>
      
         <br class="clear" />
         <div id="footer" align="center"><span style="font-size: medium"><span style="font-family: Monotype Corsiva">Design by © Patrick Schöning</div>
  
         </div>
         </body>
         </html>

Beitrag von **goefi-chiangmai** » Mo 11. Apr 2011, 20:20

Sollte schon Stimmen, aber weil dein Div kein Inhalt hat, und du keine Höhe des Div bestimmt hast, Wird er null Pixel höhe Angezeigt

Frage: ich hab was gesehen in deinem Code:
Hast zuwenig Speicherplatz bei Oyla, ist gut möglich das dein Design plötzlich die Grafiken fehlen (ICH KANN SIE GAR NICHT SEHEN weil Tinypic in Asien Gesperrt ist) und die ladezeiten werden auch erhoht!!!!

http://i56.tinypic.com/jrr39t.gif

Beitrag von **Patrick** » Mo 11. Apr 2011, 20:44

wo bestimme ich denn die höhe der leiste? Im css teil?

ja, die Bilder habe ich vorerst bei tinypic hochgeladen. Wenn ich mit dem Aufbau der HP
fertig bin, kommen die Grafiken dran, die ich dann auch direkt über oyla hochlade.

lg

Beitrag von **goefi-chiangmai** » Mo 11. Apr 2011, 20:49

Ja ok, dann kann ich die Grafiken später auch gucken.

klar in den Css Teil

Code: Alles auswählen

width: 100%;
height:35px;

HomepageHelfer.org

Abstand zwischen header und Hauptbereich

Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Re: Abstand zwischen header und Hauptbereich

Wer ist online?