Eigen website

css eigenschappen voor a tags - opgelost

Gestart door ciboss op 19 mar 2010, 15:02 18 berichten 8.633 keer gelezen
ciboss Startte dit onderwerp 19 mar 2010, 15:02 Brugge 25 berichten
Voor een nieuwe website heb ik via Dreamweaver een menu opgemaakt met SpryMenuVertical.
Ik zou nu graag de achtergrondkleur van het menu-item dat actief open is willen veranderen, zodat de bezoeker duidelijk weet op welke pagina hij of zij beland is.
Als ik via CSS de tags a:active een andere kleur geef, dan verdwijnt die toch als ik de muis over de andere items beweeg , omdat ik ook aan a:hover een andere kleur heb toegekend.
Is er een css-oplossing voor die dualiteit of moet ik via behaviors werken?

Afbeelding

Laatst gewijzigd door ciboss op 03 apr 2010, 13:17, 1 keer totaal gewijzigd.

PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 19 mar 2010, 15:54 Limburg > Genk 248 berichten
Hey,

Dit gaat trouwens ook (meerdere attributen gebruiken):

a:hover
a:visited
a:visited:hover

De eerste is als je met de muis erover gaat. De tweedde is als je de website al eens bezocht hebt. (Standaard wordt de link dan paars om aan te geven dat je die al bezocht hebt. Maar je kan die kleur dus veranderen.)

En visited:hover wil zeggen dat je ook nog een speciale kleur kunt geven aan linken die je al bezocht hebt, en waar je dan met de muis over gaat. ;)

Active wil in dit geval zeggen dat je erop geklikt hebt. Maar zodra je ergens anders op klikt, of iets anders doet, is die niet meer active. Dus opzich kan je niet werken met die attributen.

Aanduiden welke pagina geopend is, moet je doen met PHP of JavaScript (als je het dynamisch wilt maken).

Ofwel gewoon via CSS een class maken voor het currentmenuitem.

Code: Selecteer alles

a.currentmenuitem {
color: red;
}

a.currentmenuitem:visited {
color: red;
}

a.currentmenuitem:hover {
color: red;
}

a.currentmenuitem:visited:hover {
color: red;
}

a.currentmenuitem:visited {
color: red;
}
En dan in de HTML code dit doen:

<a href="pagina.html" class="currentmenuitem"> Titel </a>

Alle andere linken in het menu moet je dan via CSS een andere kleur geven.

Bijvoorbeeld:

Code: Selecteer alles

a.menuitem {
color: blue;
}

a.menuitem:visited {
color: blue;
}

a.menuitem:hover {
color: blue;
}

a.menuitem:visited:hover {
color: blue;
}

a.menuitem:visited {
color: blue;
}
En in de HTML kan je dan dit doen:

Code: Selecteer alles

<a href="pagina1.html" class="menuitem"> Titel </a>
<a href="pagina2.html" class="currentmenuitem"> Titel </a>
<a href="pagina3.html" class="menuitem"> Titel </a>
<a href="pagina4.html" class="menuitem"> Titel </a>
<a href="pagina5.html" class="menuitem"> Titel </a>
Waarbij pagina2 dus de huidige pagina is. Die heeft dan een andere opmaak.

Deze methode is relatief simpel, alleen moet je dan handmatig op elke HTML pagina die classes gaan toevoegen. Via PHP moet je dan wel gaan werken via de $_GET variabele om een dynamische pagina te maken. Dat is ook vrij veel werk om daar nu nog aan te beginnen. ;)

Mvg,
Dave
.NET en Java Programmeur
ultddave 19 mar 2010, 15:59 Limburg > Genk 248 berichten
Als je linken hebt die naar stukken op dezelfde pagina wijzen (dus zonder dat de pagina herladen wordt als je op de link klikt.) Dan zal je waarschijnlijk moeten werken met JavaScript. ;)

Mvg,
Dave
.NET en Java Programmeur
ciboss Startte dit onderwerp 19 mar 2010, 18:36 Brugge 25 berichten
Hallo Dave,

Bedankt voor de oplossing.
Het is wat ingewikkeld gezien ik met een Spry-css zit met nog andere classes etc. Ik moet dat nog eens grondig bekijken.
Ik zal pas maandag kunnen verder werken.
Prettig weekend.

Pol
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 20 mar 2010, 14:47 Limburg > Genk 248 berichten
Ah ok.

CSS heeft trouwens 3 prioriteitsniveau's als je dat nog niet wist. ;)

Laagste prioriteit: External = CSS importeren vanuit extern .css bestand

Voorbeeld:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

Middelste prioriteit: Document Level = CSS code die in de header van het document staat.

Voorbeeld:

