login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Link maken van DIV?

Offline NickvB - 09/04/2010 03:29
Avatar van NickvBNieuw lid Hoi beste mensen,

Allereerst wil ik zeggen dat ik zowel nieuw ben op dit forum als nieuw ben in het "website gebeuren". Ik wou een paar weken geleden iemand in gaan schakelen om een website voor me te maken maar omdat het me wel interesant leek heb ik me er zelf maar in verdiept.

Ik heb een boek gekocht waarin de basis van html en css word uitgelegd dus ik ben inmiddels vrij goed op de hoogte hoe de basis werkt van een website maken. Nu heb ik in photoshope een layout gemaakt en deze gesliced. De afbeelding heb ik 1 voor 1 positie gegeven met div's in het css bestandje.

Nu heb ik ook een balk met daarin de "HOME" "ABOUT US" etc. Deze onderdelen heb ik dus los gesliced en nu komt de vraag:

Hoe kan ik deze "buttons linken naar een volgende pagina? Is dat uberhaupt wel mogelijk met css? In html kan het schijnbaar niet omdat er geen inline element in een blok element kan komen ( correct me if im wrong ).

Is het mogelijk met javascript of php? Anders moet ik me daar maar eens in gaan verdiepen. Ik zou het wel jammer vinden want ik had gehoopt dat ik mijn siteje in korte termijn online kon zetten.

Alle hulp word ZEER gewaardeerd.

Gr Nick

24 antwoorden

Gesponsorde links
Offline Jelmerholland - 09/04/2010 06:57
Avatar van Jelmerholland PHP beginner Je kan een simpele navigatie (zoals je hier aan de rechter kant ziet) beter met het list element maken. Werkt beter een makkelijker.

Als je iets wilt linken, dan gebruiken we daarvoor de 'anchor tag' <a> </a>

Het is sowieso wel slim om de HTML en daarna de XHTML tutorial door te nemen op w3schools.com, dan leer je gewoon van alles wat.

Als je een div wilt linken (wat jij eigenlijk wilde), dan kan je er eventueel een <a> IN zetten, en een 'display:block' meegeven in je css. Als de hoogt dan niet klopt, dan geef je hem gewoon een 'padding-top' en 'padding-bottom'.

Je kan dit ook met js doen, maar dan moet deze snippet in je <div> zettten:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div onclick="window.location='AnotherPage.html'"> </div>


Dat is ook een manier, maar in principe werk je voor navigatied dus met het list element.
<ul><li>
Die geef je een display:inline mee, en dan kom je al een heel eind. (Natuurlijk zet je BINNEN het <li> element nog een anchor-tag (<a></a>)


Wat sowieso helpt is is in de source kijkjen van simpele sites, daar leer je heeel veeeel van.

Succes,
Jelmer
Offline WouterJ - 09/04/2010 07:30
Avatar van WouterJ HTML gevorderde Als je een menu maakt kun je het best met <ul> maken.
En de tekst link je gewoon met <a>.
Bijv.:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. <li><a href="home.html">Home</a></li>
  3. </ul>


En als dat menu dan verticaal moet zet je in CSS dit:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. li {
  2. float: left;
  3. }

Dan komen alle li's verticaal.
Offline NickvB - 09/04/2010 12:29 (laatste wijziging 09/04/2010 12:38)
Avatar van NickvB Nieuw lid Allereerst bedankt voor de reacties!

Maar volgens mij begrijpen jullie niet precies wat ik bedoel. Ik heb dus de layout gemaakt in photoschop waarin ik een horizontale balk onder de bovenste banner heb gezet. In deze balk heb ik de tekst gezet in photoshop omdat dat lettertype mooi past bij de banner met de naam van de site.

Dus de balk met HOME enzo erin heb ik ook gesliced zodat ik kleine stukjes krijg die ik wou gebruiken als buttons. Ik zou natuurlijk de balk gewoon leeg kunnen laten en dan met een standaard lettertype hyperlinks maken in html.

@ Jelmerhollan

En dat boek wat ik gehaald heb gaat over xhtml.


ff een linkje naar een site waar ik een printscreen op heb gezet:

http://gamebatt...id=3003825

Kijk niet teveel naar het ontwerp, ik had een week geleden nog nooit een grafisch programma gezien behalve paint. Zelfde geld voor html enzo. Gaat ff om het idee he ;)

