Abstände und Breiten in CSS

seeadler · #1 (**permalink**) 05.08.2009, 23:01

Hallo,

ich hoffe ihr könnt mir weiterhelfen.
mein htlm-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="http://xhtmlforum.de/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>

mein 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;
}

Zu meinm ersten Problem. Ich habe einen ziemlich großen Abstand zwischen der Überschrift und dem nav-Bereich. Was muss ich definieren das der Nav-Bereich mit der Überschrift bündig ist?

2. Für den Nav-Container habe ich eine Hintergrundgraphik definiert, welche 252 px x 2px ist. Aber auch hier passt die Breite wie auf meiner Seite zu sehen ist. Muss ich überhaupt im nav-container eine Bereite angeben?

Christian Müller - Heilpraktiker

seeadler · #2 (**permalink**) 06.08.2009, 10:51

habe meinen code etwas umgeschrieben:

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="http://xhtmlforum.de/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>
</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;
border-style:solid;
border-color:#0000000;
border-width:1px;
}

h1 {
text-align:center;
}

div#nav{
background:#fab90e;
width:225px;

margin-left:10px;
}

ul {

padding-left:20px;
list-style-type:none;
}

li {
padding:5px;
}

...leider habe ich immer noch den Abstand (weisser Balken) zwischen meiner Navigation und der Überschrift. Hat mir niemand einen Tipp wie ich den Abstand vermeiden kann?
Christian r

regloh · #3 (**permalink**) 06.08.2009, 10:55

Versuche einmal

Code:

* {
  margin: 0;
  padding: 0;
}

als Reset der Standardabstände vom Browser (Siehe auch FAQ).

Und bessere noch deine Fehler aus: http://validator.w3.org/check?verbos...ww.netcs.de%2F

seeadler · #4 (**permalink**) 06.08.2009, 11:10

oh super, das verringerte den Abstand.

Jetzt habe ich nur noch ca. 5px Abstand. In der Graphik kann ich nix mehr abschneiden, weil da kein weisser Rand mehr ist.
Aktuelles Ergebnis: Christian r
Gibt es da noch einen Trick wie ich da die letzen Pixel eliminieren kann?
......ach übrigens dank auch für den Hinweis meiner Fehler, habs verbessert

regloh · #5 (**permalink**) 06.08.2009, 11:22

Probiere mal display: block; für das <img> im Header. Allerdings solltest du solche Deko als Hintergrundbild ins CSS packen. Soetwas gehört nicht ins Markup.

seeadler · #6 (**permalink**) 06.08.2009, 11:45

Zitat:

Allerdings solltest du solche Deko als Hintergrundbild ins CSS packen

ok, werde das image in css packen. Aber was steht dann im HTML-code
also zwischen <h1></h1>. Dort muss ich ja dann nichts mehr reinschreiben.
der code

Code:

<img src="http://xhtmlforum.de/images/logo.gif" alt="Cm" />

fällt ja dann weg, oder?
Ist doch unsauber wenn zwischen den tags <h1></h1> nichts steht?

regloh · #7 (**permalink**) 06.08.2009, 11:49

Zitat:

Ist doch unsauber wenn zwischen den tags <h1></h1> nichts steht?

Gut und richtig erkannt

Da kommt dann der Name der Seite/Firma/Slogan ect. als Text rein, den du dann mittels Image Replacement ausblenden kannst.

seeadler · #8 (**permalink**) 06.08.2009, 21:43

ok, habe meinen code dementsprechend angepasst.
css-code

Code:

html {
height: 100.3%;
}

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

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:10px auto;
border-style:solid;
border-color:#0000000;
border-width:1px;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:210px;

}

img{
display:block;
}

div#nav{
background:#fab90e;
width:225px;
margin-left:10px;
}

ul {

padding-left:20px;
list-style-type:none;
}

li {
padding:5px;
}

htlm-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 r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1></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>
</div>

</div>
</body>
</html>

Das mit mit dem block element bei img habe ich wie du gesagt hast definiert. Leider wird dadurch die ganze Graphik nach links verrückt. Ist das normal?
........mein Logo also die Überschrift ist 210px. Wenn ich keine Höhe angebe wird die Überschrift in der Webseite nicht angezeigt. Gebe ich als Höhe expelzit 210px an, wird die Graphik bzw. das Logo angezeigt. Warum muss da noch die Höhe zusätzlich im CSS angegeben werden, wenn ohnehin die Graphik selbst schon 210px hoch ist?
- aktuelles Ergebnis - http://www.netcs.de
..........welche image replacment methode verwendest du in der Regel regloh, wenn ich fragen darf?

Crizzo · #9 (**permalink**) 06.08.2009, 21:47

Weil die Grafik im Hintergrund ist und somit keinen Einfluss auf die Elementhöhe hat. Das Element fällt ohne Inhalt in sich zusammen und ist ohne Höhe dann nur 0px hoch, somit sieht man auch dein Bild nicht.

Welche Grafik wird jetzt nach links gerückt?

seeadler · #10 (**permalink**) 06.08.2009, 22:00

Zitat:

Welche Grafik wird jetzt nach links gerückt?

sorry, habe mich falsch ausgdrückt. Mein Logo bzw. der nav-container ist linksbündig. Normalerweise sollten doch diese vom Elternelement
margin:10px auto erben, oder?
Hätte gerne das das Logo(Graphik) bzw. der Nav-Container auch zentriert sind?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Vertikale CSS Navigation mit Bildern und Text	macmensa	CSS	2	25.07.2009 17:23
Doctype und CSS Problem	tech	CSS	3	29.05.2009 21:16
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 09:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 12:39
Dreispaltenlayout mit CSS	rookiehh	CSS	2	18.09.2005 21:57