In der Navigation Hintergrundfarbe ändern - CSS? - Adobe GoLive - HilfDirSelbst.ch

[Gast] Foren Archiv Adobe GoLive In der Navigation Hintergrundfarbe ändern - CSS?

Archiv - Archivierte Foren

Themen

Beiträge

Moderatoren

Letzter Beitrag

Adobe GoLive

6161

30249

Dirk Levy

28. Mai 2021, 13:02

Dirk Levy

In der Navigation Hintergrundfarbe ändern - CSS?

enomis

Beiträge gesamt: 12

24. Jan 2006, 14:22
Beitrag # 1 von 7
Bewertung:
(4088 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo, ich habe keine Ahnung, wie ich das so oft gesehene Beispiel umsetzen muss.

Idee: Hauptnavigation ist mit normalem Text gesetzt (keine Bilder!), Textstil und -farbe mit CSS definiert. Rollover auf dem Text funktioniert wunderbar! Nun möchte ich aber gerne, dass die Hintergrundfarbe als Balken auch jeweils ändert, je nach dem wo der Mauscursor steht.
Mit CSS kann ich Hintergrundfarbe definieren, leider aber nur in der Höhe und Breite vom jeweiligen Text. Der Effekt sollte aber ein Balken immer in der gleichen Breite sein, unabhängig vom Text. Versteht mich noch jemand?

Beispiel wie die Navigation von:
http://www.projectseven.com/viewer/index.asp?demo=pmm

Ist es möglich, so etwas oder ähnlich im Golive direkt zu erfassen? Text sollte CSS sein und kein Bild.
Ich bin froh um jede Antwort...

In der Navigation Hintergrundfarbe ändern - CSS?

SabineP

Beiträge gesamt: 7586

24. Jan 2006, 14:43
Beitrag # 2 von 7
Beitrag ID: #206811
Bewertung:
(4082 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Enomis,

dazu gibt´s eine Anleitung bei Projectseven:

http://www.projectseven.com/.../uberlinks/index.htm

Gruß Sabine

als Antwort auf: [#206802]

In der Navigation Hintergrundfarbe ändern - CSS?

randy

Beiträge gesamt: 436

24. Jan 2006, 14:44
Beitrag # 3 von 7
Beitrag ID: #206812
Bewertung:
(4081 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

ich gehe mal davon aus, dass dort ein hintergrundbild geändert wird

Code

#p7PMnav li { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	background-image:  url(img/p7PM_plum.jpg); 
	border-bottom: 1px solid #333333; 
	border-left: 1px solid #333333; 
	background-color: #C3AAAE; 
} 
#p7PMnav ul { 
	z-index: 10000; 
} 
#p7PMnav a { 
	display: block; 
	text-decoration: none; 
	background-color: transparent; 
	padding: 4px 12px 4px 10px; 
	color: #333333; 
	border-top: 1px solid #E0D1D3; 
	border-right: 1px solid #333333; 
	border-bottom: 0; 
	border-left: 1px solid #E0D1D3; 
	line-height:1; 
} 
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus, 
#p7PMnav .p7PMon, #p7PMnav .p7PMon:hover,  
#p7PMnav .p7PMon:active, #p7PMnav .p7PMtrg:hover { 
	color: #FFFFFF; 
	background-color: #B9B9B9; 
	letter-spacing: 0.01px; 
	border-top: 1px solid #CCCCCC; 
	border-right: 1px solid #333333; 
	border-left: 1px solid #CCCCCC; 
	background-image: url(img/p7PM_plumover.jpg); 
	background-repeat: repeat-x; 
}

schau dir mal die bilder plumover und plum an

