Naar een bepaalde plaats gaan op een pagina

g3x123 · 2 sep 2011

Beste mensen,

Ik zit met een probleempje..
ik ben bezig met een website te maken,
vanboven heb ik dus mijn hoofdknoppen.
Als ik over enkele van deze knoppen ga komen er extra knopjes onder.
bijvoorbeeld de knoppen:

home over ons uitrusting foto's contact

als ik over de knop over ons ga gebeurd dit:

over ons
ons team
service
vervoer

de schuine tekst zijn de knopjes die erbij komen als je met de muis over ons gaat.

Nu zou ik graag het volgende hebben:

als ik op over ons klik dan ga ik naar de pagina overons.html,
dan begint de pagina met
over ons
text

ons team
text

vervoer
text

ik zou graag hebben dat wanneer ik vb op de knop vervoer klik, dat ik dan meteen naar de overons.html onderaan ga.
en bij de rest hetzelfde natuurlijk.

Dus situeren op de pagina waar ik naartoe ga als ik op de schuingedrukte knopjes druk.

zo zien de knoppen er dus uit:

Frats · 2 sep 2011

Gebruik het name attribute en een anchor:

HTML:

<div name="onsteam">Uitleg over ons team</div>

En op de knop:

HTML:

<a href="#onsteam">Spring naar ons team</a>

g3x123 · 2 sep 2011

Frats zei:
Gebruik het name attribute en een anchor:

HTML:

<div name="onsteam">Uitleg over ons team</div>

En op de knop:

HTML:

<a href="#onsteam">Spring naar ons team</a>

Bedankt voor de snelle reply.

maar als ik op vb de home page zit,
en dan over de knop over ons ga
en dan op vervoer klik vb,
ga ik dan ook meteen naar de overons.html en de div vervoer?

Frats · 2 sep 2011

Als het goed is gebeurt dat wel als je beide links opgeeft:

HTML:

<a href="overons.html#vervoer">Spring naar Over Ons, kopje Vervoer</a>

g3x123 · 2 sep 2011

Frats zei:
Als het goed is gebeurt dat wel als je beide links opgeeft:

HTML:

<a href="overons.html#vervoer">Spring naar Over Ons, kopje Vervoer</a>

