Links und Klassen

gala · #1 (**permalink**) 08.08.2005, 16:38

Hallo zusammen

Ich bin gerade am verzweifeln. Ich habe verschiedene Links definiert, einige in Klassen (also .klasse{}) andere in # (kA wie man die nennt --> #klasse {}).

Jetzt überschreiben die sich andauern was voll unlogisch ist. Jedenfalls

hab ich ein paar kurze Fragen nur damit ich alles richtig verstehe.

Erste Frage:
In Klassen wird der HTML Teil der verändert werden soll doch vor den Namen gestellt. Also so:

Code:

a:link, a:visited.submenubtable {
blabla
}

In diesen # hintendran, also so:

Code:

#proto a:link, a:visited {
blabla
}

???

Zweite Frage:
wenn ich ein div mache das nur einmal vorkommt dann verwende ich #.
In diesem div sollte doch eigentlich genau die regeln gelten die ich dafür explizit definiert habe. egal ob aussenrum ein anderen #div ist?

erst nur schnell die fragen, ich kann momentan schlecht ein beispiel zeigen da viele daten aus einer internen db kommen.

wäre sehr nett wenn das schnell jemand beantwortet.

gruss martin

Dritte Frage:
edit: und wenn man klassen macht dann muss man die jedesmal an den html tag ranhängen damit diese auch sitzt. also es reicht nicht wenn man ein div macht und diesem den klassenamen zuweist (also div class="lala")
sonder man muss dan in diesem div noch jedem html tag einzeln die klasse übergeben? (also <ul class=lala>)

fricca · #2 (**permalink**) 08.08.2005, 16:58

Beschäftige dich mit den Arten von Selektoren und deren Spezifität
Dann wird all das, was du beschreibst, plötzlich ganz logisch

Grüße
fricca

gala · #3 (**permalink**) 08.08.2005, 17:46

bei allem respekt, das ganze hat mich jetzt nochmals verwirrt...kann auch daran liegen das ich langsam zu müde bin. hätt ich doch nie angefangen mit diesem css kram :>

also die fragen haben sich zwar erledigt aber an meiner seite hat sich nicht viel geändert, jedenfals nicht zum besseren.

also fang ich mal mit einer frage ganz vorne an. ich kann nachvollziehen das ich voll nerve und ihr mich alle hasst und bla

Mein HTML Dokument:

Code:

<!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>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id="container">
	<div id="submenu">
			<ul class="submenutablegreen">
				[*]<h2 class="submenutable">Quicklinks</h2>
				[*]Anmeldung deutsch
 				[*]Anmeldung franz
				[*]Anmeldung ital
				[*]TVD Internet
 				[*]Honoweb
			[/list]			<ul class="submenutable">
				<li class="submenutable"><h3 class="submenutable">Quicklinks</h2>
				<li class="submenutable">Anmeldung deutsch
 				<li class="submenutable">Anmeldung franz
				<li class="submenutable">Anmeldung ital
				<li class="submenutable">TVD Internet
 				<li class="submenutable">Honoweb
			[/list]			<ul class="submenutable">
				[*]<h3 class="submenutable">Quicklinks</h2>
				[*]Anmeldung deutsch
 				[*]Anmeldung franz
				[*]Anmeldung ital
				[*]TVD Internet
 				[*]Honoweb
			[/list]	</div>
</div>
</body>
</html>

Meine CSS Datei

Code:

body {
  background: #FFFFFF;
  color: #333333;
  font: 12px Verdana, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

#container {
	position: absolute;
	width: 800px;
	height: 100%;
	top: 0px;
	left: 50%;
	background: #ffffff;
	margin-left: -400px;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#submenu {
   display: block;
   position: absolute;
   top: 188px;
   text-indent: 5px;
   width: 165px;
   float: right;
   border: 0px;
   z-index: 1;
   margin: 0px;
   background: #fff;
   padding: 0px;
   border: 1px solid red;
}
.submenutable {};
ul.submenubtable {
   position: relative;
   display: block;
   width: 165px;
   list-style: none;
   float: left;
   margin:0;
   padding: 0;
   border: 1px solid #D0300C;
}
ul.submenubtablegreen {
   position: relative;
   display: block;
   width: 165px;
   list-style: none;
   float: left;
   margin: 0px 0px 12px 0px;
   padding: 0;
   border: 1px solid #467D0E;
}

li.submenubtable  {
   margin: 0;
   padding: 0;
   position: relative;
   float: left;
   list-style: none;
}

a.submenubtable:link {
    position: relative;
	display: block;
	width: 165px;
	height: 16px;
	padding-top: 3px;
	background: url("_images/identitas3/sub_hover.gif") no-repeat left center;
	float: left;
	color:#393939;
	text-indent: 15px;
	text-decoration: none;
	font: 10px Verdana, Arial, sans-serif;
}
a.submenubtable:visited {
	color:#393939;
	font: 10px Verdana, Arial, sans-serif;
	text-decoration: none;
}
a.submenubtable:hover {
	background: url("_images/identitas3/sub_hover_a.gif") no-repeat left center;
	text-decoration: none;
}
a.submenubtable:active {
	background: url("_images/identitas3/sub_hover_a2.gif") no-repeat left center;
	text-align: center;
	text-decoration: none;
}

