wederom een css div probleem

[BasieP]

beste mensen, na ruim 2 uur kutten dacht ik dat ik het wel kon vragen.

ik ben bezig met een sitetje en wil hierbij de volgende layout: (stukje van de site dan)

BasieP	Geplaatst op dinsdag 01 november 2005 01:00
	beste mensen, na ruim 2 uur kutten dacht ik dat ik het wel kon vragen. ik ben bezig met een sitetje en wil hierbij de volgende layout: (stukje van de site dan) ... This message was send by 100% recyclable electrons.

klinkt vrij simpel, en dat is het volgens mij ook, maar het wil niet.
ik heb nu dit:
http://tent75.nl/test.php

en krijg al niet voor elkaar om die bovenste div (met de poster) RECHTS van het icon te krijgen zonder dat deze overlapt. (zie rode border)
hetzelfde geld voor de div met text.

verder rekt de hoogte van het plaatje de grote div er omheen niet uit..
dus als er weinig text gepost word (zoals mijn voorbeeld) dan loopt het icon over de div rand

natuurlijk is het makkelijk om een table te gebruiken (zo had ik het eerst) maar ik wil dit omzetten naar divs.

ikzelf denk dat het iets is met die 'position' en 'left' maar ik krijg het niet voor elkaar
wat doe ik fout?


belangrijkste stukken css

Cascading Stylesheet:

.links {
  position: relative;
  float: left;
}

.rechts {
  position: relative;
  float: left;
  left: 70px;
}

.boven {
  border: 1px solid red;
}

.tekst {
  width: 384px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

offtopic:
de [ hr ] tag staat niet in de ubb codes lijst van de got faq

[ Voor 78% gewijzigd door BasieP op 01-11-2005 01:20 ]

[disjfa]

Punt 1. Waarom alleen maar divs gebruiken als er zat andere html elementen veel beter voor de taak zijn verzonnen.
Punt 2. Je flow van je html klopt met de manier zoals je het intikt. Het float links. Dat kan je oplossen met of een clear of een overflow auto. Vandaag op de .tekst.

Volgende keer zou het ook handig zijn als je erbij vermeld met welke browser het compatible moet zijn aangezien deze precies doet in IE wat je wilt. (zover ik hem volg)

Verder nog een tip. Het is niet slim om met én borders én widths én paddings te werken in een element. Dat kan vrezelijke gevolgen hebben in hoe browser het interpreteren.

[ Voor 42% gewijzigd door disjfa op 01-11-2005 01:37 ]

[BasieP]

disjfa schreef op dinsdag 01 november 2005 @ 01:26:
Punt 1. Waarom alleen maar divs gebruiken als er zat andere html elementen veel beter voor de taak zijn verzonnen.
Punt 2. Je flow van je html klopt met de manier zoals je het intikt. Het float links. Dat kan je oplossen met of een clear of een overflow auto. Vandaag op de .tekst.


Volgende keer zou het ook handig zijn als je erbij vermeld met welke browser het compatible moet zijn aangezien deze precies doet in IE wat je wilt. (zover ik hem volg)

Verder nog een tip. Het is niet slim om met én borders én widths én paddings te werken in een element. Dat kan vrezelijke gevolgen hebben in hoe browser het interpreteren.

je wilt met punt1 zeggen dat ik het beter als table had kunnen laten?
want ik was in de veronderstelling dat dit verouderd was. Aangezien de rest van de site met div's werkt vind ik het ook niet zo netjes om dan hiervoor een table te gebruiken.

ik snap je puntje 2 absoluut niet. hoe bedoel je me 'flow' ?

verder snap ik je tip, IE telt borders bij de div op, en FF trekt ze er vanaf oid. Maar hier ben ik nog niet echt mee bezig geweest aangezien de rest nog niet werkt.
ik heb de width dingen toegevoegt om te kijken of dit een oplossing was. Deze wil ik liever niet houden

over die browsers:
ik heb dit ding in FF gemaakt, en vandaar ook dat ik hier poste.. zie nu pas dat ie het in IE wel doet. grappig, maar ik wil hem wel goed hebben in firefox, en eigenlijk vind ik IE niet eens ZO boeiend als ie daarin niet werkt.
maar het doel is natuurlijk gewoon in alle browsers

[ Voor 5% gewijzigd door BasieP op 01-11-2005 01:48 ]

[Yoozer]

BasieP schreef op dinsdag 01 november 2005 @ 01:47:
je wilt met punt1 zeggen dat ik het beter als table had kunnen laten?
want ik was in de veronderstelling dat dit verouderd was. Aangezien de rest van de site met div's werkt vind ik het ook niet zo netjes om dan hiervoor een table te gebruiken.

Nee, nee. Dan snap je het verschil tussen tables en divs niet echt . GoT is ook gelayout met tables omdat de cellen onderlinge verbanden laten zien. Wat men met "geen layout in tables" bedoelt is dat je er geen images in moet zetten en ze op elkaar moet laten aansluiten als een puzzel, of het misbruiken van de breedte en hoogte-eigenschappen van tables om een bepaalde algehele site-layout te forceren. Dat is "verouderd" omdat CSS er voor bedoeld is terwijl tables er voor misbruikt worden.

Waar jij mee bezig bent (ik neem aan een weblogachtig-iets, wat dus weer meer analoog is met een forum) -mag- in tables. Je zet er alleen tekst in, de avatar-image heeft een directe relatie met de tekst die je er naast zet.

Dat de rest in divs is gedaan maakt niks uit. Je zou iets als een definition list kunnen ge/misbruiken (een definition heeft een titel en een aantal verklaringen) maar die is nogal lomp horizontaal te gebruiken.

ik snap je puntje 2 absoluut niet. hoe bedoel je me 'flow' ?

De document flow: tekst is iets wat "vloeit". Afbeeldingen zijn vast gepositioneerd, tekst vloeit er omheen, omdat woord-voor-woord positioneren niet echt geweldig is.

[ Voor 5% gewijzigd door Yoozer op 01-11-2005 09:45 ]