PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
j

Layout is anders na cache-refresh

Door johannes davidian op 11-02-2017 12:23 gewijzigd op 11-02-2017 12:34
2.118 views
hallo,
ik heb full width.php template pagina gemaakt om als front page te gebruiken voor een bepaalde pagina van mij website het werkt perfect maar na een tijdje het gaat fout.
de code van php pagina is:

<?php
 /*
 Template Name: Full Width
 */
 
get_header(); ?>
                 
<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		
<div class="expanded row">
<div class=" small-8 column">
<div class="expanded row">
<div class="section-hoofdtekst">S.Dawidian Hoogvliet </div> </div>
<div class="section-repair">
<div class="expanded row">
<div class="subsection1-repair small-6 column"></div>
<div class="subsection2-repair small-6 column"></div>
</div> </div>
<div class="section-repair2 ">
<div class="expanded row">
<div class="subsection1-repair2 small-6 column"></div>
<div class="subsection2-repair2 small-6 column">  </div>
 </div> </div>

<div class="section-repair3">
<div class="expanded row">
<div class="subsection1-repair3 small-6 column"></div>
<div class="subsection2-repair3 small-6 column"></div>
 </div> </div>

<div class="section-repair4">
<div class="expanded row">
<div class="subsection1-repair4 samll-6 column"></div>
<div class="subsection2-repair4 small-6 column"> </div>
</div> </div>
<div class="section-repair5">
<div class="expanded row">
<div class="subsection1-repair5 small-6 column"></div>
<div class="subsection2-repair5 small-6 column"> </div>
</div> </div>
<div class="section-repair6">
<div class="expanded row">
<div class="subsection1-repair6 small-6 column"></div>
<div class="subsection2-repair6 small-6 column"> </div>
</div></div>  
</div>

<div class="small-4 column">
<div class="expanded row">
<div class="aside1-header-tekst small-12 column">Adres en contactgegevens</div>  </div>

<div class="section-aside1">
<div class="expanded row">
<div class="subaside1 small-4 column">
<?php 
echo do_shortcode('[smartslider3 slider=140]');
?>
</div>
<div class="subaside1-section2 small-8 column">
David's APK Station</br>
Klompenmakerstraat 123</br>
3194 DD Hoogvliet RT                            
  </div>
</div> 
<div class="expanded row">
<div class="subaside2 small-2 column">
<?php 
echo do_shortcode('[smartslider3 slider=141]');
?>

   </div>

<div class="subaside2-section2 small-8 small-pull-2 column">010-XXXXXX </div>
</div>
<div class="expanded row">
<div class="subaside3 small-2 column"><?php 
echo do_shortcode('[smartslider3 slider=142]');
?>  </div>
<div class="subaside3-section2 small-8 small-pull-2 column">>Plan route  </div>
</div>
<div class="expanded row">
<div class="subaside4 small-10 column">  </div>
</div>
<div class="expanded row">
<div class="subaside5 small-12 column">Openingstijden David's APK Station Hoogvliet</div>
</div>
<div class="expanded row">
<div class="subaside6 small-4 column">
<table>
<tbody>
<tr>
<td>
Maandag
Dinsdag
Woensdag
Donderdag
Vrijdag
Zaterdag
Zondag
</td>
</tr>
</tbody>
</table>


  </div>
<div class="subaside6-section2 small-6 small-pull-2 column"> 
<table>
<tbody>
<tr>
<td>08.00 - 18.00 uur
08.00 - 18.00 uur
08.00 - 18.00 uur
08.00 - 18.00 uur
08.00 - 18.00 uur
08.00 - 13.00 uur
Gesloten</td>
</tr>
</tbody>
</table>


 </div>
</div>
</div><!--  end van aside1 -->
<div class="expanded row">
<div class="aside2-header-tekst small-12 column">Klantboordeling</div>
</div>

<div class="section-aside2">
<div class="expanded row">
<div class="KB-section1 small-7 column"><?php 
echo do_shortcode('[smartslider3 slider=145]');
?> </div>
<div class="KB-section2 small-5 column"></div>
</div> </div>

<div class="expanded row">
<div class="aside3-header-tekst small-12 column">Werkplaats Afspraak</div> </div>

<div class="section-aside3">
<div class="expanded row">
<div class="WA-section1 small-6 column"> </div>
<div class="WA-section2 small-6 column"></div>
</div> </div>

<div class="expanded row">
<div class="aside4-header-tekst small-12 column">Facebook David's APK Station</div> </div>

<div class="section-aside4">
<div class="expanded row">
<div class="Facebook-section1 small-6 column"><?php 
echo do_shortcode('[smartslider3 slider=146]');
?> </div>
<div class="Facebook-section2 small-6 column">> Volg ons op Facebook</div>
</div> </div>

<div class="expanded row">
<div class="aside5-header-tekst small-12 column">Twitter David's APK Station</div>  </div>
<div class="section-aside5">
<div class="expanded row">
<div class="Twitter-section1 small-6 column"><?php 
echo do_shortcode('[smartslider3 slider=147]');
?></div>
<div class="Twitter-section2 small-6 column">> Volg ons op Twitter</div>
</div>
</div>
</div>
</div>           
				<?php get_template_part('template-parts/content',  'page' );         




 ?> 			
