CSS probleem

Door Hans De Ridder op 07-01-2018 01:03 gewijzigd op 08-01-2018 10:31

2.805 views

Ik ben een website aan het fatsoeneren.
Nu laat ik in een loop wat gegevens, afbeeldingen, en documenten plaatsen.
Er is een stukje tekst dat ineens een link is geworden.
Ben al een poosje bezig geweest.
Maar krijg het niet meer goed.
Wanneer ik het bovenste stuk (in PHP) weghaal, is het weer gewone tekst volgens de CSS.
De tekst gaat over de $naam en de $functie1, $functie2.


<li rel="colorbox">
<?php
$a = $image['thumb_path'];
$b = $image['file_title'];
if($tekoop == "")
{
echo '<img src="'. $a.'" alt ="'. $b. '" title = "geen document">';
} else {
echo '<a href ="'.$tekoop.'" class="embed-link"><img src="'.$a.'" rel="colorbox" alt="Aanbod van&nbsp;'.$naam.'"</a>';
}
?>

<div class = "special" style = "text-align: center;">
<?php echo $naam ?><br>
<?php echo $functie1.' / '.$functie2 ?>
<br>
.
.
.
.
</div>

[code]
#special {
position: relative;
width: 158px;
height: 75px;
color: #fffff;
margin-top: 5px;
display: in-block;
cursor: hand;
text-align: center;
padding: 2px, 2px, 2px, 2px;
padding-top: 4px;
overflow-x: hidden;
overflow-y: hidden;
border-top: 1px solid #233d47;
border-left: 1px solid #233d47;
border-right: 1px solid #204656;
border-bottom: 1px solid #204656;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Thomas van den Heuvel

07-01-2018 01:12 gewijzigd op 07-01-2018 01:13

regel 9, de img-tag heeft geen sluitend haakje (>) voor de </a>.

Je kunt overigens in en uit een PHP blok springen, dat zou e.e.a. stukken leesbaarder kunnen maken.

Vergelijk:

<?php
if($tekoop == "")
{
    ?><img src="<?php echo $a ?>" alt="<?php echo $b ?>" title="geen document"><?php
} else {
    ?><a href ="<?php echo $tekoop ?>" class="embed-link"><img src="<?php echo $a ?>" rel="colorbox" alt="Aanbod van <?php echo $naam ?>"></a><?php
}
?>

En voor de goede orde zou je over $a, $b, $tekoop en $naam htmlspecialchars() moeten gooien, om enige betekenis die deze waarden mogelijk hebben binnen HTML te neutraliseren (onder het mom "escape output").

Hans De Ridder

07-01-2018 11:58

Bedankt Thomas.
Dat was inderdaad de oplossing.
Beetje te lang op lopen turen denk ik, haha.
De $a en $b zijn daar even onder die naam neergezet om te testen.
Krijgen een meer functionele naam.
Maar bedankt voor de tips.

Ariën

08-01-2018 10:32

Het helpt altijd om je HTML-code door de W3-validator te halen als je merkt dat er vreemde dingen gebeuren m.b.t. je opmaak.

Ivo P

08-01-2018 10:51

waarom al die extra spaties?

bijvoorbeeld: <div class = "special" style = "text-align: center;">

ik heb het niet getest, maar kan me voorstellen dat in elk geval sommige browsers zouden kunnen vinden dat class en style nu leeg zijn en dat er nog wat onbegrepen properties zijn "speciaal" en "text...;"

Hetzelfde geldt voor je img en a tags.

Reageren

Inloggen om te reageren