hyperlink

Status
Niet open voor verdere reacties.
ja helemaal duidelijk ik was even te moeilijk aan het denken ,ik ga even wat maken als ik nog problemen tegen kom ,kom ik wel weer terug
alvast bedankt.
 
Ja, inderdaad maakt IE6 er een soepzooi van.
Maar ... mijn float-idee blijft ook in IE6 overeind:
  • Er even nog een paar onder gezet, en zie. :)
Nu er nog even een ongeordend lijstje <ol>...</ol> van maken, met telkens een koppeltje afbeelding/tekst in een <li>, en dan valt er denk ik weinig meer op aan te merken.
Alleen als je van plan bent erg veel tekst in de vakjes te zetten, zal deze een flexibele hoogte moeten krijgen, of een scrollbalkje.

Met vriendelijke groet,
CSShunter

[edit]Alweer een kruispost! Maar intussen komt ie dus heelhuids door IE6 bij een serie'tje.[/edit]
 
Laatst bewerkt:
Goede dag

Ik heb in een pagina een horizontaal menu met de volgende code,ik heb de knopen een kleur gegeven.
Dit door ze allemaal een style mee te geven hknop1 hknop2 enz,
Hoe kan ik nu het gemakkelijkst een hover ,een visti link, een active link, aan de knopen meegeven en wel zo dat ze mijn andere menu(verticaal)met rust laten.

Ik hoop dat je mij vraag snapt

wlvdmeer-montage.nl is de site ,ik hoop dat jullie een keer kijken ,ik heb er geen link van gemaakt vindt het zo rommelig al die linken bij mijn zoekmachine pagina's

bijvoorbaat bedankt

Ook opmerkingen zijn van harte welkom

ul#menu-hor {padding: 0; margin: 0; list-style: none;
}
ul#menu-hor li {float: left; height: 15px; border: solid 1px #14285f; padding: 0 10px; margin-left:5px;
}
#hknop1{
background-color: #666
}
#hknop2{
background-color: #808080
}
#hknop3{
background-color:#666
}
#hknop4{
background-color:#808080
}
#hknop5{
background-color:#666
}
#hknop6{
background-color:#808080
}
#hknop7{
background-color:#666
}
#hknop8{
background-color:#808080
}
 
Laatst bewerkt:
Je hebt in je menu <li>'s en <a>'s.
Als je de hele knop van kleur en zo wilt laten veranderen, moet je dat aanbrengen bij de <a>, en niet bij de <li>, want daar kan IE 6 niet mee overweg. En 't is precies evenveel werk, dus dat maakt ook niet uit.
Jij hebt
Code: 
ul#menu-hor li {padding: 0 10px;}
(En nog meer, maar da's niet interessant hiervoor.)
Die padding moet je bij de <a>'s aanbrengen, dus:
Code: 
ul#menu-hor li a {padding: 0 10px;}
Als je nu over 'n knop hovert en daarbij de kleur wilt laten veranderen, wordt de hele breedte van de knop veranderd. Zoals 't nu is doet de padding niet mee, want die hoort niet bij de <a>.

Jij hebt:
Code: 
#hknop1{background-color: #666;}
Dus de <li> heeft de achtergrondkleur. Die moet ook naar de <a>, want je wilt 'm bij de link, bij de <a> veranderen.
Dus wordt dat
Code: 
#hknop1 a {background-color: #666;}
(En dan natuurlijk voor elke knop.)

Als het goed is zie je op je scherm geen enkel verschil.

Als je nu het volgende in je css zet:
Code: 
#hknop1 a:hover {background: red;}
wordt bij hoveren over de <a> binnen de li#hknop1 (dus de eerste knop) de achtergrond rood. Active, focus en visited werken precies zo:
Code: 
#hknop1 a:visited {background: red;}
Code: 
#hknop1 a:focus, #hknop1 a:active {background: red;}
(active en focus heb ik samengevoegd, omdat IE 6/7 dat anders volkomen verkeerd uitvoeren. Maakt ook weinig uit trouwens.)

Eventueel kun je ook dingen samenvoegen, dat kan trouwens ook in de css die je nu al hebt:
Code: 
#hknop1 a, #hknop3 a, #hknop5 a, #hknop7 a {background-color:#666;}
Bij bijvoorbeeld hoveren wordt het dan:
Code: 
#hknop1 a:hover, #hknop3 a:hover, #hknop5 a:hover, #hknop7 a:hover{background-color:#red;}

Eventueel zou je in plaats van 'n id ook 'n class kunnen gebruiken. De <li>'s met de daarin zittende <a>'s die dezelfde kleuren krijgen dezelfde class geven, dan wordt 't nog veel korter.

Omdat je met 'n id en/of class werkt, worden alleen de links die die id of class hebben bereikt, de andere links niet. Dus je verticale menu blijft helemaal buiten schot.
 
ok bedankt
ben er druk mee bezig lukt nog niet helemaal ,als het echt niet lukt kon ik erop terug,weet in ieder geval waar ik moet zoeken en met proberen leer je het meest.
bedankt
 
Goede dag
Ik heb in mijn pagina een vak gemaakt met daarin drie foto's die elkaar overlappen
ik doe dit voor het eerst met css, hij wordt goed weergegeven in alle browsers.

alleen mijn vraag is heb ik het zo goed gemaakt of moet ik met z index gaan werken zo ja
dan moet ik me daarin gaan, verdiepen.of kan het ook zo als ik gemaakt heb.

site is wlvdmeer-montage.nl

html code


<div id="fotoproef"><img id="fotoeen" src="image/rolstel.jpg" alt="scherming" width="150" height="150" /><img id="fototwee" src="image/SNC01010.jpg" alt="montage deuren" width="150" height="150" /><img id="fotodrie" src="image/S7300202.JPG" alt="hekwerken" width="150" height="150" /></div>


css code

#fotoproef{
height:500px;
width:205px;
position:absolute;
margin:75px 0 0 600px;
background-color: #dcdcdc;
left:-14px;
top:-42px;

}
#fotoeen{
margin-left:5px;
margin-top:25px;
border:thin solid #99ccff;
}

