|
|||
Die lieben Listen x 2
Ich hab eigentlich gleich zwei Probleme, deren Lösung ich mit der Suchfunktion noch nicht gefunden habe.
Seite: Meine Webseite Problem 1: Ich habe mit CSS eine Navigation erstellt, die prinzipiell gesehen auch wunderbar funktioniert. Allerdings könnte das Hovern optimiert werden. Obwohl die Buttons (Original + Wechsel für den Hover-Effekt) recht groß sind - 78x32px und ihre Größe im CSS auch noch einmal zugewiesen wurde, sind die Buttons nur in einem winzigen Bereich anklickbar, Höhe etw 15px. Und auch nur dann wechselt der Button zum Hover-Bild. Code:
/* Navigation - top menu ... ------------------------------------------------------------------------- */ ul#menu_top { margin: 0px; padding: 0px; list-style-type: none; } ul#menu_top li { display : block; float : right; position : relative; } ul#menu_top li a { display : block; position : relative; } ul#menu_top li a.button1 { background: url('layout/home2.jpg'); width : 82px; height : 32px; background: url('layout/home2.jpg'); display : block; } ul#menu_top li a.button2 { background: url('layout/linkage.jpg'); width : 78px; height : 32px; display : block; } ul#menu_top li a.button3 { background: url('layout/artworks.jpg'); width : 78px; height : 32px; display : block; } ul#menu_top li a.button4 { background: url('layout/downloads.jpg'); width : 78px; height : 32px; display : block; } /* Navigation - top menu - hover tabs ---------------------------- */ ul#menu_top li a:hover.button1 { background: url('layout/home.jpg'); width : 82px; height : 32px; display : block; } ul#menu_top li a:hover.button2 { background: url('layout/linkage2.jpg'); width : 78px; height : 32px; display : block; } ul#menu_top li a:hover.button3 { background: url('layout/artworks2.jpg'); width : 78px; height : 32px; display : block; } ul#menu_top li a:hover.button4 { background: url('layout/downloads2.jpg'); width : 78px; height : 32px; display : block; } #menu_top li a#active1 { background: url('layout/home.jpg'); width : 82px; height : 32px; display : block; } /* Navigation - top menu - active tabs ---------------------------- */ #menu_top li a#active2 { background: url('layout/linkage2.jpg'); width : 78px; height : 32px; display : block; } #menu_top li a#active3 { background: url('layout/artworks2.jpg'); width : 78px; height : 32px; display : block; } #menu_top li a#active4 { background: url('layout/downloads2.jpg'); width : 78px; height : 32px; display : block; } Problem 2: Die Listen auf meiner Linkseite überschneiden sich im Opera und Firefox. Ich hab schon einiges durchprobiert, aber nichts hat geholfen. Ich habe ehrlich gesagt keinen blassen Schimmer woran es liegt. Ich hab zwar im letzten Jahr einiges dazu gelernt, was CSS betrifft. Nicht dank zuletzt durch die Leute hier am Forum. Aber leider immer noch nicht genug, wie es scheint. Danke für eure Hilfe. |
Sponsored Links |
|
||||
Auf den ersten Blick würde ich sagen, das div content ein Teil des menü_top überdeckt.
Dein erstes Problem habe ich nicht verstanden. Denn Die Page scheint im IE6, IE7 und Firefox identisch auszusehen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Sponsored Links |
|
|||
Welche Frage/Problem verstehst du nicht. Nur noch mal um klarzustellen, dass wir beide dasselbe meinen.
Du hattest recht, mit der Überlappung. Das Problem ließ sich mit z-index lösen. Vielen lieben Dank. Manchmal kommt man auf die einfachsten Lösungen nicht. Dann bleib nur noch Problem 2 übrig und da nehme ich an, dass es etwas mit dem Float zu tun hat. Die Listen auf der Linkseite sind nicht sauber von einander getrennt. Die Links rutschen fast ineinander. Bei Bedarf kann ich gernen einen Screenshot machen. Hier ist der Code. Code:
ul.linkage { list-style-type: none; } ul.linkage li { float: left; width: 130px; font-weight: normal; } ul.linkage li a { margin: 2px; width:120px; display: block; padding-left: 3px; border-left: 0.3em solid #DEDDDB; font-weight: normal; font-size: 0.85em; color: #80AB2D; text-decoration: none; } ul.linkage li a:visited { padding-left: 3px; border-left: 0.3em solid #DEDDDB; font-size: 0.85em; font-weight: normal; color: #80AB2D; text-decoration: none; } ul.linkage li a:hover { background: #F4F4F4; margin: 2px; width:120px; display: block; padding-left: 3px; border-left: 0.3em solid #7AA820; font-size: 0.85em; font-weight: normal; color: #8B8B8B; text-decoration: none; } Geändert von Midnight (02.06.2007 um 22:08 Uhr) |
|
||||
Zitat:
Zitat:
Edit: Problem 1 hast Du ja behoben, sry. Edit2: Passend geantwortet, sehe jetzt erst das du es editiert hast. Mach doch mal bitte einen Screenshot.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe Geändert von ArcVieh (02.06.2007 um 22:11 Uhr) |
|
|||
So sollte es aussehen (IE; Maxthon):http://slayerzone.de/souly/capture1.jpg
So sieht es bei mir im Opera aus:http://slayerzone.de/souly/screen1.jpg |
|
||||
Ach so.
Setze <h3> auf clear:both;.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
|||
Ähem... dann verhaut es mir das layout - aber auch nur im Opera und Firefox. Dies contenright div wird nach unten geschoben. So:
http://slayerzone.de/souly/screen2.jpg |
|
||||
Tut mir leid, heute ist irgtendwie nicht mein Tag.
Mit folgendem Code sieht es bei mir in Opera gut aus, aber keine Ahnung, wie es in Firefox aussieht, aber müsste auch gehen. Ich hab das gaze anhand deiner about Seite getestet in Opera. Code:
#contentright .linkage { overflow:auto; }
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
|||
Teils, teils... er ignoriert immer noch die linebreaks (ja ich weiß, man soll eigentlich p benutzen), Man, das ist so frustrierend.
Aber danke, jetzt läuft es wenigstens nicht mehr so arg ineinander über, *edit* Kommando zurück. Der Code nimmt mir das Lay dafür im IE/Maxthon auseinander. Geändert von Midnight (02.06.2007 um 23:21 Uhr) |
Sponsored Links |
|
||||
Jetzt habe ich ein bisschen rumprobiert und meine Grundlagen etwas aufgefrischt. Und hab jetzt etwas für dich gefunden, was für Firefox und Opera gut ist und vom IE gänzlich ignoriert wird. ^^
Code:
#contentright ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE(6-8)-Bug beim clearen von Listen | pHamez | CSS | 11 | 27.08.2010 17:08 |
Verschachtelte Listen nebeneinander | DiHo | CSS | 2 | 07.07.2010 23:23 |
Reports und Listen erzeugen ... | Scheppertreiber | Offtopic | 22 | 15.11.2008 20:14 |
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei | braindead | (X)HTML | 5 | 13.09.2007 16:43 |
Listen, Absätze und Überschriften | SPMan | (X)HTML | 4 | 05.08.2004 11:15 |