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

Fragen zum Code

C

chrischie

Neues Mitglied
Hallo
ich bin gerade dabei eine Homepage zu basteln. Ich habe jetzt nicht die "mega kenntnisse" aber es dürft eigentlich reichen. Zu meiner Frage ich habe dort ein Horizontales Menu angelegt wo wenn man auf die Bilder klickt man auf die nächste seite kommt. Es funktioniert auch aber w3.org sagt mir das da fehler sind (wo ich abe rnicht durchsteige). Jetzt wollte ich fragen ob ihr mir vielleicht behilflich sein könnt? Hier wäre einmal der Link: guranta.gu.funpic.de
und hier der 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" xml:lang="de" lang="de">

<head>

<title>Hp der Band Schwerpunkt</title>


</head>

<body style="background-color:#C0C0C0;">

<img src="header.jpg" alt="Header der HP" width="1280" height="250" style="position:absolute;bottom:585px;left:0px;"
<img src="bg.jpg" alt="hintergrund fürs Menü" width="1280" height="50" Style="position:absolute;bottom:534px;left:0px;"
<img src="vll.jpg" alt="ergänzung" width="1280" height="10" style="position:absolute;bottom:554px;left:0px;"

<a href="termine.html"><img src="termine.jpg" alt="Button für Termine" width="85" height="28" Style="position:absolute;bottom:543px;left:342px;"</a>

<a href="news.html"><img src="news.jpg" alt="Button für News" width="85" height="28" Style="position:absolute;bottom:543px;left:427px;"</a>

<a href="band.html"> <img src="band.jpg" alt="Button für Band" width="85" height="28" Style="position:absolute;bottom:543px;left:512px;"</a>

<a href="index.html"><img src="start.jpg" alt="Button für Startseite" width="85" height="28" Style="position:absolute;bottom:543px;left:597px;"</a>

<a href="hor.html"><img src="hoer.jpg" alt="Button für die Hörprobe" width="85" height="28" Style="position:absolute;bottom:543px;left:682px;"></a>

<a href="ent.html"><img src="ent.jpg" alt="Button für die Entstehungsseite" width="85" height="28" Style="position:absolute;bottom:543px;left:767px;"></a>

<a href="impressum.html"><img src="impressum.jpg " alt="Button für das Impressum" width="85" height="28" Style="position:absolute;bottom:543px;left:852px;"></a>


</body>
</html>


Das dort css mit im Body ist ist mir bewusst. Ich wusste bloß erstens nicht wie ich das in einer css datei verarbeiten sollte und 2. hatte ich gelesen das man es auch so machen darf/kann.

Über Hilfe würde ich mir sehr freuen und wenn ich dabei noch was lerne ist das noch viel besser.

Edit: habe grad festgestellt das die HP im Internet explorer anders aussieht also 2 Bilder werden nicht angezeigt (vll.jp und bg.jpg) und das der Button "termine" kein hyperlink ist was er eigentlich sein sollte.
vorher hatte ich einen anderen code der so aussah

<a>
<img href="band.html" src="band.jpg" alt="Button für Band" width="85" height="28" Style="position:absolute;bottom:543px;left:512px;">
</a>

Wenn ich das so mache und den Rest lasse ist "termine" wieder ein Hyperlink aber "band" nicht mehr.

MfG

Chrischie
 
Zuletzt bearbeitet:
chrischie schrieb:
Hallo
Ich habe jetzt nicht die "mega kenntnisse" aber es dürft eigentlich reichen
Zum Vergrößern anklicken....
:shock:

chrischie schrieb:
<!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" xml:lang="de" lang="de">

<head>

<title>Hp der Band Schwerpunkt</title>


</head>

<body style="background-color:#C0C0C0;">

<img style="position:absolute;bottom:585px;left:0px" src="header.jpg" alt="Header der HP" width="1280" height="250" />
<img Style="position:absolute;bottom:534px;left:0px" src="bg.jpg" alt="hintergrund fürs Menü" width="1280" height="50" />
<img style="position:absolute;bottom:554px;left:0px" src="vll.jpg" alt="ergänzung" width="1280" height="10" />
...
<a href="termine.html"><img Style="position:absolute;bottom:543px;left:342px" src="termine.jpg" alt="Button für Termine" width="85" height="28" /></a>

(to be continued !)

