Positionering

Door koh do op 13-02-2009 13:19

466 views

Ik ben net begonnen met het opmaken van mijn site door middel van css. Ik heb het volgende al in elkaar geknutseld.

Nou heb ik hier een aantal vagen over.

stylesheet.css

body {
 width:75%;
 font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif";
  margin: 0px auto;
}



.tbutton {
 width: 100%;
 height:30px;
}

.tbutton .l {
 float:left;
 padding-left: 5px;

}

.tbutton .r {
 float:right;
 padding-right: 10px;
}

.tbutton p {
 margin:0.5em 0px 0px 0px;
 padding:0px;
 font:0.95em/1.5em arial,tahoma,"sans serif";
 color: black;
}



.header {
 width: 100%;
}

.header .hd .c,
.header .ft .c {
 font-size:1px; 
 height:13px;
}

.header .ft .c {
 height:14px;
}

.header .hd {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/tl.gif) no-repeat 0px 0px;
}

.header .hd .c {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/tr.gif) no-repeat right 0px;
}

.header .bd {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/ml.gif) repeat-y 0px 0px;
}

.header .bd .c {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/mr.gif) repeat-y right 0px;
}

.header .bd .c .s {
 height: 6em;
 margin:0px 8px 0px 4px;
 background:#000 url(http://i713.photobucket.com/albums/ww139/php_peter/ms.jpg) repeat-x 0px 0px;
 padding:1em;
}

.header .ft {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/bl.gif) no-repeat 0px 0px;
}

.header .ft .c {
 background:transparent url(http://i713.photobucket.com/albums/ww139/php_peter/br.gif) no-repeat right 0px;
}




.body {
 width 100%;
 padding: 10px 5px 0 2px;
}

.body .button {
 height:30px;
 margin: 0px auto;
 padding-left: 10px;
 background:#F3F3F3;
 border-bottom: 1px solid gray;
}

.body .button .l {
 color: #000000;
 text-align: center;
 width: 10%;
 margin: 0px;
 padding: 4px;
 float: left;
}

.body .button p {
 margin:0.5em 0px 0px 0px;
 font:0.95em/1.5em arial,tahoma,"sans serif";
 color: #00000;
}

.body .main {
 margin: 0px auto;
 padding: 10px 0 0 0;}

.body .main .l {
 width: 74%;
 background: gray;
 float: left;
}

.body .main .r {
 width: 24%;
 background: #F3F3F3;
 float: right;
}

.body .main p {
 margin: 0.5em 0 0.5em 0.5em;
 font:0.95em/1.5em arial,tahoma,"sans serif";
 color: #00000;
}



.foot {

 padding: 10px 0px 0 2px;
}

.foot .button {
 height:30px;
 padding-left: 10px;
 background:#F3F3F3;
 border-top: 1px solid gray;
}

.footer .button p {
 margin: 0.5em 0 0.5em 0.5em;
 font:0.95em/1.5em arial,tahoma,"sans serif";
 color: #00000;
}

testpagina.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>testpagina</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>

    <div class="tbutton">
        <div class="l"><p>Welcome Guest</p></div>
        <div class="r"><p>Link 1 | Link 2 | Link 3 | Link 4 | Link 5</p></div>
    </div>
    <div class="header">
        <div class="hd">
            <div class="c">
            </div>
        </div>
        <div class="bd">
            <div class="c">
            <div class="s">
            </div>
            </div>
        </div>
        <div class="ft">
            <div class="c">
            </div>
        </div>
    </div>

    <div class="body">
        <div class="button">
            <div class="l"><p>buttons 1</p></div>
            <div class="l"><p>buttons 2</p></div>
            <div class="l"><p>buttons 3</p></div>
        </div>
        <div class="main">
            <div class="l"><p>main</p></div>
            <div class="r"><p>alt</p></div>
        </div>
    </div>

    <div class="foot">
        <div class="button"><p>footer</p></div>
    </div>

</body>
</html>

Dit is wat ik tot nu to heb.

Mijn eerste vraag: Op mijn eigen pc gebruik ik natuurlijk niet de plaatjes van photobucket maar uit mijn folder. Op mijn pc werkt het header plaatje dan ook goed en is het een zwart vak met afgeronde hoeken. nou wilde ik dat het voor iedereen werkte en heb ik de plaatjes geupload naar photobucket maar nou werkt het niet goed meer. Heb ik ies over het hoofd gezien?

De tweede vraag: mijn footer komt niet onder aan de pagina te staan maar tussen mijn main en alt gedeelte in de body van mijn pagina. Hoe komt dit? Ik heb van alles geprobeerd, maar kan er niet achter komen wat ik fout doe.

Mijn laatste vraag: IK ben dus pas begonnen met css, en ik wil het me zelf meteengoed aan leren. Zijn de codes netjes geschreven? of moet ik iets veranderen?

Al vast bedankt voor uw tijd.