[css] Background + Randen

[Verwijderd]

In de search kon ik netjes vinden hoe je een td background veranderd bij een hover. Alleen hoe krijg je er dan ook nog eens randen eromheen.

Een voorbeeld http://www.brinkster.com

Ik heb die css bekeken en uitgeprobeerd, maar offline wil het niet werken

[Blaise]

Heb je die externe css ook gekopieert? Of gebruik je een andere browser? Die code is IE only namelijk.

Als het niet aan bovenstaande ligt, gooi het dan even online, op deze manier kan je er weinig mee.

[Verwijderd]

http://www.brinkster.com//Include/Styles.css

dat is de url waar de syles op staat.
Het is een behoorlijke lap text en ik zie ook nergens hovers staan..

[Willem]

Je moet denken in de trend van keywords "onmouseover" en "this.style.background-color = #0000ff"; Het in niet alleen CSS namelijk.

Succes

[Woudloper]

Ook kan je nog even kijken in het volgende topic:

[topic=327408]

Hier heeft drm mij ooit eens uitgelegd hoe dit werkt...

[crisp]

Op woensdag 19 juni 2002 08:16 schreef willem169 het volgende:
Je moet denken in de trend van keywords "onmouseover" en "this.style.background-color = #0000ff"; Het in niet alleen CSS namelijk.

Succes

Kleine correctie

Het is: onMouseOver="this.style.backgroundColor = '#0000ff'"

In javascript (we hebben het hier trouwens over DHTML), worden styleproperties camel-cased, en dienen strings tussen kwootjes te staan

[Willem]

crisp:
Kleine correctie

Het is: onMouseOver="this.style.backgroundColor = '#0000ff'"

Ik snap het, maar het was even een voorbeeldje
Je moest denken in die trend, en niet wat ik exact zei..

Maar goed, topicstarter moet er nu wel uitkomen lijkt me.

[crisp]

Op woensdag 19 juni 2002 08:48 schreef willem169 het volgende:

[..]

Ik snap het, maar het was even een voorbeeldje
Je moest denken in die trend, en niet wat ik exact zei..

Maar goed, topicstarter moet er nu wel uitkomen lijkt me.

Weet ik ook wel, maar was puur om te voorkomen dat topicstarter het letterlijk over gaat typen, en vervolgens terugkomt met: "het werkt niet "

[Clay]

Het kan trouwens wel volledig met css. Gewoon een link class defineren die je met padding, borders en kleuren + hover de gewenste instellingen geeft, en dan heb je ook niet zo'n dubbele hover waarbij er nog een streepje bij komt als je binnen het vak over de link zelf heengaat (mits je dat streepje uitzet)

[Verwijderd]

Bedankt allemaal, vanavond even proberen, tis nu te mooi weer

[tomato]

crisp: Kleine correctie

Het is: onMouseOver="this.style.backgroundColor = '#0000ff'"

In javascript (we hebben het hier trouwens over DHTML), worden styleproperties camel-cased, en dienen strings tussen kwootjes te staan

Kleine correctie

Het 'onmouseover' attribute schrijf je gewoon met kleine letters.

Strings horen idd tussen quotes te staan, maar is '#0000ff' wel een string? Het is een integer kleurcode, hexadecimaal.
Voor CSS geldt dat niet als string, de quotes kun je daar weglaten, maar eerlijk gezegd weet ik niet wat Javascript er van vindt...

Overigens zou ik '#0000ff' gewoon als '#00f' schrijven

[Verwijderd]

Okay ik ben ff niet actief geweest aan de site en lees nu de posts eens goed door.

Ehm.. Hoe de achtergrond veranderd bij een mouseover wist ik wel, dat staat ook 100 keer in de search, alleen ik moet ook nog randen eromheen hebben (de td waar de background van veranderd) en dan alleen links boven en onder.

Dit heb ik in de head:

<script language="javascript">
function tdOver(src,clrOver){
if (!src.contains(event.fromElement)){
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function tdOut(src,clrIn){
if (!src.contains(event.toElement)){
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
</script>

Dit bij de td:

<td width="117" bgcolor="#CCCCCC" onmouseover='tdOver(this,"#EDEFEF");' onmouseout='tdOut(this,"#CCCCCC");' onclick="location.href='home.html'"><font color="#003399" size="2" face="Arial, Helvetica, sans-serif">Home</font></td>

Ik heb geprobeerd css tags in het headscript te zetten en bij het td maar het wil niet echt werken

[crisp]

http://www.w3.org/TR/REC-CSS2/box.html#border-properties

Tip:

code:

border-left-width: 1px

wordt in JS

code:

borderLeftWidth = '1px';

[drm]

_tip:

Aangezien je er al genoeg van leert (aan je source te zien) om dit te implementeren in je source, geef ik je even een voorbeeldje:

http://gerard.yoursite.nl/got/funksngrooves/mo.html

_{edit:
Op verzoek van lite-mod willem169 even de kleuren aangepast bij wijze van streling voor het oog}

[Verwijderd]

jammer dat dit nog niet werkt in alle browsers:

code:

td:hover {
   border: 1px #000000 solid;
}

Dan zou je helemaal geen javascript nodig hebben.

[tomato]

Shadow3333: jammer dat dit nog niet werkt in alle browsers:

In welke browser werkt dit dan wel

[edit]
Sorry, onzorgvuldige test van mij; Mozilla doet het wel.

[drm]

tomato:
In welke browser werkt dit dan wel

[edit]
Sorry, onzorgvuldige test van mij; Mozilla doet het wel.

Ik kon me al zo slecht voorstellen dat jij dat niet wist
Volgens mij doet mozilla dat al sinds 0.92 ofzo

[Verwijderd]

Op vrijdag 21 juni 2002 13:40 schreef drm het volgende:

Ik kon me al zo slecht voorstellen dat jij dat niet wist
Volgens mij doet mozilla dat al sinds 0.92 ofzo

volgens mij niet, dacht dat het pas echt goed ging vanaf 0.9.9

mhhh kom er net achter dat IE 5.1 MAC het ook niet doet, jammer.. dus waarschijnlijk alleen Mozilla.

Edit -----------

Ook Konqueror doet het

[drm]

Konqueror is toch ook Gecko-based? (n00b asking)

[Verwijderd]

Op vrijdag 21 juni 2002 14:22 schreef drm het volgende:
Konqueror is toch ook Gecko-based? (n00b asking)

nop, je kan het wel voor elkaar krijgen, dan werkt het net als Galeon. Ik geloof dat de render engine van Konqueror iets van "khtml" heet of zo.

[drm]

Ah dan was ik in de war met Galeon idd.

[Verwijderd]

Iedereen nog maals bedankt, met name DrM

Het werkte meteen!

Ik zal als de site helemaal af is deze posten in sitechecks.nl

[paragon]

Op woensdag 19 juni 2002 09:42 schreef Clay het volgende:
Het kan trouwens wel volledig met css. Gewoon een link class defineren die je met padding, borders en kleuren + hover de gewenste instellingen geeft, en dan heb je ook niet zo'n dubbele hover waarbij er nog een streepje bij komt als je binnen het vak over de link zelf heengaat (mits je dat streepje uitzet)

Clay, krijg je dan niet dat een linkje met als text: "test" veel korter is dan bijv. iets met als text: "grootmoedershuis"