[HTML/CSS] 'content sectie' op juiste plek

[monnick]

sinds gisteren ben ik een site voor mezelf aan het maken. Of het veel nut heeft weet ik niet maar het is meer om wat aan te kloten, scripts te maken en ervan te leren. Nu ben ik meer van het photoshoppen en PHP'en en ben ik geen HTML / CSS wonder. Daarom stuit ik op een probleem.

Allereerst een afbeelding die het probleem hopelijk duidelijker maakt:



De layout heb ik in photoshop gemaakt en vervolgens heb ik de hele meuk gesliced en handmatig in dreamweaver een aantal tabellen gemaakt waarin ik de layout-afbeelding in kon zetten zodat het hele boeltje mooi in elkaar past.
Dat lukt allemaal aardig, en ik heb het zo gemaakt dat de tabel waarin het rode vlak staat uitrekt naarmate er meer tekst in komt. (formuleer ik dit zo duidelijk genoeg?)
Het idee is om de rode box als content box te laten dienen, hierin komen de nieuwsberichten,links,afbeeldingen en andere meuk. Maar het probleem waar ik op stuit is als volgt: ik wil de text in de rode box krijgen en dus moet er enige afstand liggen tussen de <th></th> en de tekst zelf. Dit was ik van plan met de margin 'functie' te doen. Dus bijvoorbeeld:

Cascading Stylesheet:

p {
margin-bottom: 15px;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}

En dan de tekst te schrijven binnen de <p></p> tags. Zo lukt het goed om de text binnen de box te laten vallen. Maar dan komt het probleem: namelijk niet alleen de margins van de hele <p> worden aangepast maar ook de afstanden tussen regels / kopjes worden enorm veel groter. Dit geeft natuurlijk een bizar gezicht. Verder is het ook nog eens zo dat de afstanden in IE en FF veranderen wat het lastig maakt een goede margin te kiezen.
Mijn vraag is nu, wat is de beste manier om alleen de margin tags op het rode blok toe te passen en niet op de daarin gelegen tekst? Of misschien moet ik helemaal geen gebruik maken van margin maar een ander attribuut?

Het probleem is ook te zien op de huidige versie van mijn site die online staat:
www.tomrunia.nl Op dit moment ziet het er goed uit in FF maar in IE niet, en als ik de margin-top en -bottom ga aanpassen zitten er tussen de stukken tekst weer enorme afstanden (en de afstanden in FF worden te groot).

Ik heb al heel veel CSS gekloot geprobeerd, <span> / <div> <p> etc maar ik heb nog geen passende oplossing gevonden. Ik hoop dat iemand mij kan helpen (bij dit misschien wat wazig klinkende probleem )

[TERW_DAN]

Waarom bouw je het ding niet in divs die je vervolgens positioneert dmv CSS. Je kunt natuurlijk wel met een berg marings (en paddings) gaan werken, maar mijn ervaring is dan dat je echt ongelovelijk gaat klooien als je in die cel weer een ander element duwt met een margin daaraan.

dus mijn tip, pak divs, maak een class aan waarin je met left/right en top/bottom het ding goed neerzet.

[disjfa]

Je kloopt, probeert en tikt maar wat. Einde is dat je niet weet waar je eigenlijk mee bezig bent en maar wat probeert aan te passen aan code die je nooit had moeten kunnen zien.

Als je html sliced vanuit photoshop krijg je html terug die 10 jaar geleden al vergeten had moeten zijn. Toch krijg je het eruit.

[monnick]

Het klopt dat ik niet meer helemaal up2date ben in de HTML scene, en heb al wat broncodes van 'grote' / goede sites bekeken en er worden inderdaad vaak div'jes gebruikt en je ziet weinig tables / <td>'s. Dus als ik een beetje met de tijd mee wil gaan kan ik de site het beste helemaal overnieuw opbouwen uit div'jes? Die worden dus goed ondersteund door zowel IE als FF?

[Verwijderd]

De ondersteuning daarvan is prima. De uitdaging zit 'm in het juist toepassen van css om ze te positioneren en vorm te geven. Zolang je voorkomt dat je in quirksmode raakt (doctype) mag dat geen probleem zijn. Wat jij zo te zien wil, is geen probleem met divs.

Over je huidige broncode: er staan in de body van je document extra head- en body-tags. Zie ook http://validator.w3.org/check?uri=http%3A%2F%2Ftomrunia.nl.

Over je vraag: zoals ik uit je broncode begrijp, staat je content in een th. Dat is een beetje gek (anderzijds, als je toch al tables voor layout gebruikt... ). In elk geval zou je d.m.v. de padding van de betreffende th kunnen bereiken wat je wil.

[monnick]

Verwijderd schreef op zaterdag 05 januari 2008 @ 13:20:
De ondersteuning daarvan is prima. De uitdaging zit 'm in het juist toepassen van css om ze te positioneren en vorm te geven. Zolang je voorkomt dat je in quirksmode raakt (doctype) mag dat geen probleem zijn. Wat jij zo te zien wil, is geen probleem met divs.

Over je huidige broncode: er staan in de body van je document extra head- en body-tags. Zie ook http://validator.w3.org/check?uri=http%3A%2F%2Ftomrunia.nl.

Over je vraag: zoals ik uit je broncode begrijp, staat je content in een th. Dat is een beetje gek (anderzijds, als je toch al tables voor layout gebruikt... ). In elk geval zou je d.m.v. de padding van de betreffende th kunnen bereiken wat je wil.

Op dit moment ben ik ben divs aan het kloten, en ze verder aan het positioneren en opmaken dmv. CSS. Verder komen die 2de body en head tags door PHP, want ik laad namelijk een andere pagina in de tabel. Mocht ik op problemen stuiten waar ik ook na verdere verdieping niet uitkom dan zal ik dit topic wel een kickje geven.