Css Background doet niks.

Status
Niet open voor verdere reacties.
Gerben93

Gerben93

Gebruiker
Lid geworden
28 okt 2009
Berichten
15
Hallo vrienden,

Ik heb hier een website code. ik wou er graag een achtergrond op via css.
Toen ik deze code in mijn css zette kreeg ik niks.
dit zijn mijn codes.

index.html
HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <title color="black"> Photography </title>

    <head/>

    <body style="background:#848484"body onLoad="show5()">  
 <h1> Photography </h1>
    <span id="liveclock" style="position:absolute;left:0;top:0;"></span>
    <script language="JavaScript">
                function show5(){
                 if (!document.layers&&!document.all&&!document.getElementById)
                 return
                 var Digital=new Date()
                 var hours=Digital.getHours()
                 var minutes=Digital.getMinutes()
                 var seconds=Digital.getSeconds()
                 var dn="AM" 
                 if (hours>12){
                 dn="PM"
                 hours=hours-12
                 }
                 if (hours==0)
                 hours=12
                 if (minutes<=9)
                 minutes="0"+minutes
                 if (seconds<=9)
                 seconds="0"+seconds
                //change font size here to your desire
                myclock="<font size='5' face='Arial' ><b><font size='1'>Current Time:</font></br>"+hours+":"+minutes+":"
                 +seconds+" "+dn+"</b></font>"
                if (document.layers){
                document.layers.liveclock.document.write(myclock)
                document.layers.liveclock.document.close()
                }
                else if (document.all)
                liveclock.innerHTML=myclock
                else if (document.getElementById)
                document.getElementById("liveclock").innerHTML=myclock
                setTimeout("show5()",1000)
                 }

                //-->
    </script>

    <img style="position:absolute; TOP:350px; LEFT:350px; WIDTH:700px; height:450px" src="http://94.100.118.42/1056700001-1056750000/1056704201-1056704300/1056704224_5_Lr1e.jpeg"/>
    <br />
  
<div id="traanplaat">
</div>
  
    <div id="menu">
    <p> </br> <h2> <a href="index.html"> Home </a> </h2> </p>
    <p> </br> <h2> <a href="fotocameras.html">Photocameras</a> </h2> </p>
    <p> </br> <h2> <a href="about me.html">About me</a> </h2> </p>
    <p> </br> <h2> <a href="afbeeldingen.html"> Pictures </a> </h2> </p>
    </div> 
  
    <div id="footer">
        <form method="get" action="http://www.google.com/search">
        <input type="text"   name="q" size="31" maxlength="255" value="" />
        <input type="submit" value="Google Search" />
        <input type="radio"  name="sitesearch" value="" />
         The Web
        <input type="radio"  name="sitesearch"
         value="askdavetaylor.com" checked /> Ask Dave Taylor<br />
        </form>
    </div>
 

    
    <div id="tekstvlakindex">
        <h3> 
            Hello, I'm Yde and this is my site about photography. I hope you will enjoy my site, I'll talk about some good camera's.
            I'll show you my pictures and I will teach you how I've made it. Enjoy!!!
        </h3>
    </div>
    
    <br />
    <br />
    <br />
    <br />
    <br />
    
</body>
</html>

style.css
Code: 
body
{
    margin: 10px;
    padding: 0px;
    background-color: yellow;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}



/*
De body krijgt een margin van 10 pixels. Dat is het gele randje dat je rondom de pagina ziet.
Het lettertype leggen we hier vast. Het wordt geërfd door o.a. de headers en de paragraphs.
Voor het verschil tussen padding en margin kijk je in de reader.
Je kunt ook gewoon de waarden veranderen en kijken wat er gebeurt.
*/

#tekstvlakfotocameras
{

border-style:solid;
border-width:medium;
margin-left: 200px;
margin-top: 0px;
padding: 0 px;
background: #;
height: 290px;
background-color: #A4A4A4;
width: 1055px;

}

h1
{
    font-size: 42px;
    color: black;
    text-align: center;
    font-variant: small-caps;

}

h2 