sorry makker maar hij gaat gewoon naar de overons.html en blijft vanboven staan.
Hij gaat niet naar de div.. ;(

dit is het begin van mijn code:
(van de home knop en de over ons knop)

HTML:

  <ul>
              	<li><a href="index.html" class="selected">Home</a></li>
          		<li><a href="overons.html">Over Ons</a>
                    <ul>
                        <li><a href="overons.html#.col_w460">Over ons</a></li>
                        <li><a href="overons.html#col_weric">Service</a></li>
                  	</ul>

dit is van mijn css:

HTML:

.col_w460 { width: 460px }

g3x123 · 2 sep 2011

ik weet dus ook niet of die . erbij moet bij die .col_w460 enzo..

Naarling · 2 sep 2011

Maar welke naam of id heeft het stukje ons vervoer? je kunt met zo'n link niet naar een class gaan, daar kunnen er namelijk meerdere van zijn.

g3x123 · 2 sep 2011

Naarling zei:
Maar welke naam of id heeft het stukje ons vervoer? je kunt met zo'n link niet naar een class gaan, daar kunnen er namelijk meerdere van zijn.

sorry maar ik snap de vraag niet :d

Naarling · 2 sep 2011

Hoe ziet de HTML van het stuk waar je heen wilt er uit?
(het zou trouwens makkelijker zijn als je ons een link naar je site kon geven)

Haaren101 · 2 sep 2011

In de html waar de divs van ons team en zo staan op de plek waar je heen wilt zet je:

Code:

<a name="HierWilIkHeen"></a>

Op de menu pagina in li element:

Code:

<a href="pagina.html#HierWilIkHeen">Hier gaat het naar toe</a>

Ron

Frats · 2 sep 2011

De . moet er inderdaad niet bij, en je moet verwijzen naar een "name", niet een "class"

Dit werkt:

HTML:

<a href="pagina.html#blokje">Linkje</a>
<div name="blokje">Blokje</div>

Dit kan niet:

HTML:

<a href="pagina.html#klasje">Linkje</a>
<div class="klasje">Blokje</div>

En dit dus ook niet:

HTML:

<a href="pagina.html#.klasje">Linkje</a>
<div class="klasje">Blokje</div>

g3x123 · 2 sep 2011

ok dus dit is mijn knop html stuk:

HTML:

 <div id="templatemo_menu" class="ddsmoothmenu">
            <ul>
              	<li><a href="index.html" class="selected">Home</a></li>
          		<li><a href="overons.html">Over Ons</a></li>
          		<li><a href="uitrusting.html"> Uitrusting</a></li>
                
              	<li><a href="foto's.html">Foto's</a>
                	<ul>
                        <li><a href="opendeur2007.html">Opendeurdag 2007</a></li>
                        <li><a href="opendeur2008.html">Opendeurdag 2008</a></li>
                        <li><a href="opendeur2009.html">Opendeurdag 2009</a></li>
                        <li><a href="opendeur2010.html">Opendeurdag 2010</a></li>
                        <li><a href="opendeur2011.html">Opendeurdag 2011</a></li>
                  	</ul>
                </li>
              	<li><a href="contact.html">Contact</a></li>
            </ul>
            <br style="clear: left" />
        </div> <!-- end of templatemo_menu -->

dit is een stukje uit mijn css:

HTML:

.col_fw { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #a3a3a3 }
.col_fw_last { padding-bottom: 20px }
.col_w460 { width: 460px } 
.col_weric { width: 460px }
.col_w300 { width: 300px }
.col_allw300 { float: left; width: 300px; margin-right: 30px }
.col_w240 { float: left; width: 220px; padding-right: 20px }
.col_w630 { width: 630px }
.col_rm { margin: 0 }

die col_w460 is toch en div? of niet?
zoniet, hoe maak ik hier dan een div van zonder dat ik te veel veranderingen enzo moet doen?

alvast bedankt iedereen

g3x123 · 2 sep 2011

Naarling zei:
Hoe ziet de HTML van het stuk waar je heen wilt er uit?
(het zou trouwens makkelijker zijn als je ons een link naar je site kon geven)

stukje html en css is gepost,
maar de site staat nog niet online..
want momenteel is het nog een andere site die erop staat maar die mag er voorlopig zeker niet af..
en nog een subdomain enzo beginnen aanmaken voor 1 dag vind ik nogal nutteloos

Naarling · 2 sep 2011

g3x123 zei:
die col_w460 is toch en div? of niet?

Hoe moeten wij dat weten? Je geeft alleen de HTML van het menu, niet van de bestemming. Het ziet er naar uit dat je naar een element met een bepaalde class probeert te gaan, dat wil niet. Je moet het element waar je heen wilt een id meegeven, bijvoorbeeld zo.

HTML:

<div id="overons"><p>Informatie over ons</p></div>

Dan pas kun je een link met #overons gebruiken. Of dat element dan een div, plaatje of iets ander is maakt niet uit.

EDIT: Wat Frats zegt kan trouwens ook.

Frats · 2 sep 2011

Het hoeft geen div te zijn, das het probleem niet. Maar op dit moment link je naar een class, en je moet linken naar een name.

Je hebt ook niet het stukje gepost waar de link naar toe gaat zo te zien, alleen waar de link staat en een stukje CSS.

g3x123 · 2 sep 2011

Frats zei:
Het hoeft geen div te zijn, das het probleem niet. Maar op dit moment link je naar een class, en je moet linken naar een name.

Je hebt ook niet het stukje gepost waar de link naar toe gaat zo te zien, alleen waar de link staat en een stukje CSS.

Ja ik heb ondertussen de roll over knopjes tijdelijk weg gewerkt uit mijn html code...

dit is het stukje html waar hij naartoe moet gaan uit de overons.html pagina:

HTML:

 <div class="col_w460 float_r">
       	    <h2>service</h2>

       	    <p>text</p>

          </div>

Naarling · 2 sep 2011

g3x123 zei:
Ja ik heb ondertussen de roll over knopjes tijdelijk weg gewerkt uit mijn html code...

dit is het stukje html waar hij naartoe moet gaan uit de overons.html pagina:

HTML:

<div class="col_w460 float_r"> <h2>service</h2> <p>text</p> </div>

Ik zou de berichten hierboven nog eens zorgvuldig doorlezen, al een stuk of drie mensen hebben een oplossing gepost

g3x123 · 2 sep 2011

Naarling zei:
Ik zou de berichten hierboven nog eens zorgvuldig doorlezen, al een stuk of drie mensen hebben een oplossing gepost

ja maar ik snap het niet echt allemaal..

ik ben hier namelijk nog niet zo goed in

.
Ik studeer momenteel nog multimedia op school

.

kan iemand toevallig mijn codes kopiëren en aanpassen? (a)
maar dan wel alles zoals het bij mij staat he aub zodat ik zeker geen fouten kan maken..?

bedankt

g3x123 · 2 sep 2011

http://nieuw.ericscooters.be/index.html

heb hem snel even online gezet

normaal ben ik goed in flash.. (actionscript)
in html heel wat minder

groeten

csshunter · 2 sep 2011

Even samengevat dan.
Een bladwijzer (zo heet zo'n ding) heeft niets te maken met een css-class (css is voor de opmaak), maar moet via de html plaatsvinden (die de structuur van de pagina bepaalt).
De logica is als volgt:

Om ergens naar toe te kunnen gaan, moet dat punt eerst in de html gemarkeerd worden.

Dat doe je met een name="..." of een id="..." (allebei kan, persoonlijk vind ik een id beter; als er al een id is, kan dat gewoon gebruikt worden). Dus bv. op de pagina overons.html:

HTML:

...
<div class="col_w460 float_l">
   <h2 id="over">Over ons</h2>
   <p>text ...</p>
</div>

<div class="col_w460 float_r">
   <h2 id="service">Ons team en onze service</h2>
   <p>text ...</p>
</div>

<div class="col_w630 float_l">
   <h3 id="actueel">Laatste Projecten</h3>
   <p>text ...</p>
</div>

<div class="col_w300 float_r">
   <h3 id="opendag">Opendeurdag 2011</h3>
   <p>text ...</p>
</div>
...

Nu kan je in de links van de verwijzende pagina zetten waar je precies naar toe wilt.
Bv. op de homepage:

HTML:

...
<ul>
   <li><a href="index.html" class="selected">Home</a></li>
   <li><a href="overons.html">Over Ons</a>
      <ul>
         <li><a href="overons.html#over">Over Ons</a></li>
         <li><a href="overons.html#service">Team en Service</a></li>
         <li><a href="overons.html#actueel">Laatste projecten</a></li>
         <li><a href="overons.html#opendag">Open Dag</a></li>
      </ul>
   </li>
   ...
</ul>
...
(of ook gewoon ergens in de tekst:)
<p>Let op! Op 2 september houden wij <a href="overons.html#opendag">Open Dag</a>.</p>
...

Zodra de browser een hekje ziet, spring ie er overheen naar de bladwijzer die er achter staat.

Met vriendelijke groet,
CSShunter

Naar een bepaalde plaats gaan op een pagina

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Meubilair

Wij waarderen jouw privacy