probleem met afbeeldingen

[tiran818]

ik weet niet zeker of het hier hoort, maar plaats het toch amar hier bij gebrek aan beter.

ik heb een heel mooi navigatie menu op de volgende site:
http://cafe.bergenbosch-school.nl/
maar het probleem is (zoals jullie waarschijnlijk wel zien) dat bij sommige knoppen opeens een streepje aan de linker kant zit.
weet iemand hier misschien waardoor dit komt?

mijn HTML ziet er zo uit(voor het navigatiemenu dan):

<div id="nav">
<div class="aerobuttonmenu">
		<?php 
		echo ("
		<a href=\"".$path."../index.php\" class=\"aero\"><span>Home</span></a>
		<a href=\"".$path."band.php\" class=\"aero\"><span>Band</span></a> 
		<a href=\"".$path."../flash/fotogalerij.php\" class=\"aero\"><span>Fotogalerij</span></a>
		<a href=\"http://bergenbosch.forumcircle.com/portal.php\" class=\"aero\"><span>Forum</span></a>
		<a href=\"http://bergenbosch.forumcircle.com/faq.php\" class=\"aero\"><span>Forum FAQ</span></a>
		<a href=\"".$path."hygieneplan.php\" class=\"aero\"><span>het Hygiëneplan</span></a>
		<a href=\"".$path."weekmenu.php\" class=\"aero\"><span>het Weekmenu</span></a>
		<a href=\"".$path."collumn.php\" class=\"aero\"><span>Collumn</span></a>
		<a href=\"".$path."../gastenboek/gastenboek.php\" class=\"aero\"><span>Gastenboek</span></a>");
		
		?>
</div>
</div>

de php is alleen voor de variabele path zodat ik op een pagina die in een ander map staat gewn hetzelfde menu kan includen/requiren is verder gewn een pad dat uitgebreid wordt. dus dat maakt geen verschil
het probleem was er daarvoor al.
de CSS ziet er zo uit(voor het menu alleen alweer):

<style type="text/css">
* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('images/leftmenu.GIF') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.8;
-moz-opacity: 0.8;
}


.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: #E1E1E1; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent url('images/rightmenu.GIF') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 1;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: #EBEB00;
}

.black a.aero{
background-image: url('images/leftmenu.GIF');
}

.black a.aero span{
background-image: url('images/rightmenu.GIF');
}
</style>

 

[tiran818]

de site valt niet meer onder mijn beheer.
echter als iemand een antwoord heeft voor dit probleem zou ik het nog steeds graag horen.

 

[csshunter]

Hoi Tiran,

het probleem is (zoals jullie waarschijnlijk wel zien) dat bij sommige knoppen opeens een streepje aan de linker kant zit

Nou kijk ik er waarschijnlijk wel overheen , maar ik zie helemaal geen streepje aan de linker kant. Driftig geprobeerd: in Firefox 3.0.12, Internet Explorer 7, Opera 9.64, Safari 4.0.2, verschillende resoluties, verschillende lettergrootten... naks. Ook geduldig zitten wachten tot het "opeens" zich zou manifesteren ... naks.

Herstel! Toch! In (alleen) Firefox bij stevige lettergrootte-verkleining is van de onderrand alleen het linksonder-hoekje te zien:

Oorzaak: in de css staat een fixed font-size van 13px. En de gebruikte knop-afbeelding-techniek is ongeschikt voor client-side klein ingestelde lettergrootte. Bij heel groot gaat het ook mis, trouwens.
Oplossing: een "flexibele hoekjes techniek" gebruiken. Ben je meteen mooi van de IE aerobuttonmenu alpha-filter toestand af.

Verder is er waarschijnlijk later een extra knop toegevoegd, die nu (in alle niet-IE browsers) dwars door het menukader komt te hangen. Oplossing: een clearing-div'je vlak voor het eind van het menu.

Met groet,
CSS-hunter

 

[tiran818]

waar bij jou de hoekjes staan zat bij mij soms op één of meerdere van de knoppen een streepje (alsof er ruimte tussen de 2 afbeeldingen wordt gelaten.

padding zou moeten werken toch?

ach ja
ik zal het doorgeven aan de persoon die nu de site onderhoud (het is was iets voor school en aangezien ik naar een andere school ga onderhoud k m dan niet meer.)

 

[csshunter]

De auteurs van het "aerobuttonmenu" wijzen zelf al op de valkuil van de onmogelijkheid om van het fixed font-size af te wijken (zoals terecht bij FF een optie is, en daar dus ook mis gaat):

The caveat for this menu is the fixed height of each button based on the graphic interface, hence isn't ideal if the buttons' font size is changed from the default.

Het valt dus met ergens een padding niet op te lossen.
Verder valt me op:

• De links staan (ook bij de uitvinders) koud achter elkaar, in plaats van in een keurig <ul><li></li></ul> lijstje. Dan is het een stuk lastiger om bij een langer wordend rijtje de knop(pen) die er horizontaal niet op passen, er goed onder te positioneren.
• De $path kan gewoon helemaal gemist worden, als je een absoluut pad voor de links opgeeft (<a href="http://desite.nl/mapje/mapje/bestand">, dan gaat het altijd goed, ook als je pagina's niet in dezelfde map zitten als de index.

Wil je de tekst in de knoppen schaalbaar maken, dan ben je aangewezen op een flexibele hoekjes techniek.
Of anders is het verreweg het eenvoudigst om de knoppen als images te presenteren, en die met een css-hover van kleur te laten verschieten, dan ben je van het probleem van rek en krimp af (steeds dezelfde hoogte/breedte); en de transparantie is eigenlijk nergens echt voor nodig. Techniek: alhier (zie ook broncode). Principe-uitleg (voor zover nodig): ierzo.

In geval van deze css background-img methode kan voor de toegankelijkheid (voor mensen met een pure textbrowser of een textvoorlezer) een met css buiten beeld geplaatste link-tekst opgenomen worden:

.invis { position: absolute; top: -9999px; margin-left: -9999px; }

<li><a href ="...."><span class="invis">Home</span></a></li>
<li><a href ="...."><span class="invis">Band</span></a></li>
enz.

Na invoegen hiervan kan je het resultaat ervan zien als je in Firefox naar "Beeld > Paginastijl > Geen Stijl" gaat.
Met dit "stijlloos", zoals textbrowsers en textreaders gebruiken, wordt de style-class "invis" - net als alle andere aangebrachte styles - buiten werking gesteld, en de link-tekst is dan gewoon zichtbaar/hoorbaar.

Vraag opgelost?
CSS-hunter

 

[tiran818]

ok
heel erg bedankt

die $path heb ik gedaan zodat ik ook offline kon doorlinken naar de juiste files XD
t was makkelijker geweest om het met complete urls te doen ja, maar k vond t leuk om een alternatieve oplossing te zoeken, en het werkt goed
ik ga de 'flexibele hoekjes techniek' onthouden voor sites in de toekomst en misschien toepassen op een andere site waar ik ook met een menu werk dat ik heb gebaseerd op het earobuttonmenu

MvG
tiran818