<head>
<style type="text/css">
a {
color: red;
}
</style>
</head>

Hoogste prioriteit: Inline = CSS code in de HTML tags.

Voorbeeld:

<a href="#" style="color: green;" > link </a>

********************************

Je kan dus bijvoorbeeld op document level zeggen dat alle linken rood moeten zijn. Maar je kan dan inline zeggen bij een bepaalde link, dat die blauw moet zijn. En inline heeft prioriteit op document level CSS. ;)

Dat sprymenu gebruikt een externe CSS file. Dus als je jouw code op document level plaatst, heeft die prioriteit daarop.

Je moet dus inderdaad uitkijken of je geen CSS code uit de file moet gebruiken en in die classes stoppen op document level. ;)

PS: Het is aangeraden om external CSS te gebruiken. Inline CSS is slecht omdat het niet overzichtelijk is. En tegenwoordig streeft men naar het feit om layout (CSS) en HTML gescheiden te houden. Vandaar dat tags zoals <b> en <u> niet meer gebruikt mogen worden in XHTML. ;)

Mvg,
Dave
ciboss Startte dit onderwerp 20 mar 2010, 15:41 Brugge 25 berichten
ik kon het niet laten om toch even te kijken op dit forum ... en ja hoor, Dave is weer actief !
Van die drie prioriteitsniveau's wist ik wel. Ik gebruik bijna altijd een externe stylesheet.css, nu ook in deze website met een SpryMenu. Maar die SpryMenu heeft ook een externe stylesheet.css - Wat is dan de prioriteit:

dit is de header van mijn index.html

Code: Selecteer alles

<link href="opmaakbruynbroeck.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
Trouwens, in die SpryAssets/SpryMenuBarVertical.css heb ik ook een vraag

Code: Selecteer alles

ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	padding: 0.5em 0.75em;
	color: #FFF;
	text-decoration: none;
	background-color: #77867F;
}
/* Menu items that have mouse over or focus have a white background and green text */
ul.MenuBarVertical a.menuitem:hover, ul.MenuBarVertical a.menuitem:active, 
{
	background-color: #FFF;
	color: #71B218;
	font-weight:500;
	
}
  ul.MenuBarVertical a.currentmenuitem:active, ul.MenuBarVertical a.currentmenuitem:hover,
{
	background-color: #FFF;
	color: #71B218;
	font-weight:700;
	
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and green text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible, ul.MenuBarVertical a.currentmenuitem:active
{
	background-color: #FFF;
	color: #71B218;
	font-weight:700;
}
en dat is een deel van mijn html-code, gemaakt volgens uw richtlijnen, maar het currentmenuitem blijft niet WIT (#FFF) als ik met de muis beweeg (hover) op een andere plaats op die actieve pagina.

Code: Selecteer alles

<div id="menu">
   		  <ul id="MenuBar1" class="MenuBarVertical">
      			<li><a href="index.html" class="currentmenuitem">home</a></li>
      			<li><a href="nieuwbouw.html" class="menuitem">nieuwbouw</a> </li>
      			<li><a href="#" class="menuitem">renovatie/verbouwing</a></li>
      			<li><a href="#" class="menuitem">totaalprojecten</a> </li>
      			<li><a href="#" class="menuitem">interieurinrichting</a></li>
Heb je hiermee genoeg informatie om het eens uit te zoeken?
Ik kan je anders de volledige site eens privé doormailen als je dat wilt.

cu
Pol
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 20 mar 2010, 16:07 Limburg > Genk 248 berichten
Als je deze code even backupped:

Code: Selecteer alles

ul.MenuBarVertical a 
{ 
   display: block; 
   cursor: pointer; 
   padding: 0.5em 0.75em; 
   color: #FFF; 
   text-decoration: none; 
   background-color: #77867F; 
} 
/* Menu items that have mouse over or focus have a white background and green text */ 
ul.MenuBarVertical a.menuitem:hover, ul.MenuBarVertical a.menuitem:active, 
{ 
   background-color: #FFF; 
   color: #71B218; 
   font-weight:500; 
    
} 
  ul.MenuBarVertical a.currentmenuitem:active, ul.MenuBarVertical a.currentmenuitem:hover, 
{ 
   background-color: #FFF; 
   color: #71B218; 
   font-weight:700; 
    
} 
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and green text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible, ul.MenuBarVertical a.currentmenuitem:active 
{ 
   background-color: #FFF; 
   color: #71B218; 
   font-weight:700; 
}
En vervangt door deze code;

Code: Selecteer alles


ul.MenuBarVertical {
	
}

a.menuitem, a.menuitem:active {
   display: block; 
   cursor: pointer; 
   padding: 0.5em 0.75em; 
   text-decoration: none; 
   background-color: #77867F; 
   color: #FFFFFF; 
}

a.menuitem:hover, a.menuitem:visited:hover 
{ 
   background-color: #FFFFFF; 
   color: #71B218; 
   font-weight:500;     
} 

a.currentmenuitem, a.currentmenuitem:active, a.currentmenuitem:visited {
   display: block; 
   cursor: pointer; 
   padding: 0.5em 0.75em; 
   text-decoration: none; 
   background-color: #FFFFFF; 
   color: #71B218; 
}

a.currentmenuitem:hover, a.currentmenuitem:visited:hover
{ 
   background-color: #FFFFFF; 
   color: #71B218; 
   font-weight:700; 
}
Dan zou dat moeten werken.

Hier zie je een voorbeeld van het menu:
http://www.latemar.be/admin/temp/test1.html

(PS: Ik heb testpagina's voorzien voor Home en Nieuwbouw om je te laten zien hoe het werkt.)

In verband met die prioriteit. normaal gezien degene die het laatst geimporteerd wordt. Die zal de hoogste prioriteit hebben.

Ik zie dat je vaak gebruikt maakt van die a:active . Maar die heb je bijna nooit nodig. Als je die weglaat uit mijn CSS code, zal het resultaat hetzelfde zijn. Die staat daar dus eigenlijk voor niets tussen. ;)

"active" wil enkel zeggen dat er op geklikt wordt. Niet dat die pagina geopend is. ;)

PS: Ik zou ook font-weight: bold; gebruiken ipv effectief een getal in te geven. Dat is iets duidelijker. ;)

