Hallo Webmasters,
Ik ben bezig aan een nieuwe site in CSS.
De site is bijna klaar echter verschuiven de knoppen van het menu naar links of rechts.
Wie o wie kan mij helpen?
Groetjes,
Armand
- CSS menu verschuift
-
24-04-2012, 18:11 #1
- Berichten
- 220
- Lid sinds
- 14 Jaar
CSS menu verschuift
-
In de schijnwerper
Verhoog je online autoriteit met Publisher PlaceLinkpartnersGoedkope 10 Gbps Virtual Private Server (VPS) in Nederland (Met PURE NVMe opslag!)HostingLaat goedkoop jouw artikelen schrijven en publiceren op unieke blogs met mooie statsLinkpartnersSSD Webhosting al vanaf €0,85 ! 5GB SSD Opslag - Onbeperkt Dataverkeer - SitebuilderHosting -
24-04-2012, 18:32 #2
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: CSS menu verschuift
URL zou wel handig zijn...
-
24-04-2012, 18:34 #3
- Berichten
- 220
- Lid sinds
- 14 Jaar
Re: CSS menu verschuift
Het is een offline versie vandaar ;)
Ik heb het op (adult) http://tinyurl.com/bvw7frv geplaatst.
P.S. De titels van het menubalk verschuiven circa 2 pixel.
-
24-04-2012, 18:39 #4
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: CSS menu verschuift
Natuurlijk verschuift het als de actieve knop een border heeft en de inactieve niet...
1px border *2 (1 links, 1 rechts) = 2px
EDIT: padding 1px minder of zo doen?
-
24-04-2012, 19:12 #5
- Berichten
- 220
- Lid sinds
- 14 Jaar
Re: CSS menu verschuift
Eens kijken wat ik kan doen.
Aanvullend bericht:
Het is mijn eerste CSS website dus ik zal wellicht iets éénvoudigs over het hoofd zien...
Dit is de code
#navigation {
color: #000;
padding: 0px;
}
#navlist
{
padding: 5px 0px;
margin-left: 0;
font: bold 14px Verdana, sans-serif;
width: 924px;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 5px 0.5em;
margin-left: 0px;
border: 0px solid #ff2da3;
border-bottom: none;
text-decoration: none;
}
#navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover
{
color: #000;
border-color: #000;
}
#navlist li a#current
{
border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid white;
border-left: 1px solid #ff2da3;
border-right: 1px solid #ff2da3;
border-top: 1px solid #ff2da3;
}
Aanvullend bericht:
Niemand?Laatst aangepast door Armand Stout : 24-04-2012 om 19:50 Reden: Automatisch samengevoegd.
-
24-04-2012, 20:15 #6
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: CSS menu verschuift
Wat ik dus bedoel: een "current" item wordt door de border opeens 2px breder; dit heeft invloed op de andere items.
Dus we maken de padding even alles in px (0.5 em van een 14px is 7px)
#navlist li a
{
padding: 5px 7px;
margin-left: 0px;
border: 0px solid #ff2da3;
border-bottom: none;
text-decoration: none;
}
#navlist li a#current
{
padding: 5px 6px;
border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid white;
border-left: 1px solid #ff2da3;
border-right: 1px solid #ff2da3;
border-top: 1px solid #ff2da3;
}
>> padding A [ 5px 7px ]
>> padding A#current [ 5px 6px ] >> border erbij: gelijke breedte als voorheen doch met border.
EDIT: als je geen border gebruikt, dan hoef je deze ook niet te definiëren (border:0)
-
24-04-2012, 20:20 #7
- Berichten
- 220
- Lid sinds
- 14 Jaar
Re: CSS menu verschuift
Bedankt Marcel!
Het is gelukt... :)
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic