Pagina 1 van 1

[KIJK]Aphrodite in phpBB 3

Geplaatst: 27 dec 2008, 12:57
door brandsrus
Ik ben de afgelopen tijd vooral bezig met het ontdekken van de mogelijkheden binnen phpBB 3 qua styling en ik ben al jaren gecharmeerd van Aphrodite Stijl die beschikbaar was in phpBB 2. Deze heb ik nu geprobeerd om te zetten naar phpBB 3. Er moet nog heel veel gebeuren maar wil jullie wel laten zien hoe ver het gevorderd is.

NOTE: Ik breng deze stijl niet uit, mocht je hem toch willen hebben, neem dan contact op met CyberAlien en misschien dat ik hem dan met zijn permissie hem alsnog uitbreng, het is nu nog voor eigen gebruik.

Mijn website is: http://brandsrus.byethost32.com/

Je kunt inloggen met een testaccount, maak er alstublieft geen misbruik van, anders lock ik de account!
gebruikersnaam: tester
wachtwoord: tester

Je mag natuurlijk je kritiek of verbeteringen altijd aan mij doorgeven in dit topic, misschien hebben jullie nog ideeen! Laat van je horen!

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 27 dec 2008, 13:06
door Jim
Mooi gedaan, lijkt sprekend op de Aphordite van phpBB2. Tipje, misschien even in de stijl copyright zetten dat het origineel is gemaakt door CyberAlien, en dat jij hem omgezet hebt naar phpBB3, dan krijg je daar geen problemen mee.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 12:20
door brandsrus
Ik heb idd de stijl copyright aangepast.

Vandaag verder gegaan met sommige tweaks in de stijl Aphrodite. Nu moet ik de stylesheet zo klein mogelijk proberen te maken en misschien hier en daar tables vervangen door divs.

Maar vind dat wel lastig om tables te vervangen door div's, wie heeft daarmee wat meer ervaring of een tutorial?

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 12:22
door Dmeijer13
Ziet er inderdaad goed uit! =)

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 15:13
door DoubleJ
Ik had eerst ook inderdaad de waan dat je stiekem een phpbb2 board had opgezet, met andere woorden je hebt hem heel mooi overgezet.

Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..

Attachmentboxes
-> Mischien ook hier tenopzichte van de randen van de tabel, meer horizontale padding, dus dat de box niet tegen der anden van de content tabel aandrukt.

Polls..
-> Ik meende dat de poll plaatjes van aphrodite ook vierkant waren...(deze lijken op die van subsilver).

Search
Ik kan me van phpbbstyles nog herrineren dat de searchbox aan de rechterkant van de pagina stond. Misschien dat dat hier ook mooier staat, dus :
[postbutton]ppagination] -------- [search-rechtsuitgelijnd]

------------------------

Goed, dit zijn een aantal kleinigheidjes die ik zo op het oog eventjes zie. Verder heb je met de port mooi werk geleverd, en ik zou denk ik toch even vragen aan CA of je hem mag porten/uitbrengen, echter weet ik niet zeker in hoeverre dit allemaal mag gezien de overname van templatemonster toendertijd en of toen aphrodite wel of niet is meegegaan, want hij voert juist die stijl ook niet op zijn eigen site van (stsoftware.biz).

JJ.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 17:59
door brandsrus
Bedankt DoubleJ voor je opmerkingen
DoubleJ schreef: Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..
Ik heb ze een rode cellpic meegegeven, nu vallen ze tenminste op, misschien kan ik het nog wat subtieler doen maar in ieder geval verbeterd.
DoubleJ schreef: Attachmentboxes
-> Mischien ook hier tenopzichte van de randen van de tabel, meer horizontale padding, dus dat de box niet tegen der anden van de content tabel aandrukt.
Ik heb de complete attachmentboxen heringedeeld. Ik denk dat dit ook zo moet hoe ik nu heb.

De Polls moet ik nog even naar kijken, de plaatjes van die bars e.d. heb ik in mijn bezit even kijken hoe dat uitkomt in de template :)

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 20:40
door DoubleJ
brandsrus schreef:Bedankt DoubleJ voor je opmerkingen
DoubleJ schreef: Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..
Ik heb ze een rode cellpic meegegeven, nu vallen ze tenminste op, misschien kan ik het nog wat subtieler doen maar in ieder geval verbeterd.
Ik zou zowiezo hier en daar nog eventjes naar je paddings kijken, je forumrules, raken nu nog de onderste border aan, wat niet heel erg mooi staat.

