html/css probleem

[Verwijderd]

Hier mijn probleem.

Ik heb een hoofdmenu en meteen daaronder een submenu. Ik heb daarvoor 2 tabellen gebruikt. het gaat hier om het hoofdmenu. Het is een blokmenu en ik wil ervoor zorgen dat als ik die hover er het een en ander gebeurd. andere achtergrondkleur e.d.

td class is block. met daarin een <a> element. nu als ik hover wordt alleen een klein stukje achter de text een andere kleur. verder underline werkt goed. Het is me eerder wel gelukt op een andere pagina waarbij ik voor het menu divjes + lists gebruikte.


.block a:hover, a:active {
color: white;
text-decoration: underline;
background: #204a8a;
width: 100px;
height: 35px;

Als iemand een website kent waar ik snel mijn html/css kan uploaden dan doe ik dat.

[skabouter]

Cascading Stylesheet:

background-color: #204a8a;

[Verwijderd]

Dat is precies het zelfde? de eerste property van background is color. toch even uitgeprobeerd maar geen effect.
Het probleem ligt hem in het niet veranderen van de achtergrondkleur van de gehele TD.

Hij verander alleen het stukje achter de link. Vorige keer had ik de list een class gegeven: ongeveer zo:

<li class="blaat">test<li>

en vervolgens in css

.blaat a:hover, a:active {
background: #kleur;
}

maar met een td lijkt het niet te werken.

[ Voor 39% gewijzigd door Verwijderd op 02-04-2009 22:09 ]

[Matis]

Verwijderd schreef op donderdag 02 april 2009 @ 22:05:
Dat is precies het zelfde? de eerste property van background is color. toch even uitgeprobeerd maar geen effect.
Het probleem ligt hem in het niet veranderen van de achtergrondkleur van de gehele TD.

uhh nee.

http://www.w3schools.com/css/css_background.asp

als je background: doet dan verwacht css hetvolgende er allemaal achteraan:

background-color
background-image
background-repeat
background-attachment
background-position

Dus dat is niet waar.

Probeer het eens met een kaal stukje tekst

<div class="block">lalala</div>

werkt dat wel?

[Verwijderd]

De hover werkt wel. De achtergrond kleur veranderd ook zoals ik al aangaf. Alleen niet voor de gehele TD.

Voor de duidelijkheid de html.

<div class="mainmenu-wrapper">
<table class="topmenu" cellspacing="0" cellpadding="0">
<tr>
<td class="empty"> </td>
<td class="block"><a href="#">HOME</a></td>
<td class="block"><a href="#">NIEUWS</a></td>
<td class="block"><a href="#">WORKSHOPS</a></td>
<td class="block"><a href="#">ARCHIEF</a></td>
<td class="block-right"><a href="#">SPECIALS</a></td>
<td class="empty"> </td>
</tr>
</table>

De CSS:

.mainmenu-wrapper {
height: 60px;
width: 800px;
font-weight: bold;
}

.topmenu, a{
height: 35px;
color: white;
height: 30px;
text-align: center;
text-decoration: none;
}

.block a:hover, a:active {
color: white;
text-decoration: underline;
width: 100px;
height: 35px;
background-color: #204a8a;
}

.empty {
width: 150px;
}

.block {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
}

.block-right {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
}

[ Voor 85% gewijzigd door Verwijderd op 02-04-2009 22:15 ]

[Tarilo]

Het probleem zijn je verwijzingen. De CSS die je nu hebt werkt alleen als a:hover geld. Maar dit wil je niet, je wilt dat de CSS zijn ding doet als je over je block hovert. Als je je CSS verandert in .block:hover zal hij het wel gewoon doen, denk ik.

Alleen moet je oppassen met IE(6), want die snapt alleen a:hover en niet op andere elementen.

[Bosmonster]

A. Gebruik geen tabellen.
B. Geef je a's een display:block en eventueel een height

[Matis]

opgelost:

HTML:

a.block:hover {
color: white;
text-decoration: underline;
background-color: #204a8a;
width: 100px;
height: 35px;
}

.block {
color: #FF0000;
}

http://www.w3schools.com/CSS/css_pseudo_classes.asp

Pseudo classes!

Edit: excuus, eerst f5 voor reageren

[ Voor 7% gewijzigd door Matis op 02-04-2009 22:18 ]

[Verwijderd]

Oke, ik ging er van uit dat alleen <a> een hover kon hebben. Weer iets bijgeleerd. Werkt perfect !

Thnx

[Matis]

Verwijderd schreef op donderdag 02 april 2009 @ 22:18:
Oke, ik ging er van uit dat alleen <a> een hover kon hebben. Weer iets bijgeleerd. Werkt perfect !

Thnx

Np, we zijn hier op te leren!

Ik heb net je code met firebug inspected en het is niet goed.

De td erft niet over van je .block je moet het dus herzien

Edit:

HTML:

<style>
td.block:hover {
color: white;
text-decoration: underline;
width: 100px;
height: 35px;
background-color: #204a8a;
}

td.block:active {
color: white;
text-decoration: underline;
width: 100px;
height: 35px;
background-color: #204a8a;
}
</style>

Zo werkt het goed en je css ook

Edit 2:

HTML:

<style>
td.empty {
width: 150px;
}

td.block {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
}

td.block-right {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
}
</style>

[ Voor 51% gewijzigd door Matis op 02-04-2009 22:25 ]

[Verwijderd]

Oke. Ik snap niet helemaal wat je bedoeld. Ik gebruik ook firebug en ik weet wat je bedoeld met erven, maar de class van mijn TD is .block. Hoezo zou die daar dan iets van moeten erven?

Er trouwens nog meer html en css omheen. dit is natuurlijk niet alles. Zoals ik het zie in FF ziet het er nu helemaal goed uit.

[Matis]

Verwijderd schreef op donderdag 02 april 2009 @ 22:25:
Oke. Ik snap niet helemaal wat je bedoeld. Ik gebruik ook firebug en ik weet wat je bedoeld met erven, maar de class van mijn TD is .block. Hoezo zou die daar dan iets van moeten erven?

Er trouwens nog meer html en css omheen. dit is natuurlijk niet alles. Zoals ik het zie in FF ziet het er nu helemaal goed uit.

Overerven is zeg maar een style overnemen van het bovenliggende klasse.

Je hebt bijvoorbeeld

<a> (een link) die kun je de kleur groen geven

dan heb je bijvoorbeeld ook <a class="test">

en als je dan a.test bold doet, dan erft hij van a de kleur groen over.

Stel nu dat je in a.test de kleur blauw maakt.

Dan zal dat de kleur van a overrulen

Edit:

een *empty* td maken als spacer is ook niet netjes. beter kun je een gif pakken van 1 bij 1 pixel en die oprekken tot 150 px

Edit 2:

Wat betreft het overerven:

je doet nu doet

HTML:

<style>
td.block {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
}

td.block-right {
width: 100px;
height: 35px;
background: #a0c9f1;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
}
</style>

Wat je dus zou kunnen doen is het volgende:

<td class="block">aasdasdasdsd</td>
<td class="block">aasdasdasdsd</td>
<td class="block">aasdasdasdsd</td>
<td class="block">aasdasdasdsd</td>
<td class="block-right">aasdasdasdsd</td>

met de volgende stylesheet:

td --> alle waardes die hetzelfde zijn, zoals de border links en boven en de achtergrond enzo.
td.block --> de waardes die nodig zijn voor de :hover enzo
td.block-right --> alleen de rechter border

[ Voor 39% gewijzigd door Matis op 02-04-2009 22:36 ]

[Tarilo]

Als je de pseudo class op je td doet werkt hij volgens mij alleen niet in IE. Heb onderstaande code in IE en in FF geprobeert, maar alleen FF doet het goed.

HTML:

<head>
<style tpye="text/css">
td:hover {
background:     #000000;
}
</style>
</head>

<body>
<table>
    <tr>
        <td>Hallo</td>
    </tr>
</table>
</body>

[Verwijderd]

Ja, dat weet ik, maar zoals jij zegt dat de td niet overerft van mijn .block snap ik niet.
de class van de td is zowieso al .block. kun je misschien precies aangeven waar de fout zit.

[Tarilo]

Hij probeert te zegen dat je a niet overerft van je td. dus die zal je appart de class="block" moeten geven.

[CodeCaster]

Cascading Stylesheet:

elem {
  background: value;
}

is gewoon correcte syntax hoor. Shorthand heet dat.

http://www.w3schools.com/css/pr_background.asp

[ Voor 6% gewijzigd door CodeCaster op 02-04-2009 22:34 ]

[Verwijderd]

@laurens

Ik hou het op dit moment bij firefox. ben nog bezig met de basis en wil me liever nog niet bekommeren om IE met alle problemen van dien. tegen de tijd dat ik professioneel websites maak mag ik hopen dat IE hetzelfde renderd als de overige browsers.

[Tarilo]

Oke, maar ook de oudere versies van IE blijven lang in gebruik. Dus ik zou er af en toe wel een beetje rekening mee houden. Is maar een tip, ik ben zelf ook gewoon bij FF begonnen zonder me zorgen te maken over IE.

[Verwijderd]

CodeCaster schreef op donderdag 02 april 2009 @ 22:33:

Cascading Stylesheet:

elem {
  background: value;
}

is gewoon correcte syntax hoor. Shorthand heet dat.

http://www.w3schools.com/css/pr_background.asp

Dat dacht ik dus ook al. Plus het werkte ook gewoon goed.

[Matis]

CodeCaster schreef op donderdag 02 april 2009 @ 22:33:

Cascading Stylesheet:

elem {
  background: value;
}

is gewoon correcte syntax hoor. Shorthand heet dat.

http://www.w3schools.com/css/pr_background.asp

Doh, maar ik bedoel te zeggen dat niet alle browsers dat niet even goed pakken (whining IE8 bijvoorbeeld ).

Shorthand kan wel, maar wordt sterk afgeraden...

[Verwijderd]

7laurens7 schreef op donderdag 02 april 2009 @ 22:36:
Oke, maar ook de oudere versies van IE blijven lang in gebruik. Dus ik zou er af en toe wel een beetje rekening mee houden. Is maar een tip, ik ben zelf ook gewoon bij FF begonnen zonder me zorgen te maken over IE.

Geeft IE7 dan ook nog zoveel problemen? Je ziet overal dat webdesigners IE6 niet meer ondersteunen en ben daar zelf ook niet van plan moeite in te stoppen

[Matis]

IE8 doet idd geen :hover op eigen klasses en ook niet op standaard klasses

[Verwijderd]

toaomatis schreef op donderdag 02 april 2009 @ 22:38:
Shorthand kan wel, maar wordt sterk afgeraden...

Door wie? Shorthand CSS werkt vziw voor elke browser sinds 2000, including alle IE versies > 5.

toaomatis schreef op donderdag 02 april 2009 @ 22:27:
een *empty* td maken als spacer is ook niet netjes. beter kun je een gif pakken van 1 bij 1 pixel en die oprekken tot 150 px

Ben ik net in slaap gevallen en wakker geworden in 1999?

[Verwijderd]

Ik heb nog een vraag. Houdt ongeveer hetzelfde in als de vorige.
Als ik nou op de link klik bijv. home. dan werkt de hover en alles goed, maar ik wil dus zolang ik op de homepage ben ook dezelfde opmaak houden. Ik heb al geprobeerd: .block: hover, :active maar zodra ik dan op de ergens op de pagina klik flipt de pagina hem helemaal uit. Wat doe ik precies verkeerd? ik gebruik FF.

.block:hover {
color: white;
width: 100px;
height: 35px;
background-image: url("topmenuslice.gif");
border-bottom: 0px;
border-right: 1px solid black;
border-top: 2px solid black;
border-left: 2px solid black;
}

En dan is er nog de vraag als ik een block in topmenu hover wil ik graag dat het submenu meteen de goede links voor die pagina laat zien. Zeg maar hetzelfde als op tweakers. Ik wil dit graag beide bereiken met html/css en niet met javascript of php o.i.d.

[ Voor 18% gewijzigd door Verwijderd op 03-04-2009 15:56 ]

[Tarilo]

Voor je submenu's zal je even moeten googlen voor suckerfish. Dat is een html/css only menu met submenu's.

:active houdt in dat als je ergens op klikt dat de css dan uitgevoerd wordt, omdat er geen element gedefinieerd is maakt het niet uit waar je opklikt. Om te zorgen dat het alleen gebeurt als je op de link klikt zal je de code moeten wijzigen in:

HTML:

.block:hover, .block:active { ... }

Waarschijnlijk doet hij dan wel wat je wilt.

[Verwijderd]

Ik wil graag de website zoals ik hem nu heb afmaken. Heb de menus dan deze keer met tabellen gedaan en niet met lists. Suckerfish schijnt allemaal met lists te zijn. Is er echt geen andere oplossing? javascript desnoods

ik heb .block:active gedaan, maar dat heeft niet het gewenste effect. zodra ik bijv de pagina nieuws open via het topmenu blijft het 'blokje' met de links nieuws erin niet met het hover effect. zodra ik niet met de muis erover ga is het effect zoals normaliter

Dit is het globaal het idee: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

[ Voor 8% gewijzigd door Verwijderd op 03-04-2009 20:23 ]

[mcDavid]

Waarom wil je het in hemelsnaam met een table doen? Een menu is toch geen tabel?

[soulrider]

werk eventueel met

code:

<a><div>....</div></a>

ipv met table's, tr's en td's. (ev. met span ipv div)

maar lists geeft meer mogelijkheden zoals je bv ook hier op tweakers merkt.

dan kan je je a:hover en a:active gebruiken en zorgt de div ervoor dat niet alleen de tekst aanklikbaar is maar ook het vak errond. (en dus ook zo reageert met hover en active.)

zo moeilijk is dat toch niet bedenkbaar ? Dat het een mooie oplossing is, is een andere discussie.
(en waarom je het persee anders wilt doen dan je voorbeeld is ook weer een andere discussie)

[ Voor 8% gewijzigd door soulrider op 04-04-2009 00:44 ]

[Tarilo]

:active is er alleen om aan te geven wat er met het element moet gebeuren als je er op klikt. Zodra je weer loslaat geld :active niet meer. Voor zo ver ik weet is er geen pseudoclass voor een actieve pagina. Waarschijnlijk zal je hiervoor javascript moeten gebruiken, maarik weet niet hoe dat moet.

Om een menu met submenu's te maken zal je toch echt suckerfish moeten gebruiken. Het kan waarschijnlijk wel met javascript, maar dat is een gigantische omweg. Zeker met tabellen wordt het lastig om alles dan nog werkend te krijgen.

[mcDavid]

soulrider schreef op zaterdag 04 april 2009 @ 00:40:
werk eventueel met

code:

<a><div>....</div></a>

ipv met table's, tr's en td's. (ev. met span ipv div)

maar lists geeft meer mogelijkheden zoals je bv ook hier op tweakers merkt.

dan kan je je a:hover en a:active gebruiken en zorgt de div ervoor dat niet alleen de tekst aanklikbaar is maar ook het vak errond. (en dus ook zo reageert met hover en active.)

zo moeilijk is dat toch niet bedenkbaar ? Dat het een mooie oplossing is, is een andere discussie.
(en waarom je het persee anders wilt doen dan je voorbeeld is ook weer een andere discussie)

<div> binnen <a> mag al helemaal niet, das niet alleen semantisch incorrect maar bovendien gewoon ongeldige HTML.
En bovendien in 99% van de gevallen nergens voor nodig, maak de <a> dan gewoon blocklevel.

[Verwijderd]

Bedankt voor de reacties. Over waarom ik tabellen gebruik. Dat is gewoon zo gelopen. Het leek me erg makkelijk. Ben pas net begonnen met html/css en leer langzamerhand de standaard of best practises voor bepaalde .. dingen. Ik leer snel op de manier zoals ik het nu doe en wil daarom ook niet al mijn tijd verspillen aan een bepaald onderwerp. Daarom bouw ik eerst mijn site verder uit om vervolgens bij de volgende site het nieuwgeleerde toe te passen.

Owjah, ik gebruikte onder andere tabellen omdat ik bij de vorige site waarbij ik een list en display:block gebruikte voor het menu veel problemen had met het verticaal alignen van de text. Ondertussen weet ik dat ik dan kan oplossen met line-height omdat het maar het maar 1 regel tekst is. Als ik weer ergens tegen aan loop horen jullie het vanzelf

[soulrider]

mcDavid schreef op zaterdag 04 april 2009 @ 13:39:
[...]


<div> binnen <a> mag al helemaal niet, das niet alleen semantisch incorrect maar bovendien gewoon ongeldige HTML.
En bovendien in 99% van de gevallen nergens voor nodig, maak de <a> dan gewoon blocklevel.

oke, heb je gelijk in, had een <span> moeten zijn
maar je kan net zogoed een <div onclick="location.href=...."></div> ervan maken dan eh
(maar dan heb je eigenlijk javascript toegepast)
of zoals dit: http://csscreator.com/node/29293
(vrij logisch dat je dan je ankers even groot maakt als het element en niet 'auto-scale' adhv de tekst die erin zit en het dan ook 'inline:block' maakt natuurlijk)

google gaf me wel enkele links met info toen ik zocht op: a href div
en wellicht vind je net zoveel info als je dat doet met : a href td

[Verwijderd]

Ik heb het anders gedaan. Elke keer als je nu op een menu klikt en dus naar die pagina gaat heb ik in die pagina een .block-active gezet op die link. Nu heb ik wel niet als ik hover meteen het submenu, maar zodra ik klik blijft het block in ieder geval hetzelfde als wanneer ik hem hover. Misschien dat ik de hover of de active nog aanpas zodat ze niet hetzelfde zijn. Is dit een goede oplossing?