Coderen vraagjes

Ik ben een amateurtje in coderenMaar heb toch enkele vragen.

Vraag 1: Wat is de code voor een link een kleur te geven als je eroverheen gaat?

a:hover {
color: #000;
}

Dit toch? Dat werkt niet? of zet ik het verkeerd?

Vraag 2: Hoe zet ik alles in het midden? me achtergrond staat in het midden, en me lay-out niet
Er kunnen meer vragen volgen, dan staat het ergens in het topic
// Heb er al weer eentje....:

Ik heb bij menu een extra overlay, eentje met kleur en eentje met afbeelding, de afbeelding moet blijven op welke pagina je op dat moment bent.

Ik heb de afbeelding hiervan zo in stukken gehakt dat je als het waren dit hebt: (|).
Maar hoe zet ik dit in de css in elkaar dat het in de html alleen met een nummer of letter moet?

Iemand?

vraag 1: a:hover is goed. heb je ook waardes aan a zelf gegeven?
vraag 2: je gehele layout in een container zetten

#container { width: ..px; margin:0 auto;}

<div id="container"> layout </div>

vraag 3 snap ik niet, sorry

Marjolein schreef:

vraag 1: a:hover is goed. heb je ook waardes aan a zelf gegeven?
vraag 2: je gehele layout in een container zetten

#container { width: ..px; margin:0 auto;}

<div id="container"> layout </div>

vraag 3 snap ik niet, sorry

Vraag 1: welke waardes moet ik aan a geven dan?
dit:?

#a. {width: ..px; margin:0 auto;}

bijvoorbeeld?

Vraag 2: ik heb in de container dit staan:

Quote:
width: 1200px;
margin: 0 auto;

De width moet toch de breedte van de lay-out lay-out hebben?
kom er achter dat de lay-out 950 is, en de achtergrond 1200 heb het veranderd naar 950 en dat werkt.

Vraag 3: Ik heb een afbeelding die zo ( is, een bocht dus, een rechte | van 1 pixel breed en eentje van ) zo ook een bocht, dit wil ik gebruiken in de overlay van me menu.
Dat de bochten () allebei tegen de buiten kant van de tekst staat en dat | de rechte herhaald word achter de tekst. En Vervolgens weergeeft op welke pagina je je bevind.

vraag 1 bv:

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}

Vraag 3:
je bedoeld een menu hover dus hier weet ik een mooie tut over: http://www.sitedeals.nl/tutorials/44123-een-menu-maken-met-een-afgeronde-hover.html

Marjolein schreef:

vraag 1 bv:

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}

Vraag 3:
je bedoeld een menu hover dus hier weet ik een mooie tut over: http://www.sitedeals.nl/tutorials/44123-een-menu-maken-met-een-afgeronde-hover.html

Ik ga het even testen, als het niet werkt hoor je het wel Bedankt
edit://
Dit moet ik na body en html zetten toch?:

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}

En dit:

#nav a. hover{ text-decoration: underline; color: #000000;}

Op de plek bij nav?

in je css gewoon onderaan of zo

Hmm, dat heb ik gedaan en werkt niet, ik zal de css even plaatsen.

edit:

body{
    height: 100%;
    margin: 0; 
    padding: 0; 
    background:#000000 url(images/achtergrond.png); 
    background-repeat: no-repeat;
    background-position: 50% 0%;
    font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
    
html{ height: 100%; }

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}
    
h2{font:normal 15px/15px Tahoma, Verdana, sans-serif;
    padding:15px 0 15px 20px;
    text-decoration:none;}

#container {
    width:950px; 
    margin:0 auto;}
    
/********** Header ******************/

#laybackground {
    background: url(images/achtergrond-layout.png); 
    width: 950px; 
    height: 1543px; 
    margin: 0;
    margin-top: 334px;
    padding-top: 20px 20px;}
    
    
/********** Menu ******************/

#nav {
    background: url(images/menu-balk.png); 
    width: 950px; 
    height: 48px; 
    margin: 0;
    margin-top: 294px;
    padding-top: 20px 20px;}    
    
#nav a. hover{ text-decoration: underline; color: #000000;}
    
#nav {
    text-align: center; 
    padding-top: 20px 20px;} 
    
#nav a{ 
    padding:0px 20px;
    text-decoration:none;
    color:#ffffff;
    font:bold 12px/50px Tahoma, Verdana, sans-serif;
    position:relative;
    padding:15px;
    text-decoration:none;}

