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

Navigation Dynamischer Machen

Status
Für weitere Antworten geschlossen.

the | gamer

Neues Mitglied
Hi Ich hab jetzt Mal ne HP angefangen. Und hab ne Vertikale navigation mit lauter links.[href]

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Website-AK - Gregor Vollmer, Dominik Pschenitschni - http://celement.de" />
<meta name="description" content="Die beste Pizzeria in Schorndorf und Umgebung" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="base.css" />

<title>Charles Dickiens</title>
<style>
     { background-image:url(http://www.sherland.ie/admin/uploaded_images/1196239133032004900high_res_119623889003710700022Dickens.JPG);
    }
     </style>
</head>
<body>
    <div id="wrapper">
    <hr color="#888888">
    <ul id="nav_main">
        <li><a href="Charles Dickens.html" title="">Startseite</a></li>
        <li><a href="Kontakt.html" title="">Kontakt</a></li>
        <li><a href="Info.html" title="">Informationen</a></li>
        <li><a href="AGB.html" title="">AGB</a></li>
        <li><a href="LebensdatenLebenslauf.html" title="">Lebensdaten/Lebenslauf</a></li>
        <li><a href="links.html" title="">Links</a></li>
        <li><a href="#" title=""></a></li>
    </ul>
        <div id="main">
        <h1>Herzlich Willkommen auf der Website von Charkes Dickens</h1>
        <hr color="#888888">
        <p>Hier werden sie über Lebensdaten usw von Charles Dickens informiert.</p>
    </div>
</body>
Code:
/*CSS-Dokument von der Oliver Twist*/
/***************************************/

/*Der Stern ist der Universalselektor.
mit ihm markiert man ALLE Elemente.*/
/* { 
    margin:0;
    padding:0;
}*/

body {
    background-image:url(http://tygrdownloads.googlepages.com/WhiteTiger1280x1024.jpg);
}
div#wrapper {
    margin:0 auto;
    padding:20px;
    width:600px;
    border:1px solid #000;
    background:#eee;
}
ul#nav_main {
    overflow:auto;
    list-style:none;/*keine Aufzaehlungszeichen*/
}

ul#nav_main li {
    float:left; /*elemente werden links voneinander angeordnet*/
}
ul#nav_main li a {
    float:left; /*elemente werden links voneinander angeordnet*/
    display:block; /*"a"-Elemente werden als Block-Element markiert.*/
    line-height:20px;
    background:#DDDDDD;
}
ul#jay_main {
    list-style:none;
}

ul#jay_main li {

}
ul#jay_main li a {
    line-height:15px;
}
wollte nur mal fragen wie man die navigation Dynamischer machen könnte bin nähmlich Anfänger :?::?:
 
wollte nur mal fragen wie man die navigation Dynamischer machen könnte bin nähmlich Anfänger :?::?:


definiere dynamisch ^^

du könntest für die buttons einen hover-effekt einfügen in form von a:hover oder du könntest mit z.B. JavaScript das Menu auch per mouseover oder onclick verändern. Allerdings ist JavaScript abschaltbar.

Was stellst du dir unter dynamischer vor?
 
Jetzt muss ich mal was loswerden.
Wohingegen man bei den meisten anderen Anfragen zum Thema Website Tabellenlayouts und div-Suppe sieht, ist Dein Code ein vorbildliches Beispiel dafür, dass es auch anders geht. HTML&CSS, sprechende Semantik, gute Namensvergabe für IDs/Klassen, fast 100%ige[1] Trennung von Inhalt und Layout.
So muss der Code einer modernen Website aussehen!

Gruß,
-Efchen

[1] Zwei Sachen würde ich ändern:
1. Keine HTML-Attribute, die das Design beschreiben (hier: <hr color>)
2. Alle CSS-Angaben in das externe Stylesheet, kein <style> im HTML-Code (hier ist sogar noch ein Fehler, es wird eine EIgenschaft angegeben, aber es fehlt das Element, für den die Formatierung gelten soll).
 
<h1>Herzlich Willkommen auf der Website von Charkes Dickens</h1>
Ich finde Charkes Dickens sollte einen Medienpreis bekommen.
Obwohl er schon am 9. Juni 1870 von uns gehen mußte, hat er uns eine semantisch korrekte Internetpräsentation hinterlassen. Leider war noch kein erreichbarer Server verfügbar.

