Links einer bestimmten Klasse zuordnen?

CSS Forum und Frameworks wie BootStrap oder MaterializeCSS
otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von otti_mania » 5. Mai 2007, 02:53

Hallo alle miteinander,

ich hätte da mal ein Problem, und zwar:

Ich habe im Prinziep für eine reine HTML Seite 3 CSS Klassen bis jetzt.

allerdings können in allen 3 Klassen Links auftauchen die nur in den Klassen so aussehen sollen wie beschrieben.

also 3 mal a:link mit jeweils unterschiedlicher darstellung.

ich bin aber kein CSS guru und würde jetzt gerne wissen wie ich es schaffe das der link in einer klasse immer so angezeigt wird und der in der anderen Klasse so und so weiter.

ich weis nicht wie ich es besser beschreiben soll, schaut euch den Code an und Ihr werded sehen was ich meine:

Code: Alles auswählen

td.nav_head {
font:Verdana;
font-size:12px;
font-weight: bold;
color:#FFFFFF;
}
a:link { color: #FFFFFF; }
a:visited {color: #FFFFFF; }
a:active { color: #FFFFFF; }
a:hover { text-decoration: underline; color: #FFFFFF; }

td.nav_left {
font:Verdana;
font-size:12px;
font-weight: bold;
color:#000000;
}
a:link { color: #000000; }
a:visited {color: #000000; }
a:active { color: #000000; }
a:hover { text-decoration: underline; color: #000000; }

table.content {
font:Verdana;
font-size:12px;
color:#000000;
}
a:link { color: #000000; }
a:visited {color: #000000; }
a:active { color: #000000; }
a:hover { text-decoration: underline; color: #000000; }
also immer die links unter den Klassen sollen quasi nur in dieser Klasse so aussehen!

kennt wer ne lösung für mich?

Danke schon im voraus!
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

sid
Beiträge: 227
Registriert: 5. Mai 2005, 15:54
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von sid » 5. Mai 2007, 05:57

Hallo

hier ein kleines beispiel das ich gerade einmal erstellt habe. Für mich war es eine kleine abwechslung zum 10 Stündigen redisgn meiner Webseite! [:O] Du kannst das natürlich auch noch in eine CSS Datei auslagern. Ich werde aber gleich noch eine css Datei mit der entsprechenden html Datei auf dem Server schaufeln, Somit kann man sich das kleine beispiel auch dann einmal direkt ansehen.

Ich gehe einmal davon aus, das dein Problem damit gelöst ist!

Code: Alles auswählen

		
		*  {
	font-size:  10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin:      0;
	padding:     0 }

body {
	margin: 10px }
p  {
	margin-top:   8px;
	margin-bottom: 6px }


a    {
	color:          #638eff;
	text-decoration: none }



a:hover   {
	color: #3f5ba4 }


#naviOben     {	background-color: #cccccc;
   
	padding:           6px;
	width:             800px;
	border:            solid 1px black }



#naviOben a    {
	color:           #000;
	background-color: #c0c0c1 }



#naviOben a:hover   {
	text-decoration: underline; color: #3f5ba4;}

#naviOben a.eskannnureinengeben {
	color: blue }
	
		
		
	

	
		
			Der mit dem Wolf tanzt!     
			   .:: Map Arena ::.     
			   Powie for ever!     
			   Scheuble     
			   Du Witzfigur auf 4 Rädern!    
			   Ein Link mit eigener [class]!
			
		
		


		Tja und jetzt noch ein wenig Text Link... !
		Ach so... Ein kleiner Link Text!
		


	    Ach das habe ich doch fast noch vergessen!
		ottimania.de
        
mfg Sid
- Editiert von Sid am 05.05.2007, 07:07 -
- Editiert von Sid am 05.05.2007, 11:18 -
PC 1
Betriebssystem : Windows Vista Ultimate (64 Bit) - Hardware : Intel Core2Duo E6600 ; 2 x Geforce 8800 GTX SLI ; 4 Gigabyte DDR2 Ram ; EVGA 680i SLI ; DELL 2407 WFP u.s.w.

Meine Webseite für die Leute die auch einmal gerne alleine sein wollen beim zocken. Singleplayer Maps, Mods, Tutorials, Meine eigenen Mapping Projekte u.s.w. Zur Zeit baue ich die Webseite aber völlig um, daher stehen noch nicht alle Daten zu verfügung.

[IMG]http://www.maparena.net/MapArena/Images ... naLogo.jpg[/IMG]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von otti_mania » 5. Mai 2007, 12:52

also müsste ich jetzt teoretisch und Praktisch nur

#nav_head vor die a.links setzen ja das muss man ja mal wissen ;)

DANKE Sid

Otti

###############################################################

Da bin ich wieder das funzt aber auch nicht kann mir denn keiner einen Tipp geben wie das in meinem Fall genau auszusehen hat?

Gruß

Otti
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

sid
Beiträge: 227
Registriert: 5. Mai 2005, 15:54
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von sid » 5. Mai 2007, 13:41

Hallo

Experimentiere einfach einmal herum. So weit ich es jetzt verstanden habe, so möchtest Du inerhalb eines Dokomentes verschiedene Links mit unterschiedlichen Farben darstellen. Eigentlich ist das ganze relativ verständlich. Wenn Du nicht weiterkommst, dann helfe ich Dir.

mfg Sid
PC 1
Betriebssystem : Windows Vista Ultimate (64 Bit) - Hardware : Intel Core2Duo E6600 ; 2 x Geforce 8800 GTX SLI ; 4 Gigabyte DDR2 Ram ; EVGA 680i SLI ; DELL 2407 WFP u.s.w.

Meine Webseite für die Leute die auch einmal gerne alleine sein wollen beim zocken. Singleplayer Maps, Mods, Tutorials, Meine eigenen Mapping Projekte u.s.w. Zur Zeit baue ich die Webseite aber völlig um, daher stehen noch nicht alle Daten zu verfügung.

[IMG]http://www.maparena.net/MapArena/Images ... naLogo.jpg[/IMG]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von otti_mania » 5. Mai 2007, 14:15

Ja Sid,

ich probiere ja schon lange rum, weis aber nicht mehr weiter.

es wäre sehr nett wenn du mir da mal einen absoluten geheimtipp geben könntest ;)

Gruß
Otti
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

sid
Beiträge: 227
Registriert: 5. Mai 2005, 15:54
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von sid » 5. Mai 2007, 15:05

Hallo

Hier einmal das oben besprochene Beispiel.

Farbige Links :gaga:

Jetzt versuche ich genau nach deinen oben angegebenen Angaben schnell etwas zu realisieren. Das dauert noch zirka 30 Minuten. :-O

mfg Sid
PC 1
Betriebssystem : Windows Vista Ultimate (64 Bit) - Hardware : Intel Core2Duo E6600 ; 2 x Geforce 8800 GTX SLI ; 4 Gigabyte DDR2 Ram ; EVGA 680i SLI ; DELL 2407 WFP u.s.w.

Meine Webseite für die Leute die auch einmal gerne alleine sein wollen beim zocken. Singleplayer Maps, Mods, Tutorials, Meine eigenen Mapping Projekte u.s.w. Zur Zeit baue ich die Webseite aber völlig um, daher stehen noch nicht alle Daten zu verfügung.

[IMG]http://www.maparena.net/MapArena/Images ... naLogo.jpg[/IMG]

sid
Beiträge: 227
Registriert: 5. Mai 2005, 15:54
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von sid » 5. Mai 2007, 15:48

Hallo

Also, das ist eigentlich soweit nach deinen oben angegebenen Angaben erstellt. Nur ein bischen mitdenken bei der Umsetzung. Ich habe einfach einmal alles in einer Tabelle untergebracht, diese ist dann noch in 3 Zellen aufgeteilt!

Zelle 1 = nav_head
Zelle 2 = nav_left
Zelle 3 = nav_tablecontent

somit müsstest Du anhand des Beispiels genau erkennen können, wie Du in den verschiedenen Bereichen zu hantieren hast. [:O]

Dann einmal hier unten der Quelltext alles mit den Styles zusammen. Ein beispiel wie weiter oben lege ich gleich auf dem Root Server an. Dort sind dann die Styles in einer Seperaten css Datei ausgelagert.

Code: Alles auswählen








#nav_head { 
font:Verdana; 
font-size:24px; 
font-weight: bold; 
color:#F6996F; 
} 
#nav_head a:link { color: #FcdFFF; } 
#nav_head a:visited {color: #FacFFF; } 
#nav_head a:active { color: #FFdaFF; } 
#nav_head a:hover { text-decoration: underline; color: #d1332d; } 

#nav_left { 
font:Verdana; 
font-size:16px; 
font-weight: bold; 
color:#0FFF00; 
} 
#nav_left a:link { color: #0abcd0; } 
#nav_left a:visited {color: #bbbbbb; } 
#nav_left a:active { color: #aaaaaa; } 
#nav_left a:hover { text-decoration: underline; color: blue; } 


#nav_tablecontent { 
font:Verdana; 
font-size:12px; 
color:#a011fa; 
} 
#nav_tablecontent a:link { color: #aecd01; } 
#nav_tablecontent a:visited {color: #000000; } 
#nav_tablecontent a:active { color: #000000; } 
#nav_tablecontent a:hover { text-decoration: underline; color: #bda10a; } 









	
		 Hier der Link:   
		Das ist der Bereich [content]
		 Hier der Link:   
		Das ist der Bereich [nav_head]
		 Hier der Link:   
		Das ist der Bereich [nav_left]
	




mfg Sid
PC 1
Betriebssystem : Windows Vista Ultimate (64 Bit) - Hardware : Intel Core2Duo E6600 ; 2 x Geforce 8800 GTX SLI ; 4 Gigabyte DDR2 Ram ; EVGA 680i SLI ; DELL 2407 WFP u.s.w.

Meine Webseite für die Leute die auch einmal gerne alleine sein wollen beim zocken. Singleplayer Maps, Mods, Tutorials, Meine eigenen Mapping Projekte u.s.w. Zur Zeit baue ich die Webseite aber völlig um, daher stehen noch nicht alle Daten zu verfügung.

[IMG]http://www.maparena.net/MapArena/Images ... naLogo.jpg[/IMG]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von otti_mania » 5. Mai 2007, 16:12

aber so wie du er hasst hab ich es jetzt auch.

nur etwas erweitert mittlerweile:

Code: Alles auswählen

td.nav_head {
font:Verdana;
font-size:12px;
font-weight: bold;
color:#FFFFFF;
}

#nav_head a:link { text-decoration: none; color:#FFFFFF; font-weight: bold; }
#nav_heada:visited {text-decoration: none; color:#FFFFFF; font-weight: bold; }
#nav_heada:active { text-decoration: none; color:#FFFFFF; font-weight: bold; }
#nav_heada:hover { text-decoration: underline; color:#FFFFFF; font-weight: bold; }

td.nav_left {
font:Verdana;
font-size:12px;
font-weight: bold;
color:#000000;
}

#nav_left a:link { text-decoration: none; color:#000000; font-weight: bold; }
#nav_left a:visited { text-decoration: none; color:#000000; font-weight: bold; }
#nav_left a:active { text-decoration: none; color:#000000; font-weight: bold; }
#nav_left a:hover { text-decoration: underline; color:#000000; font-weight: bold; }

table.content {
font:Verdana;
font-size:12px;
color:#000000;
}

#content a:link { text-decoration: none; color:#000000; }
#content a:visited { text-decoration: none; color:#000000; }
#content a:active { text-decoration: none; color:#000000; }
#content a:hover { text-decoration: underline; color:#000000; }
Schau mal bitte ob das funzen müsste?
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von otti_mania » 5. Mai 2007, 16:24

Schau mal hier: www.ottimania.de/test/

da siehste das design in Testumgebung.

Ich muss dazu sagen das sind meine ersten gehversuche in CSS (komplett selber erstellen).

ich habe dort alles so gemacht wie du es meintest.

kann es sein das ich die Klassen in DIVs setzen muss?
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

sid
Beiträge: 227
Registriert: 5. Mai 2005, 15:54
Kontaktdaten:

Links einer bestimmten Klasse zuordnen?

Beitrag von sid » 5. Mai 2007, 16:27

Hallo

Das erste beispiel benutzt ja eine Box! Im 2 beispiel habe ich anhand deines Quelltext versucht dir das so gut ich es kann auch Visuell noch einmal etwas besser zu erklären.

[quote]Ich habe im Prinziep für eine reine HTML Seite 3 CSS Klassen bis jetzt.[/quote]

Gibt es irgendwo die Seite zum einsehen? Oder sprichst Du jetzt von Deiner eigentlichen Webseite. Die mir überrigens sehr gut gefällt! :-O

Wo sind denn die anderen CSS Profis... ? :wink:

mfg Sid
PC 1
Betriebssystem : Windows Vista Ultimate (64 Bit) - Hardware : Intel Core2Duo E6600 ; 2 x Geforce 8800 GTX SLI ; 4 Gigabyte DDR2 Ram ; EVGA 680i SLI ; DELL 2407 WFP u.s.w.

Meine Webseite für die Leute die auch einmal gerne alleine sein wollen beim zocken. Singleplayer Maps, Mods, Tutorials, Meine eigenen Mapping Projekte u.s.w. Zur Zeit baue ich die Webseite aber völlig um, daher stehen noch nicht alle Daten zu verfügung.

[IMG]http://www.maparena.net/MapArena/Images ... naLogo.jpg[/IMG]

Antworten