login  Naam:   Wachtwoord: 
Registreer je!
 Forum

1 enkele div aanpassen met CSS

Offline Abbas - 23/05/2008 18:42 (laatste wijziging 23/05/2008 18:42)
Avatar van AbbasGouden medaille

Crew .NET		 Sorry voor de misschien niet duidelijk titel, maar de uitleg hier verklaart de rest! Ik heb een pagina met verschillende div's. En er is er eentje waarvan ik de achtergrondkleur wil veranderen aan de hand van CSS, NIET met JavaScript. Weet iemand hoe ik dit kan doen? Ik weet dat je in plaats van met ".div" ook met een id kan werken "#idDiv". Maar verder geraak ik er niet uit hoe je dan een stijlblok instelt voor de MouseOver en eentje voor de MouseOut.

Hopelijk is alles duidelijk uitgelegd. Alvast bedankt! 

15 antwoorden

Gesponsorde links
Offline Martijn - 23/05/2008 18:44
Avatar van Martijn Crew PHP je kunt met #idDiv wat in je css zetten ja, maar ik weet niet of er ook een mouseover functie is... volgens mij zit je vast aan javascript, gezien het feit dat je iets wilt laten veranderen als de pagina al geladen is
Offline Abbas - 24/05/2008 00:59
Avatar van Abbas Gouden medaille

Crew .NET		 Mjah, ik heb het ondertussen wel met JavaScript gedaan hoewel ik dat helemaal niet wou. Het werkt wel, maar als toch iemand weet hoe het misschien toch met CSS kan: antwoorden zijn welkom! 
Offline djb - 24/05/2008 01:09
Avatar van djb PHP beginner kan het niet met de hover gebeuren in css?
Ik kan css niet zoo perfect dus kweet niet of het met divs kan, kan wel met links
Offline Abbas - 24/05/2008 01:12 (laatste wijziging 24/05/2008 01:16)
Avatar van Abbas Gouden medaille

Crew .NET		 Het probleem is dat ik met een ASP.NET LinkButton werk. Dit is een Button die functioneert als een knop maar de look heeft fan een hyperlink. Raar genoeg kent dit ding geen MouseOver-functie of iets dergelijks (het is dan ook een server-side control). Vandaar dat ik met een div errond werk, en die heeft inderdaad een 'mouseover' functie, maar ik doe het liever met CSS in plaats van JavaScript. En hoe dàt dan werkt weet ik niet.
Offline Ultimatum - 24/05/2008 02:49
Avatar van Ultimatum PHP expert Dit is een stukje van mijn css uit een project waar ik nu mee bezig ben. Dit werkt bij mij, dus kijk hier eens naar zou ik zeggen 

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#content div.table div.overzichten {
  2. 	width: 528px;
  3. 	height: 16px;
  4. 	padding: 2px 5px 2px 5px;
  5. 	border: 1px #FFFFFF solid;
  6. }
  7.  
  8. div#content div.table div.overzichten:hover {
  9. 	width: 528px;
  10. 	height: 16px;
  11. 	padding: 2px 5px 2px 5px;
  12. 	background-color: #FFFF66;
  13. 	border: 1px #000066 solid;
  14. }
Offline Abbas - 24/05/2008 15:07
Avatar van Abbas Gouden medaille

Crew .NET		 Zou je me dan ook eens kunnen zeggen hoe je div-tag zelf er dan uitziet want ik ben een totale noob als het op CSS aankomt. Ik ben programmeur, geen designer en toestanden! 
Offline Ibrahim - 26/05/2008 11:06
Avatar van Ibrahim PHP expert
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2.    <div class="table">
  3.       <div class="overzichten">
  4.       </div>
  5.    </div>
  6. </div>
Offline Ultimatum - 26/05/2008 17:07
Avatar van Ultimatum PHP expert Klopt zoals psycho zegt, en als je dan binnen de class overzichten ook weer divs maakt (Ik heb er dan 4 naast elkaar voor een achterzicht) dan komt er een mooie gele balk + randje ( ) om 1 zo'n rij met divs
Offline saartje87 - 26/05/2008 17:41
Avatar van saartje87 Nieuw lid Volgens mij word dit niet door alle browsers ondersteunt..

Hoe ik het zou doen is 2 classes aanmaken in css:

div.normal {} en div.over {}

Dan moet je een klein beetje javascripten:

<div class="normal" onmouseover="this.className = 'over'" onmouseout="this.className = 'normal'"></div>

De this word hier dus gezien als het element waar je in werkt. En dan verander je gewoon de class van het element ;)
Offline Abbas - 26/05/2008 17:58
Avatar van Abbas Gouden medaille

Crew .NET		 @saartje: zoals ik al zei in m'n beginpost wil ik het liefst zonder JavaScript werken. Ik ga de manier van Ultimatum wel eens uitproberen! 
Offline saartje87 - 26/05/2008 18:08
Avatar van saartje87 Nieuw lid En zoals ik al zei hovers werken niet op alle browsers, maybe ff lezen voordat je commentaar geeft en zoals je nu weer zegt je wil het het 'liefst zonder javascript'. Dus gaf ik de meest voor de hand liggende code.

Succes sjakie
Offline Abbas - 26/05/2008 18:58
Avatar van Abbas Gouden medaille

Crew .NET
Citaat:
maybe ff lezen voordat je commentaar geeft
Uit wat leidt jij af dat ik "commentaar" geef...
Offline JBke - 27/05/2008 18:38 (laatste wijziging 27/05/2008 18:43)
Avatar van JBke PHP gevorderde beetje nutteloze opmerkingen, Poster Auteur = Titjes, antwoord was van??? en originele post zegt reeds liefst zonder javascript

mja, success titjes xD

wil je meerdere kleuren of enkel bvb een kleur indien de div actief is en een andere indien niet?? en wanneer wil je de kleur laten veranderen. indien div actief, indien een ajax event wordt uitgevoerd, indien er een hover of klik event is server of clientside??

grtz;
Offline Abbas - 27/05/2008 20:10 (laatste wijziging 27/05/2008 20:12)
Avatar van Abbas Gouden medaille

Crew .NET		 Interessant dat je over die kleuren begint. Ik wil een standaardkleur, een kleur voor als er met de muis over gegaan wordt en een kleur voor op het moment van klikken (het klikken is voor een AJAX-event). Ik heb er echt geen idee van hoe dit klaar te spelen! 
Offline zointer - 28/05/2008 09:25
Avatar van zointer HTML gevorderde
Sandernerd schreef:
Hovers op divs worden volgens mij niet door IE 6 ondersteund.

hover werkt wel

@Titje is dit wat je wou
Die active dat los ik op met php maar kan je ook Ajax/js
In deze thread kan je er over lezen over active
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.182s