CSS resolutie
Het gaat om dit stukje:
#myworkbutton
{
position:absolute;
width:206px;
height:38px;
margin-top:5.9%;
margin-left:33%;
}
#aboutmebutton
{
position:absolute;
width:206px;
height:38px;
margin-top:5.9%;
margin-left:47%;
}
#contactbutton
{
position:absolute;
width:206px;
height:38px;
margin-top:5.9%;
margin-left:61%;
}
Nog beter is het om ze met floats naast elkaar te zetten, dan heb je geen margin meer nodig.
Gewijzigd op 22/02/2011 17:38:58 door Wouter J
Wouter J op 22/02/2011 17:38:27:
De fout ligt hem in de procenten. Want dat verschilt per resolutie (want 10% van 1700 is wat anders dan 10% van 1200). Het beste is om alles in pixels te zetten.
Nog beter is het om ze met floats naast elkaar te zetten, dan heb je geen margin meer nodig.
Nog beter is het om ze met floats naast elkaar te zetten, dan heb je geen margin meer nodig.
Als ik alles in pixels zet dan staat het rechts van mijn scherm,omdat het dan niet meegaat met de resolutie.
En als ik alles met float naast elkaar zet dan komt het niet meer goed uit met de content,want de 1ste button moet gelijk staan met de content en de 3de button moet gelijk staan met de content.
Wouter J op 22/02/2011 18:05:26:
Kun je dan misschien even een online voorbeeldje geven? Dat werkt altijd wat makkelijker.
Hier een voorbeeldje http://flagrace.xentia.nl/Website%20Denice/denice.html
Zonder position: absolute; en met float kan je deze pagina veel mooier en beter maken.
http://www.sceneone.nl/
css tutorial met oa. een onderdeel positionering
Kris Peeters op 23/02/2011 15:12:33:
Heb je hier al eens rond gekeken?
http://www.sceneone.nl/
css tutorial met oa. een onderdeel positionering
http://www.sceneone.nl/
css tutorial met oa. een onderdeel positionering
Tnx!
Alles staat nu op de goede plek gepositioneerd met relative.Alleen de 1ste button neemt de 2de en 3de mee.
Ik weet wel dat dat komt door de %, maar als ik dan pixels zet neemt een hoge resolutie de buttons weer mee(en dan komt alles rechts te staan).
Dit is dat stukje code:
.myworkbutton
{
position:relative;
width:206px;
height:38px;
left:33%;
top:5.9%;
}
.aboutmebutton
{
position:relative;
width:206px;
height:38px;
left:45%;
top:5.9%;
}
.contactbutton
{
position:relative;
width:206px;
height:38px;
left:61%;
top:5.9%;
}
Maar nu heb ik nog 2 vragen als ik van mijn submenu links maak veranderd gelijk de kleur en wordt het onderstreept.
Ook heb ik een rollover effect alleen als je op de 1ste link gaat staan gaan de onderste links een beetje naar beneden.
Hoe kan ik dit oplossen?
Dit is mijn code:
<div id="left">
<ul>
<a class="link1" href="webdesign.php">Webdesign</a>
<div style="margin-top:33px;"></div>
<a class="link2" href="logoenhuisstijl.php">Logo en huisstijl</a>
<div style="margin-top:33px;"></div>
<a class="link3" href="drukwerk.php">Drukwerk</a>
<div style="margin-top:33px;"></div>
<a class="link4" href="schilderijen.php">Schilderijen</a>
<div style="margin-top:33px;"></div>
<a class="link5" href="tekoop.php">Te koop</a>
</ul>
</div>
#left ul
{
float:left;
list-style:none;
width:100px;
margin:60px 0px 0px 0px;
color:#FFF;
font-style:normal;
font-family:Verdana;
font-size:10px;
}
a.link1:hover,a.link1:active
{
background-image:url(rollover_submenu.jpg);
display:block;
width:132px;
height:32px;
}
a.link2:hover,a.link2:active
{
background-image:url(rollover_submenu.jpg);
display:block;
width:132px;
height:32px;
}
a.link3:hover,a.link3:active
{
background-image:url(rollover_submenu.jpg);
display:block;
width:132px;
height:32px;
}
a.link4:hover,a.link4:active
{
background-image:url(rollover_submenu.jpg);
display:block;
width:132px;
height:32px;
}
a.link5:hover,a.link5:active
{
background-image:url(rollover_submenu.jpg);
display:block;
width:132px;
height:32px;
}
Mitchoit Patron op 23/02/2011 19:56:45:
gepositioneerd met relative
Als je goed script heb je helemaal geen position nodig voor zoiets.
Mitchoit Patron op 26/02/2011 16:16:59:
Maar nu heb ik nog 2 vragen als ik van mijn submenu links maak veranderd gelijk de kleur en wordt het onderstreept.
Doormiddel van de anchor tag aan te spreken kan je de kleur veranderen:
Code (php)
1
2
3
2
3
a {
color: #000; // #000 is zwart
}
color: #000; // #000 is zwart
}
En door middel van CSS: text-decoration kan je voorkomen dat er een lijn onderstaat.
Wouter J op 26/02/2011 16:55:04:
Als je goed script heb je helemaal geen position nodig voor zoiets.
Doormiddel van de anchor tag aan te spreken kan je de kleur veranderen:
En door middel van CSS: text-decoration kan je voorkomen dat er een lijn onderstaat.
Mitchoit Patron op 23/02/2011 19:56:45:
gepositioneerd met relative
Als je goed script heb je helemaal geen position nodig voor zoiets.
Mitchoit Patron op 26/02/2011 16:16:59:
Maar nu heb ik nog 2 vragen als ik van mijn submenu links maak veranderd gelijk de kleur en wordt het onderstreept.
Doormiddel van de anchor tag aan te spreken kan je de kleur veranderen:
Code (php)
1
2
3
2
3
a {
color: #000; // #000 is zwart
}
color: #000; // #000 is zwart
}
En door middel van CSS: text-decoration kan je voorkomen dat er een lijn onderstaat.
Ja oke maar ik heb daarboven tog al de kleur en lettertype enz gezet.
Mitchoit Patron op 26/02/2011 16:58:36:
Ja oke maar ik heb daarboven tog al de kleur en lettertype enz gezet.
Alleen voor de ul. Anchor tags (<a>) hebben standaard een color: #00F; en die moet je dus aanpassen speciaal voor de anchor tag.
Wouter J op 26/02/2011 17:21:24:
Alleen voor de ul. Anchor tags (<a>) hebben standaard een color: #00F; en die moet je dus aanpassen speciaal voor de anchor tag.
Mitchoit Patron op 26/02/2011 16:58:36:
Ja oke maar ik heb daarboven tog al de kleur en lettertype enz gezet.
Alleen voor de ul. Anchor tags (<a>) hebben standaard een color: #00F; en die moet je dus aanpassen speciaal voor de anchor tag.
oke tnx!
Toevoeging op 26/02/2011 20:39:30:
Hoe kan ik mijn link precies in het midden van mijn rollover krijgen?
Check: http://flagrace.xentia.nl/Website%20Denice/denice.html
Ik heb al geprobeerd text-align en margin:auto maar werkt niet.
Gewijzigd op 26/02/2011 20:39:11 door Mitchoit Patron