Table uitlijnen

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Forumregels

LEES: Richtlijnen voor Support. Vul de support template in!
phpBB3.0.x
Verschaf iemand geen servertoegang tenzij het niet anders kan. Maak altijd eerst een volledige backup en verander de inloggevens na afloop. Eigen risico.
Plaats reactie
foss
Berichten: 39
Lid geworden op: 12 jan 2015, 13:52

Table uitlijnen

Bericht door foss » 07 feb 2015, 17:27

Ik heb een table toegevoegd aan de forumlist_body.html
Afbeelding

Code: Selecteer alles

<table width="100%">
<tr>
<td><!-- IF forumrow.FORUM_ID eq '3' -->
        <div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Mededeling 1</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
            <li class="row customblock">
                Mededeling 1
            </li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
    <!-- ENDIF --></td>
<td><!-- IF forumrow.FORUM_ID eq '3' -->
        <div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Mededeling 2</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
            <li class="row customblock">
                Mededeling 2
            </li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
    <!-- ENDIF --></td>
	<td><!-- IF forumrow.FORUM_ID eq '3' -->
        <div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Mededeling 3</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums">
            <li class="row customblock">
                Mededeling 3
            </li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
    <!-- ENDIF --></td>
</tr>
</table>
Maar zoals je ziet loopt hij niet rechtlijnig met de bovenste en de onderste.
Hoe kan ik dit goed krijgen ?

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: Table uitlijnen

Bericht door Theriddler » 10 feb 2015, 12:13

Hallo foss,

Is dit nog nodig? want als ik kijk op jou forum zie ik dat je het alweer anders hebt ingedeeld.

Laat het nog even weten.

foss
Berichten: 39
Lid geworden op: 12 jan 2015, 13:52

Re: Table uitlijnen

Bericht door foss » 10 feb 2015, 13:25

Hoi Riddler, ja als het zou kunnen hou ik me zeer aanbevolen ;)
Mocht je een andere manier weten zonder table's is ook goed.
Ik had het ff zo geprobeerd :)
Trouwens ik heb m'n testforum weer veranderd hij is nu met deze blokken.

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: Table uitlijnen

Bericht door Theriddler » 10 feb 2015, 15:21

verander:

Code: Selecteer alles

<table width="100%">
naar:

Code: Selecteer alles

<table style="width: 1004px; margin-left: -2px">
wellicht dat iemand anders nog een betere code heeft, niet veel tijd om erin te duiken

foss
Berichten: 39
Lid geworden op: 12 jan 2015, 13:52

Re: Table uitlijnen

Bericht door foss » 10 feb 2015, 17:58

Toppie Riddler weer heel erg bedankt !!!
Als je nu naar mijn testforum kijkt http://phpbb.freehostingking.com/dan zie je dat de afstand tussen de blokken onderelkaar van afstand verschillen.
Zou ik dat allenmaal gelijk kunnen krijgen ?

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: Table uitlijnen

Bericht door Theriddler » 10 feb 2015, 22:31

probeer het zo eens (haal je eigen code weg)

Code: Selecteer alles

<!-- IF forumrow.FORUM_ID eq '3' -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Welkom</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Welkom op mijn Phpbb test forum.
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '3' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 1</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 1
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 2</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 2
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 3</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 3
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->
	
<!-- IF forumrow.FORUM_ID eq '3' -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Laatste nieuws</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
<script type="text/javascript"> 
<!-- 
rssfeed_url = new Array(); 
rssfeed_url[0]="http://www.nu.nl/feeds/rss/algemeen.rss";  
rssfeed_frame_width="980"; 
rssfeed_frame_height="100"; 
rssfeed_scroll="on"; 
rssfeed_scroll_step="6"; 
rssfeed_scroll_bar="off"; 
rssfeed_target="_blank"; 
rssfeed_font_size="12"; 
rssfeed_font_face=""; 
rssfeed_border="off"; 
rssfeed_css_url=""; 
rssfeed_title="off"; 
rssfeed_title_name=""; 
rssfeed_title_bgcolor="#3366ff"; 
rssfeed_title_color="#fff"; 
rssfeed_title_bgimage="http://"; 
rssfeed_footer="off"; 
rssfeed_footer_name="rss feed"; 
rssfeed_footer_bgcolor="#fff"; 
rssfeed_footer_color="#333"; 
rssfeed_footer_bgimage="http://"; 
rssfeed_item_title_length="50"; 
rssfeed_item_title_color="#0e99df"; 
rssfeed_item_bgcolor="#fff"; 
rssfeed_item_bgimage="http://"; 
rssfeed_item_border_bottom="off"; 
rssfeed_item_source_icon="off"; 
rssfeed_item_date="off"; 
rssfeed_item_description="on"; 
rssfeed_item_description_length="120"; 
rssfeed_item_description_color="#000000"; 
rssfeed_item_description_link_color="#333"; 
rssfeed_item_description_tag="off"; 
rssfeed_no_items="0"; 
rssfeed_cache = "51f0c7e4859c5da40a0a7dfbd65b23d7"; 
//--> 
</script> 
<script type="text/javascript" src="http://feed.surfing-waves.com/js/rss-feed.js"></script> 
<div style="text-align:right; width:980px;"></div> 
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '5' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 1</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 1
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 2</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 2
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '7' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 3</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 3
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 4</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 4
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->

