HTML Fehlersuche auf meiner Seite

[traumomat]

Hallo ich heiße Flo, bin Fotograf und bin neu hier.
Ich habe u.a. die Website www.florian-busch.de und einen HTML-Fehler z.B: auf der Unterseite http://florian-busch.de/qtvr/index.html .

Wenn man das Browserfenster enger zusammenschiebt, überlagern sich die Texte der einzelnen Absätze. Ich habe dem schon ein bischen Entgegengewirkt, in dem ich viele Freizeilen gesetzt habe, aber schön sit das ja nicht.

Es wäre toll, wenn mal einer einen kurzen Blick in den Quellcode werfen und mir sagen könnte, wo der Fehler liegt.

Danke schon einmal,

Flo

[zulujaner]

Hallo Flo,

herzlich willkommen hier im Traum-Projekt.

Ich hab mal deine Seite nach HTML Fehlern durchsucht. Optisch gefällt mir das Layout recht gut.

Die Fehler liegen im Detail. Du schreibst:

Wenn man das Browserfenster enger zusammenschiebt, überlagern sich die Texte der einzelnen Absätze.

etwas von Absätzen. Ich finde jedoch keine oder wenige im Quelltext. Du verwendest zum strukturieren deiner Seite h4 Überschriften. Das geht zwar, ist aber nicht die feine Art. Nimm für Absätze das HTML Tag <p> text </p>

hier ein Beispiel.

<h4 align="justify"><br>
            F&uuml;r virtuelle Touren werden einzelne Panoramen miteinander verkn&uuml;pft in einer Form dargestellt, in der man mit der Maus durch einen Raum hindurchnavigieren kann - &auml;hnlich wie in einem Computerspiel.</h4>

besser so:

<p>F&uuml;r virtuelle Touren werden einzelne Panoramen miteinander verkn&uuml;pft in einer Form dargestellt, in der man mit der Maus durch einen Raum hindurchnavigieren kann - &auml;hnlich wie in einem Computerspiel.</p>

Schon ist dein Problem keines mehr.

Aber wie kommt nun dein Fehler zustande?
In deinem CSS Stylesheet legst du das Aussehen deiner Überschriften fest.
Da schreibst du einmal:

h3,h2,h4,h5,h6 {
	font-family:  Arial, Helvetica, sans-serif;
	border: 0;
	border-top: 0;
	border-bottom: 0;
	border-width: 0;
	height: 13px;
}

dann noch:

h4 {
	font-size: 12px;
	color: #999999;}

den Fehler verursacht das heigth:13px; nimm das raus und schon funktioniert es. Damit gibst du an das deine Überschriften nur 13px hoch sein sollen. Und dann willst du so ne Menge Text reinpacken - das wird nix!! Nur Kauderwelsch...

Besser ist aber du änderst wie oben angegeben in <p> und schreibst in deinem CSS noch folgende Definition.

p {
	font-size: 12px;
	color: #999999;
	text-align: justify;
}

Dieses "bad" Schema zieht sich durch deine ganze Seite. Da solltest du noch einmal drüberschauen. Überschriften sind nur dazu da etwas hervorzuheben. Nicht um den ganzen Text aufzunehmen.

Eine gute Anlaufstelle und ne super Seite zum CSS lernen ist:
http://www.css4you.de/

[traumomat]

Danke Dir, ich denke das wird mir weiter helfen.
Flo

[zulujaner]

Hallo noch mal,

habe dein CSS File vergessen mit anzuhängen.
Da waren auch noch ein paar Schnitzer drin.

Merke: keine Html Auszeichnungen im CSS File. Sowas

<style type="text/css">

hat da drin nix zu suchen.

Dann brauchst du Sachen die sich auf die ganze Seite auswirken, auch nur einmal definieren. Du verwendest auf der ganzen Seite nur eine Schriftart. Da reicht es wenn du für den Body die schrift notierst.

body {background-color: #e5e5e5; font-family: Arial, Helvetica, sans-serif;}

Wenn du es nicht irgendwo anders haben möchtest, brauchst du es nicht noch mal zu erwähnen.

Ich hab mal dein CSS etwas zusammengefasst. Dein Aussehen der Seite ändert sich dadurch nicht. Aber die Übersicht im CSS File erhöht sich drastisch...

body {background-color: #e5e5e5; font-family: Arial, Helvetica, sans-serif;}
body,td,th {color: #666666;}

.Stil1 {font-size: 36px;}

h3,h2,h4,h5,h6 {color: #999999;}
h1 {font-size: 36px;}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
h4 {font-size: 12px;}

p {
	font-size: 12px;
	color: #999999;
	text-align: justify;
}

a:link {
	color: #999999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
	color: #e5e5e5;
}
a:active {
	text-decoration: none;
	color: #666666;
}

 A.menufarbe { color : #c8b398;}
 A.menufarbe:link { color : #c8b398; }
 A.menufarbe:visited { color : #c8b398; }
 A.menufarbe:hover { color : #928574; }


/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; border:0 }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { }
.rbroundbox { width: 100%; }

Viel Spass
zulujaner