</main>
</div>
	

<?php
get_footer();

// kleurtjes ?>


het CSS code voor deze pagina is:


.section-repair {
border:0.050em solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}

.subsection1-repair {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}

.section-repair2 {
border:0.050em solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}

.subsection1-repair2 {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair2  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}

.section-repair3 {
border:0.050em solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}

.subsection1-repair3 {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair3  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}

.section-repair4 {
border:0.050em solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}

.subsection1-repair4 {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair4  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}
.section-repair5{
border:0.050em solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}

.subsection1-repair5 {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair5  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}

.section-repair6{
border:0.050 solid #074e68;
width:100%;
height:7em;
margin-top:1em;

}
.subsection1-repair6 {
list-style-type:none;
padding-top:0.90rem;
padding-left:0.90rem;

}
.subsection2-repair6  {
padding-top:0.90rem;
padding-right:0.90rem;
padding-bottom:0.90rem;
float:right;
list-style-type:none;
}


in het begin werkt alles prima maar na tijdje als ik heb cashe refresh gedaan of een code gewijzigd dan veranderd de borders lengte in hete pagina en wordt kleiner.
het voorbeeld U kunt zien op deze url:http://webdesignleren.net/reparatie-ondehoud/
ik heb van alles gedaan 2 dagen lang om het oorzak te vinden maar zonder resultaat.
deze pagina's ik heb als templates gemaakt om in front page van wordpress deze templates te gebruiken als webpage.
wat het kan de fout zijn ?
Dank U Wel
johannes
Ariën
11-02-2017 12:30 gewijzigd op 11-02-2017 12:32
Vanaf na welke wijziging is de fout ontstaan? Een cache refresh is geen aanleiding dat de code opeens niet meer goed werkt. Kan anders eens naar beide HTML-broncodes van zowel vóór als ná de cache refresh.
j
johannes davidian
11-02-2017 13:04
badankt,
eerste keer stond deze probleem toen ik heb margin-left gewijzigd van site-main omdat ik had deze naam S.Dawidian in het class van site-main gezet .
nu ik heb anders gedaan net als u ziet hieronder:

<div class="expanded row">
<div class=" small-8 column">
<div class="expanded row">
<div class="section-hoofdtekst">S.Dawidian Hoogvliet </div> </div>


het heeft gewerkte zonder probleem tot uur geleden ik heb cashe refresh gedaan en het probleem stond alweer.
ik heb geen andere html code dan wat staat boven of mischien ik moet andere page.php singel.php. index.php pagina's verwijderen in wordpress,mischien het kan conflict vroorzaken?
johannes.
M
Marlies Maalderink
11-02-2017 13:37
page, single en index zijn gewoon andere pagina's, voor zover ik weet kunnen die geen conflict veroorzaken. Tenzij je per ongeluk naar die pagina's zit te kijken ipv naar de pagina waar je mee bezig denkt te zijn.

Maar, refresh je je cash ook gelijk nadat je wijzigingen hebt gemaakt? Kan het anders niet zijn dat het direct al mis gaat maar daar je het pas ziet als je je cache refreshed? Want het lijkt me niet dat het refreshen van je cash iets in je pagina zelf kan wijzigen.

j
johannes davidian
11-02-2017 14:38
Dank U Wel ,
maar als u boven kijkt in 

 <?php
 /*
 Template Name: Full Width
 */
 
get_header(); ?>

en het rest van het code kunt u iets fout zien of iets dat moet gecorigeerd worden?
ik heb bekijken in index,page,single.php er is geen enkel fout per ongeluk?
johannes
M
Marlies Maalderink
11-02-2017 17:52
Ik begrijp het probleem zoals je het omschrijft niet precies, wat gaat er precies mis? (Je zegt, veranderd de borderslengte maar een border heeft altijd de lengte van de div) Verder is het nogal een onoverzichtelijke toestand met allemaal divs waarvan zo bijna niet te zien is welke </div> waarbij hoort. Voor je eigen overzicht zou ik eerst dat even aanpassen. Inhoud van divs laten inspringen en evt met comments aangeven welke </div> wat afsluit. Dan heb je daar alvast meer overzicht in en is het makkelijker zoeken.

Verder worden er verschillende classes gebruikt die niet is de css staan (neem aan dat die in een ander bestand staan), staat er ergens een > teveel en een spatie tussen de " En de naam van de class. Maar dat zal het probleem niet veroorzaken...
j
johannes davidian
11-02-2017 21:48
dank u wel iedereen,
ik heb de fout gezocht overal en ik dacht dat het fout ziet in foundation grid system en ik was bijna van plan om bootsrap grid system te gebruiken .
ik heb uiteindelijk gevonden in het berekening van pixels naar em .dus ik heb in CSS 

html {
	font-family: 'Merriweather', serif;
        font-size:100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

en

body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Merriweather', serif;
	font-size: 16px;
	font-size: 1em;
	line-height: 1.5;
}


veranderd en daarna de borders size op de juiste maat gezet en het probleem is opgelost.
kijk op url:http://webdesignleren.net/reparatie-ondehoud/
johannes

Reageren

Inloggen om te reageren