/*****************************/
#nieuws {
    background: url(images/nieuws-rotator-balk.png); 
    width: 583px; 
    height: 11px; 
    margin: 0;
    margin-top: 300px;
    padding-top: 20px 20px;}

wat werkt er niet dan?
Als het alleen de nav is?

#nav {
    text-align: center; 
    padding-top: 20px 20px;} 
    
#nav a{ 
    padding:0px 20px;
    text-decoration:none;
    color:#ffffff;
    font:bold 12px/50px Tahoma, Verdana, sans-serif;
    position:relative;
    padding:15px;
    text-decoration:none;}
#nav a:hover{ text-decoration: underline; color: #000000;}

nav a:hover ipv nav a. hover

Ja dat werkt, nu ga ik even stoeien met me menu
Het wil niet echt werken, ik heb nu dit:

CSS:

body{
    height: 100%;
    margin: 0; 
    padding: 0; 
    background:#000000 url(images/achtergrond.png); 
    background-repeat: no-repeat;
    background-position: 50% 0%;
    font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
    
html{ height: 100%; }

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}
    
h2{font:normal 15px/15px Tahoma, Verdana, sans-serif;
    padding:15px 0 15px 20px;
    text-decoration:none;}

#container {
    width:950px; 
    margin:0 auto;}
    
/********** Header ******************/

#laybackground {
    background: url(images/achtergrond-layout.png); 
    width: 950px; 
    height: 1543px; 
    margin: 0;
    margin-top: 334px;
    padding-top: 20px 20px;}
    
    
/********** Menu ******************/

#nav {
    background: url(images/menu-balk.png); 
    width: 950px; 
    height: 48px; 
    margin: 0;
    margin-top: 294px;}    
    
#nav {
    text-align: center; 
    padding-top: 20px 20px;} 
    
#nav a{ 
    /*
    color:#ffffff;
    font:bold 12px/50px Tahoma, Verdana, sans-serif;
    */
    position:relative;
    padding:15px;}
    
#nav a:hover{ text-decoration: none; color: #000000;}

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

li {
float:left;
display:block;
padding:0px;
margin:0px;}

li a {
color:#ffffff;
text-decoration:none;
font:bold 12px Tahoma, Verdana, sans-serif;
float:left;
display:block;
height:25px;
line-height:21px;}

li span {
padding:0 20px 0;
display:block;}

li a:hover {
background:url(images/links.png) repeat-x left top;
display:block;
float:left;
color:#fff;}

li a:hover span {
background:url(images/overlay-menu-rechts.png) no-repeat right top;
display:block;}
/*****************************/
#nieuws {
    background: url(images/nieuws-rotator-balk.png); 
    width: 583px; 
    height: 11px; 
    margin: 0;
    margin-top: 300px;
    padding-top: 20px 20px;}

HTML:

<div id="nav">
        <ul>
        <li><a title="Home" href="#">Home</a></li>
        <li><a title="Nieuws" href="#">Nieuws</a></li>
        <li><a title="Games" href="#">Games</a></li>
        <li><a title="Artikelen" href="#">Artikelen</a></li>
        <li><a title="Video" href="#">Video</a></li>
        <li><a title="Technolgy" href="#">Technolgy</a></li>
        <li><a title="Hardware" href="#">Hardware</a></li>
        <li><a title="Showbizz" href="#">Showbizz</a></li>
        <li><a title="Financieel" href="#">Financieel</a></li>
        <li><a title="Muziek" href="#">Muziek</a></li>
        <li><a title="Marktplace" href="#">Marktplace</a></li>
        </ul>

Kun je uit de CSS halen wat n.v.t. is bij nav wat bij ul en li ook wordt gebruikt enzo
//: hij wordt nu ook lager aangeven dan de straks?

//: dubbelpost sorry

Het wil niet echt werken, ik heb nu dit:

CSS:

body{
    height: 100%;
    margin: 0; 
    padding: 0; 
    background:#000000 url(images/achtergrond.png); 
    background-repeat: no-repeat;
    background-position: 50% 0%;
    font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
    
html{ height: 100%; }

a {font: 12px arial; color:#ffffff; text-decoration:none; }
a:hover {color:#000;}
    
h2{font:normal 15px/15px Tahoma, Verdana, sans-serif;
    padding:15px 0 15px 20px;
    text-decoration:none;}

#container {
    width:950px; 
    margin:0 auto;}
    
/********** Header ******************/

#laybackground {
    background: url(images/achtergrond-layout.png); 
    width: 950px; 
    height: 1543px; 
    margin: 0;
    margin-top: 334px;
    padding-top: 20px 20px;}
    
    
/********** Menu ******************/

#nav {
    background: url(images/menu-balk.png); 
    width: 950px; 
    height: 48px; 
    margin: 0;
    margin-top: 294px;}    
    
