zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Die lieben Listen x 2

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.06.2007, 21:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.06.2007, 22:08
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.06.2007, 23:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

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 23:08 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.06.2007, 23:08
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
sind die Buttons nur in einem winzigen Bereich anklickbar
Also des kannst Du mit z-index bei den relativ positionierten Links im top_menu ja korrigieren. (Ob das eine saubere Lösung ist?!)

Zitat:
Die Listen auf meiner Linkseite überschneiden sich im Opera und Firefox.
Was meinst Du mit 'überschneidet'? Ich habe mir deine Seite in IE6,7 und Firefox angeschaut, ich stelle keinen Unterschied fest.

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 23:11 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 02.06.2007, 23:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 02.06.2007, 23:40
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Ach so.
Setze <h3> auf clear:both;.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 02.06.2007, 23:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

Ä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
Mit Zitat antworten
  #8 (permalink)  
Alt 02.06.2007, 23:57
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 03.06.2007, 00:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

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 (03.06.2007 um 00:21 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.06.2007, 00:43
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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;
}
Code habe ich von hier aus den FAQ.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE(6-8)-Bug beim clearen von Listen pHamez CSS 11 27.08.2010 18:08
Verschachtelte Listen nebeneinander DiHo CSS 2 08.07.2010 00:23
Reports und Listen erzeugen ... Scheppertreiber Offtopic 22 15.11.2008 21:14
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei braindead (X)HTML 5 13.09.2007 17:43
Listen, Absätze und Überschriften SPMan (X)HTML 4 05.08.2004 12:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:15 Uhr.