h3.submenutable {
	position: relative;
	display: block;
	color: white;
	text-decoration: none;
	font: 12px Verdana, Arial, sans-serif;
	text-align: center;
	background: url("_images/identitas3/subm_bg_o.gif") repeat-x;
	width: 165px;
	height: 29px;
	border-bottom: 1px solid #D0300C;
	padding-top:12px;
	margin: 0px;
	top: 0px;
}
h2.submenutable {
	position: relative;
	display: block;
	color: white;
	text-decoration: none;
	font: 12px Verdana, Arial, sans-serif;
	text-align: center;
	background: url("_images/identitas3/subm_bg.gif") repeat-x;
	width: 165px;
	height: 29px;
	border-bottom: 1px solid #467D0E;
	padding-top:12px;
	margin: 0px;
	top: 0px;
}

und was geht? fast nichts

die links ul und li werden einfach nicht übernommen. was hab ich hier (ich weiss das sind sicher die gröbsten basics) wieder falsch gemacht?

als ich alles noch mit ids hatte gings, aber das ist ja nicht richtiges css.. aber mit diesen klasssen.. ich.. *heul*

h1 h2 geht.. ul li nicht.. wieso?? ich hab doch beide haargenaugleich formatiert... :/

fricca · #4 (**permalink**) 08.08.2005, 18:17

Zitat:

a.submenubtable:link

Damit würdest du ein a-Element ansprechen, das die Klasse submenutable hat: <a href="#" class="submenutable">
Das kommt in deinem HTML aber nicht vor.

Es müsste auf dein HTML bezogen heißen:

Code:

li.submenutable a:link

Damit sprichst du ein a-Element an, das auf ein Listenelement folgt, das die Klasse .submenutable hat.

Jetzt klarer?

gala · #5 (**permalink**) 09.08.2005, 08:40

jaaaa!! ich denke schon

danke.

hmm oder doch nicht. dann müsste ich ja wenn ich die[*] elemente style. li.klasse {} und in jedem li dann class = "klasse".

ich könnte aber auch. ul.submenutable li {
}

das wären dann alle listen elemente die auf ein ul der klasse submenutable stossen..

ach quatsch was labber ich hier.. ich versuchs mal ^^

danke, gruss und bis bald ^^

E|H · #6 (**permalink**) 09.08.2005, 10:07

Als erstes würde ich mal den HTML-Code vereinfachen:

Es genügt, wenn du dem div die id submenu gibst.

Dann kannst du über

Code:

#submenu

das div

Code:

#submenu li

die Listenpunkte

Code:

#submenu a

die Links im div

Code:

#submenu ul a

die Links in der Liste im div

Code:

#submenu li a

die Links in den Listenpunkten im div ansprechen,

wobei die letzten beiden Möglichkeiten auf's Gleiche rauslaufen.

Der <ul>, den[*]s und den <a>s brauchst du dann keine Klassen mehr geben, dann wird das deutlich übersichtlicher, schlanker und weniger fehleranfällig (weil übersichtlicher).

Wenn du nur den Links die Klasse submenutable gibst und sonst keinen anderen Elementen, dann brauchst du auch nur .submenutable schreiben, nicht a.submenutable.

Aber es genügt eigentlich, wenn das div eine id hat.
submenutable als Klassenname für einen Link finde ich etwas seltsam...

gala · #7 (**permalink**) 09.08.2005, 12:06

jeah!

echt!

ich mach das nun wieder mit diesen #. danke an fricca trotzdem hab jetzt einiges verstanden. nur.. bin jetzt wieder denn ganzen morgen dran und komm einfach auf keinen grünen zweig. ich versuchs mit diesen # (die mag ich ^^)

alsooo...

jetzt kommt was lustiges.. knapp nachdem ich dachte ( ich bau das ganze dokument nochmals langsam nach und nach zusammen) es kommt langsam gut hatte ich wieder ein unerklärbarer fehler.

so wie ich bin heul ich natürlich nicht gleich im forum los und belästige andere leute ( :> ) sonder spiel n bischen rum.

also..

meine neue css:

Code:

body {
  background: #FFFFFF; color: #333333; font: 12px Verdana, Arial, sans-serif; padding: 0; margin: 0;
}