#fototwee{
margin-left:45px;
margin-top:-20px;
border:thin solid #99ccff;
}

#fotodrie{
margin-top:-20px;
margin-left:5px;
border: thin solid #99ccff;
}
 
Hallo Willem,
alleen mijn vraag is: heb ik het zo goed gemaakt of moet ik met z index gaan werken
Klik om te vergroten...
Het lijkt me dat ie goed gemaakt is, als het er goed uitziet, valid code is, en ook in Internet Explorer goed doorkomt. Dat is allemaal het geval! :)

- De z-index hoeft alleen gebruikt te worden, als je wilt afwijken van de normale manier waarop gestapelde elementen elkaar overlappen. Normaal gesproken zit het volgende in de html toegevoegde element in de bovenste laag (bij floaten kan dat anders liggen, dat is een verhaal apart).
Ook bij jou ligt steeds de volgende er bovenop. Prima toch?
Maar als je bv. de middelste van de drie onderop zou willen leggen, dan kan je dat regelen door de eerste een hogere z-index te geven dan de middelste:
Code: 
[FONT="Courier New"][SIZE="2"]#fotoeen {
   margin-left:5px;
   margin-top:25px;
   border:thin solid #99ccff;
   [B]position: relative;
   z-index: 2;[/B]
   }[/SIZE][/FONT]
Zo werkt het ongeveer.

Met vriendelijke groet,
CSShunter
 
ok dat is me duidelijk
alleen waarom ineens die relative postitie dat snap ik nog niet hellemaal
 
Ja, hoe dat nu precies zit met die {position:relative} weet ik ook niet het fijne van. Op de een of andere manier heeft het niet met het element zelf te maken, maar met het volgende element, dat dan relatief moet zijn ten opzichte van het element waar het "relative" in staat.
Beetje raar, vind ik altijd. Wat de css-specificatie ervan zegt, is erg uitgebreid en heel gecompliceerd in de vologorde-regels; dat kan ik niet goed onthouden. ;)
Misschien weet Goeroeboeroe het, als die hier langs mocht komen (of een ander iemand met verstand van zaken).

Met vriendelijke groet,
CSShunter
 