Vet gedrukt:
font-weight: bold;
Normaal gedrukt:
font-weight: normal;

Maar font-weight: normal; is standaard en moet je dus niet expliciet in de code zetten.

Dus:

Code: Selecteer alles

a.menuitem:hover, a.menuitem:visited:hover 
{ 
   background-color: #FFFFFF; 
   color: #71B218;    
} 

a.currentmenuitem:hover, a.currentmenuitem:visited:hover
{ 
   background-color: #FFFFFF; 
   color: #71B218; 
   font-weight: bold; 
}
Bij de eerste is de font-weight: 500; weggehaald. En bij de tweedde is de "700" vervangen door bold.

Mvg,
Dave

Laatst gewijzigd door ultddave op 20 mar 2010, 16:29, 1 keer totaal gewijzigd.

ciboss Startte dit onderwerp 20 mar 2010, 16:28 Brugge 25 berichten
Bedankt voor de oplossing Dave.
Ik heb alles overgebracht in de Spry.css en alles werkt perfect !

Proficiat en nog eens succes met de examens ... maar ik ben er zeker van dat ook dat geen enkel probleem zal zijn !

tot een volgende keer !
Pol
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 22 mar 2010, 14:37 Limburg > Genk 248 berichten
Graag gedaan en bedankt. Eerste examen (Wiskundige Technieken in de Informatica en ICT) heb ik vandaag gehad. Ben normaal gezien geslaagd. ;)

Volgende examen heb ik donderdag. Dat is Database Technologie (Programmeren in SQL).

Nog succes met je website. Als er nog problemen zouden zijn, dan hoor ik het wel. ;)

Mvg,
Dave
ciboss Startte dit onderwerp 22 mar 2010, 16:07 Brugge 25 berichten
Hey Dave,
Blij te lezen dat je 1e examen goed gelukt is. Ik zal je niet verder storen ... maar heb nog één vraagje:

in de lytebox.js (light versie van lightbox) heb ik de settings gevonden om next en prev knoppen te wijzigen in "vorige" en "verdere" onder de foto.
Maar ik zou die navigatietekst nu willen centreren maar begrijp de gebruikte code niet (php misschien?). Ik heb het voorlopig opgelost met een aantal spaties ( &nbsp;)
zie hieronder

Code: Selecteer alles

if (this.navType == 2 || this.isLyteframe) {
		object = this.doc.getElementById('lbNavDisplay');
		object.innerHTML = '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; vorige</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; vorige</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">volgende &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">volgende &raquo;</a>';
		object.style.display = 'none';
	}
Zie jij daar een oplossing voor? Dat kan wachten hoor ... eerst wat blokken voor donderdag !

groeten
Pol

P.S. ik stuur je de volledige url per privé-bericht toe.
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 22 mar 2010, 18:43 Limburg > Genk 248 berichten
Probeer dit eens:

Code: Selecteer alles

   if (this.navType == 2 || this.isLyteframe) { 
      object = this.doc.getElementById('lbNavDisplay'); 
      object.innerHTML = '<p style="textalign: center;"><span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; vorige</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; vorige</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">volgende &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">volgende &raquo;</a></p>'; 
      object.style.display = 'none'; 
   }
