WinFuture-Forum.de: Wieder Rollover [css] - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
  • 2 Seiten +
  • 1
  • 2

Wieder Rollover [css]

#1 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. März 2006 - 15:55

Habe immer noch das Problem mit dem Rollover, da ich möchte, dass sich die Zeilen ausdehnen, wenn die Schriftgröße verändert wird, damit es auch für sehgeschwächte Mitmenschen lesbar ist ;)

Also das ausdehnen ist kein Problem, aber wie bekomme ich es jetzt hin, dass ein Roll-over erzeugt wird?
Verwendung von Listen nutze ich, da diese auch bei ausgeschaltetem CSS lesbar bleiben und eine Sinneinheit bilden.

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pixelogo.de</title>
<style type="text/css">
<!--
	@import url(style.css);
//-->
</style>
</head>
<body>
	  <div id='haupt'>
	  </div>
	  <div id='menu'>
		   <a href='www.pixelogo.de'><img src='trans.png' width='200px' height='150px' alt='Pixelogo.de' /></a>
		   <ul>
			   <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 1</a></p></li>
			   <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 2</a></p></li>
			   <li class='li'><p id='gr_bottom'><a href='test.htm'>Testlink 3</a></p></li>
		   </ul>
	  </div>
</body>
</html>


body
		{
				background: white url(bg_real.jpg);
		}
		
img
		{
				border: 0px;
		}
		
ul
		{
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-align: center;
		}
		
.li
		{
				background: url(link_no_1.jpg);
		}
		
#gr_bottom
		{
				margin: 0px;
						margin-top: 4px;
				padding: 0px;
				background: url(link_no_2.jpg) no-repeat bottom;
		}
		
#menu
		{
				position: absolute;
				top: 0px;
				left: 475px;
				height: 500px;
				width: 200px;
				background: url(menu_l.jpg) no-repeat top;
		}

0

Anzeige

#2 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 16. März 2006 - 16:32

Für mich sieht es so aus, als wüsstest du wie Hover-Effekte funktionieren.
0

#3 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. März 2006 - 16:34

Ja dies schon, aber nicht, wenn ich 2 Elemente in dem Link habe... Weil diese Liste passt sich ja nach unten der Schriftgröße an, deshalb nochmal meine Frage...

Kannst mir vielleicht grob sagen, wie ich das amchen könnte, weil Code schreiben kann ich dann auch selber, brauche nur mal nen Denkanstoß ;)
0

#4 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 16. März 2006 - 20:33

Wo sind da 2 Elemente im Link?
0

#5 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. März 2006 - 21:45

Na bis jetzt ja noch nicht, ich habs jetzt zwar mit border einfach gelöst, indem ich keine grafiken, sondern farben und ränder nutze, aber mich würde trotzdem mal interessieren, wie man 2 Elemente beim Hover "wechseln" lassen kann.
Ich muss ja erstmal einen Hintergrund festlegen, der sich ausdehen kann und die untere Abgrenzung des Bild, bsw. runde Ecken muss ich ja dann in ein anderes Element einbinden, da ich in einem Element keine 2 Hintergründe angeben kann:

+++Bsw+++

<ul id='test'>
<li><p id='p_test'><a href='test.htm'>Testlink</a></p></li>
</ul>


#test
{
margin: 0px;
padding: 0px;
background: url(hintergrund.jpg) no-repeat top left;
}

#p_test
{
margin: 0px;
padding: 0px;
background: url(hintergrund_abschluss.jpg) no-repeat bottom left;
}


Verstehst wie ich meine und die Grafik im p-Bereich wird aber auch nicht angezeigt...
0

#6 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 16. März 2006 - 21:54

Du kannst nur Elemente innerhalb von <a> "wechseln" lassen, vorrausgesetzt es soll auch im IE funktionieren. Also z.B. a:hover, a:hover img, a:hover span, ...
0

#7 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. März 2006 - 21:59

Also wenn ich eine ul im css mit ul a und ul a:hover belege wechselt es auch außerhalb des <a> Bereiches...
0

#8 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 16. März 2006 - 22:07

Nö, bestimmt nicht. Bei a:hover ändert sich nur das A-Element und das was noch drin ist, sonst nichts.
0

#9 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. März 2006 - 22:10

Naja denn hab ich eben nen bissle getrickst und das Element vergrößert, sodass der Hintergrund zum Vorschein kommt :rolleyes:
0

#10 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 17. März 2006 - 12:12

Ist das Problem denn jetzt gelöst?
0

#11 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 17. März 2006 - 14:11

Naja eigentl. nicht, es wurde notgelöst, indem ich einfach border setzte und backgrounds und keine grafiken mehr nutzte... :rolleyes:
0

#12 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 913
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 17. März 2006 - 18:20

Könntest du dein Problem denn dann vielleicht nochmal konkretisieren? Ich verstehe es nämlich irgendwie nicht ^^
0

#13 Mitglied ist offline   _seym. 

  • Gruppe: aktive Mitglieder
  • Beiträge: 52
  • Beigetreten: 12. Februar 06
  • Reputation: 0

geschrieben 21. März 2006 - 15:11

hi. was meinst du mit "wechseln"?
meinst du:
a{ background: url(bild_out.jpg); }
a:hover{ background: url(bild_over.jpg); }

?
mfg,
_seym.
0

#14 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.766
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 21. März 2006 - 15:40

jap :blink:
0

#15 Mitglied ist offline   _seym. 

  • Gruppe: aktive Mitglieder
  • Beiträge: 52
  • Beigetreten: 12. Februar 06
  • Reputation: 0

geschrieben 21. März 2006 - 16:12

na dann? prob gelöst? sonst hab ichs auch noch nicht verstanden... :blink:
mfg,
_seym.
0

Thema verteilen:


  • 2 Seiten +
  • 1
  • 2

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0