2e navigatiebalk toevoegen op pagina

[teddybeer1]

Goedemiddag,

Ik ben een website aan het maken in Dreamweaver en ik loop vast.
Enig idee hoe je een tweede navigatiebalk toevoegt op een pagina met eigen karakteristieken (gespecifieerd in CSS)?

Ik heb onder m'n header een horizontale balk met vijf knoppen en ik wil op afzonderlijke pagina's een verticale balk maken met links naar andere pagina's binnen een bepaald onderdeel:


Home --- Diensten --- Referenties --- Contact --- etc.


DIENSTEN
dienst 1
dienst 2
dienst 3
etc.

 

[csshunter]

Hoi teddybeer1,
Grofweg, in plaats van waar de inhoud van de pagina staat:

• eerst een <div> voor het kolommetje maken met {float:left;} en de breedte die je wilt hebben.
• daarin het lijstje met het submenu plaatsen.
• dan een <div> voor de inhoud van de pagina, zonder float, maar wel met een afstand {margin-left: ..px;} ter breedte van iets meer dan het menu-kolommetje (zodat de inhoud altijd naast het kolommetje blijft, en er niet onder floept als het lijstje met het submenu klaar is).

Met vriendelijke groet,
CSShunter

 

[teddybeer1]

Hai

Bedankt voor de reactie (ik moet echt een keer die naam veranderen, die is al van 15 jaar geleden ofzo haha) teddybeer1 vreselijk. Maar goed, omdat het lang duurde voor ik reactie kreeg ben ik er inmiddels zelf mee aan de slag gegaan. Trial & error zeg maar.

Kheb nu dit en het werkt:

eerst die horizontale navigatiebalk en daaronder (css voor diensten, de 2e, verticaal).

#navcontainer ul {
padding-left:0;
margin-left:25px;
margin-right:25px;
margin-top:15px;
height:60px;
color:White;
float:left;
width:850px;
font-family:arial, helvetica, sans-serif;
background-color:#000;
text-align:left;
}

#navcontainer ul li {
display:inline;
}

#navcontainer a {
padding:0 40px 0 40px;
color:white;
text-decoration:none;
font-weight:bold;
float:left;
background-color:#000;
line-height:60px;
width:90px;
}

#navcontainer a.current {
background-color:#FFF;
color:#000;
}

#navcontainer a:hover {
background-color:#666;
color:#fff;
}


/* ------------------------------------------------------ */
/* Styles for pagina's diensten */
/* ------------------------------------------------------ */

/* Links diensten */
#dienstenalgcontainer{
padding-left:0px;
float:left;
margin-top:-16px;
margin-left:25px;
width: 170px;
heigth:300px;
background-color:none;
border-bottom:#000;
color:black;
font-family:arial, helvetica, sans-serif;
text-align:left;
font-weight:normal;
text-indent:40px;
}

#dienstenalgcontainer ul li {
display:inline;
}

#dienstenalgcontainer a{
padding:0px 0px 0 0px;
margin-left:-42px;
color:black;
float:left;
background-color:white;
line-height:30px;
width:170px;
text-decoration:none;
}

#dienstenalgcontainer a.current {
background-color: #CCC;
color: #333;
font-weight:bolder;
text-decoration:none;
}

#dienstenalgcontainer a:hover {
color:#666;
text-decoration:underline;
}

 

[csshunter]

Hoi teddybeer1-op-weg-naar-naamsverandering,
Mooi dat 't zelfstandig gelukt is: met trial & error kan je een heel eind komen!

... omdat het lang duurde voor ik reactie kreeg ...

Als ik me niet vergis, ruim binnen 24u - toch niet onaardig voor een club die geen callcentre of betaalde dienst is, maar een vereniging met vrijwilligers die naast werk en/of opleiding en/of andere bezigheden helpertje spelen.

Succes verder!
Met vriendelijke groet,
CSShunter

 

[teddybeer1]

Hai,

Het was ook zeker geen klacht. Kheb al zoveel problemen met Helpmij opgelost :thumb:
Maar ik rust zelf niet voordat ik iets voor elkaar heb...ben daar echt een freak in...en ik onderschat m'n eigen kunnen vaak ook...

Bedankt voor de snelle reactie Kheb mn code gelijk ff gepost, misschien dat anderen er ook nog iets aan hebben...

 

[csshunter]

Hoi-hoi,
Ja, ik ken dat: als je een onwillige webpagina aan het rechttrekken bent, duurt alles te lang totdat het opgelost is.

Voor de compleetheid heb ik je codes nog even ingebakken in een html-documentje, zodat het voor passanten wat makkelijker voor te stellen is:

• Testpagina www.developerscorner.nl/csshunter/tests/test-submenu.htm

De css-validator merkte nog twee foutjes op in je bovenstaande css:

#dienstenalgcontainer {
...
   heig[COLOR="DarkRed"]th[/COLOR]:300px;
[I]moet zijn:[/I]
   heig[COLOR="DarkGreen"]ht[/COLOR]:300px;
...
   background-color:[COLOR="DarkRed"]none[/COLOR];
[I]moet zijn:[/I]
   background-color:[COLOR="DarkGreen"]transparent[/COLOR];
   }

(rechtgetrokken in de testpagina)

Verder is het nog even uitkijken geblazen met de opgegeven hoogte van de <ul> van het horizontale menu in combinatie met de opgegeven hoogte van de <a>'s in de <li>'s daarbinnen. Bij vergroting van de lettergrootte (wat de bezoeker in z'n/h'r browser altijd kan doen) krijg je dit effect in Firefox en Safari:

Oorzaak is de {line-height:60px;} van de <a>'s bij een {height:60px;} van de omvattende <ul>.
De berekening van de line-height is nogal ingewikkeld, maar het komt er op neer dat de line-height een minimale afstand is, en de totale hoogte met de letters zelf kan groeien bij toegenomen hoogte van de letters.
Door de {height:60px;} van de <ul> te schrappen, ben je van het trappetjes-verschijnsel af; dan rekt of krimpt de <ul> in hoogte vanzelf mee met de items.

• Dan wordt het deze testpagina: www.developerscorner.nl/csshunter/tests/test-submenu2.htm

Wat we uit deze testpagina meteen opmaken, is dat het eerste element na het horizontale menu (met een bordertje van streepjes) op een verschillende afstand er onder begint bij verschillende browsers, en dat ook het submenu daar weer onder op een verschillende start-hoogte begint:

Firefox, Opera, Safari en Chrome doen het zoals op de linker afbeelding, IE (IE7, in dit geval) doet het zoals op de rechter afbeelding. Dit wordt veroorzaakt door een verschil van opvatting over de standaard-waarden van de margins en paddings die in een <ul> en een <li> moeten zitten. Om hier van af te komen, kan je het beste alle margins en paddings van <ul>'s en <li>'s ofwel op 0 zetten, ofwel op een bepaalde waarde.
Dat zal ze leren: dan moeten ze wel hetzelfde doen! :d
In dit geval is de redding:

#navcontainer ul {
...
   margin-bottom: 5px; /* of 0px, of een andere expliciete waarde */
   }

#dienstenalgcontainer ul { /* toegevoegd */
   margin-top: 0;
   margin-bottom: 0;
   }

• Testpagina: www.developerscorner.nl/csshunter/tests/test-submenu3.htm

Met vriendelijke groet,
CSShunter

 

[teddybeer1]

Thanks voor de uitgebreide uitleg. Ik heb het aangepast