Probleem met site opmaak (html/css combinatie)

Status
Niet open voor verdere reacties.

veenie

Gebruiker
Lid geworden
17 mrt 2012
Berichten
6
Goedendag,

Aller eerst zal ik mij even voorstellen.
Ik ben alwin 24 jaar uit mijdrecht.
Als grootste hobby doe ik modelbouw en dan vooral de vrachtwagens 1/14 radiografisch.
Hiervoor ben ik ook lid van een modelbouw vereniging.

Voor deze vereniging ben ik bezig om een website te bouwen aangezien ik dit eerder al had gedaan voor de truckers.
Als basis software gebruik ik phpbb2. Weliswaar verouderd maar goed aan te passen en ik heb hier in het verleden altijd goede ervaringen mee op gedaan.
Nu is mijn html/css kennis ook al enige tijd gedateerd en dus niet meer echt veel gebruikt en loop ik tegen een probleempje aan met de opmaak van de nieuwe website.

de oude website: www.mvwoubrugge.nl is aardig gedateerd en slecht bij te houden doordat alles nog in plain html geschreven is.
De nieuwe website welke ik aan het implementeren ben op het systeem van de truckers site (phpbb2) is hier te vinden
www.asfaltrockers.nl/index.php

Nu heb ik een probleem met de layout op de volgende pagina
http://www.asfaltrockers.nl/news.php?f=25

Ik probeer de gele balk welke ik in een eigen div staat achter de tekst "onderwerpen - auteur - laatste bericht" te krijgen.
Dit lukt mij niet op de volgende manier:
Code:
		<div class="post_design">           	
			<div class="post_top_forum">
                		<span class="topdate">27<br />Nov</span>
				<h2><a href="{U_VIEW_FORUM}" title="{FORUM_NAME}">{FORUM_NAME}</a></h2>
			</div>

<table border="0" cellpadding="4" cellspacing="1" width="820px">
			<div class="entry_bg_forum">
				<th colspan="2">&nbsp;{L_TOPICS}&nbsp;</th>
				<th>&nbsp;{L_AUTHOR}&nbsp;</th>
				<th>&nbsp;{L_LASTPOST}&nbsp;</th>
			</div>
			<div class="entry_bg">
				<div class="entry">
	<!-- BEGIN topicrow -->
	<tr> 
		<td><img src="{topicrow.TOPIC_FOLDER_IMG}"></td>
		<td>{topicrow.NEWEST_POST_IMG}{topicrow.TOPIC_TYPE}<a href="{topicrow.U_VIEW_TOPIC}">{topicrow.TOPIC_TITLE}</a><br />
			{topicrow.GOTO_PAGE}></td>
		<td class="row3" align="center" valign="middle"><span class="name">{topicrow.TOPIC_AUTHOR}</span></td>
		<td class="row3Right" align="center" valign="middle" nowrap="nowrap" width="150"><span class="postdetails">{topicrow.LAST_POST_TIME}</span></td>
	</tr>
	<!-- END topicrow -->
	<!-- BEGIN switch_no_topics -->
	<tr> 
		<td class="row1" colspan="6" height="30" align="center" valign="middle"><span class="gen">{L_NO_TOPICS}</span></td>
	</tr>
	<!-- END switch_no_topics -->
	<tr> 
		<td class="catBottom" align="center" valign="middle" colspan="6" height="28"><span class="genmed">{L_DISPLAY_TOPICS}:&nbsp;{S_SELECT_TOPIC_DAYS}&nbsp; 
		<input type="submit" class="liteoption" value="{L_GO}" name="submit" />
		</span></td>
	</tr>
				</div>
			</div>
  </table>

                <div class="post_bottom">
				<p class="postmetadata">
                      <b>{PAGINATION}</b>
				</p>
                </div>
		</div>
Dan krijg ik dat de tekst onder de gele balk staat.

Dit lukt mij wel als ik de div pas sluit na de table. Echter als ik dat doe wordt de layout niet aangepast als er meerdere berichten in een pagina staan. (hiervoor moet ik wel de divs omdraaien en een margin-left: -14px toevoegen aan de css van de gele afbeelding.

Code:
			<div class="entry_bg">
			<div class="entry">
			<div class="entry_bg_forum">
<table border="0" cellpadding="4" cellspacing="1" width="820px">
			<tr>
				<th colspan="2">&nbsp;{L_TOPICS}&nbsp;</th>
				<th>&nbsp;{L_AUTHOR}&nbsp;</th>
				<th>&nbsp;{L_LASTPOST}&nbsp;</th>
			</tr>
	<!-- BEGIN topicrow -->
	<tr> 
		<td><img src="{topicrow.TOPIC_FOLDER_IMG}"></td>
		<td>{topicrow.NEWEST_POST_IMG}{topicrow.TOPIC_TYPE}<a href="{topicrow.U_VIEW_TOPIC}">{topicrow.TOPIC_TITLE}</a><br />
			{topicrow.GOTO_PAGE}></td>
		<td class="row3" align="center" valign="middle"><span class="name">{topicrow.TOPIC_AUTHOR}</span></td>
		<td class="row3Right" align="center" valign="middle" nowrap="nowrap" width="150"><span class="postdetails">{topicrow.LAST_POST_TIME}</span></td>
	</tr>
	<!-- END topicrow -->
	<!-- BEGIN switch_no_topics -->
	<tr> 
		<td class="row1" colspan="6" height="30" align="center" valign="middle"><span class="gen">{L_NO_TOPICS}</span></td>
	</tr>
	<!-- END switch_no_topics -->
	<tr> 
		<td class="catBottom" align="center" valign="middle" colspan="6" height="28"><span class="genmed">{L_DISPLAY_TOPICS}:&nbsp;{S_SELECT_TOPIC_DAYS}&nbsp; 
		<input type="submit" class="liteoption" value="{L_GO}" name="submit" />
		</span></td>
	</tr>
  </table>
				</div>
				</div>
			</div>

De CSS code die ik hiervoor gebruik is de volgende:
Code:
	.entry_bg_forum{
		background: url(/templates/subSilver/images/articleHead_forum.png);
		width: 850px;
		height: 25px;
	}	
	.entry_bg{
		background: url(/templates/subSilver/images/entry_bg.jpg) repeat-y 0px 0;
		width: 850px;
	}
	.entry{
		padding-left: 14px;
		width: 820px;
		color: #111111;
		font-family: Georgia, serif; 
		font-style: bold; 
		font-size: 14px; 
		word-wrap: break-word;
	}

wat doe ik verkeerd of zie ik over het hoofd?
Mijn kennis is helaas er niet op vooruit gegaan door dit zo weinig te doen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan