zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstände und Breiten in CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.08.2009, 23:01
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard 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

Geändert von seeadler (05.08.2009 um 23:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.08.2009, 10:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.08.2009, 10:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 06.08.2009, 11:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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
Angehängte Grafiken
Dateityp: jpg logo.jpg (8,3 KB, 4x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 06.08.2009, 11:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.08.2009, 11:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 06.08.2009, 11:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 06.08.2009, 21:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von seeadler (06.08.2009 um 21:50 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 06.08.2009, 21:47
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.829
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.08.2009, 22:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:10 Uhr.