nicht angemeldet
Linkvariationen
0 
Matthias Apsel
0 0 0 Matthias Apsel
0
Linkvariationen
Hi,
ich bin ganz neu hier im Forum und auch was Webdesign angeht ziemlich am Anfang.
Das Forum habe ich nach meiner Problematik durchsucht, aber leider nichts gefunden bzw. verstanden.
Problematik: Bestimmte Links auf meiner Website sollen einen Rollover-Effekt haben, andere nicht. Ich habe es bisher nur so hinbekommen, das alle Links einen Rollover-Effekt haben. Leider schaffe ich es nicht, für bestimmte Links Ausnahmen zu erstellen. Das ist bestimmt extrem simpel, aber leider komme ich hier alleine nicht weiter.
Kann mir jemand erklären wie das geht?
Vielen Dank im Voraus!
LG Maze
-
Om nah hoo pez nyeetz, xmazex!
Problematik: Bestimmte Links auf meiner Website sollen einen Rollover-Effekt haben, andere nicht. Ich habe es bisher nur so hinbekommen, das alle Links einen Rollover-Effekt haben. Leider schaffe ich es nicht, für bestimmte Links Ausnahmen zu erstellen. Das ist bestimmt extrem simpel, aber leider komme ich hier alleine nicht weiter.
Die einen Links müssen sich von den anderen Links irgendwie inhaltlich oder strukturell unterscheiden. Dafür brauchst du geeignete Selektoren.
Matthias
-
Danke für die schnelle Antwort, aber leider bringt mich deine Antwort nicht wirklich weiter: wie gesagt, ich bin Anfänger.
Die Linsk stehen in 2 unterschiedlichen Containern, die Links in dem einen Container sollen einen Rollover-Effekt haben, die Links in dem anderen Container nicht.
Da 2 unterschiedliche Container vorliegen, ist doch eigentlich schon ein Selektor gegeben oder nicht?
Ich habe jedenfalls keine Ahnung, wo man was in dem html-code schreiben muss, damit ich mein Problem lösen kann.
Ich hoffe auf eure Hifle!
-
Hallo,
Die Linsk stehen in 2 unterschiedlichen Containern, die Links in dem einen Container sollen einen Rollover-Effekt haben, die Links in dem anderen Container nicht.
Da 2 unterschiedliche Container vorliegen, ist doch eigentlich schon ein Selektor gegeben oder nicht?
Ja, man muss ihn nur noch verwenden, ...
Ich habe jedenfalls keine Ahnung, wo man was in dem html-code schreiben muss, damit ich mein Problem lösen kann.
...und zwar in deinen CSS-Definitionen, die du hoffentlich an zentraler Stelle (im Idealfall separate Datei) gesammelt und nicht per style Attribut in jedes Element geklatscht hast.
Welche Selektoren du brauchst, kannst (ohne Codebeispiel) nur du wissen.
vg ichbinich
--
Kleiner Tipp:
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...-
Vielen Dank für deine Antwort, aber ich bin echt nooooob - erklär mir das bitte etwas genauer.
Ja, man muss ihn nur noch verwenden, ...
Wie geht das denn?
...und zwar in deinen CSS-Definitionen, die du hoffentlich an zentraler Stelle (im Idealfall separate Datei) gesammelt und nicht per style Attribut in jedes Element geklatscht hast.
Leider ist zweiteres der Fall! ^^ Wieso ist ersteres besser und wie kann ich die Attribute in eine css-Datei auslagern und diese css-datei dann ansprechen?
Ich klatsch hier einfach mal meinen ganzen code rein, damit es für euch leichter ist mir konkret zu helfen:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<style type="text/css">body {
background-image: url();
}
#container {
height: 720px;
width: 1500px;
background-color: #FFF;
}
img {
}
#boxes {
height: 400px;
width: 150px;
position: absolute;
margin-top: 100px;
margin-right: 0px;
margin-left: 1300px;
margin-bottom: 10px;
left: -13px;
top: 211px;
}
#box1 {
height: 100px;
width: 100px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
position: fixed;
background-color: #C60000;
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 20px;
}
#container #boxes #box2 {
height: 100px;
width: 100px;
margin-right: 10px;
margin-left: 20px;
margin-top: 40px;
position: fixed;
}
box2 {
height: 100px;
width: 100px;
margin-top: 70px;
margin-right: 10px;
margin-left: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 24px;
color: #FFF;
background-color: #C60000;
}
.box2 {
background-color: #C60000;
}
#box2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
background-color: #C60000;
height: 100px;
width: 100px;
margin-top: 70px;
margin-right: 10px;
margin-left: 20px;
}
#box3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
background-color: #C60000;
height: 100px;
width: 100px;
margin-top: 30px;
margin-right: 10px;
margin-left: 20px;
position: fixed;
}
#container p img {
}
img {
}
#logo {
position: fixed;
}
#boxlinks {
height: 800px;
width: 50px;
float: right;
}
#boxlinks {
height: 479px;
width: 55px;
position: absolute;
top: 236px;
left: 183px;
}
#home {
height: 120px;
width: 120px;
position: absolute;
left: 238px;
top: 236px;
}
#topbox {
height: 26px;
width: 998px;
position: absolute;
left: 398px;
top: 269px;
background-color: #7B7D7B;
font-family: Arial, Helvetica, sans-serif;
}
#logo {
height: 100px;
width: 100px;
position: absolute;
left: 48px;
top: 46px;
}
#leftmenue {
height: 100px;
width: 139px;
position: absolute;
left: 240px;
top: 353px;
}
#leftmenue {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#centerbox {
height: 320px;
width: 874px;
position: absolute;
left: 398px;
top: 324px;
background-color: #FFFFFF;
}
#sign {
height: 18px;
width: 203px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
left: 990px;
top: 711px;
}
#welcome {
height: 155px;
width: 438px;
position: absolute;
left: 468px;
top: 413px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
visibility: inherit;
}
#container #welcome p {
}
.toptable {
position: absolute;
}
#tablecontent {
height: 62px;
width: 759px;
position: absolute;
left: 469px;
top: 252px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
}
a:hover {
color: #FFFFF;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#textfenster {
position: absolute;
left: 470px;
top: 326px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
width: 732px;
height: 385px;
line-height: normal;
}</style>
<style type="text/css">
a:hover {
color: #ffffff;
}
</style>
</head><body>
<div id="welcome">
<p>Willkommen!</p>
<p>Welcome!</p>
<p>Bienvenido! </p>
</div>
<p> </p>
<div id="container">
<div id="logo"><img src="logo.png" width="700" height="258" /></div>
<div id="boxlinks"><img src="boxlinks.png" width="50" height="467" /></div>
<div id="topbox"></div>
<p> </p>
<p> </p>
<div id="boxes">
<p><img src="box1.png" width="110" height="118" /></p>
<p><img src="box2.png" width="110" height="115" /></p>
<p><img src="box3.png" width="110" height="115" /></p>
</div>
<div id="home"><a href="index.html" target="_self"><img src="bhome.png" width="150" height="65" /></a></div>
<div id="leftmenue">
<table width="134" border="0" cellspacing="5">
<tr>
<td>360° Panroama View</td>
</tr>
<tr>
<td>Bildergalerie</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Loggia am Stadthaus</td>
</tr>
<tr>
<td>Heinrich-Lübcke-Ufer</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Japanische Botschaft</td>
</tr>
<tr>
<td>Metro Leverkusen</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Bonnox</td>
</tr>
<tr>
<td>Basecamp</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a href="impressum.html" target="_self">Impressum</a></td>
</tr>
</table>
</div>
<div id="centerbox"><img src="centerbox.png" width="874" height="379" /></div>
<div id="sign">2013©Marcel Maurice Vega Valenciano</div>
<div id="tablecontent">
<table width="733" border="0" cellspacing="20">
<tr>
<td height="20"><div align="center"><a href="profil.hmtl" target="_self">Profil</a></div></td>
<td><div align="center"><a href="leistungen.html" target="_self">Leistungen</a></div></td>
<td><div align="center"><a href="projekte.html" target="_self">Projekte</a></div></td>
<td><div align="center"><a href="referenzen.html" target="_self">Referenzen</a></div></td>
<td><div align="center"><a href="kontakt.html" target="_self">Kontakt</a></div></td>
</tr>
</table>
</div>
<div id="textfenster">
<p> </p>
<p><strong>Willkommen auf unserer Website<br />
<br />
<br />
</strong>Hier informieren wir Sie über unser Leistungsspektrum und aktuelle Projekte.<br />
<br />
<strong>Qualiät, Zuverlässigkeit und Transparenz</strong> - das sind unsere Markenzeichen.<br />
<br />
Wir haben uns schon in vielen anspruchsvollen Prestigeobjekten bewährt und stehen für Planungssicherheit und Kompetenz.<br />
<br />
Gerne realieren wir auch Ihr Bauprojekt. Setzen Sie sich mit uns in Verbindung und wir werden Sie gerne beraten.<br />
<br />
Ihr Andreas Henkel</p>
</div>
</div></body>
</html>Im Endeffekt geht es darum, das alle Links in #leftmenue schwarz bleiben sollen. Alle anderen Links sollen einen Rollover-Effekt haben und sich weiss färben.
Schon mal danke für eure Hilfe!
-
Hoi!
Jung, Jung, Jung... Du hast doch schon alles. Auch schon angewendet. Siehe Matthias' Posting.
--
Signaturen sind bloed.-
Hoi!
Jung, Jung, Jung... Du hast doch schon alles. Auch schon angewendet. Siehe Matthias' Posting.
Ach echt? Das Problem besteht aber nach wie vor und ich habe keine Ahnung wie ich es behebe. =/
-
Moin!
Ach echt? Das Problem besteht aber nach wie vor und ich habe keine Ahnung wie ich es behebe. =/
Oeh. OK. Ich habs Dir mal rausgepickt:
nav a {
/* nur(!) zusätzliche oder abweichende Eigenschaften für Links
innerhalb von nav-Elementen */
}[/code]»»
Du hast kein nav aber laut Deinen Aussagen #leftmenue. #leftmenue a spricht also Deine Links an. Mit den dynamischen Pseudoklassen (die von Matthias' verlinkte Seite geht drauf ein) kannst Du das Aussehen der Links je nach Status aendern. Du suchst scheinbar :hover. Und schon komme ich wieder zurueck auf Matthias' verlinkte Ressource: http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/hover,_active,_focus
--
Signaturen sind bloed.
-
-
-
-
-
Om nah hoo pez nyeetz, Maze55!
Danke für die schnelle Antwort, aber leider bringt mich deine Antwort nicht wirklich weiter: wie gesagt, ich bin Anfänger.
Naja, dann solltest du das von mir verlinkte aufmerksam lesen, z.B. Nachfahrenselektor. Allerdings ist es für den Anfang wirklich nicht ganz einfach.
Die Linsk stehen in 2 unterschiedlichen Containern, die Links in dem einen Container sollen einen Rollover-Effekt haben, die Links in dem anderen Container nicht.
Da 2 unterschiedliche Container vorliegen, ist doch eigentlich schon ein Selektor gegeben oder nicht?Ja, wenn beispielsweise diese Container unterschiedlich Elemente sind oder verschiedenen Klassen angehören. Vielleicht enthält ein Container die Navigation (siehe selfblog) und der andere den tatsächlichen Inhalt. (siehe bald selfblog)
Ich habe jedenfalls keine Ahnung, wo man was in dem html-code schreiben muss, damit ich mein Problem lösen kann.
a { /* Eigenschaften für alle Links */ } nav a { /* nur(!) zusätzliche oder abweichende Eigenschaften für Links innerhalb von nav-Elementen */ }Welcher Selektor geeignet ist, hängt von deinem HTML ab.
Matthias
-
Hi!
Da schreibt man sich nen Wolf und der Mann hat schon komplettes CSS.
a {
/* Eigenschaften für alle Links */
}nav a {
/* nur(!) zusätzliche oder abweichende Eigenschaften für Links
innerhalb von nav-Elementen */
}Ich glaube genau das war was er gesucht hat. Wundert mich, da er in seinem CSS schon Nachfahren anspricht. Da fehlte wohl nur der Transfer von #container #boxes #box2 zu #container a... -- Signaturen sind bloed.
-
-
Moin!
Danke für die schnelle Antwort, aber leider bringt mich deine Antwort nicht wirklich weiter: wie gesagt, ich bin Anfänger.
Das is ja kein Hinderungsgrund. Matthias hat Dir ja nur ne Richtung vorgegeben. Wo Du da einsteigst bleibt Dir und deinem Wissensstand ueberlassen. Steht aber im Grunde alles da, was man wissen muss. (s.u.)
Die Linsk stehen in 2 unterschiedlichen Containern, die Links in dem einen Container sollen einen Rollover-Effekt haben, die Links in dem anderen Container nicht.
Na das is doch super. Klingt recht eindeutig. Jetzt musst Du nur noch die beiden Container voneinander unterscheiden koennen.
Da 2 unterschiedliche Container vorliegen, ist doch eigentlich schon ein Selektor gegeben oder nicht?
Theoretisch koenntest Du damit schon einen Selektor bestimmen. Je nachdem wie eindeutig die einzelnen Elemente nun sind geht das mehr oder weniger gut und Browseruebergreifend mit Kombinatoren und Pseudoklassen. Weitere Details lieferst Du ja nicht.
Kannst Du die beiden Container irgendwie eindeutig identifizieren? Ist einer ein div der andere ein nav, article, ...? Was sind das fuer Container? Haben sie evtl. neben ihrem Typ (Typ-Selektor - vielleicht is eines ne Navigation das andere Inhalt) irgendwelche IDs (ID-Selektoren), Klassen (Klassenselektoren) oder Attribute (Attribut-Selektoren - vielleicht steht in einem was auf deutsch im anderen auf englisch)?
HTML ist eine Sprache mit der man die Struktur eines Dokuments beschreibt. In den allermeisten Faellen reicht also eine vernuenftige Auszeichnung aus, um einen ordentlichen Selektor hinzubekommen. Wenn Du also genau eine Navigation hast, dann landet die z.B. in einem Nav-Element und ist mit nav eindeutig ansprechbar. Deren Inhalte sind dann entsprechend Der Seite von Matthias' Link natuerlich ebenfalls eindeutig ansprechbar.
Ich habe jedenfalls keine Ahnung, wo man was in dem html-code schreiben muss, damit ich mein Problem lösen kann.
In den HTML Code am Besten gar nicht, sondern in eine eigene CSS-Datei.
--
Signaturen sind bloed.
-
-