#container {
   position: absolute; width: 800px; height: 100%; top: 0px; left: 50%; margin-left: -400px; border-left: 1px solid #000;
   border-right: 1px solid #000;
}
#submenu {
   display: block;
   position: absolute;
   top: 188px;
   text-indent: 5px;
   width: 165px;
   float: right;
   border: 0px;
   z-index: 1;
   margin: 0px;
   background: #fff;
   padding: 0px;
}
#submenu li {
   margin: 0;
   padding: 0;
   float: left;
   list-style: none;
}
#submenu ul {
   position: relative;
   display: block;
   width: 165px;
   list-style: none;
   float: left;
   margin: 0px;
   margin-bottom: 12px;
   padding: 0;
   border: 1px solid #D0300C;
}
#submenu ul:first-child{
   border: 1px solid #467D0E;
}
#submenu li a:visited, a:link {
   position: relative;
   display: block;
   width: 165px;
   height: 16px;
   padding-top: 3px;
   background: url("_images/identitas3/sub_hover.gif") no-repeat left center;
   float: left;
   color:#393939;
   text-indent: 15px;
   text-decoration: none;
   font: 10px Verdana, Arial, sans-serif;

}
#submenu li a:hover {
   background: url("_images/identitas3/sub_hover_a.gif") no-repeat left center;
   text-decoration: none;
}
#submenu li a:active {
   background: url("_images/identitas3/sub_hover_a2.gif") no-repeat left center;
   text-align: center;
   text-decoration: none;
}

#submenu ul h3 {
   position: relative;
   display: block;
   color: white;
   text-decoration: none;
   font: 12px Verdana, Arial, sans-serif;
   text-align: center;
   background: url("_images/identitas3/subm_bg_o.gif") repeat-x;
   width: 165px;
   height: 29px;
   border-bottom: 1px solid #D0300C;
   padding-top:12px;
   margin: 0px;
   top: 0px;
}
#submenu ul h2 {
   position: relative;
   display: block;
   color: white;
   text-decoration: none;
   font: 12px Verdana, Arial, sans-serif;
   text-align: center;
   background: url("_images/identitas3/subm_bg.gif") repeat-x;
   width: 165px;
   height: 29px;
   border-bottom: 1px solid #467D0E;
   padding-top:12px;
   margin: 0px;
   top: 0px;
}


#content {
	display: block;
	position: absolute;
	top: 179px;
	left: 165px;
	border: 0px solid green;
	margin-right: 0px;
	padding: 10px;
	margin-left: 10px;
	width: 605px;
	float: right;
	z-index: 1;
}

#content a:link, a:visited {
	color: #0077b3;
	text-decoration: none;
}
#content a:hover, a:active {
	color: #0077b3;
	text-decoration: underline;
}

#content p {
	margin-bottom: 10px;
}

#content h1 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 16px;
	color: #5B8F28;
	font-weight: bold;
	margin: 0px 0xp 0px 2px;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #5B8F28;
}

#content h2  {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
	color: #0077b3;
	font-weight: normal;
	margin-bottom: 5px;
}

mein html

Code:

<!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>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id="container">
   <div id="submenu">
         <ul>[*]<h2>Quicklinks</h2>[*]Anmeldung deutsch[*]Anmeldung franz[*]Anmeldung ital[*]TVD Internet[*]Honoweb[/list]         <ul>[*]<h3>Quicklinks</h3>[*]Anmeldung deutsch[*]Anmeldung franz[*]Anmeldung ital[*]TVD Internet[*]Honoweb[/list]         <ul>[*]<h3>Quicklinks</h3>[*]Anmeldung deutsch[*]Anmeldung franz[*]Anmeldung ital[*]TVD Internet[*]Honoweb[/list]   </div>
   <div id="content">
			<h1 class="content">dsfasdfasdfad</h1>

				klalal
					dsfasdfa
	</div>
</div>
</body>
</html>

jetzt klappt das alles bestens...

nur.. ändert mal das

#submenu li a:visited, a:link {

in

#submenu li a:link, a:visited{

und schon fängt es wieder an zu spinnen. die links werden irgendwie einfach ausgetausch.. also die div links sehen aus wie submenulinks und die submenu visited links sehen aus wie normale content links

naja is ja auch egal... müsst ihr nid anschauen denn wen man visited vor link setz dann klappt alles (is zwar irgendwie doof aber klappt ja

)

so ich mach mal weiter. ahhee esseen.. guten @ all.

fricca · #8 (**permalink**) 09.08.2005, 12:24

Zitat:

#submenu li a:link, a:visited {
[...]
und schon fängt es wieder an zu spinnen.

Da spinnt nichts!
Deine Deklaration sagt folgendes:

#submenu li a:link {...} /* gilt nur innerhlab von #submenu */

a:visited {...} /* gilt für alle besuchten Links */

Was du erreichen willst muss so aussehen:

#submenu li a:link, #submenu li a:visited {...}

gala · #9 (**permalink**) 09.08.2005, 13:10

sry für spam :>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20
IE 7 skaliert Links falsch?	theonlyandy	CSS	16	10.04.2008 10:44
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20
links in externem fenster öffnen... HELP Plz!!	NoPlanClan	CSS	4	12.01.2004 18:54
Formularbuttons und Links mit CSS gleich gestalten	Jürgen	CSS	1	18.09.2003 18:33