Het is dus de balk met HOME etc die ik in stukken gesliced heb met PS. Word dit vaker gedaan of vullen ze normaal gesproken altijd de tekst in met html?

Alvast bedankt voor de hulp!  
Offline Martijn - 09/04/2010 14:02 (laatste wijziging 09/04/2010 14:03)
Avatar van Martijn Crew PHP Wat ik aanraad, en zelf ook doe, is niet de div aanklikbaar maken, maar in je div een img met width en heigth op 100% (of het aantal px van de div, netter maar meer werk).

Die img is een simpele 1px transparante gif/png (al is gif hier wat beter voor ivm ondersteuning) die dus opgerekt wordt. Daar maak je een <a> link van, en klaar 

Nadeel van je div een onclick event geven is dat sites als google niet meer door je site kunnen gaan, of in die enkel gevallen, mensen die javascript uit hebben staan ook niet meer werkt


edit: Ik neem aan dat je nu de img die in je div 'home' hebt staan, daar kun je ook n link om zetten. Anders hetzelfde als wat ik hierboven heb gezegd, en dan die huidige afbeelding als background instellen

edit2: Voor voorbeeldje: http://martijnvooges.net
Bedankt door: NickvB
Offline WebSmurf - 09/04/2010 14:32
Avatar van WebSmurf Nieuw lid
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Offline Martijn - 09/04/2010 16:32
Avatar van Martijn Crew PHP gast, lees je t topic wel? Dat antwoord is én al gegeven én al aangegeven dat dat misschien niet zo'n goed idee is
Offline NickvB - 09/04/2010 19:29 (laatste wijziging 09/04/2010 20:41)
Avatar van NickvB Nieuw lid @ Martijn

LOL erobabes.be? Nette sites maak je! En bedankt voor je tip ( de rest ook natuurlijk ).
Maar ik ga die transparante GIF proberen. Ik laat wel weten of het gelukt is......

Had zelf nog een ideetje die ik eerst geprobeerd heb en dat werkt ook:

<!--buttons linken-->

<style type="text/css">

#linkhome {
position: absolute;
top: 137px;
left: 200px;
height: 40px;
width: 68px;
border-style: none;
}

</style>
<style type="text/css">

#linkaboutus {
position: absolute;
top: 137px;
left: 268px;
height: 40px;
width: 99px;
border-style: none;
}

</style>
<style type="text/css">

#linkmembers {
position: absolute;
top: 137px;
left: 367px;
height: 40px;
width: 119px;
border-style: none;
}

</style>
<style type="text/css">

#linkclanwars {
position: absolute;
top: 137px;
left: 486px;
height: 40px;
width: 112px;
border-style: none;
}

</style>
<style type="text/css">

#linkforum {
position: absolute;
top: 137px;
left: 598px;
height: 40px;
width: 89px;
border-style: none;
}

</style>
<style type="text/css">

#linkjoin {
position: absolute;
top: 137px;
left: 687px;
height: 40px;
width: 72px;
border-style: none;
}

</style>

<a id="linkhome" href="home.html"><img src="images/bt_home.jpg" alt="" border="0" /> </a>
<a id="linkaboutus" href="about_us.html"><img src="images/bt_aboutus.jpg" alt="" border="0" /> </a>
<a id="linkmembers" href="members.html"><img src="images/bt_members.jpg" alt="" border="0" /> </a>
<a id="linkclanwars" href="clanwars.html"><img src="images/bt_clanwars.jpg" alt="" border="0" /> </a>
<a id="linkforum" href="forum.html"><img src="images/bt_forum.jpg" alt="" border="0" /> </a>
<a id="linkjoin" href="join.html"><img src="images/bt_join.jpg" alt="" border="0" /> </a>

<!--einde buttons linken-->

Is het op deze manier ook goed? Het werkt namelijk wel gewoon. 
Offline WebSmurf - 09/04/2010 19:43
Avatar van WebSmurf Nieuw lid
Martijn schreef:
gast, lees je t topic wel? Dat antwoord is én al gegeven én al aangegeven dat dat misschien niet zo'n goed idee is