#nav {
    text-align: center; 
    padding-top: 20px 20px;} 
    
#nav a{ 
    /*
    color:#ffffff;
    font:bold 12px/50px Tahoma, Verdana, sans-serif;
    */
    position:relative;
    padding:15px;}
    
#nav a:hover{ text-decoration: none; color: #000000;}

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

li {
float:left;
display:block;
padding:0px;
margin:0px;}

li a {
color:#ffffff;
text-decoration:none;
font:bold 12px Tahoma, Verdana, sans-serif;
float:left;
display:block;
height:25px;
line-height:21px;}

li span {
padding:0 20px 0;
display:block;}

li a:hover {
background:url(images/links.png) repeat-x left top;
display:block;
float:left;
color:#fff;}

li a:hover span {
background:url(images/overlay-menu-rechts.png) no-repeat right top;
display:block;}
/*****************************/
#nieuws {
    background: url(images/nieuws-rotator-balk.png); 
    width: 583px; 
    height: 11px; 
    margin: 0;
    margin-top: 300px;
    padding-top: 20px 20px;}

HTML:

<div id="nav">
        <ul>
        <li><a title="Home" href="#">Home</a></li>
        <li><a title="Nieuws" href="#">Nieuws</a></li>
        <li><a title="Games" href="#">Games</a></li>
        <li><a title="Artikelen" href="#">Artikelen</a></li>
        <li><a title="Video" href="#">Video</a></li>
        <li><a title="Technolgy" href="#">Technolgy</a></li>
        <li><a title="Hardware" href="#">Hardware</a></li>
        <li><a title="Showbizz" href="#">Showbizz</a></li>
        <li><a title="Financieel" href="#">Financieel</a></li>
        <li><a title="Muziek" href="#">Muziek</a></li>
        <li><a title="Marktplace" href="#">Marktplace</a></li>
        </ul>

Kun je uit de CSS halen wat n.v.t. is bij nav wat bij ul en li ook wordt gebruikt enzo
//: hij wordt nu ook lager aangeven dan de straks?

//: dubbelpost sorry

je moet nog gebruiken. dus:

<div id="nav">
        <ul>
        <li><a title="Home" href="#"><span>Home</span></a></li>
        <li><a title="Nieuws" href="#"><span>Nieuws</span></a></li> enz enz

Dat heb ik gedaan, en nu komt de rechter kant er wel maar nog niet goed.

Hij sluit hem niet af, het ziet er als het ware zo uit: (||||)||| hij loopt nog door, en staat niet recht tegen over de andere kant.

Ook moet hij in het midden van de menu balk komen.

Ik heb nu dit:

#nav {
    background: url(images/menu-balk.png); 
    width: 950px; 
    height: 48px; 
    margin: 0;
    margin-top: 294px;}    
    
#nav {
    text-align: center; 
    padding-top: 20px 20px;} 
    
#nav a{ 
    /*
    color:#ffffff;
    font:bold 12px/50px Tahoma, Verdana, sans-serif;
    */
    position:relative;
    padding:15px;}
    
#nav a:hover{ text-decoration: none; color: #d58012;}

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

li {
float:left;
display:block;
padding:0px;
margin:0px;}

li a {
color:#ffffff;
text-decoration:none;
font:bold 12px Tahoma, Verdana, sans-serif;
float:left;
display:block;
height:25px;
line-height:21px;}

li span {
padding:5 20px 0;
display:block;}

li a:hover {
background:url(images/links.png) repeat-x left top;
display:block;
float:left;
color:#fff;}

li a:hover span {
background:url(images/overlay-menu-rechts.png) no-repeat right top;
display:block;}

edit:// Ik kom er net achter dat ik de ids niet heb afgesloten met is dit erg?
Als ik dit wel doe moet ik alles weer uitmeten. Maar het is beter als dit wel er zit of niet?

iemand?

is je rechterplaatje misschien transparant? dan werkt die idd niet dat probleem had ik ook.
En om je menu in het midden te krijgen moet je alle float:left; weghalen en display: block; veranderen in display:inline-block; En dan centreren.