</body>
</html>
Zum Vergrößern anklicken....
Die meisten Fehler sind also nicht geschlossene (img-)tags und die verkorkste Einbindung des css-Style. Der Validator hat die Fehler ausgegeben, Du hättest es nur durchlesen brauchen.
Bei InStyle-css brauchst Du das ";" nach dem letzten Attribut nicht angeben, nur bei einem externen Stylesheet. Welches sich hier zweifelsfrei anbieten würde.

Hier etwas Grundlagen-Forschung für Dich: Google-Ergebnis zu "css externes stylesheet"

Bei einem tag in einer Seite lege ich die css-Definition auch nicht unbedingt in ein Stylesheet, aber bei mehreren (die sich möglichweise in anderen Seiten wiederholen) auf jeden Fall.

Noch eins: Du hast keine Größe der Grafikdatei angegeben (Breite/Höhe), also lädt sich der Browser ´nen Wolf:
selfhtml.org schrieb:
Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie stets die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.
Zum Vergrößern anklicken....
Nachzulesen auf selfhtml.org/Grafiken einbinden


Grüsse
low
 
chrischie schrieb:
Edit: habe grad festgestellt das die HP im Internet explorer anders aussieht also 2 Bilder werden nicht angezeigt (vll.jp und bg.jpg) und das der Button "termine" kein hyperlink ist was er eigentlich sein sollte.
vorher hatte ich einen anderen code der so aussah

<a> (und weiter ?)
<img href="band.html" src="band.jpg" alt="Button für Band" width="85" height="28" Style="position:absolute;bottom:543px;left:512px;"/>
</a>

Wenn ich das so mache und den Rest lasse ist "termine" wieder ein Hyperlink aber "band" nicht mehr.
Zum Vergrößern anklicken....
Wow (ich erinnere nur mal an den zweiten Satz Deines ersten Postings)...
Jeder Browser reagiert anders auf fehlerhaften Code, aber dass bei diesem Beispiel überhaupt etwas angezeigt wird, zeigt doch, wie fehlertolerant einige Browser offensichtlich programmiert wurden.

Ich möchte wirklich nicht arrogant erscheinen, aber lege Dir bitte ein paar Grundkenntnisse zu. Deine Fehler sind haarsträubend. Hier noch ein paar Infos zum a-tag.
 
Hallo
Danke erst einmal für die schnellen antowrten.
Ich hab meine Datein nun einwenig verändert.
Allerdings werde ich aus 1-2 sachen immer noch nicht schlau.
Als Beispiel von selfhtml:
<p><img src="tanzmaus.png" alt="Tanzmaus"></p>

wenn ich das bei mir mache:

<div id="headerbox"><p><img src="header.jpg" alt="Header der HP" width="1280" height="250"></p></div>

So hätte ich das Bild ja genauso eingebunden wie bei Selfhtml.
Allerdings bekomme ich einen fehler auf den endtag "div" den soll ich
nach w3.org so schließen <div/> was für mich falsch ist. Wenn ich das nun so ändere bekomme
ich erstens nichts angezeigt (also bilder Technisch) und noch mehr fehler
auf W3.org.

und dieses heir wie ich es vorher hatte:

<a>
<img href="band.html" src="band.jpg" alt="Button für Band" width="85"
height="28" Style="position:absolute;bottom:543px;left:512px;" >
</a>

habe ich einem Tutorial entnommen wie er es eingebunden hatte
was ich mir durchgelesen habe. Ich kann ja gerne nochmal gucken
ob ich es finde.

Ja gut ich werde jetzt nochma die Quelltexte für die seite und
die css datei anhängen. Weil ich nicht mehr durchsteige was W3 überhaupt von
mir will weil es mir etwas sagt und wenn ich das mache ist es doch
wieder falsch.
nochmal als original von w3.org

Line 17, Column 103:
end tag for "img" omitted, but OMITTAG NO was
specified

…="bg.jpg" alt="hintergrund f&uuml;rs Men&uuml;" width="1280" height="50"></div>
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".





falsch soll hier das letzte ">" sein beim </div>


so hier einmal der Index

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" xml:lang="de" lang="de">

<head>

  <title>Hp der Band Schwerpunkt</title>

   <link rel="stylesheet" href="style.css" type="text/css" />


</head>

