login  Naam:   Wachtwoord: 
Registreer je!
 Forum

PHP: Link invoegen (Opgelost)

Offline ekki - 18/12/2013 20:12 (laatste wijziging 18/12/2013 20:12)
Avatar van ekkiLid Het klinkt zo simpel, maar na een middag Google uitgeplozen te hebben kom ik er nog niet uit.

Dit is de situatie:

http://imageshack.us/a/img707/2826/jt28.jpg

Plaatscode: 142300

Plaatscode: 142301

Van oorsprong een codering voor RSS Feed maar via WordPress en Dreamweaver ongebouwd tot een link naar mijn "Biografie & Contact" pagina.

Voor de duidelijkheid heb ik de teksten "Biografie & Contact" en "Fotoreportages" toegevoegd achter de pictogrammen. Echter alleen de pictogrammen zijn momenteel als link in werking gesteld, de toegevoegde teksten nog niet. Dit krijg ik helaas ook niet voor elkaar.

Deze varianten ontstaan dan onder andere:
- http://img132.imageshack.us/img132/9100/kcrl.jpg
- a:hover http://img18.imageshack.us/img18/261/vuom.jpg

Ik heb nu verschillende mogelijkheden geprobeerd die ik vond op Google, maar helaas het lukt niet.

Er gaat dus ergens iets fout, maar waar?

9 antwoorden

Gesponsorde links
Offline Thomas - 18/12/2013 22:05
Avatar van Thomas Moderator Waarom gebruik je precies negatieve waarden voor je image-sprite? Grote kans dat daar iets mis mee is, probeer daar eens mee te schuiven? Ook zie ik een hele zwik proprietary (browserspecifieke) CSS code? Isoleer dit probleem en strip er CSS uit totdat je de boosdoener vindt.

Daarnaast: lijkt mij meer een HTML/CSS aangelegenheid, heeft niet zoveel met PHP te maken.
Offline ekki - 19/12/2013 10:18
Avatar van ekki Lid Dit is een sjabloon die ik via WordPress heb gevonden en nu aanpas naar eigen wensen, dus die codering is zoals de gebruiker hem toen gemaakt heeft.

