[CSS] Footer elementen gelijk uitlijnen en goed positioneren

[Reveller]

Ik wil de volgende footer op mijn website maken (XXXX = plaatje):

code:

+----------------------------------------------------------------------------+
|                                                                            |
|                                                                            |
| XXXX Copyright Reveller 1980 - 2005                         XXXXXXXXXXXXXX |
| XXXX Hier komen een aantal links                            XXXXXXXXXXXXXX |
|                                                                            |
+----------------------------------------------------------------------------+

De footer is 100px hoog. De ruimte moet aan de onderkant 30px zijn. De HTML hiervan is momenteel als volgt:

code:

<style>
#footer {
  padding: 0 0 30px 0;
}

#footer #logo {
  float: left;
  margin-left: 20px;
}

#footer p {
  float: left;
  text-align: left;
}

#footer #plaatje {
  float: right;
  margin-right: 20px;
}
</style>

<div id="footer">
  [img]"logo.gif">
[/img]Copyright Reveller 1980 - 2005<br>Hier komen een aantal links</p>
  [img]"plaatje.gif">
</div[/img]

Wat gaat er fout:

• De tekst wordt helemaal tegen de bovenrand aangedrukt, net als #plaatje
• #logo zit ongeveer 25px vanaf de bovenkant

code:

+----------------------------------------------------------------------------+
|      Copyright Reveller 1980 - 2005                         XXXXXXXXXXXXXX |
| XXXX Hier komen een aantal links                            XXXXXXXXXXXXXX |
| XXXX                                                                       |
|                                                                            |
|                                                                            |
+----------------------------------------------------------------------------+

Wat klopt er niet aan mijn css? Ik heb al geprobeerd om de padding uit #footer te halen en #footer #logo, #footer p en #footer #plaatje aan margin-bottom van 30px mee te geven, maar dit is erg omslachtig. Ook heb ik geprobeerd op #logo als achtergrond aan #content p mee te geven, maar dan kreeg ik de tekst niet links uitgelijnd naast het plaatje...

[Freelance]

[code]
<style>

#footer {
position: absolute;
height: 100px;
width: 750px;;
bottom: 0px;
background-color:#00FF00;
text-align: left;
}

.logo {
position: relative;
float: left;
margin-top: 25px;


}

#footer p {
float: left;
margin-top:25px;

}

.plaatje {
position: relative;
float: right;
margin-right: 20px;
margin-top: 25px;

</style>


<div id="footer">
[img]"logo.gif">[/img]Copyright Reveller 1980 - 2005<br>Hier komen een aantal links</p>
[img]"plaatje.gif"> </div> [/code] id[/img], <p> etc tags .

[ Voor 236% gewijzigd door Freelance op 16-12-2005 00:10 . Reden: 3x verkeerd gepaste ]

[BtM909]

Freelance schreef op donderdag 15 december 2005 @ 23:06:

id hoort niet <img>, <p> etc tags .

Waarom zou een id niet in img of p-elementen mogen voorkomen?

[netvor]

Floats moeten voor datgene waar ze omheen floaten geplaatst worden. dus zeg maar:

XML:

<div>
<img/>
<img/>
<p>...</p>
</div>

[Freelance]

BtM909 schreef op vrijdag 16 december 2005 @ 09:27:

[...]

Waarom zou een id niet in img of p-elementen mogen voorkomen?

heb je een punt, bij mij op de opleiding zijn ze van mening dat dit niet netjes is. Weet iemand toevallig waarom?

[Sappie]

Freelance schreef op vrijdag 16 december 2005 @ 15:53:
heb je een punt, bij mij op de opleiding zijn ze van mening dat dit niet netjes is. Weet iemand toevallig waarom?

Dat zuigen de leraren van je opleiding compleet uit hun duim denk ik; het id attribuut wordt zelfs toegelicht aan de hand van het p - element: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

[RagaBaSH]

een google qurey op "html img id=" kwam uit op:
http://www.w3schools.com/htmldom/dom_obj_image.asp
Hierin wordt aangegeven dat het niet geheel binnen de W3C specs valt.
MAAR!
zodra ik bij de [/url]officiele HTML4.01[/url] specs ga kijken onder IMG zie je dat "id" een document-wide identifier is, en gewoon mag.
Onder XHTML 1.0 wordt zelfs gezegd dat ze liever een "id" als een "name" tag hebben, dus lijkt me meer een voorkeur als wat anders.

[Sappie]

RagaBaSH schreef op vrijdag 16 december 2005 @ 16:30:
een google qurey op "html img id=" kwam uit op:
http://www.w3schools.com/htmldom/dom_obj_image.asp
Hierin wordt aangegeven dat het niet geheel binnen de W3C specs valt.
MAAR!
zodra ik bij de [/url]officiele HTML4.01[/url] specs ga kijken onder IMG zie je dat "id" een document-wide identifier is, en gewoon mag.
Onder XHTML 1.0 wordt zelfs gezegd dat ze liever een "id" als een "name" tag hebben, dus lijkt me meer een voorkeur als wat anders.

Beter ga je niet van w3schools uit. enne niet alleen onder xhtml 1.0 is dat wat je zegt zo..
http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2

[crisp]

idd, w3schools heeft het wel vaker bij het verkeerde eind. Ik zat net te lezen wat ze over XHTML te vertellen hebben maar da's 80% bull.

Het name-attribuut voor (o.a.) het img-element is echter toegevoegd voor backwards-compatibility en er wordt aangeraden het id-attribuut te gebruiken. In XHTML 1.0 Transitional is het name-attribuut nog wel gespecificeerd, maar in XHTML Strict niet meer.