<body style="background-color:#C0C0C0;">

   <div id="headerbox"><img src="header.jpg" alt="Header der HP" width="1280" height="250"></div>
   <div id="bg"><img src="bg.jpg" alt="hintergrund fürs Menü" width="1280" height="50"></div>
   <div id="vll"><img src="vll.jpg" alt="ergänzung" width="1280" height="10"></div>

   <div id="termine"><a href="termine.html"><img src="termine.jpg" alt="Button für Termine" width="85" height="28"></a></div>

   <div id="news"><a href="news.html"><img src="news.jpg" alt="Button für News" width="85" height="28"></a></div>

   <div id="band"><a href="band.html"><img src="band.jpg" alt="Button für Band" width="85" height="28"></a></div>

   <div id="index"><a href="index.html"><img src="start.jpg" alt="Button für Startseite" width="85" height="28"></a></div>

   <div id="hor"><a href="hor.html"><img src="hoer.jpg" alt="Button für die Hörprobe" width="85" height="28"></a></div>

   <div id="ent"><a href="ent.html"><img src="ent.jpg" alt="Button für die Entstehungsseite" width="85" height="28"></a></div>

   <div id="impressum"><a href="impressum.html"><img src="impressum.jpg " alt="Button für das Impressum"  width="85" height="28"></a></div>


</body>
</html>


und hier einmal die css datei dazu:
Code: 
#headerbox{
position:absolute;
bottom:580px;
left:0px
}

#bg {
position:absolute;
bottom:529px;
left:0px;
}

#vll {
position:absolute;
bottom:549px;
left:0px;
}

#termine {
position:absolute;
bottom:539px;
left:342px;
}

#news {
position:absolute;
bottom:539px;
left:427px;
}

#band {
position:absolute;
bottom:539px;
left:512px;
}

#index {
position:absolute;
bottom:539px;
left:597px;
}

#hor {
position:absolute;
bottom:539px;
left:682px;
}

#ent {
position:absolute;
bottom:539px;
left:767px;
}

#impressum {
position:absolute;
bottom:539px;
left:852px;
}


So funktioniert alles wenigstens auch im ie auch wenn dort der Header einwenig zu weit oben ist.


MfG


Chrischie
 
warum positioniert du das alles absolut? und was soll bottom und left sein, ohne margin oder padding angabe?

und von da wo diesen tag hast

<a>
<img href="band.html" src="band.jpg" alt="Button für Band" width="85"
height="28" Style="position:absolute;bottom:543px;left:512px;" >
</a>

die Seite solltest du besser nicht mehr besuchen

<a href="index.html" title="blabla">
<img id="bild" src="bildpfad" alt="titel" /></a>

so geht ein link
und alles andere was bei dir noch mehr steht kommt in css rein

und strict kennt deine befehle wie bodycolor ect nicht, ändere mal auf traditionell dann hast du schon viele fehler behoben. Gruss
 
Zuletzt bearbeitet:
Hallo.

HTML: 
<div id="headerbox"><p><img src="header.jpg" alt="Header  der HP" width="1280" height="250"></p></div>
Umändern zu:
HTML: 
<div id="headerbox"><p><img src="header.jpg" alt="Header der HP" width="1280" height="250" /></p></div>
Fehler lesen und verstehen lernen. Unterschiede zwischen HTML und XHTML lernen.

Oder auch div weglassen und <p> die ID geben, kommt aufs gleiche raus aber du hast ein div gespart.

Gruss
Elroy
 
Hallo
hab grad selber meine fehler entdeckt gehabt. Aber ihr hattet sie ja hier auch nochma aufgelistet dafür danke ich euch schonmal.

meine seite sieht jetzt so aus. (das mit dem <p> werd ich mir gleich nochmal angucken.)

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" xml:lang="de" lang="de">

<head>

  <meta http-equiv="Content-Type"  content="text/html;charset=utf-8" />
   
  <title>Hp der Band Schwerpunkt</title>

  <link rel="stylesheet" href="style.css" type="text/css" />


</head>