{

Font-size: 20px;
color: black;
text-align: center;

}

h3

{

Font-size: 14px;
color: black;
text-align: center;

}

h4
{
Font-size: 12px;
color: black;
text-align: center;
}

#traanplaat
{
background-image:url("traanplaat");
background-repeat:no-repeat;
background-position:right top;
} 

#tekstvlakaboutme
{
padding: 0 px;    
height: 70px;
background-color: #A4A4A4;
width: 1055px;
margin-top: 0px;
border-style:solid;
border-width:medium;
margin-left: 200px;
} 

#top1
{
margin-left: 250px;
    padding: 0 px;
    background: #;
    height: 290px;
    background-color: #A4A4A4;
    width: 1055px;
    margin-top: -15px;
}

/*
De h1 komt in small-caps oftewel kleine kapitalen (hoofdletters). 
*/



/*
De headmast (kop van de website) is precies 100 pixels.
*/

#menu
{
    position: absolute;
    float: left;
    width: 200px;
    margin: 0px;
    padding: 0px;
    height: 700px;
    background-color: #D8D8D8;
    clear: left;
    border: 5px;
    
}

/*
Het eerste vlak aan de linkerkant heeft een float left, dat wil zeggen dat het links moet staan.
Het is precies 200 pixels breed.
*/

#left-two
{
    Position: absolute;
    float: left;
    width: 200px;
    margin-left: 5px;
    margin-top: 80px;
    padding: 0px;
    height: 700px;
    background-color: #D8D8D8;
    border: 5px;
    }   

/*
Met clear:left dwing je het vlak onder het andere vlak.
*/

#right-one
{
    position: absolute;
    width: 250px;
    right: 10px;
    top: 100px;
    height: 200px;
    padding: 10px;
    background-color: fuchsia;
    text-align: center;
}

/*
Je kunt ook absoluut positioneren. Het bovenste vlak aan de rechterkant begint op tien pixels van de rechterkant (de marge van de body).
Het vlak begint op 100 pixels van de bovenkant en het is precies 200 pixels hoog.
*/

#right-two
{
    position: absolute;
    width: 250px;
    right: 10px;
    top: 350px;
    height: 200px;
    padding: 10px;
    background-color: lime;
    text-align: justify;
}

/*
Ook het tweede vlak aan de rechterkant is absoluut gepositioneerd.
Het heeft bijna dezelfde eigenschappen maar het begint op 350 pixels van de bovenkant.
*/

#center
{
    padding: 10px;
    margin-left: 230px;
    margin-right: 280px;
    margin-top: -25px;
    background-color: aqua;
}

/*
Het middelste vlak heeft een linkermarge van 230 pixels waar daar komen de twee linkervlakken.
En een rechtermarge van 280 pixels want daar komen de rechtervlakken.
De marges kun je ook negatief maken. De bovenmarge is -25 waardoor alles wat omhoog gaat.
*/

#clear
{
    clear: both;
}

/*
Met clear: both dwing je de browser pas verder te gaan onder alle andere dingen die al op de pagina staan.
*/

#footer
{
    height: 70px;
    background-color: #D8D8D8;
    text-align: center;
    margin: 0px;
    padding: 10px;
    background: #ccc;
}

#footer1
{

    height: 70px;
    background-color: #D8D8D8;
    text-align: center;
    margin-left: 5px;
    padding: 10px;
    background: #ccc;
    margin-top: 50px;
}

/*
Dit is de voettekst die onder aan de pagina komt.
De div wrapper hoef je niet te definiëren. Hij dient enkel om een aantal divjes bij elkaar in te pakken.
*/

#tekstvlakindex 
{
border-style:solid;
border-width:medium;
margin-left: 200px;
margin-top: 0px;
padding: 0 px;
background: #;
height: 65px;
background-color: #A4A4A4;
width: 1055px;
    

}
 
Zoals CSS-hunter zou zeggen: Haal eerst je website/webpagina door de W3 validator.
Bijv. via deze link (speciaal voor CSS) of via deze link voor hele webpagina's (HTML etc.)

Succes,

Tijs.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan