kostenloser Webspace werbefrei: lima-city


Schriftfarbe ändern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    Hallo.. Ich hab eine Liste erstellt für ein Menü, darin will ich die Schriftfarbe ändern, da ich einen Transparenten Hover gemacht habe.. Nur irgendwie bin ich zu doof...

    Hier ist meine komplette stylesheet datei...

    body {
    margin: 0;
    padding: 0;	
    background: url(images/image01.jpg) no-repeat left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    
    #menu {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	width: 774px;
    	height: 210px;
    	position: relative;
    }
    #menu a {
    	display: block;
    	text-indent: -900%;
    	position: absolute;
    	outline: none;
    }
    #menu a:hover {
    	background-image: url(images/overlay.jpg) no-repeat left top;
    	background-color: #fff;
    	color: #000;
    	filter:alpha(opacity=30); /* IE */
    	opacity:0.3; /* allgemein */
    	-moz-opacity:0.3; /* Mozilla */
    	-khtml-opacity:0.3; /* KTHML */
    	-opera-opacity:0.3; /* Opera */
    	font-family: Verdana, sans-serif;
    	padding: 5px;
    	width: 20%;
    	text-align: center;
    	margin: 20px 10px;
    	font-size: 0.8em;
    }
    #menu .home{
    color: #00FFFF;
    font-family: Verdana, sans-serif;
    padding: 5px;
    width: 20%;
    text-align: center;
    margin: 20px 10px;
    font-size: 0.8em;
    }



    Und das hier meine Index, wo ich die schriftfarbe ändern will....
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Mach ich später</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body> 
    <ul id="menu"> 
    	<li><a href="#" class="home">Home</a></li>
    	<li><a href="#" class="about">About</a></li> 
    </ul>



    Mein Problem ist, dass die Schrift irgendwie gar nicht existiert.. Denn ich hab nen Hintergrund mit einem Muster, wo man sogar eine Schwarze Schrift sehen müsste.. Aber ich seh: GAR NIX!

    So sieht das ganze aus:
    Ohne Hover
    Mit Hover
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Sind bei deinem Originalcode die Endtags dabei?
    </body> und </html> fehlen nämlich hier.
  4. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Sind bei deinem Originalcode die Endtags dabei?
    </body> und </html> fehlen nämlich hier.


    Nein, das hab ich nachgeholt, aber es kam keine Veränderung.. Immernoch so wie im Bild 1 (Ohne Hover)

    //Edit:

    Hab grad auch nochmal getestet, ob es an meinem Farbcode liegen könnte und es mit weiß probiert, #FFFFFF aber das funktioniert genau so wenig, also liegt's wohl nicht am Farbcode...

    //EDIT:

    Am Hover-Bild liegt's auch nicht, es verdeckt keinen Text, weil wenn ich das rausnehmen immernoch keine Veränderung..

    Beitrag zuletzt geändert: 22.6.2011 18:53:21 von kill-a-teddy
  5. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Was hovert denn da eigentlich für ein Bild? Nur diese weiße Fläche?

    Edit: Schon mit anderen Browsern probiert als den Internet Explorer?

    Beitrag zuletzt geändert: 22.6.2011 19:10:49 von schnookerippsche
  6. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Was hovert denn da eigentlich für ein Bild? Nur diese weiße Fläche?


    an der weißen Fläche sollte ja ein Link sein, wo natürlich auch was drinne steht.. z.B. Startseite oder sooo...

    Nur das eben Startseite net zu sehen ist...

    Nun hab ich das ganze einfach mit Bildern gemacht (sieht sogar schicker aus) aber... Jetzt ist mein Hover schrott und die Bilder sind nicht anklickbar, also geben keinen Link ab .___.

    <ul id="menu"> 
    	<li><img src="images/home.png"><a href="#" class="home"></a></img></li>
    	<li><img src="images/bilder.png"><a href="#" class="pictures"></a></img></li> 
    	<li><img src="images/blog.png"><a href="#" class="blog"></a></img></li>
    	<li><img src="images/links.png"><a href="#" class="links"></a></img></li>
    	<li><img src="images/kontakt.png"><a href="#" class="links"></a></img></li>
    </ul>


    //EDIT:

    Chrome macht det selbe...

    //EDIT 2:
    Okay das Link problem mit den Bildern ist gelöst, nur schnell die Schönheitsfehler anpassen...

    Beitrag zuletzt geändert: 22.6.2011 19:18:50 von kill-a-teddy
  7. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Diesmal haben die Links aber auch keine Bezeichnung: d.h. es ist nichts zwischen den <a></a> Tags

    Edit: Wenn du es jetzt anders hinbekommen hast kannst du uns ja die Seite zeigen ich konnte mir nämlich nicht vorstellen wie das auszusehen hatte.


    Beitrag zuletzt geändert: 22.6.2011 19:20:56 von schnookerippsche
  8. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Diesmal haben die Links aber auch keine Bezeichnung: d.h. es ist nichts zwischen den <a></a> Tags

    Edit: Wenn du es jetzt anders hinbekommen hast kannst du uns ja die Seite zeigen ich konnte mir nämlich nicht vorstellen wie das auszusehen hatte.


    Joa das mit den Links hab ich dann selbst gemerkt... Und jetzt macht er mir nen Rahmen um den Link obwohl ich das nirgends definiert habe, ich kotz ab !!! >.<

    Warte bilder folgen...

    Ohne Hover
    Mit Hover ... Muss noch angepasst werden


    //EDIT:

    Ich kapiere einfach net, wieso er mir da nen blauen Rahmen drumm macht jetzt -.-

    Beitrag zuletzt geändert: 22.6.2011 19:31:40 von kill-a-teddy
  9. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    probiers mal mit div anstatt ner Liste.
  10. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    probiers mal mit div anstatt ner Liste.


    Was denne Probieren?
    Achsoo sorry... Ich hab's ja so weit schon recht schön mich nervt nur dieser Blaue Rand da.. <.<



    Ick glaub, ich krieg Schuppen aufm Kop :( Ohne witz jetzt :(

    Beitrag zuletzt geändert: 22.6.2011 19:51:40 von kill-a-teddy
  11. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Bilder sind wohl nicht des Problemes Lösung.

    html
    <div id="beispiel">
    <a href="#" class="blabla">Home</a><br />
    <a href="#" class="blabla">Bilder</a><br />
    </div>


    css
    #beispiel {width: 100px; ... etc.}
    a.blabla {padding: ...}
    a.blabla:hover {background-image: url(beispiel.png);


    So würde ich das insgesamt lösen.

    Beitrag zuletzt geändert: 22.6.2011 19:58:23 von schnookerippsche
  12. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Bilder sind wohl nicht des Problemes Lösung.

    html
    <div id="beispiel">
    <a href="#" class="blabla">Home</a><br />
    <a href="#" class="blabla">Bilder</a><br />
    </div>


    css
    #beispiel {width: 100px; ... etc.}
    a.blabla {padding: ...}
    a.blabla:hover {background-image: url(beispiel.png);


    So würde ich das insgesamt lösen.


    Toll was soll ick damit anfangen? Sorry aber genau das hatte ich vorher schon und es hat nichts gebracht, siehe 1. Beitrag...

    <ul id="menu"> 
    	<li><a href="#" class="home">Home</a></li>
    	<li><a href="#" class="about">About</a></li> 
    </ul>


    Das war meine Liste...

    Und das hier mein Css:
    #menu {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	width: 774px;
    	height: 210px;
    	position: relative;
    }
    #menu a {
    	display: block;
    	text-indent: -900%;
    	position: absolute;
    	outline: none;
    }
    #menu a:hover {
    	background-image: url(images/overlay.jpg) no-repeat left top;
    	background-color: #fff;
    	color: #000;
    	filter:alpha(opacity=30); /* IE */
    	opacity:0.3; /* allgemein */
    	-moz-opacity:0.3; /* Mozilla */
    	-khtml-opacity:0.3; /* KTHML */
    	-opera-opacity:0.3; /* Opera */
    	font-family: Verdana, sans-serif;
    	padding: 5px;
    	width: 20%;
    	text-align: center;
    	margin: 20px 10px;
    	font-size: 0.8em;
    }
    #menu .home{
    color: #00FFFF;
    font-family: Verdana, sans-serif;
    padding: 5px;
    width: 20%;
    text-align: center;
    margin: 20px 10px;
    font-size: 0.8em;
    }


    Wobei mir der Text dann dennoch nicht angezeigt wurde... Und da es jetzt mit Bildern schöner aussieht und ich für's andere keine Lösung finde, lass ich das so, nur nun hab ich das Prob, das ich auf einmal Rahmen um meine Bilder habe, obwohl ich die net angegeben habe :(


    Was übrigends definitiv am Link liegt, weil:
    Wenn ich das Bild "home.png" ohne nen Link einfüge habe ich keinen hässligen Rahmen.. Sobald ich nen Link drum mache hab ich einen hässligen Rahmen...


    Beitrag zuletzt geändert: 22.6.2011 20:04:38 von kill-a-teddy
  13. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Ja ich habe gemeint dass du es ohne Liste machst.

    Ich versuche deine Seite mal mit keiner Liste zu emulieren.
  14. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Ja ich habe gemeint dass du es ohne Liste machst.

    Ich versuche deine Seite mal mit keiner Liste zu emulieren.


    Und wie mach ich dann den Hover, wenn ich keine Liste habe? :o

    Bemerkung: Bei google Chrome funktioniert alles wunderbar -.- nur ie zickt!
  15. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Ich benutze den Internet Explorer nie.

    Probiers mal hiermit:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Mach ich später</title>
    <link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body> 
    <div id="menu">
    <a href="#" class="home">Home</a><br><br>
    <a href="#" class="home">About</a>
    </div>
    </body>
    </html>


    #menu {position: ...; }
    a.home {padding: 10px;}
    a.home:hover {padding-left: 20px;
    background-image: url(beispiel.jpg);}


    Beitrag zuletzt geändert: 22.6.2011 20:36:30 von schnookerippsche
  16. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Ich benutze den Internet Explorer nie.

    Probiers mal hiermit:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Mach ich später</title>
    <link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body> 
    <div id="menu">
    <a href="#" class="home">Home</a><br><br>
    <a href="#" class="home">About</a>
    </div>
    </body>
    </html>


    #menu {position: ...; }
    a.home {padding: 10px;}
    a.home:hover {padding-left: 20px;
    background-image: url(beispiel.jpg);}


    Hmm also der Text wird wenigstens angezeigt... Aber den Rahmen hab ich trz. dem .___.
  17. schnookerippsche

    Kostenloser Webspace von schnookerippsche

    schnookerippsche hat kostenlosen Webspace.

    Wenns in den anderen Browsern geht dann schiebe ich das mal ganz dreist auf den Internet Explorer. Welche Version verwendest du denn zum ausprobieren?
  18. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    schnookerippsche schrieb:
    Wenns in den anderen Browsern geht dann schiebe ich das mal ganz dreist auf den Internet Explorer. Welche Version verwendest du denn zum ausprobieren?


    Funktioniert bei allen anderen... Hab IE09
  19. 2 Ideen zur einfachen Lösung, aber könnte funktionieren:

    Wenn du die links mit <a> erstellst schreib ins css:

    a {color:#000000;}
    a:link {color:#000000}
    usw...

    Ohne <a>:

    <body text="#000000">

    mfg
    the Yo
  20. s********4

    Beim IE muss man die Border von Bildern die verlinkt sind explizit abstellen per css:

    a img{
        border: none;
    }
  21. kill-a-teddy schrieb:
    ... Mein Problem ist, dass die Schrift irgendwie gar nicht existiert...
    ja ja! du kannst mit selectoren nicht umgehen. im html heißt es:
    <ul id="menu"> 
    	<li><a href="#" class="home">Home</a></li>
    	<li><a href="#" class="about">About</a></li> 
    </ul>
    also dann im css:
    ul#menu li a.home {
    ...
    }
    ul#menu li a:hover.home {
    ...
    }
    ul#menu li a:hoover.about{
    ...
    }
    und so weiter ...
    und so weiter. und dann siehst du das menu.

    lg

    Beitrag zuletzt geändert: 26.6.2011 2:51:06 von hemiolos
  22. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!