Die attachment boxen zien er nu inderdaad beter uit dan eerst.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 29 dec 2008, 20:48
door brandsrus
Ik ga zo eerst zoals je in de broncode gezien heb, eerst de <table> layout omzetten naar <div> tags, opzich al een behoorlijk karwei (CSS ombouwen e.d.), maar goed lijkt me wel de moeite waard om daar energie in te steken.

Ik moet sowieso overal goed kijken naar de padding, het klopt hier en daar nog niet echt.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 30 dec 2008, 10:59
door brandsrus
Ik heb viewtopic even flink onder handen genomen, maar zit nog met 1 probleempje :P

Ik krijg de bericht en auteur niet even hoog zie afbeelding

Afbeelding

In mijn afbeelding hierboven kun je zien dat de auteur div niet hoog genoeg is hij moet tegen de divje van de spacer aankomen, maar andersom gebeurd het ook niet als het bericht kleiner is dan de auteurskolom.

Wat voor JavaScript of CSS heb ik nodig om het toch beide even hoog te krijgen?

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 30 dec 2008, 11:30
door Johan
Misschien kan je dit artikel gebruiken? Of zelf even zoeken over hoe je iets helemaal onderaan krijgt. Hetzelfde probleem heb je namelijk soms met footers. :mrgreen:

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 30 dec 2008, 12:01
door brandsrus
Ja, ik heb alleen een probleem aangezien ik alleen maar met div's werk, volgens mij is jouw oplossing alleen voor als de footer in dezelfde div zit. Mijn footer zit in een andere div die daaronder wordt weergegeven, zie afbeelding.

Het probleem is dat de hoogte van div a eigenlijk net zo groot moet zijn als die van div b, en andersom.

Ik heb met rot gezocht maar kan niets vinden wat helpt (zelfs JavaScript oplossingen geprobeerd maar dat werkt niet)
Wijziging: Voor de duidelijkheid een stukje code toegevoegd
CSS
Spoiler: bekijk

Code: Selecteer alles

/* CSS Document */

/* hoofdcontainers */
* {
	margin:0;
	padding:0;
}

html {
	height:100%;
	margin:0;
	padding:0;
}

body {
	background: #FFF url(images/bg_body.gif) top left repeat-x;
	margin:0 auto;
	padding: 0 10px;
	height: 100%;
}

#content {
	width: 100%;
	margin : auto;
	padding: 2px;
	text-align: center;
}

#forum {
	background-color: #F8F8F8;
	border: solid 1px #A0A0A0;
	border-width: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	width: 100%;
}

/* table viewtopic */
#forumline {
	border: solid 1px #2B438F;
	margin: 5px 0;
	background-color: #F8F8F8;
	overflow:hidden;
}

#forumline .row-header {
	background: #354883 url(images/bg_hdr1.gif);
	border: solid 1px #DCE1EE;
	border-right-color: #CFDADE;
	border-bottom-color: #CFDADE;
	text-align: left;
	vertical-align: top;
	height: 27px;
}

#forumline .row-header span {
	background: url(images/bg_hdr2.gif) top left no-repeat;
	padding-left: 17px;
	color: #EDEFF4;
	display: block;
	padding-top: 4px;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.2em;
}

#forumline .th {
	background: url(images/bg_th.gif) top left repeat-x;
	color: #455995;
	font-weight: bold;
	font-size: 11px;
	padding: 2px;
	text-align: center;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
}

/*kolommen */

.auteur {
	vertical-align:top;
	text-align:left;
	float:left;
	position:relative;
	width: 15%;
}

.bericht {
	vertical-align:top;
	text-align:left;
	float:right;
	position: relative;
	width:85%;
}


/* post */
.row-post-author, .row-post {
	background: #FFF url(images/bg_post.gif) top left repeat-x;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	position:relative;
	vertical-align: top;
	min-height:100%;
}

.row-post-author {
	text-align: center;
}

.row-post {
	text-align: left;
}

.catBottom {
	background: #FDFDFD url(images/bg_catbottom.gif) top left repeat-x;
	text-align: center;
	float: left;
	width:100%;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	height: 28px;
}

.spaceRow {
	background: #3D4E81 url(images/bg_spacerow.gif);
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	float:left;
	width:100%;
	height: 3px;
	padding: 0;
	clear:both;
}

.post-name {
	font-weight: bold;
	color: #455995;
	font-size: 12px;
	line-height: 1.6em;
}

.post-rank {
	color: #888;
	font-size: 10px;
}

.post-details-block {
	text-align: left;
	margin: 5px;
	padding: 5px;
	font-size: 11px;
	border: #DDDDDD solid 1px;
	background: #FFF url(images/bg_post.gif) top right repeat-x;
}

.post-details-block a, .post-details-block a:visited {
	text-decoration: none;
}

.post-details {
	text-align: left;
	margin: 1px;
	color: #666;
	font-size: 10px;
	line-height: 1.4em;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

.post-buttons-top {
	float: right;
}

.row-post-date, .row-post-buttons {
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	vertical-align: middle;
	font-size: 10px;
	line-height: 12px;
	color: #666;
	background: url(images/bg_postbottom.gif);
	white-space: nowrap;
	padding: 1px;
	clear:both;
}

.post-buttons a img, .post-buttons a:visited img, .post-buttons-single a img, .post-buttons-single a:visited img {
	background-color: #455995;
}

.post-buttons a:hover img, .post-buttons a:active img, .post-buttons-single a:hover img, .post-buttons-single a:active img {
	background-color: #FF1010;
}

.post-buttons-single {
	text-align: center;
	vertical-align: middle;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

img {
	border: 0;
}

.img-main a img, .img-main a:visited img {
	background-color: #FF1010;
}

.img-main a:hover img, .img-main a:active img {
	background-color: #444;
}

.post-subject {
	color: #455995;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
}

.post-text {
	font-size: 12px;
	line-height: 1.2em;
}

/* links */
a {
	color: #455995;
	text-decoration: underline;
}

a:visited { color: #303F6B; }
a:hover, a:active { color: #FF1010; }
HTML
Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Proef Aphrodite met div-tags</title>
	<link rel="stylesheet" href="aphrodite.css" type="text/css" />
</head>
<body>

<div id="forum">

<div id="content">
	<div id="forumline" style="margin:6px;">
		<div class="row-header"><span>Onderwerp</span></div>
			<div id="container">
			<div class="auteur">
				<div class="th">Auteur</div>
					<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p-show','p-hide','p-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />	
					</div>	
					<div class="row-post-date">
					28 augustus, 13:58
					</div>
			</div>
			
			<div class="bericht">
				<div class="th">Bericht</div>
					<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
					
					<div class="row-post-buttons post-buttons" style="margin-left:2px">
						<img src="images/icon_post_edit.gif" alt="" />
					</div>
			</div>
			</div>
			
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="auteur">
					<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p2-show','p2-hide','p2-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p2-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />		
					</div>
					<div class="row-post-date">
					28 augustus, 13:58
					</div>
			</div>
			<div class="bericht">
					<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
					
					<div class="row-post-buttons post-buttons" style="margin-left:2px">
						<img src="images/icon_post_edit.gif" alt="" />
					</div>
			</div>
			
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="catBottom">
			Hier komt een nog iets :D
			</div>
	</div>
</div>
				
</div>

</body>
</html>

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 30 dec 2008, 12:28
door Johan
En line-height verhogen lukt ook niet? :( Anders moet je met margin-bottom: -Xpx; werken, maar dan kan IE flauw doen ;)

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 30 dec 2008, 13:52
door brandsrus
Nou ja, laat eerst maar even zo, zonder tabellen is wel erg ingewikkeld, dan zou ik echt alles meoten verbouwen zie ik. Maargoed, misschien voor later :)

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 31 dec 2008, 13:34
door brandsrus
DoubleJ schreef: Goed, dit zijn een aantal kleinigheidjes die ik zo op het oog eventjes zie. Verder heb je met de port mooi werk geleverd, en ik zou denk ik toch even vragen aan CA of je hem mag porten/uitbrengen, echter weet ik niet zeker in hoeverre dit allemaal mag gezien de overname van templatemonster toendertijd en of toen aphrodite wel of niet is meegegaan, want hij voert juist die stijl ook niet op zijn eigen site van (stsoftware.biz).
Nog even terugkomen op bovenstaande, ik heb een e-mail gestuurd naar CA, misschien dat ik hem idd toch uit ga brengen, mits ik zijn toestemming krijg! Anders gaat het feest niet door.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 31 dec 2008, 15:52
door DoubleJ
Ik zou die permissie boxen gewoon zo laten zoals het origineel ook was. (de You can ... You can ...) dus geen blokje er om heen. Naar mijn mening staat dat mooier, anders gaat die paarse cellpic nogal overheersen).
brandsrus schreef:Ik heb viewtopic even flink onder handen genomen, maar zit nog met 1 probleempje :P

Ik krijg de bericht en auteur niet even hoog zie afbeelding
Dan wat betreft dit onderstaande probleem waarbij je verderop ook code hebt geplaatst.
Afbeelding

In mijn afbeelding hierboven kun je zien dat de auteur div niet hoog genoeg is hij moet tegen de divje van de spacer aankomen, maar andersom gebeurd het ook niet als het bericht kleiner is dan de auteurskolom.

Wat voor JavaScript of CSS heb ik nodig om het toch beide even hoog te krijgen?

Code: Selecteer alles

<div> Content | Datum</div><div>Content | Profile_img</div>
In deze constructie zul je nooit de datum evenhoog krijgen als de profile img. Simpel weg omdat de 'hieght: 100%;" niet werkt zoals je zou hopen dat hij werkt.
Immers, in de tabel wordt die dergelijke constructie ook niet gebruikt.
In de tabel heb je:

Code: Selecteer alles

<tr><td>Content</td><td>Content</td></tr>
<tr><td>Datum</td><td>Profile_img</td></tr>
Waarom zou je voor je dividers niet precies hetzelfde gaan doen?

Code: Selecteer alles

<div>Content</div><div>Content</div>
<div class"eromheen"><div>Datum</div><div>Profile_img</div></div>
Op deze wijze kun je ze wel evenhoog krijgen en dit scheelt jouw een enorme hoeveelheid hoofdpijn.

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 31 dec 2008, 18:42
door brandsrus
DoubleJ, bedankt voor je input.

Ik ga zeker nog even kijken naar jouw mogelijkheid :D. Erg mooi dat je me op weg helpt!

Re: [KIJK]Aphrodite in phpBB 3

Geplaatst: 02 jan 2009, 10:25
door brandsrus
Het werkt wel wat DoubleJ voorstelde met die dividers zo, alleen er zit een behoorlijke ruimte tussen de divider van de datum en profile_img en de hoofddividers daarboven. Hoe zou ik die weg krijgen?

CSS
Spoiler: bekijk

Code: Selecteer alles

/* CSS Document */

/* hoofdcontainers */
* html {
	margin:0;
	padding:0;
	height:100%;
}

body {
	background: #FFF url(images/bg_body.gif) top left repeat-x;
	margin:0 auto;
	padding: 0 10px;
	height:100%;
}

#content {
	width: 100%;
	padding-top:2px;
	text-align: center;
}

#forum {
	background-color: #F8F8F8;
	border: solid 1px #A0A0A0;
	border-width: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	width: 100%;
}

