Probleem met site opmaak (html/css combinatie)

Status
Niet open voor verdere reacties.
V

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.
 
excuses voor de dubbel post vermoedelijk wat mis gegaan met het achteraf bewerken van de post.
 
Hoi veenie,
Wil je deze kant op?
Code: 
.post_design tr {
   background: url(/templates/subSilver/images/articleHead_forum.png);
   }
 
csshunter bedankt voor je antwoord.
Uiteindelijk met hulp ben ik over mijn stomme fout heen gekomen.
Had uiteindelijk het gewoon veel simpeler moeten zoeken.
Een eigen tabel maken voor de kop lostte alle problemen in 1x op.

Bedankt voor de hulp nogmaals.
 
Goedendag,

Vanavond werd ik geconfronteerd door een ander club genoot dat de site op IE er nogal apart uitzag.
In het begin veel getest met beide browsers (IE en Firefox) laatste tijd helaas niet meer dus dit probleem niet opgemerkt.

Met firefox waar ik zelf mee werk ziet alles er gewoon prima uit en zijn er geen fouten te bekennen.

De drop down menu's en design hebben er altijd goed uit gezien in IE.
Ergens heb ik dus kennelijk een fout gemaakt in de css of html bestand van de header.

De vraag is nu alleen echter waar??? Heb getracht oude bestanden terug te zetten maar blijkt dat de fout al enige tijd geleden is ingeslopen.
Wie heeft een idee waar te zoeken? Mijn gevoel zegt dat de CSS hiervoor schuldig is.

html bestand:
http://www.asfaltrockers.nl/templates/subSilver/overall_header.tpl

css bestand:
http://www.asfaltrockers.nl/templates/subSilver/mvw.css

EDIT: opgelost...

Het blijkt dat als ik de debugger aan heb staan die mij extra informatie verschaft over bepaalde settings in de layout dat IE hierdoor van slag af raakt.
Deze stuk tekst wat de tool extra in de bron zet als opmerking:
<!-- template ./templates/subSilver/overall_header.tpl start -->

wordt dus niet geaccepteerd door IE.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan