CSS menu hover werkt niet

[Verwijderd]

Ik ben een css menu aan het maken. De menuitems komen uit de database. Ik wil de <li> items een achtergrond plaatje geven. Dat lukt. Wat niet lukt is dat bij hover of active er een ander achtergrond plaatje wordt getoond. Ik heb er verschillende css handleidingen bij gepakt om te zien of ik een verkeerde schrijfwijze hanteer, maar ik kan niet vinden wat ik fout doe.

CSS:

#menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

#menu ul li {
float: left;
padding: 0;
margin: 0;
}

#menu ul li a:link {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu.jpg);
border: solid 1px black;
}

#menu ul li a:hover {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: solid 1px black;
}

#menu ul li a:active {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: 1px solid black;
}

#menu ul li a:visited {
text-decoration: none;
padding: 2px;
border: solid 1px;
background-image: url(../afbeeldingen/menu.jpg);
}

Grts.

[Bitage]

Is het niet zo dat alleen elementen die als block worden weergegeven een achtergrond afbeelding kunnen krijgen? Probeer eens

Cascading Stylesheet:

display:block;
/* of */
display:inline-block;

in je hover te zetten.

[WeeJeWel]

en als je

#menu ul li a:link {

gewoon houdt op

#menu ul li a {

?

[Verwijderd]

Bitage schreef op zaterdag 05 juli 2008 @ 23:31:
Is het niet zo dat alleen elementen die als block worden weergegeven een achtergrond afbeelding kunnen krijgen? Probeer eens

Cascading Stylesheet:

display:block;
/* of */
display:inline-block;

in je hover te zetten.

Ik heb bij de link ook geen block opgenomen, en daar verschijnt het plaatje wel. Het toevoegen van block bij a:hover is niet de oplossing. Wat dan gebeurt is dat het menuitem 1 px omlaag springt zodra er met de muis over wordt gegaan.
Dus niet de oplossing die ik zoek, namelijk het veranderen van achtergrond plaatje.

[Verwijderd]

WeeJeWel schreef op zaterdag 05 juli 2008 @ 23:34:
en als je

#menu ul li a:link {

gewoon houdt op

#menu ul li a {

?

Nee, dan verandert er niets.

Suggesties?

[WeeJeWel]

Heb je een online voorbeeld? Want dit stuk code klopt wel..

[Bozozo]

Met je huidige CSS zet je het plaatje op de 'a' elementen, niet op de 'li' elementen. Dat wil je wss ook, maar let er even op.

LI is verder standaard een block element, 'a' is inline. Ik zou zeker je 'a' op block zetten. De :link pseudoclass zou ik weglaten. Verder kun je beter CSS sprites gebruiken (1 plaatje met alle states erin, waarbij je de goede weergeeft middels background-position) ipv verschillende plaatjes (waarbij je de background-image aanpast) omdat je in het laatste geval een 'lag' ziet bij de eerste hover. Het plaatje moet dan nog geladen worden.

[Verwijderd]

Ik heb het menu online gezet. In 1e instantie werkt de hover wel, maar als een link bezocht is, doet de hover het niet meer. Ook als de link actief is, verschijnt niet de juiste achtergrond afbeelding.

http://www.extreemweer.nl/phptest/menutesten.php

grts.

[WeeJeWel]

Haal dat hele stuk gewoon weg, nergens voor nodig.

Cascading Stylesheet:

#menu ul li a:visited {
  text-decoration: none;
  padding: 2px;
  border: solid 1px;
  background-image: url(../afbeeldingen/menu.jpg);
}

EDIT: toch even onderbouwen. Omdat visited een hogere prioriteit heeft dan hover, blijft hij die volhouden

[ Voor 20% gewijzigd door WeeJeWel op 06-07-2008 00:44 ]

[Verwijderd]

Verder kun je beter CSS sprites gebruiken (1 plaatje met alle states erin, waarbij je de goede weergeeft middels background-position) ipv verschillende plaatjes (waarbij je de background-image aanpast) omdat je in het laatste geval een 'lag' ziet bij de eerste hover. Het plaatje moet dan nog geladen worden.

Je bedoelt dat ik background-position: top of bottom kies? En dan de juiste waarde kiezen afhankelijk welke achtergrond ik nodig heb?

Ik ga het eens proberen.

De a:link is trouwens nu a: (maakt overigens geen verschil)

[Verwijderd]

Haal dat hele stuk gewoon weg, nergens voor nodig.

Goede tip, de hover werkt nu fatsoenlijk. Alleen wil ik graag als een link actief is, dat er het plaatje hetzelfde is als de hover. Wat zou ik nog aan kunnen passen? Ik heb nu:

#menu ul li a {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu.jpg);
border: solid 1px black;
}

#menu ul li a:hover {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: solid 1px black;
}

#menu ul li a:active {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: 1px solid black;
}

[WeeJeWel]

Dat is het toch al, met je stuk in :active?

Overigens kun je de rest ook weglaten, dus

Cascading Stylesheet:

#menu ul li a {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu.jpg);
border: solid 1px black;
}

#menu ul li a:hover {
background-image: url(../afbeeldingen/menu1.jpg);
}

#menu ul li a:active {
background-image: url(../afbeeldingen/menu1.jpg);
}

[Verwijderd]

Dat is het toch al, met je stuk in :active?

In de css staat dat hover en active dezelfde afbeelding moeten hebben. Maar als je in het menu een link aanklikt, blijft deze niet 'oranje'.
Active wil toch zeggen dat een link is aangeklikt, en actief is en blijft? En dat wil ik graag tonen dmv een andere achtergrond.
Hoe krijg ik dit gedaan?

Thanx.

[WeeJeWel]

Als je hem aanklikt blijft hij gewoon oranje hoor. Geloof dat alleen IE6 hier moeilijk mee deed, maar de fatsoenlijke browsers doen het hier gewoon goed

[Verwijderd]

Ik heb FF 3.0 en daar verdwijnt het oranje weer zodra een link is aangeklikt. Met welke browser kijk jij?

[WeeJeWel]

uhm, FF3

[Verwijderd]

Hoe kan dat nou weer?
Bij mij verdwijnt de oranje kleur zodra een link actief is. Bij jou blijft de link wel oranje, ook al ga je met je muis eraf?

[WeeJeWel]

Nee, als ik eraf ga wordt hij weer grijs, maar wat wou je dan?

[Verwijderd]

Als een item is aangeklikt, het item een oranje achtergrond krijgt. Zodat je ziet bij welk menu item je bent.

[boe2]

Bij mij (opera) blijft hij ook niet oranje, en dat ook niet gebeuren met een :active (die :active blijft afaik enkel actief tot de volgende pagina geladen wordt, maw met een gewone link krijg je die enkel tijdens de klik te zien).

Wat jij moet doen om het gewenste effect bereiken is per pagina in je "actieve" link een aparte class zetten. Bijvoorbeeld class="actief", en dan

Cascading Stylesheet:

.actief { 
background-image: url(../afbeeldingen/menu1.jpg); 
}

[Verwijderd]

Wat jij moet doen om het gewenste effect bereiken is per pagina in je "actieve" link een aparte class zetten. Bijvoorbeeld class="actief", en dan

Cascading Stylesheet:

.actief { 
background-image: url(../afbeeldingen/menu1.jpg); 
}

Welk object krijgt dan die class? De pagina's komen uit een database.

[boe2]

Je link is voldoende. Dus <a href="..." class="actief">. Of haalt hij de gehele html opmaak ook uit die database?

onclick="this.className='actief'"

neen, want dat verliest hij direct weer, zodra hij de geklikte link inlaadt

[ Voor 71% gewijzigd door boe2 op 06-07-2008 01:48 ]

[WeeJeWel]

onclick="this.className='actief'" oid?

[Verwijderd]

Je link is voldoende. Dus <a href="..." class="actief">. Of haalt hij de gehele html opmaak ook uit die database?

ik heb een class actief toegvoegd en deze class aan de <a> meegegeven. Maar het functioneert niet.

Misschien moet ik het toch maar met background-position doen.

Moet ik dan bij a:active zoiets zetten:

Cascading Stylesheet:

 #menu ul li a:active {
  background-image: url(../afbeeldingen/menu1.jpg);
  background-position: bottom;
}

als het oranje natuurlijk de onderste afbeelding is.

[Verwijderd]

Ik heb zowel in de <a> een verwijzing naar class actief gemaakt, als gewerkt met background-position. Maar de actieve link blijft niet oranje.

Cascading Stylesheet:

#menu ul li a {
  text-decoration: none;
  padding: 2px;
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: top;
  border: 1px solid black;
  font-family: "Verdana";
  font-size: 11px;
  color: #000033;
  border: 1px solid black;
  height: 21px;
}  

#menu ul li a:hover {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}

#menu ul li a:active {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

PHP:

echo "<a class='actief' href=...>";

Plaatje:


Hoe krijg ik het nu werkend dat een link die actief is ook de juiste 'oranje' achtergrond krijgt??

Grts.

[Bitage]

Gebruik verschillende afbeeldingsbestanden. Scheelt je gedoe met background-position en ander gezeur.

Verder werkt deze code bij mij prima:

HTML:

<html>
<head>
<title>Test</title>
<style>

body
{
font-family:Verdana;
}

#menu ul li a
{
background-image:url('normal.png');
background-repeat:repeat-x;
display:block;
width:500px;
text-align:center;
}

#menu ul li a:hover
{
background-image:url('hover.png');
}

#menu ul li a:active
{
background-image:url('hover.png');
}

</style>
</head>
<body>

<div id="menu">
<ul>
<li><a href="http://gathering.tweakers.net/">GoT</a>
</ul>
</div>

</body>
</html>

hover.png


normal.png

[ Voor 11% gewijzigd door Bitage op 06-07-2008 09:41 ]

[boe2]

Bozozo schreef op zondag 06 juli 2008 @ 00:33:
Verder kun je beter CSS sprites gebruiken (1 plaatje met alle states erin, waarbij je de goede weergeeft middels background-position) ipv verschillende plaatjes (waarbij je de background-image aanpast) omdat je in het laatste geval een 'lag' ziet bij de eerste hover. Het plaatje moet dan nog geladen worden.

Bitage schreef op zondag 06 juli 2008 @ 09:38:
Gebruik verschillende afbeeldingsbestanden. Scheelt je gedoe met background-position en ander gezeur.

mensen, stop eens met de jongen te verwarren . 1 plaatje met alles erin heeft als voordeel dat je menu responsiever is op tragere verbindingen. Anders moet hij je "hover" plaatje nog inladen wanneer je met je muis over de afbeelding gaat. Aangezien het verschil hier niet merkbaar gaat zijn is de TS vrij om te kiezen welke techniek hij gebruikt

Verder werkt deze code bij mij prima:

Wat werkt er juist prima? Dat de link van de huidige geklikte link oranje blijft? Want dat zie ik niet direct terug in je code

Verwijderd schreef op zondag 06 juli 2008 @ 02:21:
[...]


ik heb een class actief toegvoegd en deze class aan de <a> meegegeven. Maar het functioneert niet.

Misschien moet ik het toch maar met background-position doen.
[/code]

als het oranje natuurlijk de onderste afbeelding is.

Momenteel staat dit in jouw css:

Cascading Stylesheet:

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

Wat perfect zou moeten werken: de "a" elementen met 'style="actief"' zouden op die manier oranje moeten blijven staan. Ik zie niet direct waarom dit stukje niet werkt.

[ Voor 30% gewijzigd door boe2 op 06-07-2008 10:59 ]

[Bitage]

Boeboe schreef op zondag 06 juli 2008 @ 10:43:
Wat werkt er juist prima? Dat de link van de huidige geklikte link oranje blijft? Want dat zie ik niet direct terug in je code

Misschien dat ik de TS niet helemaal goed begrepen heb, maar hij wil toch dat wanneer de link actief is (dus geselecteerd) dat het oranje is? Dat is wat mijn code doet. Hij verandert weer terug naar olijfgroen waneer het is logelaten. Blijkbaar wil hij nu dus dat het oranje blijft? Dan moet je dus met Javascript aan de gang:

HTML:

<a href="http://gathering.tweakers.net/" onclick="this.style.backgroundImage = 'url(\'hover.png\')'; return false;">GoT</a>

return false; erachter zodat je het kan zien en niet van pagina verandert

[ Voor 5% gewijzigd door Bitage op 06-07-2008 11:18 ]

[Bozozo]

Bitage schreef op zondag 06 juli 2008 @ 09:38:
Gebruik verschillende afbeeldingsbestanden. Scheelt je gedoe met background-position en ander gezeur.

Roep niet zomaar dingen als je niet weet waar je het over hebt. Het gebruiken van Sprites is beter, punt.

Je hebt geen last van vertraging bij het laden van de eerste hover, de totale bestandsgrootte is minder (minder overhead, en in het geval van GIF plaatjes ook nog een gedeeld kleurenpalet) en er hoeven minder HTTP requests te worden verstuurd.

[Verwijderd]

Blijkbaar wil hij nu dus dat het oranje blijft? Dan moet je dus met Javascript aan de gang:

HTML:

<a href="http://gathering.tweakers.net/" onclick="this.style.backgroundImage = 'url(\'hover.png\')'; return false;">GoT</a>

return false; erachter zodat je het kan zien en niet van pagina verandert

Vanwege mijn verjaardagsfeest ben ik gisteren niet online geweest. Ik zie dat er verschillende malen gereageerd is. Bedankt daarvoor.

Ik heb 2 opties uitgeprobeerd:
1. in de <a> een class actief toegevoegd
2. het stukje javascript in de <a> gezet

beiden werken helaas niet. Een link die is aangeklikt blijft niet oranje.

De code (nogmaals):

Cascading Stylesheet:

#menu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#menu ul li {
  float: left; 
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#menu ul li a {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: top;
  text-decoration: none;
  border: 1px solid black;
  font-family: "Verdana";
  font-size: 12px;
  color: #000033;
  height: 25px;
  font-weight: 500;
}  

#menu ul li a:hover {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}

#menu ul li a:active {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

PHP:

$result = mysql_query("SELECT * FROM menu"); 
  while ($menu = mysql_fetch_array($result)) 
  { 
    echo "<ul>";
    echo "<li>";
    echo "<a onclick='this.style.backgroundImage = 'url(\'../afbeeldingen/menu1.jpg\')'; return false;' style='actief' href=\"".$_SERVER["PHP_SELF"]."?pag=".$menu['mItem']."\" title=\"".$menu['mAlt']."\">".$menu['mNaam']."</a>"; 
    echo "</li>";
    echo "</ul>";
  }

Bedankt voor het meedenken!

[Xander]

Boeboe schreef op zondag 06 juli 2008 @ 10:43:
Momenteel staat dit in jouw css:

Cascading Stylesheet:

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

Wat perfect zou moeten werken: de "a" elementen met 'style="actief"' zouden op die manier oranje moeten blijven staan. Ik zie niet direct waarom dit stukje niet werkt.

Ik zie ook even niet waarom het niet werkt. De styles voor #menu ul li a lijken een hogere prioriteit te krijgen. Dit werkt wel (een beetje Trail&Error ):

Cascading Stylesheet:

#menu ul li a.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

of:

Cascading Stylesheet:

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom !important;
}

Echter zal dat in het geval van de TS opleveren dat álle knoppen oranje worden, hij geeft immers de class="actief" mee aan al zijn linkjes. Dat is dus niet de bedoeling, enkel de gekozen / 'actieve' pagina moet deze class krijgen!

Ipv

PHP:

<?php
$result = mysql_query("SELECT * FROM menu"); 
  while ($menu = mysql_fetch_array($result)) 
  { 
    echo "<ul>";
    echo "<li>";
    echo "<a style='actief' href=\"".$_SERVER["PHP_SELF"]."?pag=".$menu['mItem']."\" title=\"".$menu['mAlt']."\">".$menu['mNaam']."</a>"; 
    echo "</li>";
    echo "</ul>";
  }
?>

Moet er dus nog iets komen als:

PHP:

<?php
$result = mysql_query("SELECT * FROM menu"); 
  while ($menu = mysql_fetch_array($result)) 
  { 
    echo "<ul>";
    echo "<li>";
    if ($menu['mItem'] == $_GET['pag']) {
        $style = "style='actief'";
    } else {
        $style = "";
    }
    echo "<a ".$style." href=\"".$_SERVER["PHP_SELF"]."?pag=".$menu['mItem']."\" title=\"".$menu['mAlt']."\">".$menu['mNaam']."</a>"; 
    echo "</li>";
    echo "</ul>";
  }
?>

Dan zou alles moeten werken...

Testcase: http://xander.heynsbergen.com/ext/menutestcase/menu.php
Source: http://xander.heynsbergen.com/ext/menutestcase/menu.phps

[Verwijderd]

Dan zou alles moeten werken...

Testcase: http://xander.heynsbergen.com/ext/menutestcase/menu.php
Source: http://xander.heynsbergen.com/ext/menutestcase/menu.phps

Hey bedankt voor het meedenken. Ik zie dat het menu bij jou goed functioneert. Ik heb jouw aanbevelingen uitgevoert in mijn code. Maar vreemd genoeg krijg ik nog steeds niet het gewenste resultaat.

Hij kent de style actief niet lijkt het. Het is een externe css, misschien ligt het daar aan.
Kan ik dan wel style gebruiken? Ik heb ook class=actief geprobeerd,maar ook daar blijft het menuitem niet oranje als er op geklikt is.

Cascading Stylesheet:

#menu ul li a:hover {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}


#menu ul li a:active {
  background-image: url(../afbeeldingen/menu.jpg);
  background-position: bottom;
}

#menu ul li a.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
} 

.actief { 
  background-image: url(../afbeeldingen/menu.jpg); 
  background-position: bottom;
}

PHP:

function menu()
{
  echo '<link rel="stylesheet" href="css/extreemweer.css" type="text/css">';
  $result = mysql_query("SELECT * FROM menu"); 
  while ($menu = mysql_fetch_array($result)) 
  { 
    echo "<ul>";
    echo "<li>";
    if ($menu['mItem'] == $_GET['pag']) {
        $style = "style='actief'";
    } else {
        $style = "";
    } 
    echo "<a ".$style." href=\"".$_SERVER["PHP_SELF"]."?pag=".$menu['mItem']."\" title=\"".$menu['mAlt']."\">".$menu['mNaam']."</a>"; 
    echo "</li>";
    echo "</ul>";
  }
}

Waarom werkt het bij jou wel en bij mij niet?

Ik ben benieuwd, want ik zie geen andere mogelijkheden om het zelf op te lossen

[Xander]

Euhm, het moet idd class zijn ipv style. Let ook op de "iets als", het was een snel codevoorbeeldje, geen kant en klare code.

Nu heb je die .actief class dubbel staan, gooi de onderste eens weg?

Dat helpt ook niets. Had ik eigenlijk ook niet verwacht, maargoed. Heb je een actueel voorbeeldje online staan toevallig? Als het bij mij werkt moet het bij jou ook werken?

[ Voor 31% gewijzigd door Xander op 07-07-2008 21:43 ]

[Verwijderd]

Bedankt, het werkt nu wel. Ik heb style vervangen door class.

Als het mag, heb ik een nieuwe vraag. Ik heb wat moeite om het menu mooi uit te lijnen in de div die ik ervoor gebruik. Ik zou alles links in de <div> met de class 'menu' willen uitlijnen. Nu heb ik een witruimte links in de <div> en het menu.

Een voorbeeld:

http://extreemweer.nl/index6.php

Ik heb van alles al geprobeerd, met float-left in class 'menu', geprobeerd om het menu links te krijgen met padding: 0px, padding-left: 0px. Maar het lukt niet om het menu mooi links in de <div> te krijgen.

Cascading Stylesheet:

.menu {
  position: relative;
  width: 960px;
  top: 150px;
  height: 25px;
  padding: 0px;
  background-image: url(../afbeeldingen/menu_back.jpg);
  border: 1px solid black;
}

PHP:

echo '<div class="menu" id="menu">';
        menu();
echo ' </div>';

function menu()
{
  echo '<link rel="stylesheet" href="css/extreemweer.css" type="text/css">';
  $result = mysql_query("SELECT * FROM menu"); 
  while ($menu = mysql_fetch_array($result)) 
  { 
    echo "<ul>";
    echo "<li>";
    if ($menu['mItem'] == $_GET['pag']) {
        $style = "class='actief'";
    } else {
        $style = "";
    } 
    echo "<a ".$style." href=\"".$_SERVER["PHP_SELF"]."?pag=".$menu['mItem']."\" title=\"".$menu['mAlt']."\">".$menu['mNaam']."</a>"; 
    echo "</li>";
    echo "</ul>";
  }
}

Grts Ferry.

[bakakaizoku]

Ik zou gewoon allereerst beginnen door mijn code op te schonen, er is vanalles mis in je code wat voor allemaal vage problemen gaat zorgen. <center><body/></center> ??

[Verwijderd]

Ik heb de code opgeschoond voorzover ik zie dat het kan.

Ik denk dat het menu niet links tegen de menu <div> aankomt, doordat ik een <ul> gebruik. En deze springt meestal iets naar rechts, zo ook bij mijn site.

Ik weet niet hoe ik in de class moet aangeven dat het menu links tegen de kant verschijnt, ipv zo'n 100px naar rechts.

Ik heb ook gezocht naar opmaak voor <ul> en <li>, maar kon nergens een oplossing vinden.

Tevens lukt het niet om bij de navigatie de kleine <div> achter een <div> te plaatsen die een background-repeat x heeft. Ik dacht het of met positie relatief of float-right te doen. Maar beide mogelijkheden werken niet.
Graag hulp

http://www.extreemweer.nl/index6.php

[moozzuzz]

Om over layout te spreken hebben we niets aan PHP-code op dit forum (zie je vorige post :^).

Wat nu online staat kan onmogelijk valide HTML zijn:

• Doctype niet gekend
• link-element in de body (menu-div)
• ...

In IE6.x zie ik nu bvb niets van je content: (1-2-3-.. of je "navigatie".

TIP: validatie via w3c-tooltje

TIP: Probeer je HTML en daarbijhorende CSS eens van scratch opnieuw te bouwen ZONDER PHP. Daarna kan je dynamisch je menu gaan opbouwen en andere database-elementen gaan inbouwen. Een body-element de class body geven lijkt me ook raar?

[ Voor 8% gewijzigd door moozzuzz op 08-07-2008 18:58 . Reden: niet klaar met typen ]

[Verwijderd]

• Doctype niet gekend
• link-element in de body (menu-div)
• ...

In IE6.x zie ik nu bvb niets van je content: (1-2-3-.. of je "navigatie".

TIP: Probeer je HTML en daarbijhorende CSS eens van scratch opnieuw te bouwen ZONDER PHP. Daarna kan je dynamisch je menu gaan opbouwen en andere database-elementen gaan inbouwen. Een body-element de class body geven lijkt me ook raar?

Ik heb doctype toegevoegd. De body geen class meer gegeven. Nu is de site ook weer te zien in IE.

Wat bedoel je met: • link-element in de body (menu-div)
Wat is daar mis mee?

Ik begrijp nog steeds niet waarom het menu zo inspringt. Misschien dat iemand het wel ziet? Ik zelf denk dat er de opmaak van de <UL> niet goed is, dat er iets mist waardoor het menu te veel naar rechts verschuift (en iets te laag)

Thanx

[Fuzzillogic]

Begin eens met de doctype op de juiste plek te zetten. Maak daarna je code eens valid. Het heeft nu iig totaal geen nut om naar CSS-issues te zoeken als je HTML nog in quirks-mode draait. Bekijk het maar eens in Opera...

En doe jezelf daarna een enorm plezier, en ga eens op zoek naar een templating engine. XSLT is een aanrader, en heb je ook nog wat aan als je PHP ontgroeit. HTML-code door PHP laten genereren, zeker op deze schaal, is echt niet meer van deze tijd.

Added bonus: die achtergrond doet het beter als png, niet als jpeg.

Added bonus 2: waarom zet je elk list element een aparte <ul />? Beperk je diveritus ook; je hebt nu veel meer div-elementen dan noodzakelijk. Gebruik CSS2-selectors. Gebruik de juiste elementen. Bijv je login-formulier:

XHTML:

<form action="...">
<fieldset><legend>login</legend>
<label for="naam">Naam:</label> <input id="naam" />
<label for="password">Wachtwoord:</label> <input id="password" type="password" />
<button>Login</button>
</fieldset>
</form>

Met CSS is dit prima te stylen.

[ Voor 37% gewijzigd door Fuzzillogic op 08-07-2008 23:05 ]

[bakakaizoku]

Serieus, als ik nu weer in je code kijk lijkt het wel of je denkt dat je alles zomaar ergens kan neerzetten. Een doctype midden in het document? Die hoort bovenaan te staan.

Begin gewoon eens from scratch, gebruik onderstaande code om met je html te beginnen, ga pas stylen als alles semantisch goed staat en gebruik dummy teksten voor content zoals menu items, tekst items en ga dan pas php'en.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title></title>
      <!-- hier CSS verwijzingen plaatsen
           bijv: <link rel="stylesheet" href="css/style.css" />
      -->
      <!-- hier JS verwijzingen plaatsen
           bijv: <script src="js/site.js" type="text/javascript"></script>
      -->
  </head>
  <body>
     <!-- Hier de rest van je html -->
  </body>
</html>

Ik raad je overigens sterk aan als eerste gewoon HTML onder de knie te krijgen, en niet zomaar lukraak wat tags her en der plaatsen.

Je code is en blijft momenteel zo'n wirwar dat mensen (ik oa.) er absoluut niet warm voor lopen om te kijken wat er precies mis is.

[Verwijderd]

Je code is en blijft momenteel zo'n wirwar dat mensen (ik oa.) er absoluut niet warm voor lopen om te kijken wat er precies mis is.

En ik maar denk dat ik lekker bezig was, alleen dat menu werd niet goed gezet.

Ik zal je tips ter harte nemen (ook van de anderen).
De doc type staat nu bovenin. Ik zal ook minder met echo gaan werken bij de opmaak van de site. Jouw voorbeeld zal ik overnemen en invullen, en als dat klaar is zal ik kijken of het menu dan goed geplaatst wordt.
Als ik dan nog vragen heb weet ik de weg te vinden.

Grts.

[Verwijderd]

Bozozo schreef op zondag 06 juli 2008 @ 11:44:
[...]


Roep niet zomaar dingen als je niet weet waar je het over hebt. Het gebruiken van Sprites is beter, punt.

Je hebt geen last van vertraging bij het laden van de eerste hover, de totale bestandsgrootte is minder (minder overhead, en in het geval van GIF plaatjes ook nog een gedeeld kleurenpalet) en er hoeven minder HTTP requests te worden verstuurd.

Fijn discussieren dit, iemand die het walhalla gevonden heeft wbt achtergrondafbeeldingen

Wat als je nu de tekst in je menu schaalbaar wilt maken? Dus dat de tekst groter en kleiner kan worden binnen in het menu item. Doe maar eens appeltje (of control) + in firefox. dan kom je met een sprite snel behoorlijk wat problemen tegen. Sprites zijn prima te gebruiken als er geen veranderingen in hoogte of breedte plaats zullen vinden. Dus als je vormgever heeft bepaald dat er een exotisch font moet worden gebruikt voor de menustructuur. En dan nog is het maar afhankelijk van hoe je afbeelding eruit ziet.

Het verhaal over HTTP requests is waar, maar met hedendaagse bandbreedtes (vooral hier in nl) is een http request in de wereld waar steeds meer ajax in opkomst is, niet echt een issue.

Daarnaast heb je het onderhoudsissue, wat als je opeens vindt dat er een knop moet worden toegevoegd of dat de knop moet worden verhoogd, dan moet je voor elke state de backgroundposition gaan zitten wijzigen.

Elk nadeel hep zijn voordeel zou ons Johan zeggen... er is niet een beste oplossing... punt

[Bosmonster]

Op zich ben ik het wel met je eens .ltj, maar een dingetje wil ik er wel aan toevoegen:

De meeste moderne browsers (in ieder geval IE7, FF3, Opera 9) schalen niet zozeer meer, maar zoomen. Dit werkt ook op de afbeeldingen (en ook prima met CSS sprites).

Hierdoor zijn procentuele waarden ook niet zo noodzakelijk meer, want het werkt zelfs prima als je alles in px heb ingesteld.

Daarnaast moet je goed opletten dat CSS sprites niet je semantiek in de war gaan gooien en dat je bijvoorbeeld dit overhoudt voor een knop als je de CSS uitschakelt:

<div class="imgbutton"></div>

Zolang je het goed implementeert blijft er een discussie over van onderhoudbaarheid vs load-reduction en dat is een keuze waar niet het een of ander beter is (punt ). Het blijft een afweging en ook een beetje persoonlijke voorkeur.

[ Voor 40% gewijzigd door Bosmonster op 09-07-2008 13:52 ]

[Bozozo]

Verwijderd schreef op woensdag 09 juli 2008 @ 13:32:
[...]


Fijn discussieren dit, iemand die het walhalla gevonden heeft wbt achtergrondafbeeldingen

Wat als je nu de tekst in je menu schaalbaar wilt maken? Dus dat de tekst groter en kleiner kan worden binnen in het menu item. Doe maar eens appeltje (of control) + in firefox. dan kom je met een sprite snel behoorlijk wat problemen tegen. Sprites zijn prima te gebruiken als er geen veranderingen in hoogte of breedte plaats zullen vinden. Dus als je vormgever heeft bepaald dat er een exotisch font moet worden gebruikt voor de menustructuur. En dan nog is het maar afhankelijk van hoe je afbeelding eruit ziet. (1)

Het verhaal over HTTP requests is waar, maar met hedendaagse bandbreedtes (vooral hier in nl) is een http request in de wereld waar steeds meer ajax in opkomst is, niet echt een issue.(2)

Daarnaast heb je het onderhoudsissue, wat als je opeens vindt dat er een knop moet worden toegevoegd of dat de knop moet worden verhoogd, dan moet je voor elke state de backgroundposition gaan zitten wijzigen.(3)

Elk nadeel hep zijn voordeel zou ons Johan zeggen... er is niet een beste oplossing... punt(4)

1. Met variabele hoogtes krijg je net zo goed problemen als je geen sprites gebruikt. Ik heb hier een voorbeeldje gemaakt met verticaal schalende sprites. Je kunt op deze manier slechts twee images per sprites gebruiken, maar dat scheelt al de helft. Het enige nadeel van sprites is in dit geval dat je een extra element nodig hebt om het uitstekende stuk sprite weg te moffelen, maar dat zien je gebruikers niet. Dat ze geen flickering zien bij de eerste hover zien ze wel.

2. Dat is natuurlijk geen argument. Eenvoudige optimalisaties zijn altijd de moeite waard.

3. Dat kost je hoogstens twee seconden. Als je sprite met top left / bottom left wordt weergegeven hoef je zelfs niets aan te passen.

4. Jawel, sprites

[moozzuzz]

Fuzzillogic schreef op dinsdag 08 juli 2008 @ 22:52:
En doe jezelf daarna een enorm plezier, en ga eens op zoek naar een templating engine. XSLT is een aanrader, en heb je ook nog wat aan als je PHP ontgroeit. HTML-code door PHP laten genereren, zeker op deze schaal, is echt niet meer van deze tijd.

Hmm, met alle respect, maar de TopicStarter heeft nu al problemen met het HTML-gedeelte, laten we em eerst helpen met HTML en dan met het gedeelte dynamisch maken van een website via een PHP/XSLT/...-techniek.

@Ferry: http://www.handleidinghtml.nl en je pagina helemaal (!) van voorafaan opbouwen, je zal dan meteen zien waarom <LINK> niet juist staat en waar het heen moet.

[Verwijderd]

@Ferry: http://www.handleidinghtml.nl en je pagina helemaal (!) van voorafaan opbouwen, je zal dan meteen zien waarom <LINK> niet juist staat en waar het heen moet.

Ik heb mijn pagina opnieuw opgebouwd. Nu met hoofdzakelijk HTML.

zie: http://www.extreemweer.nl/index6.php

Nog steeds krijg ik het menu niet lekker links in de menu div.
Ik hoop dat iemand me kan uitleggen waarom het menu 'inspringt' naar rechts.
Ik heb me tureluur gezocht naar de oplossing en veel 'trial & error' toegepast.

Grts Fer.

[Xander]

Nog steeds is je HTML niet echt top...

Wat me direct al opvalt:

HTML:

<div id="menu">
      <link rel="stylesheet" href="css/extreemweer.css" type="text/css">

Pardon? Dat link element hoort alleen in je head thuis! (al eerder door iemand genoemd hier)

En een <ul> element per menu-item is ook niet echt nodig (ook al eerder door iemand genoemd hier). Je maakt nu een hoop lijsten met 1 element erin. Het idee van een lijst is taaltechnisch zelfs anders. En het zou me niet al te veel verbazen als het je probleem met uitlijnen moeilijker maakt.

Firebug en de Firefox webdeveloper toolbar gaan beide over hun nek als ik wat met de CSS probeer te spelen (ik heb zelfs al een keer het menu spontaan op de goede plek zien springen zonder iets daadwerkelijk aan te passen ). De dubbele declaratie van je stylesheet zou daar best eens iets mee te maken kunnen hebben. Dit soort dingetjes maken het heel wat moeilijker om jou even te helpen, het is niet alleen ideologisme dat iedereen over je code loopt te zeuren.

Je CSS file zelf verdient overigens ook nog wat aandacht...

Cascading Stylesheet:

// <div style="clear:both;"></div>
// div

Cascading Stylesheet:

// menu items

Cascading Stylesheet:

// BUTTONS

Met // maak je geen commentaar in een css-bestand, met // maak je alleen je css file stuk! (ik geloof dat de suggestie om alles eens door de W3 validator te gooien al gegeven was?) Commentaar hoort tussen /* en */

[Bozozo]

offtopic:
Ik zat nog wat na te denken over scalable sprites (zie vorige post) en ik wou dit nog opmerken:
- Traditionele sprites werken niet als je het scalable wilt maken. Dus een bestandje button_top.gif en button_bottom.gif van 1px breed met daarin de actieve state en de inactieve state werkt niet.
- De oplossing: Cross-Sprites. Het idee:

Lijkt me wel duidelijk zo. Demo.

[ Voor 6% gewijzigd door Bozozo op 09-07-2008 23:18 ]

[GandalfTheGrey]

Je hebt nu al je menu items actief gemaakt. Een oplossing is om met je PHP ervoor te zorgen dat de link die actief de class actief krijgt.

PHP:

<?php 
if($pag == $database_menu_item){
echo "<a class='actief' href=...>"; 
}
else {
echo "<a href=...>"; 
}
?>

EDIT: Ik zat scheef te lezen (pagina 1), was al opgelost
Ik ga maar is slapen

[ Voor 13% gewijzigd door GandalfTheGrey op 10-07-2008 01:28 ]

[Verwijderd]

Inmiddels werkt het menu naar behoren en wordt het ook netjes gepositioneerd. Bedankt voor het meedenken

zie www.extreemweer.nl voor het live voorbeeld (de site staat inmiddels dus al online)

[Cartman!]

edit: pagina 2 vergeten te lezen

mn tip blijft verder wel staan: firebug gebruiken!

en kan er van de css sprites geen aparte discussie gemaakt worden? ik ben er groot fan van namelijk Op Kings of code laatst was een gozer van Yahoo! die met allemaal optimalisatietips kwam en spriting was er 1 van (kende en gebruikte em alleen al). Het ging om user experience, en voor de user is het inladen van zo min mogelijk files het best omdat browsers maar 2 files tegelijk per server downloaden. Net als dat je css en js files het best kunt combineren en netjes te laten cachen.

[ Voor 173% gewijzigd door Cartman! op 21-07-2008 21:35 ]

[Fuzzillogic]

Verwijderd schreef op maandag 21 juli 2008 @ 21:13:
Inmiddels werkt het menu naar behoren en wordt het ook netjes gepositioneerd. Bedankt voor het meedenken

zie www.extreemweer.nl voor het live voorbeeld (de site staat inmiddels dus al online)

Helaas barst het nog steeds van de fouten. De <html>-tag ontbreekt zelfs al. Haal de site nou eens door een validator (zoals zovaak aangeraden) en fix de fouten eens. En waarom staat de content alsnog in een table?

[crisp]

Cartman! schreef op maandag 21 juli 2008 @ 21:26:
[...]
en kan er van de css sprites geen aparte discussie gemaakt worden? ik ben er groot fan van namelijk

Open gerust een topic over deze techniek
Helaas is hier de discussie over sprites dusdanig vermengt met de reacties op de problemen van de topicstarter dat daar niet echt een opzichzelf staand topic van te maken valt...

Check by the way de background-images van onze frontpage eens Ook hier op GoT gebruiken we al jaren CSS sprites. In fact: ik gebruikte die techniek al in 2003 in DHTML Lemmings

[Cartman!]

crisp schreef op maandag 21 juli 2008 @ 21:55:
[...]
Check by the way de background-images van onze frontpage eens Ook hier op GoT gebruiken we al jaren CSS sprites. In fact: ik gebruikte die techniek al in 2003 in DHTML Lemmings

Dacht je dat ik dat niet wist? Ik hoef er zelf opzich geen topic over te openen, ik ben al overtuigd maar ik bedoelde het meer voor de users die allebei er eigen ideeen op nahouden.