Jump to content
powie.de Tech Forum
Sign in to follow this  
otti_mania

Links einer bestimmten Klasse zuordnen?

Recommended Posts

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:

 

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!

Share this post


Link to post
Share on other sites

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!

 

		
	*  {
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 -

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 








#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

Share this post


Link to post
Share on other sites

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


nur etwas erweitert mittlerweile:

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.


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


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

Share this post


Link to post
Share on other sites

www.ottimania.de/test/


das ist unsere Firmenseite - Ottimania.de ist ja mein Hobby :)


aber Ottimania.de ist auch noch absolute Baustelle an allen ecken und enden wird da noch gefrickelt ;)


ich warte ja sehnsüchtig auf Powies 0.7.0 dann kann ich richtig loslegen.

Share this post


Link to post
Share on other sites

Hallo


Ich habe mir mal alle Daten auf meiner Festplatte übertragen

!  :gaga: Das lösche ich dann nachher wieder. Im HTML Code sehe ich auf dem ersten blick, das die vorgeschlagenen angaben nicht mehr stimmen. Ich werde das jetzt einmal so auf die schnelle berichtigen und schiebe dir dann die Daten per Beispiel wieder zurück.


Jo, das kenne ich mit der ewigen Baustelle... [:o]


Hier auf dem Root Server entsteht Momentan meine Alte Webseite in einem neuen Design! Aber [Valides XHTML 1.1] und das basiert auf das [Powie pSys] !


Das Newssystem ist soweit fertig und übersetzt (zumindestens der Hauptbereich)! Man lernt ungemein viel dazu und merkt erst dann, das selbst tonnenweise fehler im normalen transitional Code drin gesteckt haben. Selbst die Powie Panel Scripte und meine eigenen Menü Panels sind alle Valide... [:o]


Das ganze ist natürlich im Aktuellen IE Browse, Firefox und Opera Browser kompatibel. Andere werden folgen. Vieles kann man wie gesagt per CSS so ausbügeln, so das die Browser nicht mehr meckern. Und das ist nicht wie man immer sagt nur der IE Browser!


.:: Map Arena ::.


So, dann lass mich mal weiter fummeln.


mfg Sid

Share this post


Link to post
Share on other sites

Hallo


Ich habe die Daten jetzt einmal überarbeitet!


Falsche angaben a:muss vom Class / ID Tag mit einem leezeichen getrennt sein.

 

#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; }

 

Nochmal, damit ich dich richtig verstehe! Du möchtest in verschiedenen Bereich (Navigation Left / Right oder im Contentbereich), das man die Links mit unterschiedlichen Farben versehen oder letztendlich zu sehen bekommt?


Die Farben kannst Du ja für die Links wieder auf Deine Bedürfnisse abändern. Ich habe das jetzt einfach mal verändert damit man die Unterschiede erkennt, das die Links mit anderen Farben (Hover / Active ect) versehen sind.


Bitte versuche den Quelltext zu verstehen. Ich habe das basierend abgändert (Natürlich nichts an deinem Design ect.) das versteht sich natürlich von selbst. :gaga:


Ich habe die Daten wieder auf meinem Server abgelegt, dann kannst Du direkt mit deiner Testseite alles weitere vergleichen!


Deine Testseite auf meinem Root Server!


Vergesse nicht die Seite bei dir abzuspeichern und die CSS Datei so zu übernehmen!!!


Ich hoffe, das es jetzt funktioniert. Bei mir hat es das von Anfang an getan... [:o]


Aber mal was am Rande! Auch ich sitze oft Stundenlang vor einem Problem, bis das ich es gelöst habe. Wenn wir alle so schlau wären wie manche sich ausgeben, dann müssten unsere Köpfe so gross wie das Speichervolumen eines Cray Rechners sein. :-o


Jetzt muss ich noch schnell einkaufen gehen, sonst bekomme ich wieder nur die Reste...


mfg Sid

Share this post


Link to post
Share on other sites

Hallo


Tschuldigung, ich hatte die falsche CSS Datei auf dem Server hoch geladen. Das habe ich gerade berichtigt. Lösche am besten auch deinen Browsercache, denn der spielt bekanntlich ja schon einmal verrückt. :gaga:


So jetzt aber schnell weg...


mfg Sid

Share this post


Link to post
Share on other sites
Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×