Dan motte zorgen dat me bericht zelf kan verwijderen want inderdaad viel me al op dat antwoord geven was. Weer een hoop gezever om niets zoals gebruikelijk hier  
Offline vinTage - 09/04/2010 19:48 (laatste wijziging 09/04/2010 19:51)
Avatar van vinTage Nieuw lid
WebSmurf schreef:
[..quote..]
Dan motte zorgen dat me bericht zelf kan verwijderen want inderdaad viel me al op dat antwoord geven was. Weer een hoop gezever om niets zoals gebruikelijk hier  


Bol t dan gewoon af he! + waarschuwing voor je taalgebruik
edit: 3e en dus laatste waarschuwing
Offline TotempaaltJ - 09/04/2010 20:56 (laatste wijziging 09/04/2010 21:00)
Avatar van TotempaaltJ PHP interesse
NickvB schreef:
@ Martijn

LOL erobabes.be? Nette sites maak je! En bedankt voor je tip ( de rest ook natuurlijk ).
Maar ik ga die transparante GIF proberen. Ik laat wel weten of het gelukt is......

Slecht idee! Niet doen! Transparante GIF's is niet de manier. Zo deden ze het 15 jaar geleden, nu doe je dit met Javascript. Negeer alles en iedereen die/wat zeggen dat je een noscript tag moet gebruiken. Javascript wordt ondersteunt door eigenlijk alle browsers, en de rest wordt massaal gebruikt door 2 gebruikers in totaal.

Anyway, terug naar het topic. Gebruik de manier die WebSmurf gaf, ondanks dat het antwoord al was gegeven en Martijn hierover klaagde. Martijn: Zijn manier was simpelweg beter dan alle daarvoor gegeven manieren, door de cursor: pointer;, wat de duidelijkheid van wat en waar een link zit, door de cursor in dezelfde te veranderen als bij een normale link.

@Martijn: Waar was het aangegeven dat dit niet zo'n goed idee was? Het enige argument tegen wat ik kan vinden is dat jij jouw manier aanraadt omdat jij die manier zelf ook gebruikt.
Offline Jelmerholland - 10/04/2010 00:59
Avatar van Jelmerholland PHP beginner @TotempaaltJ
http://www.site...1#id236920 3e alinea

@Nick
http://www.JDwebdesign.nl/nieuw

Als je de broncode van mijn site opent, dan zie je ook de opbouw van de navigatie wel duidelijk (trek je niks aan van evt rare links, of niet werknde dingen, zoals je ziet op de http://www.jdwebdesign.nl/ is dat er nog druk mee bezig ben Bèta zeg maar.

Het komt er in ieder geval op neer dat daar wel een duidelijke (en goed terugvindbare) navigatie staat ;) Wellicht heb je hier wat aan. (trek je trouwens niks aan van de jQuery (javascript add-on) die eronder staat, dat is enkel voor het 'omhooggaan' en tekst effect ;)
Offline NickvB - 10/04/2010 05:32 (laatste wijziging 10/04/2010 05:42)
Avatar van NickvB Nieuw lid Mensen wederom bedankt voor jullie hulp!

Mijn site is inmiddels af maar nu zit ik met het volgende probleem:

Ik upload mijn bestanden naar de server van Versio en volgens hun moet ik mijn bestanden in de map public_html zetten. Maar als ik dit doe en ik probeer mijn site te openen in de browser gebeurd er niets 

Het klopt toch dat ik alle html bestandjes, een css bestand en een map met afbeeldingen in die public_html moet uploaden? Of doe ik hier iets verkeerd.


Best wel frustrered als je de hele nacht aan een site werkt en je krijgt hem niet op het net. Echt vervelend dit.

Ik hoop dat iemand me kan helpen. Mijn dank is zeer groot!!

PS kijk maar eens naar de tijd van poste  en nee ik ben niet vroeg op gestaan maar nu pas klaar. hahaha

En trouwens als ik nu mijn website naam in de browser type staat er:

Forbidden
You don't have permission to access / on this server.
--------------------------------------------------------------------------------
dutchsniperteam.com

terwijl er voor ik de upload deed nog een logo van versio zag. Ook stond er bij dat ik bestanden in public_html moest zetten om mijn site te zien of zoiets.
Offline TotempaaltJ - 10/04/2010 10:21
Avatar van TotempaaltJ PHP interesse
Jelmerhollan schreef:
@TotempaaltJ
http://www.site...1#id236920 3e alinea

Site. Map. 
Offline Jelmerholland - 10/04/2010 11:05
Avatar van Jelmerholland PHP beginner @Totem,
ook een optie

