Linkleiste erstellen

[Bjoern]

Hallo

Ich bin im Moment ein regelrechter Neuling im Bereich HTML und CSS Programierung. Mit dem wenigen Wissen habe ich mir eine kleine Hompage erstellt.
Das Layout habe ich mit Gimp erstellt, gesliced und mit NVU per CSS zusammengesetzt. Nun will ich in diese karierte Leiste vorerst einige Links einsetzten und als nächsten Schritt Buttons einsetzen mit Hover-Effekt.

Leider bekomme ich dies nicht hin und frage euch nun um Rat...

 

[xXxPeterPanxXx]

was schafft du den nicht. etwas genauerwer sehr gut. oder klappt gar nichts????

dein link funzt net

 

[Bjoern]

Achso, sorry! Hier der richtige Link: ungültig

Also wie du dann sehen wirst, ist unter dem Header eine "Menüleiste", welche ich vorerst mit Links versehen will, wie sie auf dieser Seite zu sehen sind: ungültiger Link
Später will ich dann noch Buttons anstatt der Leiste hinzufügen.

 

[prm]

Eine ordentliche Listen-Navi hast du ja bereits.
Was die Buttons betrifft, hilft dir vielleicht dies weiter.

 

[Efchen]

Wie ist denn nun die Frage?
Auf jeden Fall solltest Du auch dafür sorgen, dass der karierte Hintergrund bei allen Menüpunkten hinterlegt wird, auch bei denen, die in die zweite Zeile rutschen. Und natürlich, dass die Menüleiste in ihrer Größe mitwächst, wenn man die Schrift vergrößert.

Und, warum hast Du Dein Banner als Hintergrundgrafik eingebunden? Das enthält doch Content, nämlich den Namen der Site und die Beschreibung, was es hier gibt. In einem Browser ohne Images geht dieser Content vollständig verloren. Deswegen solltest Du das Image auch per HTML einbinden, wie jeden Content. Der Text kommt dann ins alt-Attribut.

 

[Bjoern]

Wie ist denn nun die Frage?
Auf jeden Fall solltest Du auch dafür sorgen, dass der karierte Hintergrund bei allen Menüpunkten hinterlegt wird, auch bei denen, die in die zweite Zeile rutschen. Und natürlich, dass die Menüleiste in ihrer Größe mitwächst, wenn man die Schrift vergrößert.

Und, warum hast Du Dein Banner als Hintergrundgrafik eingebunden? Das enthält doch Content, nämlich den Namen der Site und die Beschreibung, was es hier gibt. In einem Browser ohne Images geht dieser Content vollständig verloren. Deswegen solltest Du das Image auch per HTML einbinden, wie jeden Content. Der Text kommt dann ins alt-Attribut.

Sorry, sei mir nicht böse, aber einige Sachen verstehe ich wegen meiner fehlenden Programmierkenntnisse noch nicht. :(

Normalerweise sollten die Menüpunkte nicht in die zweite Zeile rutschen.
Wie kann ich es machen, dass die Menüleiste mitwächst?

 

[prm]

Na ja, das ist wie mit einer Regentonne: Wenn die voll ist, läuft's Wasser über.
Da deine Seite eine fixe Breite hat, reicht diese irgendwann nicht mehr aus, wenn zu viele Links nebeneinander rein sollen.
Entweder vergrößerst du dann die Seitenbreite oder machst die Links kleiner.

Eine begrenzte weitere Möglichkeit wäre, hier den Paddingwert zu reduzieren:

#menu ul li a {
padding: 0 13px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 16px;
color: #ffff;
}

 

[Efchen]

Sorry, sei mir nicht böse, aber einige Sachen verstehe ich wegen meiner fehlenden Programmierkenntnisse noch nicht.

Nicht schlimm, weder HTML noch CSS sind Programmiersprachen, solche Kenntnisse brauchst Du also bisher noch gar nicht.

Normalerweise sollten die Menüpunkte nicht in die zweite Zeile rutschen.

Das wirst Du schwer verhindern können. Menschen haben unterschiedlich große Viewports und unterschiedlich große Schrift eingestellt.

Wie kann ich es machen, dass die Menüleiste mitwächst?

Zunächst einmal ist div#Menu überflüssig, denn Du gruppierst damit ja nicht mehrere Tags, da ist ja nur die Liste drin. Und da beides Block-Elemente sind, kannst Du mit dem ul alles machen, was Du auch mit dem div machen kannst.

Dass das Menü dann mitwächst, ist ganz einfach. Du hast ja was eingebaut, das verhindert, dass es mitwächst: Du hast dem Konstrukt eine feste Höhe gegeben. Dann wächst natürlich auch nichts mit. Außerdem hast Du explizit verhindert, dass sich das Hintergrundbild wiederholt. Das darfst Du natürlich auch nicht machen, wenn Du das Bild hinter dem gesamten Menü haben willst.

Das müsste dann schon alles gewesen sein.

 

[webmatze]

Hier findest du ein paar Tutorials, wie du z.B. ein einfaches Menü für deine Seite umsetzen könntest:

Hierarchische Menüs mit CSS erstellen

Und hier erfährst du, wie du Buttons beliebig designen kannst:

CS Button Tricks

Vielleicht hilft dir das weiter.

 

[Bjoern]

Noch einige Frage (bitte nicht böse sein):

Soll ich der Breite 100 % zuordnen?
Was soll ich anstatt von no-repeat scheiben?

Und eine etwas größere Frage: Wie binde ich dann die Bilder per HTML ein?


Sorry, ich bin erst seit 2 Wochen mit HTML und CSS dabei...

 

[xXxPeterPanxXx]

bilder einbinden:

