ik wil een nieuwsoverzicht op mijn site met html css hoe?

[Verwijderd]

hoi allemaal, ik ben sinds kort bezig met html en css en weet er allemaal nog niet zoveel vanaf.
ik wil graag een nieuwsoverzicht op mijn site maken waar meerdere artikelen onder elkaar te zien zijn.
nu heb ik het zo geschreven maar nu krijg ik mijn plaatje dat bij mijn artikel hoort onder de text hoe zorg ik dat het links voor de text komt te staan. ik heb al margin op de text geprobeerd maar dan blijft hij er onder staan?

</div>
<div id="nieuwsoverzicht">
<h1> Albert heijn in het nieuws</h1>
<div id="nieuwsberichten">

<div id="news1"><a href="https://nos.nl/artikel/2240368-albert-heijn-in-ijsselstein-dicht-wegens-brandende-vrachtauto.html"/>
<div id="text1">
<h1>Albert Heijn in IJsselstein dicht wegens brandende vrachtauto </h1>
<h2>7 juni 2018- nos.nl</h2>
<p> De brand ontstond in een vrachtauto. Een aantal woningen en de Albert Heijn zijn ontruimd. </p>
</div>
<img src="afb/66.jpg" width="160" height="90" alt="ss"/>
</div>
<div id="news2"><a href="https://www.distrifood.nl/branche-bedrijf/nieuws/2018/08/vaker-ah-bonuskaart-dan-rijbewijs-op-zak-101118652?vakmedianet-approve-cookies=1"/>

<div id="text">
<h1> vaker bonuskaart dan rijbewijs op zak </h1>
<h2>24 augustus 2018- distrifood.nl</h2>
<p> DNederlanders hebben vaker een AH bonuskaart op zak dan een rijbewijs of identiteitskaart. </p>

</div>
<img src="afb/disi.png"
height="90" width="130" alt="ss"/>

</div>
</div>


#nieuwsoverzicht h1 {font-size:26px; font-weight:bold;}
#news1 { border-bottom: 3px solid #000000; border-top: 3px solid #000000; margin-top:20px; padding:12px 0px 12px 0px;}
#news1 h1 {font-size:19px; font-weight:bold;}
#news1 ss { float: left; }
#news1 h2 {font-size:17px;}
#footer p {font-size:15px;}

#news2 { border-bottom: 3px solid #000000; margin-top:20px; padding:px 0px 12px 0px;}
#news2 h1 {font-size:19px; font-weight:bold;}
#news2 ss { float: left; }
#news2 h2 {font-size:17px;}

[AW_Bos]

Kan je jouw code tussen [code] -tags zetten? Dan is het beter leesbaarder.
Verder zie ik een afsluitende div die nergens bij hoort.

En wat is het verschil tussen news1 en news2? Ik neem aan dat je niet verschillende stijlen gaat maken voor de verschillende lijsten die je oplopend nummert? Houd je liever vast aan goede naamgeving, en overerving in CSS.

[ Voor 43% gewijzigd door AW_Bos op 29-08-2018 14:08 ]

[emnich]

Met ^

Maar plaats het plaatje in een div met een vaste breedte en de tekst in een andere div en/of kijk naar float.

Kijk dan ook nog even naar wanneer je voor je CSS een id (#) gebruikt en wanneer classes (.) dan kan je e.e.a. al veel korter maken en dus beter beheersbaar.

[HenkDePoema]

Ik denk dat er genoeg tweakers zijn die je willen helpen, maar dat is wat anders dan even voorkauwen wat je precies moet doen. Wat heb je geprobeerd om zelf het antwoord te vinden? Welke google-opdrachten heb je al geprobeerd? Wat lukte niet toen je daarmee aan de slag ging?
Hint: https://www.google.com/search?q=css+plaatje+naast+tekst

[ Voor 7% gewijzigd door HenkDePoema op 29-08-2018 14:12 ]

[botwood]

Het zou ook fijn zijn als je een url plaatst van je website en waar je het nieuwoverzicht wilt hebben.
Je geeft net even te weinig informatie. Is je website responsive? gebruik je een grid? Hoe ziet de rest van je website eruit?

[RobIII]

botwood schreef op woensdag 29 augustus 2018 @ 20:32:
Het zou ook fijn zijn als je een url plaatst van je website en waar je het nieuwoverzicht wilt hebben.

Euh, nee, helemaal niet. Dat valt gewoon onder spam. TS kan prima, m.b.v. code tags relevante(!!) stukjes(!!) code plaatsen en wat tekst-en-uitleg er bij over hoe-en-wat. Desnoods een jsfiddle als er écht iets 'werkends' getoond moet worden. Maar we zitten hier niet om voor jan-en-alleman websites aan te passen of oplossingen op een zilveren presenteerblaadje aan te reiken; we zullen iemand de juiste richting in wijzen, tips en kennis delen etc. maar voorkauwen is hier niet de bedoeling.

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

Overigens; je al zou je wel een linkje naar je site plaatsen; over 4 jaar stuit iemand op dit topic en is de site offline of veranderd en is dit topic dus waardeloos geworden en heeft iedereen die hier geholpen heeft ("destijds") zijn/haar tijd dus verdaan en degene die 't topic doorgespit heeft en dacht "YES! Dat heb ik ook, waar staat de oplossing?" zal ook van een koude kermis thuis komen. Dat is dus nog een goede reden om relevante(!) code in je topic te plaatsen; dan blijft je topic altijd nuttig, ook als de 'vluchtige' site een poos later veranderd / offline is.

Plaats dus "gewoon" een testcase met een handje vol regels code (HTML/CSS/Whatever) waarmee je je probleem demonstreert en wij 't kunnen reproduceren en van daar uit gaan we je dan helpen.

Dan aan @Verwijderd: Ik wil je vriendelijk verzoeken onze Quickstart eens door te nemen en een nieuw topic te openen dat voldoet aan de regels/voorwaarden die daarin beschreven zijn. Ik mis nog té veel eigen inzet. Als je dan ook meteen voorgenoemde code-tags gebruikt komt 't vast helemaal goed Je merkt ook wel aan de reacties tot nu dat we hier niet écht wat mee kunnen.

[ Voor 20% gewijzigd door RobIII op 29-08-2018 20:52 ]