@Nick,
you're gettin' addicted? 

Je hebt toch wel een index.html right?

Je kan mij ook een pm sturen, dan help ik je wel verder, als je er mee vast blijft zitten ;)

En als jij zeker weet dat jij een home.html op je site hebt, gaan dan naar deze url:
www.MijnSite.nl/home.html

Dan kom je er sowieso wel op. Maar als jij wilt dat www.MijnSite.nl het gewoon doet, dan moet je standaard pagina een index.html zijn ;)

En ja, public_html is goed. Ps. Kijk nou is op je site? Misschien heb je gewoon een über trage server 
Offline Martijn - 10/04/2010 13:01
Avatar van Martijn Crew PHP @Totempaaltj, ik geloof dat je nu dingen door elkaar aan het halen bent. Javascript daarvoor gebruiken is not the way. Op veel mobieltjes kan dat al fout gaan, het is totaal niet SEO.

Javascript is ervoor om link in een nieuw blad te laten openen en toch xhtml valid te blijven. Er is totaal niets mis mee met een tranparante gif. Mitje je maar jusit met je titles en alt's omgaat
Offline Joost - 10/04/2010 13:45 (laatste wijziging 10/04/2010 13:45)
Avatar van Joost PHP expert @TS: hernoem home.html naar index.html, en dan werkt het waarschijnlijk. Index.html is de pagina die wordt geladen door een webserver wanneer er geen specifieke file is meegegeven in de link (wat bijvoorbeeld wel het geval is bij http://x.com/pagina.html, waarbij pagina.html de file is).

Dat je nu een forbidden error krijgt, komt omdat de webserver geen index.html kan vinden. Als dat gebeurd, kan de webserver 2 dingen doen:
- De lijst met bestanden en mappen in je public_html weergeven.
- Een forbidden error geven.
Dit is afhankelijk van instellingen op de webserver. Jouw webserver is dus zo ingesteld dat er een forbidden error wordt gegeven 

Hopelijk is het nu wat duidelijker wat er fout gaat bij het online zetten van je site 
Offline NickvB - 10/04/2010 13:52 (laatste wijziging 10/04/2010 13:53)
Avatar van NickvB Nieuw lid @Jelmerhollan en Joost:

Ik had idd mijn startpagina nog als home.html  
Veranderd naar index.html en de rest natuurlijk aangepast en hij werkt nu.  

Kunnen jullie meteen een oordel geven haha:

http://dutchsniperteam.com/

Houd er wel rekening mee dat ik een week geleden nog nul wist van html en van grafische programmas maar ik ben er blij mee voor nu.

En kijk aub niet in het bronbestand want ik had veel moeite met mijn tekst positie te geven dus heb veel <br> gebruikt.

Iedereen super bedankt voor de hulp en ja ik ben addicted!!!!! Echt leuk om te doen dit!

Gr Nick
Offline Jelmerholland - 10/04/2010 16:18
Avatar van Jelmerholland PHP beginner Mooi dat het werkt nou,

voor een allereerste design, maar ook voor je 1e week coding, vind ik 'm best netjes.

Maar, het is onduidelijk, afbeeldingen lopen niet mooi door, het is niet 1 geheel. Het zijn allemaal kleine losse onderdelen..

Ga een beetje surfen en kijk wat je zoal tegenkomt... je zult zien dat er nooit een design als dit online staat In ieder geval niet voor iets waar je meer door zou willen gaan.

Stiekem kijk ik toch in je source, wat zie ik? Bende Sorry dat ik het zeg, maar het is niet duidelijk, handig...

Jij hebt sommige divjes 'vullerX' genoemd, hoe vindt je nou terug wat wat is?
Ook zie ik dat je xhtml strict hebt als doctype, dan mag je geen <br> gebruiken, verander die naar <br/>, alle tags moeten afgesloten worden.

Bekijk ook deze link is: http://validato...mp;group=0

En wat me opvalt is dat je alle css gewoon in je index.html hebt staan, maak 1 .css bestand en haal die overal met een <link> op.

http://www.JDwebdesign.nl/nieuw

Daar zie je ook wel een voorbeeldje hoe je dat kan doen ;)
Offline NickvB - 10/04/2010 16:54 (laatste wijziging 10/04/2010 17:01)
Avatar van NickvB Nieuw lid @ Jelmerhollan

