| Schrijver |
Bericht |
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 19:07 · Aangepast door: Morse
Ik weet dat ik hier laatste ook al een topic over gemaakt heb, en Frank heeft toen gereageerd en ik dacht dat het probleem dus opgelost was maar... dit was alleen voor dit beeldscherm kortom, in andere beeldschermen stond die of te veel naar links of te veel naar rechts, dit zijn de codes die ik nu gebruik.
html code
<html>
<head>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="main.html">Home</a>
<ul>
<li><a href="overons.html">Over ons</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</li>
<li><a href="leden.html">Clan & Leden</a>
<ul>
<li><a href="vereisten.html">Vereisten</a></li>
<li><a href="registratie.php">Registreren</a></li>
<li><a href="clanwars.php">Clanwars</a></li>
<li><a href="uitslagen.html">Clanwar uitslagen</a></li>
</ul>
</li>
<li><a href="#">Games</a>
<ul>
<li><a href="crysis.html">Crysis</a></li>
<li><a href="bf2.html">Battlefield 2</a></li>
<li><a href="bc2.html">Badcompany 2</a></li>
<li><a href="mw2.html">Modern Warfare 2</a></li>
<li><a href="supcom.html">Supreme Commander</a></li>
<li><a href="cc3.html">Command and Conquer 3</a></li>
</ul>
<li><a href="#">Meer</a>
<ul>
<li><a href="#">Overclock</a></li>
<li><a href="http://www.tweakers.net" target="_blank">Tweakers</a></li>
<li><a href="#">Computer Samenstellen</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
en m'n css...
css code
#nav, #nav ul
{
padding: 3px 0 0 0;
margin-left:auto;
margin-right:auto;
width:70%;
text-align:center;
list-style: none;
position: relative;
}
#nav li
{
float: left;
width: 200px;
text-align:center;
}
#nav ul
{
position: absolute;
width: 200px;
left: -1000px;
text-align:center;
}
#nav li:hover ul, #nav li.ie_does_hover ul
{
left: auto;
background-position: 0 0;
}
#nav a
{
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
ul a
{
font-weight: bold;
color: #CCC;
cursor: default;
}
ul ul a:link, ul ul a:visited
{
font-weight: normal;
color: #CCC;
cursor: pointer;
}
ul ul a:hover, ul ul a:active
{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
ul li
{
background-color: #a8a08f;
border-left: 3px solid #000;
}
ul ul li
{
background-color: #a8a08f;
border-top: 3px solid #000;
border-left: 0;
}
#menu
{
background:black;
position:relative;
width:100%;
height:5%;
z-index:100;
}
hoor van sommige mensen dat positionering ook meteen een van de moeilijker delen van webdesign is klopt dit ook? anders voel ik me namelijk wel een beetje een stumperd ;$
Alvast bedankt voor het lezen ;-)
EDIT: moet ik natuurlijk ook het gedeelte van het menu meesturen heb het even aangepast ;-P
|
| |
|
ReZon
Forum Lid
447 posts |
# Geplaatst: 18 Mar 2010 20:10
css code #menu { margin: 0 auto; }
Bedoel je dit soms.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 20:13
uhm nee met deze code krijg ik mijn dropdown menu niet gecentreerd
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 18 Mar 2010 20:13 · Aangepast door: DNA
moet nog width erbij.
En mag niet in percentages.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 20:20
dankje DNA, op het eerste gezicht ziet dit er inderdaad goed uit, zal morgen even testen of het op een ander formaat beeldscherm ook goed werkt, heb dat nu op het ogenblik niet bij de hand, maar als het werkt ben ik je heel dankbaar want zat al een week te klooien en te zoeken op internet maar daar is niks te vinden
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 18 Mar 2010 20:22
uuuh...ik weet dan echt niet hoe jij zoekt.
http://www.google.nl/#hl=nl&source=hp&q=center+css+div&meta=&aq=f&aqi=g1&aql=&oq=&gs_rfai=&fp=fcc54eb83752e4c9
1e resultaat.
Gelijk raak.
Enne, resoluties testen, doe je gewoon doormiddel van resizen van je browser.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 20:28
ow ja ik positioneer mijn div'jes alleen maar via absolute/relative en niet via margin. in ieder geval bedankt want aan dat laatste had ik niet eens gedacht, ben een beetje duf vandaag...
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 18 Mar 2010 20:44
dat is de meest foute manier van positioneren.
Je hoort alles juist met margin te positioneren. En de uitzonderingen met relative en absolute. Niet andersom.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 20:46
oh oke, dan leren wij de verkeerde manier op school... is hier nog een specifieke reden voor?
|
DNA
Forum Lid
7709 posts |
# Geplaatst: 18 Mar 2010 20:49 · Aangepast door: DNA
verklein je browser eens. En verander de grootte eens ervan...
maar gelukkig heb je niet hele rare dingen erin staan. Maar zoals ik de code zie, kan je zelf alle positions weghalen en het zou geen effect hebben.
en gebruik eens een doctype.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 18 Mar 2010 21:02
ah goed dat je hier over begint waar dient het precies voor? Ik weet alleen heel van dat het iets met W3C te maken heeft en ik las ook iets over renderen maar het was mij nog niet echt duidelijk. Overigens staat het in m'n index wel, of moet het in iedere pagina? Dat browser trucje heb ik geprobeerd het de het menu is geslaagd :)
|
Sebastiaan Franken
Moderator
3847 posts |
# Geplaatst: 19 Mar 2010 06:59
Een doctype zorgt ervoor dat de browser de HTML + CSS code in zogenaamde standaarden modus weergeeft, in plaats van Quirks Modus (niet standaarden modus). Vooral Internet Explorer's Quirk Modus is een ramp, vandaar de doctype.
|
Morse
Forum Lid
112 posts |
# Geplaatst: 19 Mar 2010 07:34
Ah oke, ik dacht eerder dat het een soort van copyright was van W3C, maar dan zal ik er in het vervolg op letten.
|
BaZz
Forum Lid
3574 posts |
# Geplaatst: 19 Mar 2010 07:57
voorbeeldjes:
http://www.html-site.nl/boilerplate.php
|