<img src="ordner/bild" />

ich gebe die breite wenn es geht immer mit prozent an. Achtung schreibenie 100% sondern immer 100.01%. Das ist für den IE7.

wieso sollst du nicht no-reapeat schreiben? oder willst du das scih das bild wiederholt?

 

[Bjoern]

Das wurde mir so empfohlen...

Außerdem hast Du explizit verhindert, dass sich das Hintergrundbild wiederholt. Das darfst Du natürlich auch nicht machen, wenn Du das Bild hinter dem gesamten Menü haben willst.

An dieser Stelle muss ich mal sagen, dass das hier ein super Forum ist, in dem einem schnell und sehr gut geholfen wird. Vielen dank an euch. ;)

 

[xXxPeterPanxXx]

oke efachen wird wahrscheinlichbrecht haben. ich bin auch noch anfänger:grin:

 

[Bernhard]

Noch einige Frage (bitte nicht böse sein):

Soll ich der Breite 100 % zuordnen?
Was soll ich anstatt von no-repeat scheiben?

Und eine etwas größere Frage: Wie binde ich dann die Bilder per HTML ein?


Sorry, ich bin erst seit 2 Wochen mit HTML und CSS dabei...

Hallo Bjoern,

zur Breite gibt es unterschiedliche Philosophien:

• stell Dir vor, Du sitzt vor einem Riesenmonitor und hast Dein Browserfenster
  maximiert, dann werden die Zeilen nahezu unlesbar lang
• dafür gäbe es die wunderbare Eigenschaft max-width, mit der aber der IE
  überfordert ist...
• ich gebe meinen Seiten eine min-width in Pixel und zusätzlich eine width in
  em, damit sie bei Schriftvergrößerung mitwachsen

statt no-repeat kannst Du schreiben:

• repeat-y
• repeat-x
• repeat

diese Angaben sollten eigentlich selbsterklärend sein, sonst schau mal auf
http://www.css4you.de/ oder frag nochmal...

Bild einbinden:

<img src="img/bild.jpg" alt="" title="" width="xyz" height="xyz" />

Grüße
Bernhard

 

[Bjoern]

Vielen Dank für eure hilfreichen Antworten!

Nun hätte ich aber noch eine Frage: Wie kann ich erreichen, dass das Layout in der Mitte der Seite ist. Auf meinem Browser ist das Layout zentral ausgerichtet, aber auf anderen PC's mit anderen Auflösungen schiebt es sich immer an den linken Bildrand.

 

[prm]

Versuch's mal mit diesem Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Nur bei Angabe der DTD-URL kann der IE das Boxmodell richtig anzeigen und auch zentrieren.

 

[Bjoern]

Versuch's mal mit diesem Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Nur bei Angabe der DTD-URL kann der IE das Boxmodell richtig anzeigen und auch zentrieren.

Mhh...Dann erscheinen die Links als senkrechte Liste und nicht mehr waagerecht.

 

[Efchen]

auf anderen PC's mit anderen Auflösungen schiebt es sich immer an den linken Bildrand.

Den Doctype solltest Du schon übernehmen, mit dem, den Du jetzt hast, setzt Du den IE in den Quirks Mode und das sollte man tunlichst vermeiden. Darstellungsunterschiede sind vorprogrammiert!
Mit der Auflösung hat das übrigens nichts zu tun, nur mit der Größe des Viewports. Die Auflösung spielt beim Erstellen von Websites eigentlich keine Rolle.

Mhh...Dann erscheinen die Links als senkrechte Liste und nicht mehr waagerecht.

Dann hast Du noch Fehler im Code. Sollte aber eigentlich auch nicht passieren.

Man wählt übrigens nicht den Doctype, der am wenigsten Fehler erzeugt, sondern den, den man will und muss dann eben die Fehler korrigieren. Der, den Du jetzt hast, ist keine gute Wahl (s.o.), deswegen solltest Du den nehmen, den prm empfohlen hat. Du solltest das nicht unterlassen, nur weil es damit noch Probleme gibt. Das zeigt Dir nur, dass Du irgendwo unsauber gearbeitet hast. Den Fehler musst Du halt finden.

Die zweireihige Menüzeile ist auch noch nicht realisiert?

 

[Bjoern]

Den Doctype solltest Du schon übernehmen, mit dem, den Du jetzt hast, setzt Du den IE in den Quirks Mode und das sollte man tunlichst vermeiden. Darstellungsunterschiede sind vorprogrammiert!
Mit der Auflösung hat das übrigens nichts zu tun, nur mit der Größe des Viewports. Die Auflösung spielt beim Erstellen von Websites eigentlich keine Rolle.


Dann hast Du noch Fehler im Code. Sollte aber eigentlich auch nicht passieren.

Man wählt übrigens nicht den Doctype, der am wenigsten Fehler erzeugt, sondern den, den man will und muss dann eben die Fehler korrigieren. Der, den Du jetzt hast, ist keine gute Wahl (s.o.), deswegen solltest Du den nehmen, den prm empfohlen hat. Du solltest das nicht unterlassen, nur weil es damit noch Probleme gibt. Das zeigt Dir nur, dass Du irgendwo unsauber gearbeitet hast. Den Fehler musst Du halt finden.

Die zweireihige Menüzeile ist auch noch nicht realisiert?

Nur mein Problem ist es dann den Fehler zu finden...

Ich denke ich mache keine zweizeilige Menüleiste, sondern mache einfach die Schrift kleiner.

 

[xXxPeterPanxXx]

ich würde es doch versucehn mit einem zweizeiligen menü sonst haben menschen mit seh problemen probleme. wenn sie die schrift dann vergrößern ist das nur noch ein großes durch einander.