als Antwort auf: [#206802]

In der Navigation Hintergrundfarbe ändern - CSS?

enomis

Beiträge gesamt: 12

24. Jan 2006, 15:29
Beitrag # 4 von 7
Beitrag ID: #206825
Bewertung:
(4071 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

uups, da komm ich nicht so weit... Ich bin im Quellcode nicht so der Hirsch und bei dem Beschrieb weiss ich nie recht, wo genau ich nun was eingeben muss CSS-Editor oder Code. Gibts denn im GoLive nicht ein nettes Fenster oder Pallette zu diesem Thema?

als Antwort auf: [#206811]

In der Navigation Hintergrundfarbe ändern - CSS?

enomis

Beiträge gesamt: 12

24. Jan 2006, 15:44
Beitrag # 5 von 7
Beitrag ID: #206832
Bewertung:
(4067 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

aus dieser codeauflistung werde ich leider auch nicht schlau, bei mir funktioniert dies nicht ??? definiere ich ein hintergrundbild, läuft dies auch nur gerade so lang wie der jeweilige textzeichenlänge?

als Antwort auf: [#206812]

In der Navigation Hintergrundfarbe ändern - CSS?

randy

Beiträge gesamt: 436

24. Jan 2006, 16:17
Beitrag # 6 von 7
Beitrag ID: #206840
Bewertung:
(4061 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Okay, ihr macht 'ne Liste mit ul

Code

<ul> 
<li>Page One</li> 
<li>Page Two</li> 
<li>Page Three</li> 
</ul>

funzt in GoLive per nicht "nummerierte Liste" (Button rechts neben der 1, sprich der Button mit dem Punkt)

Ihr ladet die Bilder von der Tutorial Seite oder baut euch selber welche (im Tutorial 300x60 px)

Ihr drückt in der Layout Ansicht in GoLive auf CSS (Treppenstufen rechts oben), wechselt im CSS-Inspektor auf Quelle und fügt folgenden Text ein

Code

#navlist { 
position: absolute; 
left: 36px; 
top: 86px; 
width: 186px; 
} 
#navlist ul { 
margin: 0; /*removes indent IE and Opera*/ 
padding: 0; /*removes indent Mozilla and NN7*/ 
list-style-type: none; /*turns off display of bullet*/ 
font-size: .9em; 
} 
#navlist li { 
margin: 0; 
} 
#navlist a { 
display: block; 
padding: 2px 2px 2px 24px; 
border: 1px solid; 
border-color: #ddd #000 #000 #ddd; 
background-color: #999999; 
background-image:  url(assets/l1_down.jpg); 
background-repeat: no-repeat; 
background-position: 0% 50%; 
} 
#navlist a:link, #navlist a:visited { 
color: #EEE; 
text-decoration: none; 
} 
 
#navlist a:hover, #navlist a:active { 
background-color: #9F6F9F; 
background-image:  url(assets/l1_over.jpg); 
background-repeat: no-repeat; 
background-position: 0% 50%; 
color: #2D1E2D; 
}

danach wird der CSS-Editor geschlossen
Im Layout Modus vergebt Ihr Eure Links per Inspektor
Nächster Schritt: wechselt in den Quelltext
da steht irgendwo folgendes, es kann bei Euch anders aussehen, je nachdem wo das Menu steht.

Code

<body> 
		<ul> 
<li>Page One</li> 
<li>Page Two</li> 
<li>Page Three</li> 
</ul> 
	</body>

vor dem

Code

<ul>

schreibt ihr folgendes

Code

<div id="navlist">

hinter dem

Code

</ul>

dieses

Code

</div>

wenn Ihr das habt, dann könnt Ihr den Rest machen

als Antwort auf: [#206832]

In der Navigation Hintergrundfarbe ändern - CSS?

randy

Beiträge gesamt: 436

24. Jan 2006, 17:06
Beitrag # 7 von 7
Beitrag ID: #206847
Bewertung:
(4056 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

was ich noch vergessen hatte, ihr müßt die pfade im css-editor zu den bilder anpassen (letzter reiter)
aktuell

Code

assets/l1_down.jpg

als Antwort auf: [#206840]

Aktuell

PDF / Print

callas software veröffentlicht pdfaPilot 12

| 28.11.2022

Weitere Events

Neuste Foreneinträge

Indesign-Umstellung fï¿½r arabisch

Fotos: Ordner mit mehreren Alben verï¿½ffentlichen

Lightroom: Katalog mit mehreren Alben verï¿½ffentlichen

In PDF Formular das eingetragene Datum um 6 oder 12 Monate spï¿½ter berechnen

Indesign 2022 Versionen der Abteilung sukzessive nicht mehr startbar.

Suche Script fï¿½r Musterfarbe anwenden

mount SMB-Share (Azure/Linux Ubuntu) von Windows 11

Elemente lï¿½schen geht nicht

Browser fï¿½r G4 PowerMac mit Mac OS10.5

Adobe Fonts Service: "Hinzugefï¿½gte Schriften", eine neue Option, die Verwirrung stiften kann

Weitere Stellenangebote