Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] image in box veranderen d.m.v. een link

27 antwoorden
  • Voorbeeld: [url=http://junk.xanuex.nl/website/preview.htm]Website[/url] Ik heb een aantal vraagjes/problemen m.b.t. de bovenstaande website: 1) Ik wil graag het plaatje HOME ([i:eaab9a85d4]zie plaatje1[/i:eaab9a85d4]) veranderen wanneer ik op een van de knoppen in het menu klik. Nu staat het plaatje in een box welke is vormgegeven in een stylesheet. [list:eaab9a85d4]#maincontent { float: right; margin: 0; padding: 70px 20px 30px 40px; width: 709px; /* box model hack */ voice-family: "\"}\""; voice-family:inherit; width: 689px; border-left: 1px solid #790000; background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; height: 200px; }[/list:u:eaab9a85d4] Ik ben al met javascript bezig geweest maar ik krijg het niet voor elkaar. iemand die me hiermee kan helpen ? 2) Iemand enig idee waarom er een gat in het menu zit en hoe ik dit kan oplossen? ([i:eaab9a85d4]zie plaatje2[/i:eaab9a85d4]) 3) Iemand enig idee hoe ik de balk onderaan in hoogte kan verkorten? Ik heb hem een hoogte van 32px meegegeven maar door het formulier wat erin komt te staan wordt deze hoogte gewoon verlengt wat lelijk staat. [b:eaab9a85d4]Plaatje 1[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout3.gif[/img:eaab9a85d4] [b:eaab9a85d4]Plaatje 2[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout1.gif[/img:eaab9a85d4] [b:eaab9a85d4]Plaatje 3[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout2.gif[/img:eaab9a85d4] alvast bedankt. - marcel
  • Ik denk dat je de pseudo-class a:active moet hebben hiervoor. Dit werkt als een a:focus in IE, maar ik denk dat dit in dit geval niet veel zal uitmaken. Ik denk dat het gat in het plaatje een bug in IE is. Je lijkt al alle margins en paddings op 0 te hebben gezet en in Mozilla ziet iig dat er wel goed uit. Probeer eens een negatieve -margin-top:-4px; voor alleen IE. Ik denk dat die form-tag de oorzaak van die extra hoge onderkant. Om de #footer heen gooien helpt iig al iets. Er gaat nogal wat fout in Mozilla. Check je site daar ook eens in. Ik denk dat dit te maken heeft met je gebruik van float. Ik zou voor dit soort layout eigenlijk geen gebruik maken van float.
  • Voorbeeld: [url=http://junk.xanuex.nl/website/preview.htm]Website[/url] Ik zag idd dat hij in andere browsers niet echt denderend was, dat is nu gefixed als het goed is. enig idee hoe ik dit in die pseudo-class moet aangeven gezien het feit dat het voor iedere knop anders is? Ik was zelf al met javascript aan de gang gegaan maar kom daar ook niet echt uit. Die margins -4 werkt niet, nog meer ideeen? Ziet er niet echt top uit zo al zeg ik het zelf :P ik weet dat de form-tag het probleem is, wilde alleen weten of er een oplossing voor is om die margins eronder niet zo uit te breiden :-?
  • Ik heb nu alleen in IE dat de linker box te klein is, volgens mij werkt die boxmodel-hack niet. [code:1:606a7589b0]#maincontent { float: right; margin: 0; padding: 70px 30px 30px 30px; border-left: 1px solid #790000; background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; color: #000; height: 300px; width: 748px; voice-family: "\"}\""; voice-family:inherit; width: 688px; } html>#maincontent { width: 688px; } [/code:1:606a7589b0] En ik zie in mozilla het plaatje HOME niet.
  • Je moet je site wel opslaan als .php he :D[code:1:a17e191c40]<?php session_start(); define('ROOT_URL', 'http://localhost/project3/website/website/'); include('config.php'); ?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> ... rest site[/code:1:a17e191c40]
  • hehe, ik had er ff htm van gemaakt omdat de php shit niet echt van belang was voor die boxen vandaar... anywayz, het is verholpen nu :) nu blijft het volgende over... - hoe switch ik die kopteksten - hoe zorg ik ervoor dat het 'gat' in het menu verdwijnt
  • iemand die een idee heeft, kom zelf niet verder :(
  • mm, probeer es [code:1:1f1d3ba6dc] ul, li { margin: 0px; }[/code:1:1f1d3ba6dc] edit, werkt niet, zelf maar ff geprobeerd, wel een vaag prob.
  • [code:1:574226e20a] <img src='images/menu/top.gif' alt='' /> <ul id="nav"> <li id='menu_home'> <a href="#home" onClick="changePicure('home');">Home</a></li> <li id='menu_forum'> <a href="#forum" target='_blank' onClick="changePicure('forum');">Forum</a></li> <li id='menu_archief'><a href="#archief" onClick="changePicure('archief');">Archief</a></li> <li id='menu_links'> <a href="#links" onClick="changePicure('links');">Links</a></li> <li id='menu_contact'><a href="#contact" onClick="changePicure('contact');">Contact</a></li> </ul> <img src='images/menu/bottom.gif' alt='' />[/code:1:574226e20a] Het gaat toch om het image, deze staat boven de ul. vind het ook wazig dat hij onderaan wel aansluit en bovenaan niet, dus alleen de top-margin zou dan verkeerd zijn ofzo :S
  • Verwijder de "enter" aan het einde van de afbeelding, dus:[code:1:4361e80464]<img src='images/menu/top.gif' alt='' /><ul id="nav">[/code:1:4361e80464]Dit is een bekende IE-bug. - Bas
  • een van de vele :x nu zit ik alleen nog met het switchen van de background-image. Wanneer ik op een link klik moet het achtergrond plaatje in #maincontent veranderen. daar ook nog tips voor toevallig ?
  • Het zal iets zijn in de trend van[code:1:d62ee2a48e]document.getElementById("menu_home").className = "maincontent";[/code:1:d62ee2a48e]Moet je er alleen even voor zorgen dat je [i:d62ee2a48e]#maincontent[/i:d62ee2a48e] verandert in [i:d62ee2a48e].maincontent[/i:d62ee2a48e] zodat het consistent blijft. - Bas
  • ik krijg het niet voor elkaar, hier een voorbeeld. [url=http://junk.xanuex.nl/website/]Voorbeeld[/url] ik zie dat de maincontent box in Mozilla niet mee gaat met de content, wat kan ik daar aan doen ?
  • Dit klopt niet:[code:1:7e4e3153b0]<li id='menu_forum'><a href="#forum" onClick='changePicture('menu_forum')'>Forum</a></li>[/code:1:7e4e3153b0]Je moet beter met de quotes werken, het volgende is juist qua syntax:[code:1:7e4e3153b0]<li id='menu_forum'><a href="#forum" onClick='changePicture("menu_forum")'>Forum</a></li>[/code:1:7e4e3153b0]Om dergelijke fouten op te sporen kan ik je trouwens de JavaScript Console van Mozilla aanraden. Redelijk duidelijke foutmelding, inclusief regel en kolom waar deze optreedt. En je kan direct naar de desbetreffende regel in de broncode springen. - Bas
  • Dubbele quotes in html is het meest gangbaar. Door elkaar heen gebruiken is al helemaal vies ;) [code:1:9d34fccc40] <li id="menu_forum"> <a href="#forum" onClick="changePicture('menu_forum');">Forum</a> </li> [/code:1:9d34fccc40]
  • is het niet mogelijk om het volgende te doen ? [code:1:ddd92b8c7c] <script language='javascript'> function changePicture(menu) { document.getElementById("maincontent").background="../images/kopteksten/"+menu+".gif"; } </script>[/code:1:ddd92b8c7c] Het plaatje staat namelijk gecentreerd in de box [code:1:ddd92b8c7c]#maincontent { background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; }[/code:1:ddd92b8c7c] *zucht* niet gedacht dat het zoveel moeite zou zijn om een plaatje te laten wisselen :(
  • [code:1:9b88b3b248]<script type="text/javascript"> function changePicture(menu) { document.getElementById("maincontent").style.backgroundImage="../images/kopteksten/"+menu+".gif"; } </script>[/code:1:9b88b3b248]Let er even op dat het [i:9b88b3b248]language[/i:9b88b3b248]-attribuut verouderd is en vervangen door [i:9b88b3b248]type[/i:9b88b3b248]. - Bas
  • hmm, geeft een foutmelding en die javascript Console van Mozilla vat ik niet helemaal...
  • [quote:a62057cc74="xanuex"]hmm, geeft een foutmelding[/quote:a62057cc74]Ik zie geen foutmelding... Heb je de plaatjes al op de server gezet? (Antwoord: nee) - Bas
  • in IE krijg ik een foutmelding wanneer ik op een knop klik. en plaatjes staan op de server (antwoord: ja) lol :P /* error in IE Line: 30 Error: Invalid Argument [url=http://junk.xanuex.nl/website/images/kopteksten/home.gif]http://junk.xanuex.nl/website/images/kopteksten/home.gif[/url] [url=http://junk.xanuex.nl/website/images/kopteksten/forum.gif]http://junk.xanuex.nl/website/images/kopteksten/forum.gif[/url] [url=http://junk.xanuex.nl/website/images/kopteksten/archief.gif]http://junk.xanuex.nl/website/images/kopteksten/archief.gif[/url] etc

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.