zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Listen-Kaskade / Vererbung [ font-size ]

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.11.2004, 16:24
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Listen-Kaskade / Vererbung [ font-size ]

Hat evtl. jemand eine Lösung über Selektoren, nicht über Klassen oder IDs, der ersten UL-Ebene einen Font-Size von 0.8em und allen darunter liegenden einen Font-Size von 0.7em zu verpassen. Also 2 verschiedene Schriftgrößen, ohne weitere Vererbung und nur mit Selektoren.

Warum mein folgendes Beispiel nicht funktioniert ist mir bekannt !!!

Hier mal ein Ansatz:
Code:
<!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" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 


html,body	{
			margin: 0;
			padding: 0;
			
			background-color: #FF9922;
			color: #000000;
			
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size: 100.01%;
			}



#menu		{
			width: 80%;

			margin: 1em auto;			
			border:	1px solid #000000;
			padding: 2px;
			
			background-color: #FFFFFF; 
			}
	
	
#menu ul	{
			font-size: 0.7em;
			}
			
#menu > ul	/* Child */
			{
			background-color: #FF0000;	/*sichtbar-test*/
			font-size: 0.8em;
			}
			
			
#menu * ul	/* second Generation */
			{ 
			background-color: #FFFF00; 	/*sichtbar-test*/			
			font-size: 1em; 			/* weitere Vererbung verhindern */
			}

	
#menu li 	{
			padding: 0 0 0.1em 0;
			line-height: 145%;
			}
	

#menu li span,
#menu li a	
			{
			background-color: #FFFFFF;
			}
	
#menu li a:hover
			{
			background-color: #1155AA;
			color: #FFFFFF;
			}
	
#menu li span
			{
			background-color: #99CCFF;
			cursor: default;
			}
	
	

/*]]>*/
</style> 

</head> 
<body> 


<div id="menu">
	<ul>
		[*]Item one
		[*]Item two
		[*]Item three
			<ul>
				[*]Item one
				[*]Item two
				[*]Item three
					<ul>
						[*]Item one
						[*]Item two
						[*]Item three
							<ul>
								[*]Item one
								[*]Item two
								[*]Item three
								[*]<span title="Standort">Item four (activ)</span>
								[*]Item five  
							[/list]	
						
						[*]Item four
						[*]Item five  
					[/list]	
				
				[*]Item four
				[*]Item five  
			[/list]	
		
		[*]Item four
		[*]Item five  
	[/list]	
</div>


</body> 
</html>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.11.2004, 17:53
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Wenn Du es schon nicht rausfindest

Wie kann man die Kaskade austricksen?
Letztlich, so scheint mir, nur unter Bezugnahme auf nicht zwingend der Kaskade unterworfenen Elemente wie Klassen oder ID's.


Ich habe auch mal versucht, den umgekehrten Weg zu gehen:

Code:
#menu ul li ul li ul li    { 
         font-size: 0.7em; 
         } 

#menu ul li ul li ul { 
         font-size: 0.8em; 
         } 

#menu ul li ul li { 
         font-size: 0.7em; 
         } 
          
#menu ul li ul { 
         font-size: 0.8em; 
         } 
#menu ul li { 
         font-size: 0.7em; 
         } 
    
#menu ul { 
         font-size: 0.8em; 
         }
Bringt auch nix. Das hat mich anfangs schon gewundert, denn spätere Einträge sollten frühere überschreiben, andererseits sind die Auszeichnungen auch "umgekehrt" lesbar und spezifisch so dass die Kaskade wieder wirkt, weil die weniger spezifischen Elemente mit interpretiert werden müssen *grummel*.
Gut das ist ein Anfänger-Ansatz, aber ein Versuch wars wert

Ich sehe da gerade keine Lösung. (Was nichts zu bedeuten hat)

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.11.2004, 19:52
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Du beziehst dich mit deiner Frage beide Male auf die Body-Schriftgröße, ja? Also mein Ansatz wäre ja ungefähr sowas:
Code:
ul {
    font-size: .8em;
}
ul li, ul ul * {
    font-size: 1em;
}
li ul {
    font-size: .9em;
}
Hab’s jetzt nicht ausprobiert, allerdings sollten da keine Probleme auftauchen…

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #4 (permalink)  
Alt 04.11.2004, 20:53
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ja, so könnte es gehen wenn nicht:

Zitat:
A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, ">", and "+". Whitespace may appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.
Quelle: http://www.w3.org/TR/CSS21/selector.html

So wie ich das lese, kommt man damit um die Kaskade einfach nicht herum. Jedes Auftauchen eines - bereits mit einem einfachen Selektor beschriebenen Elements z.B. [ ul ] sorgt für dessen Präformatierung. Das Kombinieren ermöglicht in diesem Zusammenhang die Anwendung zusätzlicher Eigenschaften, dabei werden offensichtlich manche Eigenschaften nicht überschrieben, sondern aufgrund der Ausgangslage (Präformatierung) berechnet wie zumindest ihr beide wißt.

Wie soll dann eine Kombi von einfachen Selektoren und Kombinierten Selektoren das leisten können was ihr wollt?

Eine Ausschließlichkeitsregel bei kombinierten Selektoren scheint mir hierfür nicht vorgesehen, sondern das Gegenteil.

andir ( der sich gerne eines besseren belehren läßt.)

@toscho: dein Beispiel funktioniert nicht.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 04.11.2004, 21:29
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von andir
@toscho: dein Beispiel funktioniert nicht.
Du glaubst doch nicht im Ernst, daß ich mir das gefallen lasse? ;)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
<title>Verschachtelte Schriftgrößen</title>
<style type="text/css">
body {
        font-size:      100px;
}
ul {
        font-size:      .8em;
}
ul li, li ul ul {
        font-size:      1em;
}
li ul {
        font-size:      .875em;
}
</style>


100px</p>
<ul>[*]80px
    <ul>[*]70px
        <ul>[*]70px
            <ul>[*]70px[/list]          [/list]      [/list]  [/list]
Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #6 (permalink)  
Alt 04.11.2004, 23:26
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das ist saugut Thomas

Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?

Dein CSS-Code (geändert)

Code:
body {
        font-size:      100px;
}
ul {
        font-size:      .8em;
        background-color: #fff;
        color: red;
}
ul li, li ul ul {
        font-size:      1em;
        background-color: #1155AA;
         color: green;
}
li ul {
        font-size:      .875em;
        background-color: #ccc;
        color: white
}
Deine Kombi ul li, li ul ul, überschreibt alles mit blauem Hintergrund und grüner Schrift, kein Wunder bei der Verschachtelung.

Andererseits hast Du Ulles ausgesprochene Frage nach der Beeinflussung der Schriftgrößen perfekt gelöst


Gute Nacht

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 05.11.2004, 02:45
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von andir
Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?
Naja, da müßte man einfach für jede Ebene die Farbe extra angeben, der Übersicht halber separat. Also sowas:
Code:
ul,
ul ul ul,
ul ul ul ul ul {
        background:     #fff;
}
ul ul,
ul ul ul ul,
ul ul ul ul ul ul {
        background:     #eee;
}
Ich habe es mal zum Anklicken als Demo auf meiner Webseite abgelegt: Verschachtelte Schriftgrößen.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
  #8 (permalink)  
Alt 05.11.2004, 09:26
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Bin beeindruckt.......... Danke erstmal, werde die Veranstaltung jetzt mal prüfen/probieren.

Zitat:
Ulle will aber, so wie ich das sehe, backgrounds zuordnen, wie soll das gehen?
Nein nicht wirklich, habe die Hintergrundfarbe erstmal eingefügt damit sichtbar ist welchen UL-Tag mit welcher definition angesprochen wird, mache ich übrigens immer beim "testen"/auszeichnen, weil programmieren kann dieses wohl keiner nennen.

Falls diese Auszeichnung "background-color: #FF0000; /*sichtbar-test*/" zur Verwirrung beigetragen hat möchte ich mich dafür entschuldigen........
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 05.11.2004, 09:49
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das ist großartig Thomas
kann mich Ulle nur anschließen.


andi(r)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.11.2004, 14:45
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Code:
ul 			{ 
        	font-size:      .8em; 
			}
setzt mir 80% vom Ursprung

Code:
ul li,
li ul ul 	{ 
        	font-size:      1em; 
			}
verhindert weitere Vererbung in jedem li-Tag

Code:
li ul 		{ 
        	font-size:      .875em; /* = 70% von BODY oder 0.8% * 0.875% */
			}
erzeugt die 70% vom Ursprung



nur eines verstehe/sehe ich noch nicht - die genaue Funktionsweise von diesem Selektor
Code:
li ul ul
<edit>
Oh man bin ich blind, logisch durch [li ul ul] wird bei allen weiteren das Erben verhindert nur nicht beim ersten [li ul]

Super Toscho, hervorragender Denksport

Ich meine dieses Highlight sollte in die Knowledge Base, immerhin das beste Beispiel zur Vermeidung von Inline-Auszeichnung (class/id) was ich bisher gesehen habe.
</edit>
__________________
</ulle>
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
Intranet Formatierung CSS Mitschy71 CSS 6 19.02.2015 09:54
Dynamische Größen Killhunter CSS 0 14.05.2011 16:56
CSS im IE Earl of Green CSS 6 19.02.2011 14:10
Vererbung bei Listen (Hintergrund) img CSS 10 15.04.2009 16:23
Vererbung bei Listen ONeill CSS 5 16.02.2006 09:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:49 Uhr.