Overlappende Widgets in WordPress Thema
Ik ben Danny, 24 jaar oud en doe al ongeveer 13 ICT.
Ik ben begonnen met ICT als hobby en heb 2 jaar studie gedaan aan het ROC.
Voor de rest ben ik momenteel helaas werkloos, daarvoor ben ik 5 jaar lang Elektromonteur in de OV geweest maar wegens verhuizing en daardoor ontslag ben ik dus momenteel werkloos.
Over het algemeen ben ik meer van de hardware kant, maar de laatste tijd is webdesign me steeds meer gaan boeien, helaas ontbreekt er nog wat kennis waardoor ik zo nu en dan vast loop, vandaar mijn oproep.
Ik zit dus met een probleem.
Ik heb een WordPress thema verbouwd naar mijn likes en wensen, maar zit met nog een enkel probleem waar ik stapelgek van wordt.
Ik draai een Tube site, en heb rondom op mijn mainpage, pagina template en post template onder de content 5 widget gebieden.
1 gebied over de gehele breedte van de pagina, en daaronder 4 widget gebieden naast elkaar.
Nu is het zo dat in FireFox, de widgetgebieden netjes gesorteerd zijn zoals het moet, maar zodra ik IE open om te testen dan wordt gebied 1 (boven de 4 andere gebieden die daaronder horen te staan) over de 4 widgetgebieden eronder geplaatst.
Ook op mobiele apparaten wordt de layout niet goed weergeven.
Nu heb ik dus 5 gebieden extra aangemaakt, in zowel de stylesheet, de templates en de functions.php file.
Ik heb geen idee waardoor het komt, dus ik hoop dat iemand hier de fout ziet die ik heb gemaakt en mij kan helpen de fout te corrigeren.
STYLESHEET:
Quote:
#below-full-content {
background: #ffffff;
width: 100%;
height: 270px;
text-align: center;
}
#below-content-container {
background: #FFFFFF;
width: 100%;
height: 510px;
text-align: center;
}
#bsub-cont-main {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding: 5px 0 5px 0;
}
#bsub-cont-1 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-2 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-3 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-4 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
background: #ffffff;
width: 100%;
height: 270px;
text-align: center;
}
#below-content-container {
background: #FFFFFF;
width: 100%;
height: 510px;
text-align: center;
}
#bsub-cont-main {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding: 5px 0 5px 0;
}
#bsub-cont-1 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-2 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-3 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
#bsub-cont-4 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}
Templates alle 3 hetzelfde:
Quote:
blablabla... begin van widgetgebieden:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php <div id="below-content-container">
<div id="below-full-content">
[code]<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Below Full Content') ) : ?>
<?php endif; ?>
</div>
<div id="bsub-cont-main">
<div id="bsub-cont-1">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 1') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-2">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 2') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-3">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 3') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-4">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 4') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
</div>
</div>
<?php get_footer(); ?>
?>
<div id="below-full-content">
[code]<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Below Full Content') ) : ?>
<?php endif; ?>
</div>
<div id="bsub-cont-main">
<div id="bsub-cont-1">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 1') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-2">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 2') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-3">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 3') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-4">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 4') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
</div>
</div>
<?php get_footer(); ?>
?>
De rest van de code is niet relevant.
Het gekke is dat FireFox deze fout dus blijkbaar corrigeert en IE niet.
Ik hoop dat iemand hierbij kan helpen.
Gr. Danny
Dan kan je het makkelijk fixen voor IE alleen en blijft het in andere browser ongewijzigd. En het scheelt weer hacks in je css.
Code (php)
1
2
3
2
3
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="stylesheet_alleen-voor-IE.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheet_alleen-voor-IE.css" />
<![endif]-->
En een live voorbeeldje zou ook wel handig zijn, nu is het een beetje gissen :p
Gewijzigd op 15/08/2013 20:34:33 door Erik van Beek
Dank voor je reactie.
Helaas, vanwege het genre waarin mijn site zich bevind lijkt het mij ongepast een link te plaatsen naar mijn site.
Een live voorbeeld is overigens op het moment ook niet mogelijk.
Het enige wat ik zou kunnen doen is een voorbeeld maken in Photoshop.
Ik vraag me af hoe het komt dat de output in IE en andere browsers, anders is dan de output van FF.
Misschien als ik de reden daarvan weet dat ik de fout dan ook op kan lossen.
Bedankt voor je input Erik, als ik er echt niet uitkom zal ik een aparte stylesheet voor IE aanmaken.
Mvg, Danny