Css-Selektoren waren zu seinen Lebzeiten auch noch nicht so verbreitet.
An dieser Stelle halte ich es für angebracht sein Antlitz noch einmal (Elementenunabhängig) zu präsentieren:
http://www.sherland.ie/admin/uploaded_images/1196239133032004900high_res_119623889003710700022Dickens.JPG

Hochachtungsvoll
neuroleptika
 
Zuletzt bearbeitet:
definiere dynamisch ^^

du könntest für die buttons einen hover-effekt einfügen in form von a:hover oder du könntest mit z.B. JavaScript das Menu auch per mouseover oder onclick verändern. Allerdings ist JavaScript abschaltbar.

Was stellst du dir unter dynamischer vor?

ja sch on so mit buttons weil wie des grad sussieht ist *würg*
 
Jetzt muss ich mal was loswerden.
Wohingegen man bei den meisten anderen Anfragen zum Thema Website Tabellenlayouts und div-Suppe sieht, ist Dein Code ein vorbildliches Beispiel dafür, dass es auch anders geht. HTML&CSS, sprechende Semantik, gute Namensvergabe für IDs/Klassen, fast 100%ige[1] Trennung von Inhalt und Layout.
So muss der Code einer modernen Website aussehen!

Gruß,
-Efchen

[1] Zwei Sachen würde ich ändern:
1. Keine HTML-Attribute, die das Design beschreiben (hier: <hr color>)
2. Alle CSS-Angaben in das externe Stylesheet, kein <style> im HTML-Code (hier ist sogar noch ein Fehler, es wird eine EIgenschaft angegeben, aber es fehlt das Element, für den die Formatierung gelten soll).

da hasch recht des war so ne schnell Lösing werd ich ändern thx ;)
 
Hi Gamer :-),

guter semantischer Code.
Irgendwoher kenne ich den...

Ein paar Stellen sind aber noch nicht ganz lupenrein:

Code:
<style>
     { background-image:url(http://www.sherland.ie/admin/uploaded_images/1196239133032004900high_res_119623889003710700022Dickens.JPG);
    }
     </style>
Dabei deklarierst du keinen Selektor, für den das Hintergrundbild gelten soll.
Und wie schon gesagt, besser CSS in die CSS-Datei -> Trennung Inhalt/Layout.

Code:
<hr color="#888888">
Beide <hr>-Elemente sind eher unnötig.
Mit CSS kann man ja schließlich borders machen.
Bei XHTML 1.0 Strict gibt es nur noch ganz wenige Fälle, in denen du ein <hr> brauchst. Naja eigentlich bei XHTML ja <hr />.
Bei mir ist dieser Fall eigentlich noch nie aufgetreten.

Code:
ul#jay_main
verstehe ich nicht ganz, wozu du das im CSS-Dokument deklarierst.
Im XHTML-Dokument wird es ja nirgends verwendet.

Naja aber echt toll, dass du hier das ganze probierst.

Du solltest aber das nächste mal aufpassen, dass du nicht aus versehen Namen im Meta-Element erwähnst... ;-)
Am besten ich nehme die Meta-Elemente beim nächsten mal heraus.

Das mit dem Navigationsmenü machen wir morgen.
Wir verwenden dabei KEIN JavaScript, sondern die oben angesprochene Technik mit CSS durch a:hover. Was das genau ist wirst du noch erfahren.

Gruß
Dome
PS: Das Internet ist klein ;-)
 
guter semantischer Code.
Irgendwoher kenne ich den...
Guter Kommentar.
Irgendwoher kenne ich den...

Und wie schon gesagt
Du sagst es :-)

Code:
<hr color="#888888">
Beide <hr>-Elemente sind eher unnötig.
Mit CSS kann man ja schließlich borders machen.
Nana! Das ist aber ein himmelweiter Unterschied! Trennung von Inhalt und Layout => Trennung von HTML und CSS, auch im Kopf!
Was ich damit sagen will? HTML ist für die logische Struktur da, <hr> legt also einen logischen Bruch fest, eine Trennlinie, die den einen vom anderen Inhalt trennt. Mit <hr> zeichnet man eine logische Trennung aus.
Ein border in CSS ist nur Zierde, nur Optik, wie eben alles in CSS. Ein border bedeutet keine logische Trennung, sondern nur eine optische. Das wird von Clients, die den HTML-Code interpretieren, nicht interpretiert.

