Seite 1 von 2
Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 18:01
von Patrick
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
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 18:25
von goefi-chiangmai
mach in dein css menu vom Inhalt die gewünschte pixelzahl als abstand rein mit:
margin-top: 20px;
margin-bottom: 20px;
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 18:45
von Patrick
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
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 18:51
von goefi-chiangmai
erstellst einen neuen Div nach dem header white:100%
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 19:02
von Patrick
hoho, wie geht das denn jetzt?
muss ich das in dem style oder in der css machen?
ist das so richtig?
lg
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 19:14
von goefi-chiangmai
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
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 20:12
von Patrick
hmm, aus irgend einen grund bekomme ich es zum verzweifen nicht hin :LL
ich hab es jetzt so gemacht
teil für den style
und das hab ich in dem css teil eingebunden
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>
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 20:20
von goefi-chiangmai
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!!!!
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 20:44
von Patrick
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
Re: Abstand zwischen header und Hauptbereich
Verfasst: Mo 11. Apr 2011, 20:49
von goefi-chiangmai
Ja ok, dann kann ich die Grafiken später auch gucken.
klar in den Css Teil
