1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Problem

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von jkhkhvbjkhv, 05.10.06.

  1. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Moin. Habe da ein Problem mit meiner Navigation. Habe die Schrift und den Effekt der Navigation komplett in CSS umgesetzt.

    Man muss sich das so vorstellen. Der Textlink ist in einem grau-Farbton und beim Hover-Effekt, soll dieser grau-Ton im Hintergrund von edm Text erscheinen. Der Linktext switcht dabei in ein weiss-Farbton.

    Das funktioniert auch soweit. Nun ist es aber so, es gibt ja noch den "Visited-Befehl".

    Wenn ich ein Link besucht habe und ich fahre mit der Maus rüber, dann wird nur der Hintergrund grau, aber die Schrift nicht weiss. Kann man den Visited-Schnick-Schnack vielleicht irgendwie unterdrücken? Weglassen bringt nichts, dann werden die Links in blau angezegit.

    Ach ja, das Problem tritt in jedem Browser auf.

    Hier einmal der Code aus meiner .css-Datei zum Nachvollziehen.

    Code:
    /* text_middle_nav */
    .text_middle_nav {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #313131;
    	text-decoration: none;
    	height: 33px;
    	line-height: 33px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 1px;
    }
    .text_middle_nav a:link {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #313131;
    	text-decoration: none;
    	height: 15px;
    	line-height: 15px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 15px;
    }
    .text_middle_nav a:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #FFFFFF;
    	background-color: #313131;
    	text-decoration: none;
    	height: 15px;
    	line-height: 15px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 15px;
    }
    .text_middle_nav a:visited {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #313131;
    	text-decoration: none;
    	height: 15px;
    	line-height: 15px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 15px;
    }
    .text_middle_nav a:active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #FFFFFF;
    	background-color: #313131;
    	text-decoration: none;
    	height: 15px;
    	line-height: 15px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 15px;
    }
    
    Wäre äußerst wichtig, dass ich das ziemlich schnell hinbekomme. Wäre nett, wenn der eine oder andere eine Idee da hätte.

    Gruß Niko
     
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    vertausch die Reihenfolge von visited und hover, dann sollte es gehen.

    Gruß Stefan
     
  3. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Super vielen Dank. Das war's. :)
     
  4. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    u.a. dafür steht das "C" für "Cascading" - der jeweils letzt interpretierte Eintrag im Stylesheet wird angezogen. Innerhalb einer Datei werden die Statements von oben nach unten durchgearbeitet, mehrere Dateien, bzw. Styleangaben im Header in der Reihenfolge in der sie im HTML-Code eingebunden sind und zu guter letzt Styleangaben, die innerhalb des <body> direkt den Tags mitgegeben werden.

    Im vorliegenden Fall überfuhren die :visited Angaben die für :hover, so daß ein besuchter Link nicht mehr korrekt auf die :hover Styleangaben zurückgriff.

    Die zweite Art der Kaskadierung spart bei richtigem Dokumentenaufbau reichlich Klassen. So ist es ggf. ratsamer bestimmte Bereiche (Header, Naviation, Content, Sidebar, Footer, ...) in <div>s zu unterteilen und daraus alle nachfolgenden Formatierungen abzuleiten. Also statt:
    Code:
    <style>
      a.middle_nav_text {...}
    </style>
     <ul>
       <li><a class="middle_nav_text" href="#">Menu1</a></li>
       <li><a class="middle_nav_text" href="#">Menu2</a></li>
        ...
    
    besser
    Code:
    <style>
       #navi ul li a {...}
    </style>
    <div id="navi">
     <ul>
       <li><a href="#">Menu1</a></li>
       <li><a href="#">Menu1</a></li>
       ...
    
    (@mcdiestel: ich weiß das es bei Dir anders ausschaut - ich hab's bewußt etwas verbogen ;))

    Gruß Stefan
     
  5. Delmar

    Delmar Becks Apfel (Emstaler Champagner)

    Dabei seit:
    27.02.04
    Beiträge:
    330
    Und dann gibt es bei CSS noch das Prinzip der Vererbung. Ich habe Deine Definitionen mal ein wenig bearbeitet und folgendes ist dabei herausgekommen:

    Code:
    a.text_middle_nav {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #313131;
    	text-decoration: none;
    	height: 15px;
    	line-height: 15px;
    	display: block;
    	vertical-align: middle;
    	padding-left: 15px;
    }
    Sämtliche Definitionen gelten jetzt für alle Links der Klasse text_middle_nav und auch deren Pseudoklassen :)hover, :active, ...). Da Du nur zwei Eigenschaften für :hover und :active im Gegensatz zu den "normalen" Links ändern möchtest, reicht es, wenn Du auch nur diese angibst:

    Code:
    a.text_middle_nav:hover, a.text_middle_nav:active {
    	color: #FFFFFF;
    	background-color: #313131;
    }

    Für die Version von stk gilt das natürlich analog und sollte auch so verwendet werden:

    Code:
    #navi ul li a:hover, #navi ul li a:active {
    	color: #FFFFFF;
    	background-color: #313131;
    }
     
  6. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    Bitte jetzt nicht schlagen: Ich weiß, man sollte dem nicht allzu viel Bedeutung beimessen, aber ich meine mich zu erinnern, dass diese Vererbungsgeschichten beim IE (bis einschließlich 6.0) ein p.i.t.a. sind! Ich habe für ein Projekt irgendwann aufgegeben und alles wieder in einzelne Definitionen aufgedröselt, weil sonst der doofe IE nix davon gerafft hat!


    *J*
     
  7. Delmar

    Delmar Becks Apfel (Emstaler Champagner)

    Dabei seit:
    27.02.04
    Beiträge:
    330
    Hm ... hatte bis jetzt keine Probleme mit dem IE und baue sämtliche CSS Definitionen so auf. o_O
     
  8. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    OK, ich kann jetzt auch kein Beispiel bringen - und das Projekt ist auch schon ne Weile her. Werde bei nächster Gelegenheit dann dem IE nochmal 'ne Chance geben!
     
  9. Delmar

    Delmar Becks Apfel (Emstaler Champagner)

    Dabei seit:
    27.02.04
    Beiträge:
    330
    Natürlich muss man bei IE immer besonders aufpassen. Ich gehe i.d.R. bei Projekten so vor, dass ich mit Firefox und Safari entwickel und dann die Seiten im IE auf Probleme teste. Grundsätzlich sind das dann aber bekannte Sachen wie z.B. der Box Model Bug. Aber grundsätzlich ... ;)
     
  10. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    und wenn er dann dochmal rumzickt (was sicher der fall sein wird ;) ) nimmste einfach die css und passt sie mitm sternchen hack fürn ie an !

    bsp.:

    .mistie {
    width:500px; /*NORMAL*/
    *width:400px; /*IE-HACK*/
    }



    und scho gehts...

    lg flo
     
  11. Delmar

    Delmar Becks Apfel (Emstaler Champagner)

    Dabei seit:
    27.02.04
    Beiträge:
    330
    Sternhacks sind was für Weicheier! :p
     
  12. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    lol...

    naja aber eben manchmal von nöten !!!

    aber nagut ab nun alles nurnoch mit expression():

    lol
     
  13. Nogger

    Nogger Damasonrenette

    Dabei seit:
    05.11.05
    Beiträge:
    494
    Vielleicht hast du CSS2 Selektoren benutzt (">", "+" und Kollegen). IE6 kennt die garnicht. CSS1 kennt er ja auch nicht vollständig (position fixed, :hover).
     
  14. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Moin. Danke Euch, habe aber noch 2 andere Fragen. Seit ja quasi aktiv dabei. :)

    1) Habe EINE Tabelle mit drei Spalten auf der Internetseite. Muss leider eine Tabelle sein. Wie dem auch sei. In der Linken Spalte habe ich zwei Bilder. Das obere Bild soll oben ausgerichtet werden und das untere Bild dementsprechend unten. Nun das Problem. Bei einer festen Tabellenhöhe wäre dies ja kein Problem. Aber die Tabellenhöhe ist nicht definiert, da sie von Seite zu Seite variieren kann.

    Ist es irgendwie möglich dies in CSS oder etwas anderem umzusetzten???

    2) Wollte in dieser Tabelle mit den drei Spalten in der mittleren Spalte ein kleineres Bild im Hintergrund einfügen, aber da die Tabellenhöhe nicht definiert ist, würde sich das Bild öfters wiederholen. Dies soll aber nicht so sein. Kann man irgendwie mit Layern oder CSS (?) das Bild hinter den Text legen und nach unten (Fuß der Tabelle) ausrichten????

    Wäre nett, wenn Ihr mir da auch helfen könntet. Ich hoffe, dass Ihr meine Frage versteht. :)

    Lieben Gruß Niko
     
  15. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
  16. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Moin. Danke für Deine Antwort. Bin aber etwas gestutzt...

    Zu 1) Es ist eine Spalte und in einer Spalte kann man mit vertical-align jeweils die bilder positionieren?? Mache ich das mit DIV-Tags? oder füge ich es beim IMG-Tag als "Style" ein???


    Hoffe, dass Du mir das noch einmal genauer erklären könntest. Durch das Selfhtml habe ich nicht ganz so durch geblickt... :p

    Gruß Niko
     
  17. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Kann mir keiner hier helfen, was STK meinte??? Das klappt irgendwie nicht.. :(
     
  18. fraggle

    fraggle Boskoop

    Dabei seit:
    11.01.05
    Beiträge:
    39
    Ich weiß nicht, ob ich dich richtig verstanden habe mcdiestel, aber meinst du in etwa so?
    Code:
    <table border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td style="vertical-align: top;">
    			<img src="pfad/zum/bild_1.jpg" alt="Alternativ Text" />
    		</td>
    		<td rowspan="2" style="background: url(pfad/zum/hintergrundbild.jpg) center bottom no-repeat; vertical-align: top;">
    			Blindtext
    		</td>
    		<td rowspan="2" style="vertical-align: top;">
    			Blindtext
    		</td>
    	</tr>
        <tr>
            <td style="vertical-align: bottom;">
                <img src="pfad/zum/bild_2.jpg" alt="Alternativ Text" />
            </td>
        </tr>
    </table>
    
     
    jkhkhvbjkhv gefällt das.
  19. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Perfekt... Danke. Jetzt müsste ich halt nur noch wissen, wie man den Hintergrund nach unten setzt (vertical-algin: bottom) und nur einmal wiederholt. Der Hintergrund soll in einer Spalte nur auftauchen..
     
  20. fraggle

    fraggle Boskoop

    Dabei seit:
    11.01.05
    Beiträge:
    39
    na das hab ich doch bereits mit angegeben. schau dir noch mal folgende zeile an:

    <td rowspan="2" style="background: url(pfad/zum/hintergrundbild.jpg) center bottom no-repeat; vertical-align: top;">

    ;)
     

Diese Seite empfehlen