foss
Berichten: 39
Lid geworden op: 12 jan 2015, 13:52

Re: Table uitlijnen

Bericht door foss » 11 feb 2015, 09:15

Thanks Riddler nu is hij goed !!!
Mag ik vragen wat je hebt gedaan ?

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: Table uitlijnen

Bericht door Theriddler » 11 feb 2015, 12:32

foss schreef:Thanks Riddler nu is hij goed !!!
Mag ik vragen wat je hebt gedaan ?
Uiteraard, je had de <!-- IF code regels geplaatst na de table tag terwijl deze daar voor moest staan, daardoor kwamen er op de plekken waar er teveel ruimte ontstond lege tabbellen. Ik heb deze verplaatst alsook de <!-- ENDIF -->. ik had een testpagina gemaakt zodat ik deze lokaal kon testen.

Je had:

Code: Selecteer alles

<table style="width: 1004px; margin-left: -2px">
<tr>
<td><!-- IF forumrow.FORUM_ID eq '3' -->
<div class="forabg">
Moest zijn:

Code: Selecteer alles

<!-- IF forumrow.FORUM_ID eq '3' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
de testpagina zag er zo uit:

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl" xml:lang="nl">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="nl" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>Test</title>

<link href="http://phpbb.freehostingking.com/style.php?id=1&lang=nl" rel="stylesheet" type="text/css" media="screen, projection" />
</head>

<body id="phpbb" class="section-viewtopic ltr forum">

<div id="wrap">

<!-- IF forumrow.FORUM_ID eq '3' -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Welkom</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Welkom op mijn Phpbb test forum.
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '3' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 1</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 1
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 2</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 2
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Mededeling 3</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Mededeling 3
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->
	
<!-- IF forumrow.FORUM_ID eq '3' -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Laatste nieuws</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
<script type="text/javascript"> 
<!-- 
rssfeed_url = new Array(); 
rssfeed_url[0]="http://www.nu.nl/feeds/rss/algemeen.rss";  
rssfeed_frame_width="980"; 
rssfeed_frame_height="100"; 
rssfeed_scroll="on"; 
rssfeed_scroll_step="6"; 
rssfeed_scroll_bar="off"; 
rssfeed_target="_blank"; 
rssfeed_font_size="12"; 
rssfeed_font_face=""; 
rssfeed_border="off"; 
rssfeed_css_url=""; 
rssfeed_title="off"; 
rssfeed_title_name=""; 
rssfeed_title_bgcolor="#3366ff"; 
rssfeed_title_color="#fff"; 
rssfeed_title_bgimage="http://"; 
rssfeed_footer="off"; 
rssfeed_footer_name="rss feed"; 
rssfeed_footer_bgcolor="#fff"; 
rssfeed_footer_color="#333"; 
rssfeed_footer_bgimage="http://"; 
rssfeed_item_title_length="50"; 
rssfeed_item_title_color="#0e99df"; 
rssfeed_item_bgcolor="#fff"; 
rssfeed_item_bgimage="http://"; 
rssfeed_item_border_bottom="off"; 
rssfeed_item_source_icon="off"; 
rssfeed_item_date="off"; 
rssfeed_item_description="on"; 
rssfeed_item_description_length="120"; 
rssfeed_item_description_color="#000000"; 
rssfeed_item_description_link_color="#333"; 
rssfeed_item_description_tag="off"; 
rssfeed_no_items="0"; 
rssfeed_cache = "51f0c7e4859c5da40a0a7dfbd65b23d7"; 
//--> 
</script> 
<script type="text/javascript" src="http://feed.surfing-waves.com/js/rss-feed.js"></script> 
<div style="text-align:right; width:980px;"></div> 
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '5' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 1</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 1
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 2</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 2
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->

<!-- IF forumrow.FORUM_ID eq '7' -->
<table style="width: 1004px; margin-left: -2px">
<tr>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 3</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 3
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
<td>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Extra block 4</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row customblock">
Extra block 4
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</td>
</tr>
</table>
<!-- ENDIF -->
</div>
</body>
</html>
Uiteraard werkten de IF codes niet omdat ik niet in een phpbb omgeving zat ging mij puur om de html.
In puur html werkte het wel wat in phpbb bij jou niet goed werkte,toen zag ik dat je de IF codes verkeerd had geplaatst.

foss
Berichten: 39
Lid geworden op: 12 jan 2015, 13:52

Re: Table uitlijnen

Bericht door foss » 12 feb 2015, 10:09

Duidelijke uitleg !
Weer heel erg bedankt Riddler :)

Plaats reactie