Goh, kom ik toevallig voorbij :D
w3c vond 't volgens mij zelf ook 'n beetje ingewikkeld, onderaan de spec staat 'n uitleg. Misschien maakt die wat meer duidelijk. De z-index is eigenlijk 'n onderdeel van de stack: de volgorde van weergave van onder naar boven. (Overigens maken IE 6 en in mindere mate IE 7 daar dus echt 'n potje van).
De uitleg:
http://www.w3.org/TR/CSS2/visuren.html#z-index
Daaruit:
Each stacking context consists of the following stacking levels (from back to front):

1. the background and borders of the element forming the stacking context.
2. the stacking contexts of descendants with negative stack levels.
3. a stacking level containing in-flow non-inline-level non-positioned descendants.
4. a stacking level for non-positioned floats and their contents.
5. a stacking level for in-flow inline-level non-positioned descendants.
6. a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.
7. the stacking contexts of descendants with positive stack levels.

Eerlijk gezegd ken ik die volgorde ook niet uit m'n hoofd. Maar dat is vooral omdat 't niet hoeft. Ik vind 'm redelijk intuïtief. Bovenaan deze uitleg staat trouwens dat de z-index alleen geldig is voor een gepositioneerd element.
Wat Willem doet valt dus onder punt 7: een positieve z-index. Maar om te kunnen werken moet 't element dan ook 'n andere dan static positie hebben, anders werkt z-index gewoon niet.
In die uitleg staat trouwens nog 'n link naar 'n appendix met weer 'n (nog uitgebreidere) uitleg, grinnik. Je moet techneuten ook geen uitleg laten schrijven.
http://www.w3.org/TR/CSS2/zindex.html
Ik weet niet wanneer ik dat ooit gevonden heb, die site van w3c is nou niet echt heel erg overzichtelijk ingedeeld, vind ik. En je zoekt voor z-index ook bij z-index in de spec en niet bij 'n uitleg over stack. Hoe dan ook, die twee stukken hebben 't voor mij wel verduidelijkt. (Willem, moet je alleen lezen als je dezelfde afwijking hebt als csshunter en ik en nog wat mensen hier :D )
Goed, neem nu m'n anti-mopperpillen maar weer even.

Aanvulling: ik vergeet helemaal het even in normaal Nederlands samen te vatten voor de mensen die eventueel geen Engels kennen. Alsnog.
In dat Engelse stukje tekst staan dus dingen als dat tekst moet worden weergegeven boven de achtergrond van de <p> of <div> waar hij in staat. Dat bedoelde ik met intuïtief: dat is voor 'n mens vrij logisch. Maar makers van browsers hebben dit soort duidelijke regels wel nodig.
In de nog uitgebreidere uitleg (die trouwens ook 'n officieel onderdeel van de specificatie is), staat dat nog veel gedetailleerder. Welk onderdeel van 'n tabel boven welk ander stukje wordt gezet, enz.
En eigenlijk is 't enige dat je dus echt hoeft te onthouden: 'n z-index werkt alleen maar bij 'n element dat 'n fixed, absolute of relative positie heeft. En in Internet Explorer 6 en in mindere mate 7 geeft 't allerlei problemen, omdat die zich niet aan de standaard houden.
 
Laatst bewerkt:
Goede dag

Loop al een poosje te stoeien maar kom er toch nog niet helemaal uit.

Het volgende
Ik heb een header met daarin drie foto''s zoals hieronder en wordt goed weergegeven.(in alle browsers)

<div id="header"><img src="image/7453[1].jpg" height="120" width="274" alt="" /><img src="image/6906[1].jpg" alt="" height="120" width="244" /><img src="image/6947[1].jpg" height="120" width="275" alt="" /></div>

Nou wil ik naast de drie foto's rechts een div met daarin tekst ,ik heb de foto''s kleiner gemaakt
en dit ervan gemaakt

<div id="header"><img src="image/7453[1].jpg" height="120" width="274" alt="" /><img src="image/6906[1].jpg" alt="" height="120" width="244" /><img src="image/6947[1].jpg" height="120" width="275" alt="" /><div id="adres"></div></div>

De header is relative gepostitineert
en voor de div adres
heb ik

#adres{
background-color: #ccc;
position:absolute;
height: 100px;
width: 75px;
margin: 0 0 0 0;

in ie6 en ie7 komt hij er wel naast in de header maar bij FF opera en safarie onder de header

Ik begrijp nog niet helemaal waarom het met de drie afbeeldingen wel goed gaat en met die div niet.

bijvoorbaat dank
 
Even snel: die drie images zijn gewoon inline-elementen, dus die komen gewoon naast elkaar te staan (als er genoeg ruimte is). Net zoals gewone tekst.

Een div (zoals div#adres) is een blok-element en hoort dus automatisch op een nieuwe regel te komen. Drie keer raden welke browsers het dus weer mis hebben :D
Je hebt div#adres wel 'n absolute positie gegeven, maar als je verder niets opgeeft, komt hij gewoon op de positie te staan waar hij normaal ook zou komen: op 'n nieuwe regel dus.
De header is relatief gepositioneerd en de directe ouder van div#adres. Als je dus bij div#adres 'n top: 0; opgeeft in de css, komt hij aan de bovenkant van div#header te staan.
Op dezelfde manier 'n left: ...px of right: ... px opgeven.
Dan gaat de absolute positie werken.
Denk ik, even vlug :cool:
 
ja ok

ik heb nu

top 1px;
right 1px

staat nu mooi rechts in de hoek.(alle browsers)

ik moet er toch nog even aan wennen ik had eerst

margin: 1px 1px 0 0; maar dat werkt niet
 
Goede avond

Ik ben een beetje aan het stoeien in een proef pagina met het positineren,
om het goed onder de knie te krijgen.

Ik heb in een vak dat relatief staat een vakje test gemaakt.
Dat gaat helemaal goed alleen bij ie6 is het vakje hoger,hoe krijg ik dat goed

Ik heb ook al een apart style bestand voor ie6 gemaakt

test{
position:absolute;
height:1px;
width:1px;
background-color:#ccc;
color:#000;
margin:10px 0 0 10px;
padding:20px 0 0 20px;

}
 
Ha Willem,

Volgens de laatste telling kan dat 727 verschillende oorzaken hebben :D
Heb je 'n link naar de code? Het kan bijvoorbeeld met iets als 'n verkeerd doctype te maken hebben.
 
Sorry ik ben er al uit ik had de padding groter dan de breedte en de hoogte
dus dat ging fout

in ieder geval bedankt
 
Laatst bewerkt:
Goede dag
Toch nog even dit, ik heb nu een horizontale lijn gemaakt ,heb ik gemaak met een div ,is mischien wel niet de juiste manier maar ok,
nou is het geval dat hij in 1e6 toch groter weergegeven wordt dan de andere browers.
ik krijg hem met een apart style bestand ook niet kleiner,
kan het zo wezen dat en of andere margin of padding van een ander element dat verstoort


html
<div id="content">
<div id="menubalkh"><ul id="menu-hor">

<li><a href="index.html" title="">Home</a></li>

<li><a href="profiel.html" title="">Profiel</a></li>

<li><a href="tuinbouw.html" title="">Tuinbouw</a></li>

<li><a href="utiliteit.html" title="">Utiliteit</a></li>

<li><a href="service.html" title="">Service</a></li>





</ul>
</div>
<div id="lijn"></div>

css

#lijn{
position: absolute;
width:750px;
height:2px;
margin:15px 0 0 2px;
background-color:#ccc;
 
Ha, je begint te begrijpen waarom het niet handig is om op 'n feestje van sitemakers 'Leve Internet Explorer 6' te roepen, tenzij je levensmoe bent.
'n Horizontale lijn zou simpel moeten zijn, maar het is 'n rommeltje.
'n div is daar niet voor bedoeld, maar je bent bepaald niet de enige die 't zo doet. Voor IE 6 moet je toevoegen: font-size: 0; aan de css. Vraag me niet waarom.

Eigenlijk moet je 'n <hr> gebruiken (horizontal rule), die is er speciaal voor. Maar verschillende browsers tonen deze op eigen wijze. De een met 'n border en de ander met 'n background-color en zo. Zucht.

Dit werkt in alle browsers:
HTML: 
<hr style="display: block; width: 750px; color: #ccc; line-height: 0; border-top: #ccc solid 1px;">
display: block: blok-element van maken, zodat ik dingen als border kan gebruiken.
line-height: 0; om de standaard-lijn te onderdrukken, want in sommige browsers (Google Chrome, Safari) wordt die ongevraagd opgeleukt met 'n schaduw en zo
border-top: gewoon 'n eigen lijn maken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan