div - id - class
ik ben een website aan het maken wat volkome uit div zal gaan bestaan met css. Nu loop ik als beginnen in het div gebeuren tegen een probleem bij me nieuwssysteem. Ik lees alles van me nieuwssysteem uit een database en echo dat in html. Niks bijzonders dus. Alleen de kenners van div en css zullen me probleem nu wel zien aankomen. Elk nieuwsitem dat word weergegeven krijgt de zelfde class/id mee dus alle items komen over elkaar. Ik probeer dus nu voor elkaar te krijgen dat hij als het ware afstand van een object gaat nemen dus als 2 items met de zelfde class/id op een pagina zitten dat die afstand van elkaar houden. Iemand een idee/oplossing voor mijn probleem?
Kwestie van wat margin aan die betreffende divs meegeven?
En hoe wil je de div's hebben onder elkaar of naast elkaar?
Misschien weet ik het al.
Geef jouw div eens een height.
Of staat dat al in de div?
Gewijzigd op 01/01/1970 01:00:00 door Ferdi R
de code:
<div id="tekst">
<img src="http://www.zoei.nl/images/nieuws/marisa_miller.jpg" title="Rapper Lil' Wayne wordt geraakt door een fles op het podium" alt="Rapper Lil' Wayne wordt geraakt door een fles op het podium" align="left" />
Ik weet niet wat Lil' Wayne hier aan het doen is op het podium,
maar volgens mij vraagt ie er om. Een beetje stoer rondlopen en niet rappen. Boontje komt om zijn loontje...
Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje...
Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje...
Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje...<br />
</div>
<div id="tekst">
<img src="http://www.zoei.nl/images/nieuws/marisa_miller.jpg" title="Rapper Lil' Wayne wordt geraakt door een fles op het podium" alt="Rapper Lil' Wayne wordt geraakt door een fles op het podium" align="left" />
loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje... Boontje komt om zijn loontje...<br />
</div>
dit hierboven moeten 2 nieuwsberichten voorstellen. Deze komen nou over elkaar heen te vallen wat opzich nog best logisch is. Alleen ik heb website's gezien die ook op deze manier werken en daar werkt het wel.
de css:
#tekst {
position: absolute;
top: 48px;
bottom:10;
left: 181px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
width:600;
}
Door het vele klote is het een beetje rommelig geworden mijn excuus daarvoor. Google kon me alleen opweg helpen met css en div maar echt duidelijk antwoord hoe ik die berichten niet over elkaar heen laat vallen en toch maar 1 id/class gebruikt kon ik niet vinden. Hopelijk weten jullie een oplossing.
Verder mag een id maar 1 keer in de pagina voorkomen, een id is uniek op een pagina. Dus je kan er beter een klasse van maken.
http://www.zoei.nl gebruikt.
als je daar in de bron kijkt zie je dat het zelfde id voor elk nieuwsitem opnieuw word gebruikt. Vandaar dat er wat verwariing ontstaat plus als je een nieuws item toevoegt moet er in je css ook weer een id toegevoegt worden dat lijkt me ook niet handig.
edit:
ik heb het deels werkent door absolute in css te veranderen in position: relative; met 1 id voor 2 nieuwsberichten.
ik heb als voorbeeld het nieuwssysteem van als je daar in de bron kijkt zie je dat het zelfde id voor elk nieuwsitem opnieuw word gebruikt. Vandaar dat er wat verwariing ontstaat plus als je een nieuws item toevoegt moet er in je css ook weer een id toegevoegt worden dat lijkt me ook niet handig.
edit:
ik heb het deels werkent door absolute in css te veranderen in position: relative; met 1 id voor 2 nieuwsberichten.
Gewijzigd op 01/01/1970 01:00:00 door Lennart
Quote:
bottom:10;
width:600;
width:600;
Waar zijn je eenheden?
Quote:
Geen position:absolute gebruiken.
Dat zal zorgen dat ze niet allemaal op top: 48px; komen te staan ;).