Met die negatieve waarden heb ik dus al een hoop geschoven maar daarmee krijg ik mijn tekst niet terug, laat staan dat de url het dan doet (dan krijg je dit dus dit soort fratsen: http://img132.imageshack.us/img132/9100/kcrl.jpg).

Ook heb ik inderdaad al een hoop code eruit gehaald en gekeken waar het probleem zit, maar ook daar vond ik de boosdoener niet mee. Dit heb ik structureel regel voor regel gedaan.

Toch wel meer HTML/CSS? Ik dacht dat ik die link werkend moest krijgen via de header.php vandaar dat ik de vraag hier gesteld had.

Normaal gesproken pruts ik dus net zo lang totdat ik het gevonden op al dan niet met Google op de achtergrond, maar ik kan het gewoon nu niet vinden.
Offline marten - 19/12/2013 13:10
Avatar van marten Beheerder Topic verplaatst naar HTML & CSS.
Offline Thomas - 19/12/2013 14:25
Avatar van Thomas Moderator Bekijk de HTML-code eens van wat die PHP produceert?

Volgens mij staat "Biografie & Contact" tussen de </a> en de </span>, terwijl in het else gedeelte helemaal geen tekst staat? De :hover werkt op je a-tag, niet op je span-tag?

Volgens mij heb je helemaal geen span nodig? Je zou je hyperlink toch ook een text-indent of padding-left kunnen geven (zodat er ruimte voor dat plaatje is)? En van de hyperlinks blocks maken en deze floaten?

Zoiets dus:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <title>sprite</title>
  3. <style type="text/css">
  4. <!--
  5. a.sprite { display: block; float: left; height: 20px; background: url(sprite.png) no-repeat 0px 0px; padding-left: 25px; line-height: 20px; margin-right: 5px; }
  6. a.sprite:hover { background: url(sprite.png) no-repeat 0px -20px; }
  7. //-->
  8. </head>
  9.  
  10. <img src="sprite.png" alt="sprite" /><br />
  11. <br />
  12. <p>
  13. <a class="sprite" href="test.html">Biografie &amp; Contact</a>
  14. <a class="sprite" href="test.html">Biografie &amp; Contact</a>
  15. </p>
  16. </body>
  17. </html>


voorbeeld in werking

Afhankelijke van de grootte van je plaatjes zul je moeten schuiven met je height, line-height en padding-left en de offsets van je background, maar het idee lijkt mij duidelijk.
Offline ekki - 22/12/2013 11:09
Avatar van ekki Lid Goedemiddag, een drukke week achter de rug dus ik heb nu pas tijd om hier naar te kijken.

Zoals jouw voorbeeld, zoiets wil ik creëren inderdaad, ik snap je stukje code ook wel maar dan loop ik weer vast.

Ik heb hier twee bestanden:
- De header.php waar dus het stukje van span etc in staat.
- De css waar de opmaak staat.
- De rest van de php pagina's die bij het thema horen.
- De daadwerkelijke pagina's die ik via Wordpress gemaakt heb.

Jouw stukje is zo te zien een simpel HTML stukje (helder trouwens, bedankt) maar waar moet ik dat invoegen?

Ik heb diverse dingen geprobeerd zonder het gewilde resultaat namelijk.
Offline Thomas - 22/12/2013 11:24
Avatar van Thomas Moderator Heb je de broncode (dus puur HTML) van de uiteindelijk gegenereerde pagina bekeken (dit had ik al voorgesteld in mijn vorige bericht, maar dat was wellicht niet helemaal duidelijk)? Hoe ziet deze HTML-passage er uit?

Kun je het stukje HTML wat betrekking heeft op deze menubalk apart bekijken samen met de relevante CSS daarvan (mogelijk moet je dus nog wat spans, divs etc. die er omheen zitten meenemen).

Zet dit eens in een apart bestand en/of plak die code eens hier?

Als namelijk dit losse stukje er wel goed uit ziet, gooit er mogelijk iets anders (een ander stuk van je PHP, HTML of CSS) roet in het eten. Maar daar ga ik in eerste instantie niet van uit.

Als dit stukje er (ook) niet goed uit ziet is er een goede kans dat als je dit losse stukje weet te herschrijven zodat dit werkt, het ook werkt als je deze weer inpast in het geheel.

Ik vermoed namelijk dat de rest van je pagina (PHP of anderszins) geen invloed heeft op het navigatiemenu. Bekijk dit dus eerst eens in complete afzondering van de rest, want als je het wilt debuggen in zijn huidige vorm moet je ook nog rekening houden met PHP, wat het een en ander minder goed leesbaar maakt. Maak het jezelf makkelijk.
Offline ekki - 22/12/2013 13:43
Avatar van ekki Lid Nu snap ik die HTML opmerking, bedankt. Dat kan ik dus niet zien omdat ik die via WordPress gemaakt heb, via mijn CoreFTP kan ik hem niet zo snel vinden en downloaden. Ik kan jullie dus helaas niet veel meer laten zien dan mijn css en betreffende php pagina ben ik bang.

Ik dacht even beide bestanden volledig te uploaden maar wegens veiligheidsredenen wil hij dat niet doen met mijn php pagina, dus kan het vanwege die reden geen kwaad als ik die in zijn geheel hier kopieer?
Offline Koen - 23/12/2013 14:06
Avatar van Koen PHP expert Kunnen we je website ook ergens online bewonderen? Volgens mij kunnen we je dan een pak sneller op weg helpen.
Offline ekki - 23/12/2013 14:11
Avatar van ekki Lid Met behulp van FangorN is het probleem opgelost, ontzettend bedankt.

Het probleem (letterlijk geciteerd uit de mail van FangorN):

Citaat:
Het probleem is (was) als volgt: de links zijn niet geschikt om tekst in op te nemen, de link is namelijk zo breed als het plaatje. Dat moet ook, want je wil maar een fragment van die sprite laten zien, waarbij je een stukje scrollt als je er overheen hovert. Je kunt in deze opzet de link dus niet breder maken om hier ook tekst in af te drukken.

De oplossing
Voor links waar ook tekst in zit moet je uitzonderingen definiëren. Uiteindelijk bleek het makkelijkste het omdraaien van de <span> en de <a> tags voor deze links:


Zo volgde er een serie aan aanpassingen in zowel mijn header.php als CSS en nu werkt alles naar toebehoren.

Nogmaals ontzettend bedankt voor deze hulp en bij deze wens ik iedereen fijne feestdagen!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s