4 replies [Last post]
KoosHopeloos
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT+1
Joined: 2007-07-31
Posts: 12
Points: 0

L.S.,

I'm changing my webpage from tables and HTML to CSS and XHTML. Learning CSS, I have a problem with the alignment of my navigation.

Here is the link (CSS & XHTML code): http://www.kleurenblindheid.nl/kleuren/startnieuw.shtml!

The problem is that the navigation should be aligned to the left, covering all the green. Whatever I try, I can't get it right... HELP?

Thanks a lot for your time!

The used code:

Copyright JNvB

body {
text-align: center;
margin-top: 0px;
background-color: #000000;
font-family: verdana, garamond, tahoma, arial, sans-serif;
}

#container {
margin: 0 auto;
text-align: left;
width: 999px;
}

#headerrow {
height: 190px;
color: #ffffff;
}

#logo {
float: left;
width: 200px;
}

#name {
float: left;
width: 565px;
}

#header3 {
float: left;
width: 224px;
background-color: #00ff00;
}

#contentrow {
color: #ffffff;
}

#menu {
margin: 0px;
float: left;
width: 190px;
padding: 0px 10px 0px 0px;
list-style: none;
background-color: #00ff00;
}

#links {
margin: 0px;
float: left;
width: 214px;
padding: 0px 0px 0px 10px;
background-color: #000000;
font-size: small;
}

#content {
margin: 0px;
padding: 0px;
float: left;
width: 565px;
}

#footerrow {
clear: left;
height: 60px;
color: #ffffff;
}

#counters {
margin: 0px;
float: left;
width: 200px;
padding: 10px 0px 0px 0px;
}

#footer {
margin: 0px;
float: left;
width: 565px;
}

#totop {
margin: 0px;
float: left;
width: 214px;
padding: 0px 0px 0px 10px;
}

#totop a {
margin: 0px;
display: block;
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 10px;
}

#totop a:hover {
margin: 0px;
font-weight: bold;
color: #000000;
background-color: #ffffff;
padding: 0px 0px 10px 5px;
}

#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

/* DISPLAY INLINE REMOVES WHITE SPACING IE6 and IE7 */
#navigation li {
margin: 0px;
padding: 0px;
display: inline;
font-size: medium;
}

#navigation a {
margin: 0px;
display: block;
text-decoration: none;
padding: 0px 0px 10px 10px;
font-size: medium;
}

#navigation a:hover {
margin: 0px;
color: #000000;
font-weight: bold;
padding: 0px 0px 10px 5px;
background-color: #ffffff;
}

body.start #navigation li#start a {
margin: 0px;
color: #000000;
font-weight: bold;
padding: 0px 0px 10px 5px;
background-color: #ffffff;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
cursor: text;
}

img {
border-style: none;
}

h1 {
font-size: x-large;
font-weight: bold;
text-align: center;
margin: 0px;
}

h2 {
font-size: medium;
font-weight: bold;
text-align: center;
}

p {
font-size: medium;
text-align: justify;
}

.extlinks {
margin: 0px;
padding: 0px;
font-size: small;
text-align: left;
}

.footertext {
font-size: small;
text-align: center;
}

a:link, a:visited, a:focus {
color: #ffffff;
text-decoration: underline;
}

a:hover, a:active {
color: #ffffff;
text-decoration: underline overline;
}

.imgright {
float: right;
padding: 0px 10px 0px 0px;
}

.imgleft {
float: left;
padding: 0px 0px 0px 10px;
}

.textleft {
text-align: left;
}

.textcenter {
text-align: center;
}

.textright {
text-align: right;
}

.textleftsmall {
text-align: left;
font-size: small;
}

.textcentersmall {
text-align: center;
font-size: small;
}

.textrightsmall{
text-align: right;
font-size: small;
}

hr {
border: 1px solid #ffffff;
}

  • BIOLOGIE

  • GENETICA

  • EVOLUTIE

  • SOORTEN

  • TESTEN

  • GASTENBOEK

  • BIBLIOGRAFIE

  •  

  • Blog

  • Software

  • Boeken enzo

  •  
  • Contact



  • KLEURENBLIND

    Dé website met informatie over kleurenblindheid




    In de Van Dale:




    kleu·ren·blind (bn.)



    1. niet in staat bepaalde kleuren te onderscheiden





    Een voorbeeld:

    “Was u die zelfmoordenaar?” Vroeg de commandant van
    vliegbasis Twente in 1965 aan M. Noothoven van Goor. De dienstplichtige
    militair zat in de kantine achter een biertje bij te komen, samen met
    de piloot die hem in zijn straaljager op een haar na had gemist. Van
    Goor reed in zijn auto over de weg die de startbaan kruiste. Bij het
    oprijden van de startbaan brandde de onderste lamp van het verkeerslicht
    en Van Goor gaf gas. Het dalende vliegtuig miste hem rakelings. Ook
    de piloot dacht dat zijn laatste uur geslagen was.


    Na dit incident paste de luchtmacht de verkeerslichten aan. Rood kwam
    voortaan boven, groen onder. Van Goor, volledig kleurenblind voor rood
    en groen, had het onderste, rode stoplicht als groen geïnterpreteerd!



    (NRC Handelsblad, W&O, 2001)




    Van Goor ziet naast zwart, wit, grijs, en blauw de kleuren rood en groen als
    grijstinten. Hierdoor gaf Van Goor gas bij het branden van de onderste
    lamp! Dit is een manier waarop kleurenblindheid tot uiting kan komen.
    Hij is 1 van de ongeveer 1,3 miljoen Nederlanders met een afwijking voor
    het het zien van kleuren.


    Wanneer is kleurenblindheid of Daltonisme voor het eerst
    beschreven en door wie? Wat is licht en hoe word dit waargenomen door
    het oog? Worden beeld en kleur eigenlijk gezien in de hersenen? Is kleurenblindheid
    erfelijk en hoe is het 'zien' van kleuren ontstaan? Welke soorten zijn
    er en is het mogelijk om kleurenblindheid te testen?



    "For those watching in black and white, the pink is behind the green"


    Ted Lowe commentating on BBC television

    at the Embassy World Championship Snooker



    Omhoog

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 48 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It just looks as though you

    It just looks as though you haven't accounted for the default margins and padding on ul lists.

    Padding-left:0; will remove the indent method used by Firefox; IE uses margin-left.

    Generally with lists that don't require bullets i.e navs the margins and padding are neutralised on the ul

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 5 years 41 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    It looks like you tried to

    It looks like you tried to zero the margins but did it incorrectly
    #navigation ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }

    Should be:
    #navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    Notice the removal of the descendant ul - the ul is the element with the id of navigation.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 48 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Well spotted that wolf,

    Well spotted that wolf, missed that completely, hope it helped the OP Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    KoosHopeloos
    Offline
    Regular
    Last seen: 11 years 39 weeks ago
    Timezone: GMT+1
    Joined: 2007-07-31
    Posts: 12
    Points: 0

    @ Hugo, wolfcry911: thank

    @ Hugo, wolfcry911: thank you very much for the help! It worked (of course :thumbsup: ).

    I never thought that it would be that, still learning.