XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Abstände und Breiten in CSS (http://xhtmlforum.de/showthread.php?t=57972)

seeadler 05.08.2009 23:01

Abstände und Breiten in CSS
 
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 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 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 06.08.2009 11:10

Liste der Anhänge anzeigen (Anzahl: 1)
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 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 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 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 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 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 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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023