/* table viewtopic */
#forumline {
	border: solid 1px #2B438F;
	background-color: #F8F8F8;
	overflow:hidden;
}

#forumline .row-header {
	background: #354883 url(images/bg_hdr1.gif);
	border: solid 1px #DCE1EE;
	border-right-color: #CFDADE;
	border-bottom-color: #CFDADE;
	text-align: left;
	vertical-align: top;
	height: 27px;
}

#forumline .row-header span {
	background: url(images/bg_hdr2.gif) top left no-repeat;
	padding-left: 17px;
	color: #EDEFF4;
	display: block;
	padding-top: 4px;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.2em;
}

#forumline .th {
	background: url(images/bg_th.gif) top left repeat-x;
	color: #455995;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 2px;
	text-align: center;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
}

/*kolommen */

.auteur {
	vertical-align:top;
	text-align:left;
	float:left;
	position:relative;
	width: 15%;
	min-height: 100%;
	height:100%;
}

.bericht {
	vertical-align:top;
	text-align:left;
	float:right;
	position: relative;
	width:85%;
	min-height: 100%;
	height:100%;
}


/* post */
.row-post-author, .row-post {
	background: #FFF url(images/bg_post.gif) top left repeat-x;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	position:relative;
	vertical-align: top;
	min-height: 100%
	height: 100%
}