Bei XHTML 1.0 Strict gibt es nur noch ganz wenige Fälle, in denen du ein <hr> brauchst. Naja eigentlich bei XHTML ja <hr />.
Bei mir ist dieser Fall eigentlich noch nie aufgetreten.
Das hat natürlich nichts mit XHTML oder HTML oder welcher Version auch immer zu tun. Auch in HTML1 (wenn es den Trenner da schon gab) hat er die Bedeutung gehabt, die er heute hat. Es kann sehr viele Fälle geben, in denen <hr> nötig wäre, aber das liegt im Ermessen des Webmasters und seines Inhalts.
Wenn bei Dir der Fall noch nie aufgetreten ist, dann hast Du Linien immer nur zur Zierde angebracht und wolltest damit nie eine logische Trennung im Inhalt erreichen. Oder Du hast was grundlegendes falsch gemacht.
 
Guter Kommentar.
Irgendwoher kenne ich den...
Klarstellung: Der Code stammt von mir, bzw der Website-AK an unserer Schule.
Wir bringen Schüler unserer Mittelstufe Webentwicklung bei.
Dieses Thema stammt von einem dieser.

Nana! Das ist aber ein himmelweiter Unterschied! Trennung von Inhalt und Layout => Trennung von HTML und CSS, auch im Kopf!
Was ich damit sagen will? HTML ist für die logische Struktur da, <hr> legt also einen logischen Bruch fest, eine Trennlinie, die den einen vom anderen Inhalt trennt. Mit <hr> zeichnet man eine logische Trennung aus.
Ein border in CSS ist nur Zierde, nur Optik, wie eben alles in CSS. Ein border bedeutet keine logische Trennung, sondern nur eine optische. Das wird von Clients, die den HTML-Code interpretieren, nicht interpretiert.

Trennung von Inhalt und Gestaltung ist mir bekannt. Danke trotzdem für die genauere Ausführung.
Das mit dem logischen Bruch ist genauso logisch, nur:
nach <div id="wrapper"> und der <h1> sehe ich leider keinen logischen Bruch ;-)

Das hat natürlich nichts mit XHTML oder HTML oder welcher Version auch immer zu tun. Auch in HTML1 (wenn es den Trenner da schon gab) hat er die Bedeutung gehabt, die er heute hat. Es kann sehr viele Fälle geben, in denen <hr> nötig wäre, aber das liegt im Ermessen des Webmasters und seines Inhalts.
Wenn bei Dir der Fall noch nie aufgetreten ist, dann hast Du Linien immer nur zur Zierde angebracht und wolltest damit nie eine logische Trennung im Inhalt erreichen. Oder Du hast was grundlegendes falsch gemacht.

Das mit XHTML war vielleicht schlecht ausgedrückt. Besser gepasst hätte vielleicht "das moderne Web".
Ich sagte nicht, dass <hr>-Elemente komplett unnötig sind. Die Gefahr falscher Benutzung ist hoch.
Für logische Brüche benutze ich lieber eine neue Unterseite. Wozu haben wir im Web denn (fast) unendlich Platz.
Von viel Scrollen halte ich nichts. Daher ist <hr> bei mir selten zu finden.
Das ist meine Meinung dazu :-)

Beim obigen Code kann ich folglich keine "logische" Funktion der <hr>-Elemente erkennen.
 
Trennung von Inhalt und Gestaltung ist mir bekannt. Danke trotzdem für die genauere Ausführung.
Das mit dem logischen Bruch ist genauso logisch, nur:
nach <div id="wrapper"> und der <h1> sehe ich leider keinen logischen Bruch
Das mag sein, danach habe ich nicht geschaut. Ich habe nur ausgeführt, dass man nicht einen <hr> einfach durch ein CSS-border ersetzen kann, dass das zwei verschiedene Dinge mit zwei unterschiedlichen Bedeutungen sind.
Wenn Du das verinnerlicht hast, ist das gut - was aus Deinem Kommentar natürlich nicht hervor ging - aber das ist einer der Punkte, mit dem sich viele Auf-CSS-Umsteiger sehr schwer tun.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben