CSS probleem
Ik heb 2 probleempjes waarbij ik hoop dat iemand mij kan helpen.
1.
Ik heb een 3 kolommen site waarbij de middelste kolom resized wanneer ik het scherm kleiner/groter maak. Ik wil dat de middelste kolom op een fixed size blijft staan.
http://www.ik-wil-doneren.nl/kiosk/index.php
http://www.ik-wil-doneren.nl/kiosk/style.css
2.
Ik wil meerdere artikelen in 1 rij plaatsen. Komt erop neer dat ik 2 of meer kolommen wil. Nu zie je maar 1 kolom met steeds 1 artikel per rij.
Zelfde site als bovenstaande.
Ik ben nog totaal nieuw met CSS en ik heb al gezien dat je hier enorm veel mee kan bereiken, maar het blijkt me toch een lastig iets om zaken zo te plaatsen zoals ik het precies wil. Hopelijk kan iemand mij hierbij helpen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div id="aanbiedingen">
<div style="float:no; width:95%; padding:5px;">
<h3>AD Algemeen Dagblad</h3>
<p style="text-align:left"><span style="float:left; width:auto; padding:10px"><img src="https://www.123tijdschrift.nl/images/covers/BNdestem_medium.jpg" width="75" height="100" /></span>AD is een toegankelijke krant op handzaam formaat, die het nieuws voor iedereen dichterbij brengt. Wereldnieuws, landelijk nieuws en nieuws uit uw leefomgeving. Bovendien zit u met AD Sportwereld, de nummer n sportkrant van Nederland, op de eerste rij bij alle wedstrijden van de eredivisie..</p>
<div style="float:right; margin:8px;">
Nu 255 nummers voor 299.40</div>
</div>
</div>
<div style="float:no; width:95%; padding:5px;">
<h3>AD Algemeen Dagblad</h3>
<p style="text-align:left"><span style="float:left; width:auto; padding:10px"><img src="https://www.123tijdschrift.nl/images/covers/BNdestem_medium.jpg" width="75" height="100" /></span>AD is een toegankelijke krant op handzaam formaat, die het nieuws voor iedereen dichterbij brengt. Wereldnieuws, landelijk nieuws en nieuws uit uw leefomgeving. Bovendien zit u met AD Sportwereld, de nummer n sportkrant van Nederland, op de eerste rij bij alle wedstrijden van de eredivisie..</p>
<div style="float:right; margin:8px;">
Nu 255 nummers voor 299.40</div>
</div>
</div>
Je hebt overal width: ...%; staan. Dan neemt hij de breedte die er in totaal vrij is voor de div. Als je in plaats van procenten pixels (px) gebruikt zal hij altijd zo breed blijven als jij aan pixels opgegeven hebt.
Toevoeging op 28/09/2012 14:13:03:
Oplossing voor 2: Voor tabellen hoef je in principe geen css te gebruiken.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<table border="0" width="200px">
<tr>
<td>Links</td>
<td>Rechts</td>
</tr>
</table>
<tr>
<td>Links</td>
<td>Rechts</td>
</tr>
</table>
De <tr> is een verticale kolom en de <td> is een horizontale kolom.
Gewijzigd op 28/09/2012 14:15:46 door Machiel K
Je moet "altijd" CSS gebruiken waar het kan. Dit betekend dus ook voor tabellen. In-line CSS is tegenwoordig uit den boze als je een nette scripting zou willen hebben. Tevens hoef je bij een aanpassing maar 1 file te openen en geen 500 file's.
Kort gezegd: Waar het kan ALTIJD CSS gebruiken.
Gewijzigd op 28/09/2012 16:24:33 door Frank WD
Heb het zelf eerder overwogen, maar gezien bijna alles nu met div en css gaat wou ik me er eens aan wagen. Alleen bljikt het lastiger als verwacht.
Maar goed, de table tags e.d. kun je waarschijnlijk ook combineren met css toch?
Zeg hij toch echt dat je voor tabellen in prinsipe geen CSS hoeft te gebruiken.
En daar zeg ik alleen op en dan door alle uit leggen van Wouter J. Dat je altijd CSS moet gebruiken waar het kan. Je kan in je CSS alle tags van een tabel wel combineren met CSS.
Maar ik weet even niet of ik op de goede denk wijze zit nu.
Maar is z'n opzetje niet iets wat je zoekt?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class=content>
<ul class=artikel>
<li>
Artikel 1
</li>
<li>
Artikel 2
</li>
<li>
Artikel 3
</li>
<li>
Artikel 4
</li>
</lu>
</div>
<ul class=artikel>
<li>
Artikel 1
</li>
<li>
Artikel 2
</li>
<li>
Artikel 3
</li>
<li>
Artikel 4
</li>
</lu>
</div>
Als je dan via je CSS die <li> tags float: left; zult zetten.
Dan zal je net zo veel artikel op 1 regel krijgen als je div breedt is.
Zoals ik zeg weet ik niet 100% zeker of dit de goede manier is, maar zo zou ik het hebben gedaan eventueel.
EDIT:
Heb je verhaaltje bij vraag 2 nogmaals paar keer gelezen en de site bekeken.
Maar ik denk dat ik even terug kom op mijn eerdere voorbeeld.
Misschien is dit toch beter;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class=artikels>
<section class=artikel>
<header>
<h2>Artikel 1</h2>
</header>
<article>
Hier artikel content.
</article>
<footer>
Lees meer....
</footer>
</section>
</div>
<section class=artikel>
<header>
<h2>Artikel 1</h2>
</header>
<article>
Hier artikel content.
</article>
<footer>
Lees meer....
</footer>
</section>
</div>
Kijk anders ook even HIER
Hoor het graag even van de meer ervaren jongens of dit goede denk wijze is.
Gewijzigd op 28/09/2012 17:01:59 door Frank WD
Toevoeging op 28/09/2012 17:26:41:
Okay, ik heb volgens mij het probleem opgelost met resizen van de middelste page. Inderdaad de Width van .thrColFix #container aangepast naar ##px.
Het gekke was dat ik dit voorheen ook probeerde met de .thrColFix #mainContent welke de eigenlijk middelste container is en dit niet werkte. Waarschijnlijk dat hij dan de instelling van #container overneemt gezien dat de parent is.