.row1{
	background-color: #F8F8F8;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	text-align: left;
}

.row-post-author {
	text-align: center;
}

.row-post {
	text-align: left;
}

.catBottom {
	background: #FDFDFD url(images/bg_catbottom.gif) top left repeat-x;
	text-align: center;
	float: left;
	width:100%;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	height: 28px;
}

.spaceRow {
	background: #3D4E81 url(images/bg_spacerow.gif);
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	float:left;
	width:100%;
	height: 3px;
	padding: 0;
	clear:both;
}

.post-name {
	font-weight: bold;
	color: #455995;
	font-size: 12px;
	line-height: 1.6em;
}

.post-rank {
	color: #888;
	font-size: 10px;
}

.post-details-block {
	text-align: left;
	margin: 5px;
	padding: 5px;
	font-size: 11px;
	border: #DDDDDD solid 1px;
	background: #FFF url(images/bg_post.gif) top right repeat-x;
}

.post-details-block a, .post-details-block a:visited {
	text-decoration: none;
}

.post-details {
	text-align: left;
	margin: 1px;
	color: #666;
	font-size: 10px;
	line-height: 1.4em;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

.post-buttons-top {
	float: right;
}

.row-post-date, .row-post-buttons {
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	vertical-align: middle;
	font-size: 10px;
	height: 12px;
	color: #666;
	background: url(images/bg_postbottom.gif);
	clear:both;
}

.post-buttons a img, .post-buttons a:visited img, .post-buttons-single a img, .post-buttons-single a:visited img {
	background-color: #455995;
}

.post-buttons a:hover img, .post-buttons a:active img, .post-buttons-single a:hover img, .post-buttons-single a:active img {
	background-color: #FF1010;
}

.post-buttons-single {
	text-align: center;
	vertical-align: middle;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

img {
	border: 0;
}

.img-main a img, .img-main a:visited img {
	background-color: #FF1010;
}

.img-main a:hover img, .img-main a:active img {
	background-color: #444;
}

.post-subject {
	color: #455995;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
}

.post-text {
	font-size: 12px;
	line-height: 1.2em;
}

@media all and (min-width: 0px) {
	html>body .post-text { 
		overflow: auto; 
	}
}

/* links */
a {
	color: #455995;
	text-decoration: underline;
}

a:visited { color: #303F6B; }
a:hover, a:active { color: #FF1010; }

.gen { font-size: 12px; }
.genmed { font-size: 11px; }
.gensmall { font-size: 10px; }
Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Viewtopic even hoog krijgen</title>
	<link rel="stylesheet" href="aphrodite.css" type="text/css" />
</head>

<body>
<div id="forum">
<div id="content">
	<div id="forumline" style="margin:8px;">
		<div class="row-header"><span>Onderwerp</span></div>
			<div class="auteur">
				<div class="th">Auteur</div>
				<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p2-show','p2-hide','p2-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p2-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />		
				</div>
			</div>
			<div class="bericht">
				<div class="th">Bericht</div>
				<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
			</div>
			<div class="row-post-buttons"><div class="auteur"><div class="row-post-date">28 augustus, 13:58</div></div><div class="bericht"><div class="row-post-buttons"><img src="images/icon_post_edit.gif" alt="" /></div></div></div>
		
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="catBottom">Hier komt een nog iets :D</div>
	</div>
</div>
</div>
</body>
</html>
En ik moet iedereen teleurstellen die verwacht dat ik deze port uitbreng, ik krijg geen toestemming om dat te doen van de originele auteur, CyberAlien. Helaas maar dat is niet anders.
Wijziging: Zonder border worden de divtjes wel even lang, eens kijken hoe ik dat allemaal ga oplossen verder :P
Wijziging: Nu wel gelukt, linkerkolom margin-right: -1px meegegeven, en een border toegevoegd aan de rechterkolom aan de linkerkant, nu is het klaar!