Bedankt voor de tips! hier ga ik zeker wat mee doen met de volgende site.

En ja je hebt op alle punten gelijk, maar ik moet zegge dat ik het thema (gaming ) heel moeilijk vind vooral omdat ik nogal grafisch beperkt ben .

Een zakelijke site lijkt me veel makkelijker. En idd de source is een bende maar dat zal alleen maar beter worden met mijn volgende sites.

Ben eerlijk gezegd toch wel tevreden met het resultaat en mensen in mijn omgeving heb ik de site ook laten zien en die vinden het heel mooi maar dat komt denk ik ook omdat een webdesigner er anders naar kijkt dan de "normale" surfer.

In ieder geval iedereen heel erg bedankt voor de hulp!!! Ik stel dat zeer op prijs!

Trouwens ik heb ook een losse css erbij zitten waar alle divs in staan, maar voor degene die in de html staan kon ik geen andere oplossing bedenken.

Ps: als er nog meer mensen zijn die hun oordeel willen doen dan hoor ik het graag
Offline WouterJ - 10/04/2010 17:39
Avatar van WouterJ HTML gevorderde Allereerst: Een goede site voor iemand met zo weinig ervaring!

En ik wil je toch wat tips geven voor de broncode. Dus hier komen ze:

- Je kunt alle CSS gewoon in 1 bestand zetten. Die moet je dan opslaan als .css en die zo in je HTML zetten:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel="stylesheet" type="text/css" href="denaam.css">

* Als je verder wilt op de manier die je nu hebt moet je <style> in de <head> van de
pagina zetten.
- CSS hoeft niet per naam{} een apart <style> tag. Je kan alles gewoon in 1 <style> zetten.

- In plaats van <br> kun je in CSS ook padding-top gebruiken. En daar dan wat invullen.
Dat is de afstand vanaf de bovenkant van de div.

Maar nogmaals, iedereen moet leren. En je kan niet alles weten na 1 week. Dus veel succes en onthou dit: Mijn eerste site ziet er veel slechter uit!
Offline TotempaaltJ - 10/04/2010 18:34
Avatar van TotempaaltJ PHP interesse
Martijn schreef:
@Totempaaltj, ik geloof dat je nu dingen door elkaar aan het halen bent. Javascript daarvoor gebruiken is not the way. Op veel mobieltjes kan dat al fout gaan, het is totaal niet SEO.

Javascript is ervoor om link in een nieuw blad te laten openen en toch xhtml valid te blijven. Er is totaal niets mis mee met een tranparante gif. Mitje je maar jusit met je titles en alt's omgaat
Javascript is voor veel meer dan dat. Ik bedoel dat een sitemap ervoor is om de zoekmachines door jouw website te leiden.
Offline gnotrgnotr - 10/04/2010 19:02
Avatar van gnotrgnotr Nieuw lid de button tag is de button
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <button onclick="location.href = ' ( je url ) '">
  2. // je text
Offline NickvB - 10/04/2010 22:47
Avatar van NickvB Nieuw lid @ Waldio

Ik heb geprobeerd mijn tekst positie te geven met padding maar als ik dat deed dan schoof het block waarin de teks kwam naar een willekeurige positie.

Heb ook alle divs positie gegeven met pixels en position: absolute;

Mischien dat daar het probleem zit?
Offline Jelmerholland - 10/04/2010 22:56 (laatste wijziging 10/04/2010 22:57)
Avatar van Jelmerholland PHP beginner Ik raad je zeker aan even naar http://www.w3school.com te surfen en daar wat tuts door te nemen. Zeker de css is een aanrader, heb ik ook gedaan en ik snap in principe alles, ja tuurlijk, je komt nog een heleboel andere dingen te leren. Bugs, extra/betere coding etc. Maar voor de basis is de tut van w3schools zeker een aanrader.

als je op een gegeven moment door wilt, kun je daar ook de php tut doen. Dan kom je ook al een heel eind Zeker de <?php include(); ?> is een aanrader om even door te nemen, want daarmee hoef je je navigatie maar 1x te maken, je include hem op elke pagina and you're done. Is er iets fout, dan hoef je maar ! 1 ! bestandje te veranderen 

Succes met je site..

Ps. Geen position absolute gebruiken, je moet inspelen op de standaard positie ;) Dan is je site het beste (:
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.216s