Navigation verschieben

Elendron · 13 April 2009

Hallo.

Ich bin gerade dabei ein wenig Html und CSS zu üben, indem ich eine kleine Homepage bastele.
Hier mal meine beiden Dokumente:

Index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" />
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="http://elendron.el.funpic.de/portfolio/css/style.css" />
</head>
<body>
        <div ID="main">
            <div ID="navi">
                <ul>
                    <li ID="home"><a href="#" ID="home"><p>Home</p></a></li>
                    <li ID="Referenzen"><a href="#" ID="Referenzen"><p>Referenzen</p></a></li>
                    <li ID="Links"><a href="#" ID="Links"><p>Links</p></a></li>
                    <li ID="Partner"><a href="#" ID="Partner"><p>Partner</p></a></li>
                    <li ID="Ressources"><a href="#" ID="Ressources"><p>Ressources</p></a></li>
        </div>
</body>
</html>

style.css:

Code:

body {
background-color: #000000;
    background-image: url("http://elendron.el.funpic.de/portfolio/portfolio.jpg");
    background-repeat: no-repeat;
    background-position: center -600px;
}

* {
    border:0px !important;
    padding: 0px;
    margin: 0px;
}

#navi {
white-space: nowrap;
margin-left: 500px;
border: 0;
}

Jetzt sind meine Fragen, wie ich meine ID´s richtig in CSS anspreche.
Ich habe es ja bereits (wie oben gezeigt) versucht, aber ich glaube ich mache noch etwas falsch.
Mich würde interessieren wann ich eine ID mit "#" anspreche (usw.)

Und noch dazu würde mich interessieren wie ich es schaffe, dass diese kleinen
Punkte vor jedem Menüpunkt verschwinden.
http://elendron.el.funpic.de/portfolio/

hokage555 · 13 April 2009

Hi elendron ;-)

das sieht ja so schon mal ganz ok aus. immerhin zeichnest du dein menu als liste aus xD

ABER: es sind da noch ein paar fehler im html.

1. <div id="navi"> ist überflüssig (löschen). setze die id einfach direkt in das <ul>.
=> also <ul id="navi">, sonst wäre es doppelt gemoppelt und du bekommst div-suppe.

2. schließe den ul-tag nach deinen menupunkten wieder. das machst du so: </ul>

3. das <p> was die linkbezeichnung umgibt ist auch überflüssig (löschen). es wird bereits mit dem tag <a> ausgezeichnet.

4. du gibst sowohl <li> als auch <a> die gleiche id. ist eig. auch doppelt gemoppelt. die id bei <a> reicht. schau mal ob es klappt, wenn du die anderen ids bei <li> löschst.

5. du hast für jeden link eine andere id genommen??? warum? ich nehme mal an deine linkpunkte sollen einheitlich formatiert werden. wenn das der fall ist alle ids bei <a> löschen.
jetzt gibst du jedem linkpunkt eine klasse (z.B. link oder menupunkt).
du schreibst: <a class="link" href="#">...</a>

diese klasse setzt du in alle <a>

in css gilt folgendes.

klassen sprichst du mit einem "." an. also z.B. ".link{}"
ids sprichst du mit einer "#" an. also z.B. "#navi{}"

ids nutzt du, wenn diese einmalig auf dieser seite vorkommt. ein menu ist meistens eine id, weil dieses fast immer nur einmal vorkommt.
sobald du 2mal die gleiche id vergibst, wird aus id class.
mit class kannst du also z.B. deine kompletten menupunkte formatieren ;-)

(ich hoffe der unterschied ist jetzt klar)

wenn du die menupunkte weg haben willst, dann schreibe in css folgende eigenschaft in #navi (#navi muss dabei im <ul>-tag stehen )

list-style-type:none;

so das wärs soweit ;-)

hinweis: noch ein hinweis für dich. HTML ist, wie du weist eine auszeichnungssprache. damit dein inhalt richtig ausgezeichnet wird musst du ihn mit entsprechenden tags umgeben. das ganze nennt man semantik. text ist z.B. <p>; überschrift ist <hx>; ...
überlege also immer was dein inhalt darstellt und gib ihm den entsprechenden tag.

das element div benutzt du nur dann, wenn du mehrere elemente gruppieren willst.

z.B.

<div id="inhalt">
...
dein menu
...
...
deine inhaltbox mit text
...
</div

mit css kannst du diese gruppierung dann positionieren, formatieren etc.

so ein halber roman, aber ich hoffe er hat dir etwas geholfen ;-) wenn es noch fragen gibt, dann frag. wir werden dir so gut es geht helfen

grüße hokage

Elendron · 16 April 2009

Boah^^
Schöner Support, vielen dank ;)

Navigation verschieben

Elendron

Neues Mitglied

hokage555

Neues Mitglied

Elendron

Neues Mitglied

Neueste Beiträge