<body style="background-color:#C0C0C0;">

   <div id="headerbox"><img src="header.jpg" alt="Header der HP" width="1280" height="250" /></div>
   <div id="bg"><img src="bg.jpg" alt="hintergrund fürs Menü" width="1280" height="50" /></div>
   <div id="vll"><img src="vll.jpg" alt="ergänzung" width="1280" height="10" /></div>

   <div id="termine"><a href="termine.html"><img src="termine.jpg" alt="Button für Termine" width="85" height="28" /></a></div>

   <div id="news"><a href="news.html"><img src="news.jpg" alt="Button für News" width="85" height="28" /></a></div>

   <div id="band"><a href="band.html"><img src="band.jpg" alt="Button für Band" width="85" height="28" /></a></div>

   <div id="index"><a href="index.html"><img src="start.jpg" alt="Button für Startseite" width="85" height="28" /></a></div>

   <div id="hor"><a href="hor.html"><img src="hoer.jpg" alt="Button für die Hörprobe" width="85" height="28" /></a></div>

   <div id="ent"><a href="ent.html"><img src="ent.jpg" alt="Button für die Entstehungsseite" width="85" height="28" /></a></div>

   <div id="impressum"><a href="impressum.html"><img src="impressum.jpg " alt="Button für das Impressum"  width="85" height="28" /></a></div>


</body>
</html>
Edit: das mit dem padding bzw. margin muss ich mir nocma angucken.

Den css code habe ich nochmal von "bottom" auf "top" geändert und nun sieht die Seite jetzt im Internet Explorer im Firefox und in Opera gleich aus.
gibt es trotzdem nochwas wie ich die Seite optimieren könnte ? Und ist dieses margin und padding unbedingt notwendig Oder wäre das einfach nur eine andere Lösung ?

MfG

Chrischie
 
Zuletzt bearbeitet:
patrick1988 schrieb:
warum positioniert du das alles absolut? und was soll bottom und left sein, ohne margin oder padding angabe?
Zum Vergrößern anklicken....
Das sind die Angaben für die absolute Positionierung und in diesem Zusammenhang absolut korrekt.
Das die absolute Positionierung nicht nötig ist, ist natürlich ein anderes Thema.

und strict kennt deine befehle wie bodycolor ect nicht, ändere mal auf traditionell dann hast du schon viele fehler behoben. Gruss
Zum Vergrößern anklicken....
Befehle kennt auch transitional nicht, da es in HTML keine Befehle gibt. Das wechseln von Strict zu Transitional behebt auch keine Fehler, sie werden nur nicht mehr angezeigt. Sinnvoll wäre es, bei Strict zu bleiben und die Fehler wirklich zu beheben.

Zum eigentlichen Problem:
Dir fehlen die wichtigsten Grundlagen, sonst wüsstest du, dass Konstrukte wie
HTML: 
<div><p>...</p></div>
völliger quatsch sind. Ein div gruppiert mehrere Elemente, das sind mindestens 2, ein einzelnes <p> braucht also nicht gruppiert zu werden, geht ja auch garnicht. Dies gilt auch für alle anderen Tags.

Die meisten Fehler kommen von nicht geschlossenen Tags. Jedes Tag das geöffnet wird, muss auch wieder geschlossen werden. Dafür gibt es 2 Möglichkeiten. Für inhaltslose Tags wie <img> geschieht dies durch einen Slash am Ende des Tags.
HTML: 
<img src="" alt="" title="" />
Für Tags mit Inhalt wie <ul>, <p>, <table> usw gibt es ein öffnendes Tag und ein schließendes
HTML: 
<p>Text des Absatzes</p>

Die absolute Positionierung scheint am Anfang ein tolles Mittel zu sein, um die Elemente zu positionieren, dies ist leider falsch. Der Browser kann dies viel besser in Verbindung mit float, clear, margin und padding. So bleibt deine Seite flexibel.

Die nötigen Grundlagen findest du auf folgender Seite (Einführung | Webdesign mit XHTML und CSS). Lies es dir aufmerksam von Anfang bis Ende durch, dann beantworten sich viele deiner Fragen von selbst.
 
Hallo.

Ich hab grad nochmal deinen Code angeschaut.
Du gehst den falschen Weg.

Schmeiss die divs weg. Zeichne dein Menü als Liste aus und informieredich darüber wie man ein horizontales Menü erstellt.
Das was du machst mag auf deinem PC funktionieren, aber spätestens wenn jemand mit einem anderen Viewpoint deine Seite besucht gehts in die Hose.

Fange besser jetzt nochmal an, wenn du noch nicht zuviel gemacht hast.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben