• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstand Navigation - Überschrift beseitigen

C

Corraggiouno

Mitglied
Hi,

kann mir jemand sagen warum sich ein Abstand zwischen meiner Überschrift und meiner Navigation bildet?
Mein html-code:
Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christian Müller - Heilpraktiker</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<html>
<body>
<div id="wrapper">
<h1><img src="images/logo.gif" alt="Christian Müller"></h1>
<div id="nav">
<ul>
<li><a href="home.php"><span>Home</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote.php"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</ul>
</div>
</div>
</body>
</html>

css-code:
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

div#wrapper {
width: 900px;
margin:0px auto;
}

h1 {
text-align:center;
}
div#nav {
float:left;
background: url(../images/nav.gif) repeat-y;
width:250px;
}
Hier meine seite zum anschauen................
Christian Müller - Heilpraktiker
Hat da jemand einen Tipp wie ich den Abstand wegbekomme?
 
ich habe ul {margin:0 padding:0} eingebaut. Der Abstand zwischen Navigation und Überschrift hat sich aber leider nicht verringert.
Also die Überschrift ist ja eine Graphik. Dieser habe ich den weissen Rand abgeschnitten, falls vermutet wird, das der Abstand von der Graphik kommt.
Was muss ich im CSS definieren das Navigation und Überschrift bündigen zueinander sind.
Sollte ich aus h1 doch einen seperaten Div-Container machen?
 
Hallo,

grundsätzlich sollte man Bilder nie als Überschrift (h1, h2...) formatieren. Die Überschrift sollte Texten vorbehalten bleiben.

Die übliche Vorgehensweise ist beide Bilder jeweils als Hintergrundbild in ein div zu stecken und diese dann pixelgenau zu positionieren. Wobei in deinem Fall die Größe des nav.gifs nicht als Anschluß ans logo-gif passt. Entweder muss das nav-Bild gestaucht, oder das logo-Bild gestreckt werden.

Damit gehst du auch der Problematik aus dem Weg, das Bilder Inline-Elemente mit einem unsichtbarem Rand sind, der bei Schriften z. B. für die "langen" Buchstaben wie f, g benötigt wird. Du kannst Bilder zwar als Blockelement definieren (display: block) aber das ist bei Hintergrundbildern eher sinnfrei.

Außerdem stecken in dem Quelltext bereits mehrere Fehler, die sollten vermieden werden:

- zwischen </head> und <body> steht ein <html>

- das </ul> ist doppelt

Da die Bilder überhaupt nicht nahtlos aneinander anschließen können, gibt es für dein Problem auch keine sinnvolle Lösung, die Bilder müssen erst einmal passend gemacht werden.

P.S. Ich habe mir grade noch mal das logo.gif angeschaut: Entgegen deinen Angaben hat es unten doch einen weißen Rand, zwar schmal, aber einen nahtlosen Übergang vortrefflich verhindernd.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
nur mal angenommen ich würde jetzt einen div container div#header und da meine Hintergrundgraphik (im Moment noch die Überschrift h1) definieren, dann würde ja im HTML-Code nur
Code: 
<div header>

</div>
stehen. Aber im header ist ja dann kein Inhalt. Ist das nicht unsauber programmiert?
 
Hallo,

ich bin zwar nicht der grosse Spezi, aber meiner Ansicht nach ist nicht vorgegeben, das divs einen Inhalt enthalten müssen. Ansonsten können die auch einfach durch ein geschützes Leerzeichen gefüllt werden.

Nebenbei: Auch, wenn es nicht notwendig ist sollten Site-Ersteller sauberen Code verwenden. Sowas

<div header> statt

<div id="header">

übernimmt man sonst schnell auch in den richtigen Quellcode und sucht sich dann dumm und dämlich nach dem Fehler.

Gruss

MrMurphy
 
Corraggiouno schrieb:
nur mal angenommen ich würde jetzt einen div container div#header und da meine Hintergrundgraphik (im Moment noch die Überschrift h1) definieren, dann würde ja im HTML-Code nur
Code: 
<div header>

</div>
stehen. Aber im header ist ja dann kein Inhalt. Ist das nicht unsauber programmiert?
Zum Vergrößern anklicken....

Das wäre in der Tat unsauber. Du könntest das Hintergrundbild auch direkt html,
body oder dem Wrapper geben.

MrMurphy schrieb:
grundsätzlich sollte man Bilder nie als Überschrift (h1, h2...) formatieren. Die Überschrift sollte Texten vorbehalten bleiben.
Zum Vergrößern anklicken....

Warum? - Das Bild enthält die Seitenüberschrift, ist also <h1>
Entsprechend muss der im Bild enthaltene Text dann in das alt-Attribut.

MrMurphy schrieb:
Die übliche Vorgehensweise ist beide Bilder jeweils als Hintergrundbild in ein div zu stecken und diese dann pixelgenau zu positionieren.
Zum Vergrößern anklicken....

Nein, wie man ein Bild einbindet, hängt vom Inhalt des Bildes ab: dient es nur
als Dekoration, ist es ein Hintergrundbild; enthält es Informationen, ist es ein
Vordergrundbild.

MrMurphy schrieb:
Damit gehst du auch der Problematik aus dem Weg, das Bilder Inline-Elemente mit einem unsichtbarem Rand sind, der bei Schriften z. B. für die "langen" Buchstaben wie f, g benötigt wird.
Zum Vergrößern anklicken....

So ist es, das lässt sich regeln, indem Du <h1> eine line-height von z.B. 10 px gibst.

MrMurphy schrieb:
Du kannst Bilder zwar als Blockelement definieren (display: block)...
Zum Vergrößern anklicken....

Das ist die andere Möglichkeit, dann brauchst Du zum Zentrieren noch
Code: 
margin:0 auto;
Mit den anderen Punkten hat Murphy Recht: ohne fehlerfreien Quelltext macht es
wenig Sinn, das Layout anzugehen und die Headergrafik hat unten einen weißen Rand.

Grüße
Bernhard
 
Hi Corraggiouno,

probier mal, am Anfang deiner CSS-Datei noch ein
Code: 
* { 
margin: 0;
padding: 0;
}
hinzusetzen.
Damit entfernst du alle Abstände im Dokument. Das ist wichtig, da durch die Abstände von Elementen, die der Browser vorgibt, meist lieber selbst definiert werden.

Außerdem solltest du den div#navi entfernen, denn dessen Eigenschaften kannst du genausogut ul zuweisen, da beides block-Elemente sind und man divs nur zum gruppieren von Elementen verwendet.

EDIT: Auch den span bei den Links in der Navigation kannst du entfernen! Die Links kannst du mit a formatieren!

Gruß
Toast
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben