[GastForen Web allgemein HTML und CSS / Stylesheets Navigation mit CSS

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Navigation mit CSS

perplex
Beiträge gesamt: 125

14. Nov 2006, 18:37
Beitrag # 1 von 19
Bewertung:
(11308 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

ich komm da nicht weiter. Ich habe hier:

http://www.wandart.org/test/seiten/test.html

eine Testseite erstellt. Nun komme ich aber mit der Navigation nicht weiter, respektive
weiss ich gar nicht recht, ob man das so machen kann wie ich's mir vorgestellt habe.
So sollte die Navigation ausssehen:

http://www.wandart.org/test/seiten/Bild.pdf

wie muss ich mein CSS anpassen, damit ich
1. die weissen Linien zwischen den Menüpunkten erhalte?
2. die Menütexte im DIV unten und nicht oben angeschlagen stehen?
3. wie kann ich den schwarzen Balken machen, auf dem die Menütexte stehen?
(wollte das mit einer HG-Grafik im DIV machen, aber das funktioniert irgendwie nicht)

Meine CSS-Datei liegt hier: http://www.wandart.org/...matvorlagen/test.css

Besten Dank für Eure Hilfe.

Andreas
X

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

14. Nov 2006, 19:31
Beitrag # 2 von 19
Beitrag ID: #261859
Bewertung:
(11303 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Andreas,

1. die weissen Linien zwischen den Menüpunkten erhalte?
border:2px #fff solid

2. die Menütexte im DIV unten und nicht oben angeschlagen stehen?
padding-top:30px

3. wie kann ich den schwarzen Balken machen, auf dem die Menütexte stehen?
mit einem Hintergrundbild

Falls Du nicht zurecht kommst, dann schau Dir die Beispiele hier an:
http://www.dynamicdrive.com/...library/category/C1/

Zum Anpassen sind sie auf jeden Fall gut geeignet.

Gruß Sabine


als Antwort auf: [#261852]

Navigation mit CSS

perplex
Beiträge gesamt: 125

14. Nov 2006, 23:27
Beitrag # 3 von 19
Beitrag ID: #261885
Bewertung:
(11285 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Punkt 1 und 2 sind klar, hatte ich auch so ausprobiert hat aber beim ersten Mal nicht geklappt, vielleicht machte ich einen Schreibfehler - auf jedenfall funktioniert es jetzt.

Punkt 3 klappt nicht. Ich hatte versucht, den schwarzen Balken im "div#navi_haupt" mittels Hintergrundbild oder "display: inline" zu generieren, aber dann wird die "div#navi_haupt" vollflächig schwarz. Und mit margin oder padding kam ich auch nicht zum gewünschten Resultat.

Würdest Du diese Navigation mittels Listen lösen? Anhand der Beispiele von

http://www.dynamicdrive.com/...library/category/C1/

ist mir aber auch nicht klar, wie ich zu meinem schwarzen Balken und Rollover kommen würde.


als Antwort auf: [#261859]

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

14. Nov 2006, 23:51
Beitrag # 4 von 19
Beitrag ID: #261886
Bewertung:
(11281 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> ist mir aber auch nicht klar, wie ich zu meinem schwarzen Balken und Rollover kommen würde.

Genau dafür kann man das Hintergrundbild verwenden.

Kuck mal hier, gleich das erste Beispiel:
http://www.dynamicdrive.com/.../thick-padding-tabs/

Ein Hintergrundbild mit schwarzen Balken hinein, padding-top festlegen für den oberen Innenabstand, fertig.


als Antwort auf: [#261885]

Navigation mit CSS

perplex
Beiträge gesamt: 125

17. Nov 2006, 05:08
Beitrag # 5 von 19
Beitrag ID: #262295
Bewertung:
(11240 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

danke, das hat nun alles super geklappt.
Dafür häng ich schon wieder seit Stunden fest mit diversen Problemen.

Die aktuelle Seite findet Ihr hier:
http://www.perplexstudio.ch/obsidian

und CSS hier:
http://www.perplexstudio.ch/...orlagen/obsidian.css


1. Hauptnavigation: die Rollovers funktionieren, aber der active-Status dafür nicht. Kann ich den nicht auf diese Art definieren wie in meinem CSS unter "Navigation"?

2. Unternavigation: die Rollovers funzen nur teilweise - keine Ahnung wieso - active-Status geht auch flöten - keine Ahnung :-(

3. Die Seiten "Objektdaten" und "Miete" verhaut es im Explorer 6 aber grad richtig. Warum? Scheint wohl ein Margin-Fehler des IE zu sein. Was kann ich tun? Im FF, Opera und Safari kein Problem.

4. Beim Validieren meines CSS erscheint eine Fehlermeldung -> Zeile: 298 Kontext: .clearfix
kann ich mein 2spaltiges Layout auf andere Weise generieren, ohne diese Fehlermeldung und damit es doch noch in allen gängigen Browsern läuft? Und was sollen all die Warnungen von Vorder- und Hintergrundfarben?

5. kann mir jemand sagen, wie die Seite im IE 5 aussieht? Verhaut es da auch was? Hab leider nur IE 6 hier.

6. hab in einem vorigen Post noch gelesen, dass meine eine bestehende Seite nicht einfach von HTML 4.01 in XHTML umwandeln kann. Ist das wirklich so? Wenn ich meine Seiten in BBEdit umwandle, macht das kein Problem - auf den ersten Blick jedenfalls. Und die Seite lässt sich dann auch problemlos validieren.

7. und zu guter letzt: das wird wohl, so hoffe ich jedenfalls, meine erste validierte Seite. Gibt es etwas was Ihr grundsätzlich anders gelöst hättet? Ich meine rein technisch, nicht Design.

Schon mal besten Dank für Eure Hilfe.

Andreas


als Antwort auf: [#261886]

Navigation mit CSS

perplex
Beiträge gesamt: 125

17. Nov 2006, 10:34
Beitrag # 6 von 19
Beitrag ID: #262325
Bewertung:
(11221 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Habe ich Euch jetzt erschreckt ob soviel Fragerei?
Kann mir niemand helfen?

Andreas


als Antwort auf: [#262295]

Navigation mit CSS

oesi50
  
Beiträge gesamt: 2315

17. Nov 2006, 11:17
Beitrag # 7 von 19
Beitrag ID: #262345
Bewertung:
(11211 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ perplex ] Habe ich Euch jetzt erschreckt ob soviel Fragerei?


Offensichtlich hat gerade niemand unbezahlte Zeit frei, um deine Arbeiten zu erledigen!

Antwort auf [ perplex ] Kann mir niemand helfen?


Bedenke bitte, dass hier im Forum niemand Anspruch auf Antworten hat.

Aber wenn du eilige Privatberatung haben möchtest, so biete ich dir gerne welche zu einem moderaten Stundensatz an.


als Antwort auf: [#262325]

Navigation mit CSS

perplex
Beiträge gesamt: 125

17. Nov 2006, 11:44
Beitrag # 8 von 19
Beitrag ID: #262353
Bewertung:
(11198 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Oesi

offenbar scheint dem so ...
Ich wollte einfach alles zusammenfassen und nicht 20 Mal hintereinander fragen.

Danke für Dein Angebot, aber leider ist das Budget so schon knapp :-((
so dass selbst kaum noch was für mich übrig bleibt.


als Antwort auf: [#262345]

Navigation mit CSS

perplex
Beiträge gesamt: 125

17. Nov 2006, 15:25
Beitrag # 9 von 19
Beitrag ID: #262435
Bewertung:
(11175 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Könnte mir bitte jemand beim dritten Punkt helften?

3. Die Seiten "Objektdaten" und "Miete" verhaut es im Explorer 6 aber grad richtig. Warum? Scheint wohl ein Margin-Fehler des IE zu sein. Was kann ich tun? Im FF, Opera und Safari kein Problem.

Merci


als Antwort auf: [#262353]

Navigation mit CSS

FSt
  
Beiträge gesamt: 1961

17. Nov 2006, 15:49
Beitrag # 10 von 19
Beitrag ID: #262445
Bewertung:
(11168 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo perplex

<img src="../bilder/corporate-design/plan_ebene_1_gross.gif" alt="plan ebene 1" width="192" height="140" style="padding-left:40px" />

padding gibt im IE "lustige" Effekte. Schau Dir mal http://de.selfhtml.org/...mate/box_modell.htm# an ...

Tipp für die Zukunft:
Schiess ein Bildschirmfoto Deiner Seite und miss im Photoshop die Fehler pixelgenau aus. Dann weisst Du meistens schon wo Du suchen musst ...

Gruss
Martin


als Antwort auf: [#262435]
(Dieser Beitrag wurde von FSt am 17. Nov 2006, 15:50 geändert)

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

17. Nov 2006, 16:48
Beitrag # 11 von 19
Beitrag ID: #262461
Bewertung:
(11160 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Perplex,

Zu 1. und 2.

Beachte die Reihenfolge in der CSS-Datei:

A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { color: yellow } /* user hovers */
A:active { color: lime } /* active links */

http://www.w3.org/...namic-pseudo-classes


zu 4.

Prüfe mit dem Profil CSS Version 2.1, dann kommt kein Fehler,
denn display:inline-block gibt es erst seit CSS 2.1
http://jigsaw.w3.org/...r/validator-uri.html


zu 5.

Da schaust Du am besten hier nach:

http://browsershots.org/website/http://www.perplexstudio.ch/obsidian/seiten/miete.html


zu 6.

Eine Prüfung mit dem Validator bringt Klarheit, ob alles in Ordnung ist.

Gruß Sabine


als Antwort auf: [#262295]

Navigation mit CSS

perplex
Beiträge gesamt: 125

20. Nov 2006, 16:40
Beitrag # 12 von 19
Beitrag ID: #262798
Bewertung:
(11110 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine und Martin

danke schon mal für Eure Hilfe. Die Seiten habe ich alle mit dem Validator geprüft und sie sind nun in Ordnung.

Die Rollover funktionieren – nur mein active-Status immer noch nicht. Was geht da nicht richtig? Dasselbe Problem bei der Haupt- und Unternavigation.
Und seit neustem verhaut es mir den Footer im Internet-Explorer, habt Ihr eine Ahnung warum?

Die Seite ist neu hier: http://www.obsidian.ch

Liebe Grüsse
Andreas


als Antwort auf: [#262461]

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

20. Nov 2006, 17:16
Beitrag # 13 von 19
Beitrag ID: #262813
Bewertung:
(11106 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> nur mein active-Status immer noch nicht.

Das klappt doch ausgezeichnet.

a:hover {color: rgb(116,148,183);}
a:active { color: rgb(116,148,183);}

div#navi_haupt a:hover {background-color: rgb(68,69,69);}
div#navi_haupt a:active {background-color: rgb(68,69,69);}

Bei Mausberührung (hover) und Mausklick (active) werden identische Farben angezeigt (getestet in Firefox).


als Antwort auf: [#262798]

Navigation mit CSS

perplex
Beiträge gesamt: 125

20. Nov 2006, 18:46
Beitrag # 14 von 19
Beitrag ID: #262831
Bewertung:
(11098 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

ich möchte aber, dass active auch active bleibt, also nicht nur bei Mausclick, sondern solange die jeweilige Seite ausgewählt ist, sollte z.B. bei der Hauptnavigation die Farbe {background-color: rgb(68,69,69);} stehen bleiben, auch wenn ich mit der Maus irgendwohin fahre. Einfach damit man sieht, wo man sich gerade befindet. Muss ich das "händisch" machen?

Andreas

PS. verhaut es bei Dir in IE auch den Footer?


als Antwort auf: [#262813]

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

20. Nov 2006, 19:03
Beitrag # 15 von 19
Beitrag ID: #262832
Bewertung:
(11095 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> ich möchte aber, dass active auch active bleibt

Dann verwende dazu a:link und nicht a:active.

>> Muss ich das "händisch" machen?

Ja, für jede Seite einzeln oder automatisch mit SSI oder Perl oder PHP.

>> PS. verhaut es bei Dir in IE auch den Footer?

Habe leider nur IE4 zur Hand. Der Footer ist da nicht verhauen.


als Antwort auf: [#262831]
X

Aktuell

InDesign / Illustrator

| 23.05.2022

IDUG_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/