[GastForen Programme Web/Internet Adobe Dreamweaver CSS-Stil-Änderung bei mouseover

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web/Internet - Webdesign, eForms
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS-Stil-Änderung bei mouseover

matmax
Beiträge gesamt: 618

12. Nov 2005, 13:17
Beitrag # 1 von 10
Bewertung:
(3871 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
CSS-Stil-Änderung bei mouseover ist das möglich?
Ich weiß es gänge ganz einfach: Das ganze mit Bildern machen und dann bei Rollover Bildertausch. Aber ich würde es gerne mit CSS-Stilen lösen. Dann könnte ich ganz einfach jederzeit die Farben ändern.

Es sieht so aus:
Ich habe mehrere, unterschiedlich farbige, horizontale Streifen. Am Anfang der Streifen steht weißer Text (sind mehrere CSS-Stile). Jetzt will ich, dass bei mouseover der Streifen die Farbe und evtl. auch Größe (im CSS-Stil ja einfach zu lösen) ändert. Jeder Streifen eine andere Farbe (das sit wohl das komplizierte, das ander habe ich schon geschafft).

Geht es so?: Den Streifen samt Text markieren Null-Hyperlink machen und im Verhaltenfenster "onMouseOver" anwählen und dann im rechten Fenster den CSS-Stil auswählen/eingeben.
Aber was gebe ich da ein? Den Namen des CSS-Stils funktioniert nicht.
Beste Grüße! matmax

macOS 10.12 Adobe CC
X

CSS-Stil-Änderung bei mouseover

loethelm
  
Beiträge gesamt: 6028

12. Nov 2005, 13:20
Beitrag # 2 von 10
Beitrag ID: #195855
Bewertung:
(3865 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

rein mit css müsste es so gehen

.streifen1 a:hover
{
Anweisungen
}
.streifen2 a:hover
{
Anweisungen für Streifen2
}

Nun Streifen 1 die Klasse Streifen 1 zuweisen etc.

Dann auf den Streifen einen Null-Link legen.

Verhalten in DW sind immer JavaScript, nie CSS.


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#195853]

CSS-Stil-Änderung bei mouseover

matmax
Beiträge gesamt: 618

12. Nov 2005, 14:34
Beitrag # 3 von 10
Beitrag ID: #195859
Bewertung:
(3863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
was bedeutet:

Antwort auf: Klasse Streifen 1 zuweisen etc.


was muss ich da machen?

Und könntest du mir diesen Code nochmal im ganzen HTML-Code angeben?

Danke.
Viele Grüße, matmax
Beste Grüße! matmax

macOS 10.12 Adobe CC


als Antwort auf: [#195855]

CSS-Stil-Änderung bei mouseover

loethelm
  
Beiträge gesamt: 6028

12. Nov 2005, 14:58
Beitrag # 4 von 10
Beitrag ID: #195860
Bewertung:
(3862 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

meintest du sowas in der Art?
Code
<html> 
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
.streifen1
{
width: 20px;
background: green;
color: green;
}
.streifen1 a
{
background: green;
color: green;
}

.streifen1 a:hover
{
color:red;
background: red;
padding: 0 40px 0 0;
}

-->
</style>
</head>
<body>
<div class="streifen1"><a href="#">Testlink</a>
</div>
</body>
</html>



Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#195859]

CSS-Stil-Änderung bei mouseover

matmax
Beiträge gesamt: 618

12. Nov 2005, 16:12
Beitrag # 5 von 10
Beitrag ID: #195873
Bewertung:
(3860 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Genau so! Danke.
Der Wahnsinn. Ich habe es geschafft!! ich weiß zwar nicht genau WAS ich da tue, aber ich probiere rum und habe den Code so angepasst:
Code
<html>  
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
.streifen1 a
{
background: green;
color: white;
padding: 2 400px 2 2;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.streifen1 a:hover
{
color:white;
background: red;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

-->
</style>
</head>
<body>
<div class="streifen1"><a href="#">Erster Menüpunkt</a>
</div>
</body>
</html>


Fragen:
1 Kann ich Streifen1 nicht, so wie hier, weglassen?
2 Wie kriege ich einen zweiten Streifen in der nächsten Zeile hin?
(Nochmal das gleiche einfach drunter setzen funktioniert nicht, oder ich vergesse da etwas: evtl nochmals <style type="text/css"> schreiben? und unten dann einfach ein neuer div-Tag mit <div class="streifen2"><a href="#">Zweiter Menüpunkt</a> ???
Beste Grüße! matmax

macOS 10.12 Adobe CC


als Antwort auf: [#195860]
(Dieser Beitrag wurde von matmax am 12. Nov 2005, 16:20 geändert)

CSS-Stil-Änderung bei mouseover

loethelm
  
Beiträge gesamt: 6028

12. Nov 2005, 16:31
Beitrag # 6 von 10
Beitrag ID: #195878
Bewertung:
(3857 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

wenn jeder Streifen einen Link erhält, kannste das weglassen, ja.

Das gleiche drunter aber dem 2. Streifen-Stil einfach ein "margin-top: DeinWert" mitgeben und als neues div einfügen.


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#195873]

CSS-Stil-Änderung bei mouseover

matmax
Beiträge gesamt: 618

12. Nov 2005, 17:14
Beitrag # 7 von 10
Beitrag ID: #195881
Bewertung:
(3856 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!
Den neuen Streifen habe ich geschafft, aber ich bekomme die Abstandsgröße nicht hin. Egal was ich bei "margin-top" eingebe, er rührt sich nicht von der Stelle.
Und warum ist der zweite Streifen jetzt länger??

Code
<html>  
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
.streifen1 a
{
background: green;
color: white;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

.streifen1 a:hover
{
color:white;
background: red;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

.Zeilenabstand
{
margin-top: 100em;
}

.streifen2 a
{
background: green;
color: white;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

.streifen2 a:hover
{
color:white;
background: black;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="streifen1"><a href="#">Erster Menüpunkt</a>
</div>
<div class="streifen2"><a href="#">Zweiter Menüpunkt</a>
</div>
</body>
</html>


Und noch ein paar Fragen:
Du bist ja so nett mich gerade in die ersten Schritte mit CSS einzuführen. Jetzt frage ich mich natürlich ob das weiter Sinn macht, da ich noch ein bisschen 'was vorhabe mit der Seite. (die Streifen sollen immer mittig im Browserfenster plaziert sein. Die Streifen sollen mit einem Link auf ein neues Fenster, dass eine bestimmte Größe hat und an einer bestimmten Stelle aufgeht um Bilder durchklickbar zu zeigen oder die Bilder werden auf der gleichen Seite auf eine bestimmte Art und Weise gezeigt).
Ich weiß nicht wie lange es dauert und wie kompliziert es ist so etwas in CSS zu lernen. Reicht es, wenn ich mir da mal ein kleineres Buch zulege oder brauche ich gleich einen dicken Wälzer und 1 Monat Zeit? Oder gibt einen Dreamweaver ausreichende Werkzeuge an die Hand?
Beste Grüße! matmax

macOS 10.12 Adobe CC


als Antwort auf: [#195878]

CSS-Stil-Änderung bei mouseover

loethelm
  
Beiträge gesamt: 6028

12. Nov 2005, 17:35
Beitrag # 8 von 10
Beitrag ID: #195885
Bewertung:
(3853 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ok, jetzt weiß ich auch, was du vor hast. Du willst ein Menü bauen.
Das macht man besser anders.
Das Menü kommt in eine ungeordnete Liste.

Code
<html>  
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
li
{
display:block;
margin-top: 0.2em;

}

li a
{

background: green;
color: white;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

li a:hover
{

color:white;
background: red;
padding: 2 400px 2 2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}



-->
</style>
</head>
<body>
<ul>
<li><a href="#">1.Men&uuml;punkt</a></li>
<li><a href="#">2.Men&uuml;punkt</a></li>
</ul>

</body>
</html>


Einen kompletten Grundkurs in CSS bekommst du von mir hier bestimmt nicht;-)
Das würd n bisschen zu lange dauern.
Schau dir mal http://de.selfhtml.org an.
Da gibt's die Grundlagen zu CSS.
Google mal nach CSS-Tutorial, da gibt's auch n paar gute Quellen.
Am besten lernt man das, indem man es einfach mal ausprobiert
und zwischendurch immer mal wieder irgendwo nachschaut.

Wenn du dann konkrete Probleme hast, gibt's ja uns.

DW bietet für die Gestaltung per CSS fast nichts brauchbares.
Da kann man nur grundlegendes mit lösen.
Speziellere Sachen gehen viel schneller per Hand.


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#195881]

CSS-Stil-Änderung bei mouseover

matmax
Beiträge gesamt: 618

12. Nov 2005, 18:09
Beitrag # 9 von 10
Beitrag ID: #195887
Bewertung:
(3849 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Holla, okay. Was ist daran besser?
Ich will ja nur vier Streifen in einer Farbe und dann wieder drei Streifen in einer anderen Farbe (auch die Rollover-Farben sollen total variabel sein).
Mit dem vorangegangenen Code, klappt das jetzt ganz gut. Jetzt muss ich das ganze nur noch zentrieren (je nach Browserfenstergröße soll es möglichst immer in der Mitte sein) oder in eine Tabelle packen.
Bei selfhtml bin ich auch schon am gucken und so langsam blicke ich da auch durch. Man muss halt erst mal ein bisschen Kenntnis haben, damit man die Codes individuell umstellen kann/man weiß wo man was einsetzen muss.
Beste Grüße! matmax

macOS 10.12 Adobe CC


als Antwort auf: [#195885]

CSS-Stil-Änderung bei mouseover

loethelm
  
Beiträge gesamt: 6028

12. Nov 2005, 18:22
Beitrag # 10 von 10
Beitrag ID: #195890
Bewertung:
(3847 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,

weil ein Menü von der Logik her eine Liste ist.
Für verschiedene Farben mach das so:
Code
.menu1 li 
{
Anweisungen
}
.menu2 li
{
andere Farben
}

im HTML-Code dann so

<ul class="menu1">
<li>
</li>
</ul>
<ul class="menu2">
<li>
</li>
</ul>


Du kannst auch die ul-tags per css formatieren.

Probier halt mal rum.
Zum testen ist der Firefox übrigens ganz gut, da der standard-konform interpretiert.


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#195887]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
05.03.2021 - 30.04.2021

Digicomp Academy AG, Zürich oder virtuell
Freitag, 05. März 2021, 13.00 Uhr - Freitag, 30. Apr. 2021, 17.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: CHF 3'250.–
Dauer: 8.5 Tage - Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB

Neuste Foreneinträge


Abschnitt mit Absatzformat beginnen?

Trennungen suchen

Bug in Photo 1.9.x ?

Verwendung von Quark-Version ohne Support oder wie komme ich von Quark weg ;-)

Serien-Dateinamenänderung (mit Automator?) "nur die ersten 7 Schreibstellen"

Scriptphänomen alle 16 Steps

Fotobuch mit gleicher längster Bildseite

Schwarz überdruckt nicht

Von Quark nach Indesign konvertieren

Illustrator 2021 Stapelverarbeitung
medienjobs