Lastig: display:block, float:left/right met position:absol/rel

[damnsharp]

Hoi,
Ik ben met CSS best een beginner en krijg een paar basis zaken niet gesnapt.
Ik wil bij de header van een site helemaal links een plaatje en helemaal rechts een plaatje. Met paddings en margins krijg ik het niet goed voor mekaar.

Ik begrijp ten eerste niet wanneer ik een display:block het beste kan gebruiken.
Dus ik zie in voorbeelden staan: header, page-wrapper, sidebar {display:block;}

En als ik dan binnen de header het plaatje_links en plaatje_rechts wil opmaken doe ik dat dan het beste met float:left en float:right of niet en waar moet ik dan position:relative of position:absolute gebruiken?

Kortom, heeft er iemand wat beginnerstips of links waar ik het beste kan kijken?

 

[gebruiker78]

Omdat er sinds gister toch nog niet op gereageerd is probeer ik dit ziellige antwoord maar:
Ik zou kiezen voor float:left en float:right omdat dat voor mij altijd het beste heeft gewerkt.
Met absolute negeer je eigenlijk alles en gaat de div zijn eigen gang (niet handig vind ik)
Met relative kijkt de div in welke div het zit en gaat dan aan de slag (beter)

Maar voor een iets duidelijker uitleg:
Link link link

 

[csshunter]

Hoi damnsharp,
Ja, in het begin komt er nogal veel tegelijk op je af met css.

Tip 1:
Ik zou voorlopig niet met de position-eigenschap gaan werken. Een {position:absolute} kan erg gevaarlijk zijn en tot onverwachte / onbedoelde effecten leiden. Bv. als er meer tekst in een bepaald element komt te staan, kan die dwars over andere elementen heen komen te staan, omdat er geen flexibiliteit in de opmaak zit. Je hoeft ook niet persé een position (absolute, relative of nog iets anders) op te geven: dat regelt zich meestal vanzelf.

Tip 2:
Een {display:block} is meestal ook niet nodig. Een aantal belangrijke elementen (<div>'s, <h1>, <h2>, <p>) hebben uit zichzelf al een block-karakter, d.w.z. worden altijd 100% van de schermbreedte (tenzij een bepaalde andere breedte is opgegeven).
Een {display:block} of {display:inline-block} kan gebruikt worden voor elementen die anders inline staan (binnen een regel, zeg maar). Dat kan bv. nodig zijn voor een link die geen tekst maar een achtergrond-afbeelding heeft. Dan geef je de hoogte en breedte van die achtergrond-img op, plus zo'n display, want anders wordt het oppervlak niet weergegeven.

Tip 3:
Plaatjes binnen de #header: met het ene plaatje {float:left} en het andere plaatje {float:right} moet dat kunnen. Deze twee floats moeten dan wel vóór een ander element in de header (tekst) komen te staan, dan komt die tekst er mooi tussen.
Gaat dat niet, dan moet je hier even de precieze html en css doorgeven die je gebruikt hebt (of een online testpagina, dat is nog beter).

Literatuur!

• www.web-garden.be/cursus-html/cursus-html/
• w3schools.com, html-tutorial
• w3schools.com, css-tutorial

Met vriendelijke groet,
CSShunter
____________
PS: Als je met een CMS als Wordpress of Joomla werkt, kan het allemaal anders komen te liggen; die hebben soms voorrangsregels ingebouwd in hun templates, waardoor eigen aanvullingen niet altijd 1-2-3 werken.

<edit>
Hé, dit blijkt een kruispost: ik was nog aan het tikken.
</edit>

 

[damnsharp]

@gebruiker78 en CSShunter: hartstikke bedankt voor de antwoorden! Kijk daar kan ik zeker wat mee. Ik zal de website die ik aan het opmaken ben eens zonder de position:absolute/relative en met alleen float techniek gaan opmaken.
En natuurlijk de links goed bekijken. Daarnaast ben ik ook aan de CSS Fundamentels cursus van Lynda.com begonnen en met jullie tips zeer verhelderend.
Ja en de w3schools website is ook handig maar niet altijd snap ik het meteen dus soms een vraag op helpmij.nl zal nog wel eens komen

Oh, CSShunter tip 3 ben ik aan het uitproberen want heb inderdaad een header bij een website met ook tekst (slogan).

Als ik nog een specifiek probleem tegenkom zal ik dat plaatsen zoals je (CSShunter) al aangeeft.

 

[csshunter]

Het Groene Boek

Hoi damnsharp ,
Je bent enthousiast bezig!
Wat ook erg goed en uitgebreid is, is het groene boek "CSS and HTML Web Design" dat je onderaan de pagina van de web-garden.be_cursus ziet staan.

Dat is een pdf-bestand van ruim 500 pagina's vol goede kost, met veel praktische voorbeelden en prettig te lezen: als je dat uit hebt ben je echt damnsharp over de css-mogelijkheden !
En ... gratis te downloaden!

• Zie in dit topic mijn ervaringen.
• En zie hier voor de download-instructies, want het spreekt niet helemaal vanzelf.

Met vriendelijke groet,
CSShunter
===========

<edit>

Update april 2013:
Attentie: Het boek zit niet meer op de bovenstaande download-locatie, wel op verschillende andere download-locaties.
Hier is een reclamevrije mirror.

</edit>

 

[gebruiker78]

Ik ben ZEER! tevreden over lynda.com
En als je dat hebt gehad dan w3school voor de extra's...