[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:
(11502 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:
(11497 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:
(11479 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:
(11475 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:
(11434 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:
(11415 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:
(11405 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:
(11392 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:
(11369 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: 1965

17. Nov 2006, 15:49
Beitrag # 10 von 19
Beitrag ID: #262445
Bewertung:
(11362 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:
(11354 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:
(11304 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:
(11300 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:
(11292 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:
(11289 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]

Navigation mit CSS

perplex
Beiträge gesamt: 125

20. Nov 2006, 19:11
Beitrag # 16 von 19
Beitrag ID: #262835
Bewertung:
(712 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

wie geht das mit SSI?

Andreas


als Antwort auf: [#262832]

Navigation mit CSS

SabineP
Beiträge gesamt: 7586

20. Nov 2006, 19:38
Beitrag # 17 von 19
Beitrag ID: #262839
Bewertung:
(709 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Das habe ich hier schon einmal beschrieben:
http://www.hilfdirselbst.ch/...i?post=173844#173844


als Antwort auf: [#262835]

Navigation mit CSS

FSt
  
Beiträge gesamt: 1965

21. Nov 2006, 08:26
Beitrag # 18 von 19
Beitrag ID: #262883
Bewertung:
(699 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo perplex

Oder eine ganz schöne Lösung findest Du hier
http://www.hilfdirselbst.ch/..._P241629.html#241629

Tipp:
/* Absätze*/
Ersetze das ä mit ae in Deinem CSS. Umlaute können zu Problemen führen.

Problem im IE:
Ich seh, dass das Bild im leftcontainer_index einen kleinen "Schatten" von zwei Pixel unten hat. Habs mir nicht genau angeschaut. Aber ich würde auch hier auf das Box-Modell-Problem tippen. Versuchs mal mit einer Anweisung, die nur der IE versteht, in dem Du ihm andere Werte übergibst ...
http://www.hilfdirselbst.ch/..._P143284.html#143284 (Tipp 26)

Gruss
Martin


als Antwort auf: [#262839]
(Dieser Beitrag wurde von FSt am 21. Nov 2006, 08:27 geändert)

Navigation mit CSS

perplex
Beiträge gesamt: 125

21. Nov 2006, 09:46
Beitrag # 19 von 19
Beitrag ID: #262904
Bewertung:
(692 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin

danke schon mal, das mit aktiv-Status werde ich sicher noch probieren.
Die Geschichte mit dem verschobenen Footer scheint aber kein Boxmodel-Fehler
zu sein. Ich hab mein CSS angepasst und es tut sich nichts. An was könnte das sonst noch liegen? Bei einer der ersten Versionen http://www.perplexstudio.ch/neu passiert dort nichts und ich sehe eigentlich keinen unterschied :-(

Zudem hab ich grad bemerkt, dass der IE meine zweite Linkformatierung nicht frisst.
Zu sehen ebenfalls im Footer bei "Regiom Zürich AG"


als Antwort auf: [#262883]
X

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
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!