De object.innerHTML functie laat de ontwikkelaar toe om in JavaScript HTML code tussen tags toe te voegen.

Simpel voorbeeld:

Code: Selecteer alles

object = this.doc.getElementById('tekst'); 
object.innerHTML = 'Hey allemaal';
Met dit in de HTML code: <p id="tekst"> </p>.

Na het uitvoeren van de code krijg je dus:

<p id="tekst">Hey allemaal</p>

******************

Ik denk dus dat als je die &nbsp; vervangt door:
<p style="textalign: center;">
Dat hij het wel zal centreren normaal gezien.

En dan uiteraard </p> doen op het einde.

Aangezien de link "Terug" rechts staat. En er ook info links staat, lijkt het me logisch dat je ook iets kan centreren zonder die &nbsp; ;).

Maar ik ben niet zeker of het zo gaat. Ik heb het nog nooit echt geprobeerd. ;)

Mvg,
Dave
ciboss Startte dit onderwerp 22 mar 2010, 19:09 Brugge 25 berichten
Dave,

ik heb dit efkens geprobeerd, maar zonder resultaat: de navigatie vorige/volgende verschijnt links naast de info over de foto's.
Geen probleem, ik doe wel verder met die spaties.

blokwel maar ook niet vergeten te slapen ...
groeten
Pol
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 22 mar 2010, 19:25 Limburg > Genk 248 berichten
Ah maar ik blok niet de ganse dag hoor. ;) Meestal van 12u -> 17u. En dan herhaal ik dat 's avonds meestal nog een uurtje.

Probeer deze anders eens:

Code: Selecteer alles

 if (this.navType == 2 || this.isLyteframe) { 
      object = this.doc.getElementById('lbNavDisplay'); 
      object.innerHTML = '<p style="margin-left: 50px; padding-left: 50px;"><span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; vorige</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; vorige</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">volgende &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">volgende &raquo;</a></p>'; 
      object.style.display = 'none'; 
   }
Of:

Code: Selecteer alles

 if (this.navType == 2 || this.isLyteframe) { 
      object = this.doc.getElementById('lbNavDisplay'); 
      object.innerHTML = '<p style="left: 100px;"><span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; vorige</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; vorige</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">volgende &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">volgende &raquo;</a></p>'; 
      object.style.display = 'none'; 
   }
Die 2 zullen normaal gezien allebei aan de linkerkant spatie laten. Ik heb ingesteld dat ze 100px spatie laten. Gewoon voor te testen.

Als dat niet zou werken, zal ik zelf eens testen op mijn server. ;)

Ik heb nog nooit iets geprobeerd te veranderen aan het lightbox venster. Maar normaal werkt dat hetzelfde als gewone HTML code. Maar die HTML code wordt dan enkel gegenereerd vanuit JavaScript. ;)

EDIT: Ik heb net even gekeken bij Lightbox (niet lytebox). En daar zet men in de CSS code gewoon float: left; en float: right; voor de knoppen links of rechts te plaatsen.

Als lytebox hetzelfde zou doen. Zou het normaal gezien opgelost moeten zijn, als je die float: left; verandert naar:
// float: left;

Door die 2x "/" ervoor staat die als "commentaar" en wordt die niet uitgevoerd. En kan je hem - indien nodig - later terug zetten door gewoon die 2 slashes weg te vegen.

Mvg,
Dave
ciboss Startte dit onderwerp 23 mar 2010, 11:14 Brugge 25 berichten
Dave,

ik heb de drie opties bekeken en getest: met <p style="margin-left: 260px; padding-left: 0px;" heb ik het beste resultaat. (als ik die padding op 50px breng heb ik een probleem met de << ....>> tekens) .
De wijziging in de lytebox.css door float:left en float:right uit te schakelen geeft ook geen oplossing.

Ik laat het voorlopig op die margin-left: 260px. Eigenaardig dat de textalign:center; niet werkt.

cu
Pol
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
ultddave 23 mar 2010, 13:59 Limburg > Genk 248 berichten
Ok. ;)

Nu opzich zal die text-align zoiezo niet werken, achteraf gezien. Tenzij je dit doet:

"text-align: center; width: 500px;"

bijvoorbeeld. Dan zal hij de tekst in het midden van die 500px zetten.

Maar als de <p> maar zo breed is als de tekst, dan mag je die links of rechts zetten of centreren, dat gaat niet veel uithalen.

De <p> tag zelf in het midden zetten, gaat normaal gezien via:
float: none;

Maar waarschijnlijk zal de CSS van de lytebox die toch op float: left; zetten vermoed ik.

Nu opzich is het werken met de margin al iets handiger dan met de &nbsp;

Mvg,
Dave