[CSS/Wordpress] Probleem met plaatje wat blijft repeaten

[Aionicus]

Goedemorgen beste medetweakers, Ik zit mijzelf nu al een paar dagen te breken over het onderstaande en ik denk eigenlijk dat het heel simple is om op te lossen voor een expert hierin.

Ik heb sinds kort het management van een site overgenomen van vrienden , nu hadden ze een paar veranderingen geplant staan en vroegen ze zich af of ik dat kon realiseren , ik heb aangegeven dat ik er wel even naar wou kijken maar mijn ervaring met CSS / php is niet super extended.

Het probleem waar ik nu tegenaan loop is het volgende :

Ik heb een vierkant vak waarin een plaatje word geladen vanuit wordpress (per pagina) , de bedoeling is dat ik het vak (element achtergrond) iets aanpas en het plaatje wat meer centreer (zodat er uiteindelijk een nieuw blok onder kan komen met text informatie) . Het aanpassen van het vak lukt me , het vergroten / verkleinen van het plaatje lukt me ook redelijk , alleen het probleem wat ik blijf houden is dat het plaatje zich blijft repeaten en ik geen flauw idee heb hoe ik dat kan omzeilen.

de code :

(style.css)

Cascading Stylesheet:

featured { margin-top: 23px; }
    #featured #slides { width: 954px; background-color: #e5e5e5; border-bottom: 1px solid #fff; height: 400px;
    padding: 3px; }
        #slides .slide { position: relative; }
        #featured .slider_shadow { background-image: url(images/slider-shadow.png); width: 960px; height: 14px; display: block; }
            .slide .banner { position: absolute; width: 350px; height: 480px; background: url(images/slider-banner.png) no-repeat; top: 16px; padding: 30px 20px 0 96px;font-style: italic; color: #525252; text-shadow: 1px 1px 0px #fff; }
            .slide .active { top: 90px; }
                .banner h2 { color: #a4a4a4; font-size: 38px; padding-bottom: 20px; line-height: 40px; display: block; height: 100px; }
                .banner span { top: 318px; left: 200px; height: 40px; display: block; background-image: url(images/slider-readmore-left.png); position: absolute; }
                .banner span a { background: url(images/slider-readmore-right.png) no-repeat right; height: 24px; font-family: Georgia; font-size: 12px; color: #fff; text-transform: uppercase; float: left; margin-right: -17px; padding: 8px 15px; text-shadow: 1px 1px 0px #6c6c6c; }

(Featured.php)

PHP:

 

 <div id="featured">
    <div id="slides">
        <?php for ($i = 1; $i <= $featured_num; $i++) { ?>
        <div class="slide <?php if($i == 1) echo('active'); ?>">
            <div class="slider_image" style="background-image: url(<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, '', true, true); ?>) ;" ;>
            <img src="<?php bloginfo('template_directory'); ?>/images/slider-overlay.png" alt="" />
            </div>
            <div class="banner" style="margin-top: -6px; margin-left: -250px; margin">
            <h2><?php echo esc_html($arr[$i]["title"]); ?></h2>
            <?php echo($arr[$i]["excerpt"]); ?>
            <br class="clear" />

Nu moet ik hier denk ik ergens background-repeat: no-repeat zetten lijkt mij alleen maakt niet uit waar ik hem plaats , het lijkt gewoon niet te werken dus ik denk dat ik iets fout doe.

Kan iemand mij hier het een en ander in verhelderen ?

Dank !

[Aionicus]

edit :

Als de pagina geladen word in firefox en ik de code via firebug inspect valt het stukje met het plaatje wat ik niet wilt laten repeaten onder het volgende kopje :

HTML:

<div id="featured">
<div id="slides">
<div class="slide active" style="display: block;">
<div class="slider_image" ;="" style="background-image: url(imageurl/2012/12/plaatje1-277924_100x375.png) ;">
<img alt="" src="imageurl//images/slider-overlay.png">

het css path is :

html.cufon-active body.home div.wrapper div#featured div#slides div.slide div.slider_image

[TheNephilim]

Aan deze brei met HTML/CSS/PHP is moeilijk af te leiden wat er nou precies fout gaat. Kun je niet een testcase maken op jsfiddle.net ofzo? Of een screenshot?

[Bosmonster]

Met hierboven. Maar aan het einde van regel 5 staat wel dit:

HTML:

 ;" ;>

Dat lijkt me niet helemaal juist..

[Aionicus]

daar had ik eerst background-repeat: no-repeat instaan

ik ben niet bekend met jsfiddle.net , klinkt opzich heel handig , ik zal even 2 screenshots uploaden en linken voor jullie , momentje !

[RobIII]

Aionicus schreef op dinsdag 08 januari 2013 @ 10:49:
ik ben niet bekend met jsfiddle.net , klinkt opzich heel handig , ik zal even 2 screenshots uploaden en linken voor jullie , momentje !

Screenshots hebben we niets aan; het gaat om de DOM en de daarop toegepaste CSS etc. Een goede testcase(!) in een JSFiddle is dan ook 1.000x handiger. En met testcase bedoel ik dus geen complete HTML/CSS van hier-tot-Tokyo maar enkel de voor je probleem relevante HTML/CSS.

[Aionicus]

@Roblll , ik was mij niet bekend met JSFIDDLE , ik zal even kijken of ik een testcase kan aanmaken daar.

excuses voor het ongemak , is mijn eerste post mbt tot development en begrijp dat jullie ervaren mensen bepaalde dingen verwachten , echt excsues ervoor. ik ga een fiddle case aanmaken als ik weet hoe /wat er ingevoerd moet worden.

Wel even 2 screenshots gemaakt in tussentijd terwijl ik een jsfiddel case ga aanmaken !

1, vanuit chrome http://img703.imageshack.us/img703/662/inspect.jpg
2, deze had 1 van mijn kennisen gemailed naar me (heerlijke paint skills ^^) : http://img580.imageshack.us/img580/4802/repeatimage.jpg

De JSFIDDLE case volgt nog , moet even uitvogelen dat ik dat helemaal goed doe in 1x.

bedankt alvast !

[Aionicus]

Edit : heeft er iemand misschien een handige guide voor mbt tot jsfiddle ? als ik de 2 snippets van code daar invul (zoals hier : http://jsfiddle.net/Aionicus_NL/qwk2c) dan krijg ik inderdaad het vak te zien, dit is alleen het achterliggende vak, weet bijna 100% dat ik hier wat fout doe /mayday (denk dat ik nog bepaalde js scripts moet toevoegen of?)

[ Voor 8% gewijzigd door Aionicus op 08-01-2013 11:39 ]

[RobIII]

JSfiddle verwerkt natuurlijk geen PHP Je zult de output van je PHP script even moeten knippen/plakken en ontdoen van alle "ruis" die voor de testcase niet relevant is. Zorg er ook even voor dat je code (dus: HTML, CSS, whatever je nog meer nodig hebt) een beetje leesbaar geformatteerd is; deze brei gaat niemand voor je debuggen. Even tussen-de-soep-en-de-aardappelen-door gedaan krijg je dan (ongeveer) zoiets.

[ Voor 46% gewijzigd door RobIII op 08-01-2013 11:45 ]

[Aionicus]

hehe , zie je ^^ , noob in tha house hahahaha

en zo beter? /hides just incase ik het weer verkeerd heb gedaan

http://jsfiddle.net/Aionicus_NL/qwk2c/5/

[RobIII]

Aionicus schreef op dinsdag 08 januari 2013 @ 11:50:
en zo beter? /hides just incase ik het weer verkeerd heb gedaan

Had ik niet gezegd dat je je code leesbaar(der) moest maken?

Verder zie je al meteen een probleem op regel 12/13 op JSFiddle (rood gehighlight), maar onze eigen syntax-hightlighter hier op GoT zal dat ook doen:

HTML:

<div class="slider_image" style="background-image: url(http://12hire.nl//wp-content/uploads/2012/12/plaatje1-277924_100x375.png) ;"
;>

Begin dus eens met dat éérst op te lossen (wat Bosmonster dus ook al aankaartte). Daarna kun je met je fiddle "fiddelen" (vandaar de naam ) om te zien waar je probleem in ligt en hoe je 't oplost. Graag horen we wat je zelf al hebt geprobeerd/gezocht/gevonden etc. en dan kunnen we eens gaan kijken waar de schoen knelt en of we je in de juiste richting kunnen wijzen

[ Voor 23% gewijzigd door RobIII op 08-01-2013 11:55 ]

[LeVortex]

RobIII schreef op dinsdag 08 januari 2013 @ 11:53:
[...]

Had ik niet gezegd dat je je code leesbaar(der) moest maken?

Verder zie je al meteen een probleem op regel 12/13 op JSFiddle (rood gehighlight), maar onze eigen syntax-hightlighter hier op GoT zal dat ook doen:

HTML:

<div class="slider_image" style="background-image: url(http://12hire.nl//wp-content/uploads/2012/12/plaatje1-277924_100x375.png) ;"
;>

Begin dus eens met dat éérst op te lossen (wat Bosmonster dus ook al aankaartte). Daarna kun je met je fiddle "fiddelen" (vandaar de naam ) om te zien waar je probleem in ligt en hoe je 't oplost. Graag horen we wat je zelf al hebt geprobeerd/gezocht/gevonden etc. en dan kunnen we eens gaan kijken waar de schoen knelt en of we je in de juiste richting kunnen wijzen

Je hebt daarnaast je css in je php staan, het stukje code dat gequote wordt is ook waar je plaatje zit. Dit plaatje wil je dus maar 1 keer zien en die repeat nu.

Hier een uitleg: http://www.w3schools.com/cssref/pr_background-repeat.asp

Je moet dus ergens dit toevoegen: "background-repeat: no-repeat;" (zonder quotes). Mag je even zelf zoeken waar, als het niet lukt helpen we wel hoor

edit: zie net dat je dat al had gedaan, had je de vorige (dus dat plaatje) wel netjes afgesloten met een ;? anders werkt het niet.

[ Voor 6% gewijzigd door LeVortex op 08-01-2013 12:06 ]

[Aionicus]

sorry rob, zit hier op een pc met veels te weinig geheugen (1gb) om fatsoenlijk alle pagina's ff snel te laden dus excuses voor de mess. ik zie wat je bedoelt met code opschonen , zucht wat een nab ben ik in dat geval haha. (heb je gewoon handmatig de code zo netjes neergezet btw of heb je dat via knopje/script gedaan even snel?)

ff kieken mbt tot die ;> in lijn 12/13, dat kwam omdat ik dus ertussen die background repeat erin had gezet , kennelijk vergeten het terug te reverten naar orgineel . stom van me

Heb de code even veranderd en daarna even geforked omdat ik zie dat er een nieuw bericht is , http://jsfiddle.net/Aionicus_NL/88YDd/1/ , die is nu weg

[Aionicus]

ja, loop al hele tijd te klooien ermee, komt ook omdat het ineen soort formule staat :

PHP:

<div class="slider_image"
style="background-image: url(<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, '', true, true); ?>) ;" ;>

is de php code , nu had ik tussen ?>) ;" en ;> dus background-repeat:no-repeat gezet , denk dat ik het op de verkeerde plek toevoeg of i dunno , bij een ander plaatje werkte het wel (gewoon direct erachter) , denk dat het komt omdat ik nog in de formule zit of ?

[ Voor 7% gewijzigd door Aionicus op 08-01-2013 12:16 ]

[LeVortex]

); ?>) ;" ;>


dat ?> is de afsluiting van je php-code. de ) is afsluiting van je image die de php code oproept en ; is een scheiding voor je je volgende css item. dus na de ; en voor de " moet background-image: no-repeat; staan. Door de " wordt je css eigenlijk afgesloten en de > sluit je eigenlijke tag.

); ?>) ; background-repeat: no-repeat;" ;>

volgens mij kan die laatste ; voor de > ook gewoon weg. Dit kun je makkelijk zien als je het aangepast hebt en in je browser de source kijken.

In je HTML komt de volgende code imageurl); background-repeat: no-repeat;"> als het goed is.

(ben ook geen expert, eigen wordpress site, maar php maakt alles in het begin er lastig. Probeer eerst de syntax te snappen. Dus dat je weet wanneer het php code is en wanneer niet. Dan weet je wat de html is en kun je daar de classes en dergelijke aanpassen).

[ Voor 33% gewijzigd door LeVortex op 08-01-2013 12:46 ]

[Aionicus]

Allemaal echt heel erg bedankt voor de hulp , inderdaad is het wat levortex typte

); ?>) ; background-repeat: no-repeat;" ;>

dit erachter op de juiste plek en het werkt als een trein. Inderdaad heb je gelijk dat het handig is als je heel de code volledig begrijpt , nu ben ik alleen nog niet zoon expert dat ik het direct zie.

Gelukkig dankzij jullie hulp is het repeaten weg dus kan ik nu aan het design verder werken ! (nu hopen dat ik het voor mekaar krijg fatsoenlijk een page te loaden in het blok eronder, zo niet dan horen jullie me nog wel !

anyway +100000000000000000000000 kudo's naar jullie voor de hulp.

[TheNephilim]

PHP:

<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, '', true, true); ?>

Hoe haal je de afbeeldingen op? Normaal gebruik ik gewoon the_post_thumbnail();, binnen een WP loop.

[Aionicus]

ze worden opgehaald via timthumb (script) dat automatisch van een foto een thumbnail maakt per pagina (voor bv een slider , uniqe menu's waar de logo's van de verschillende scoutinggroupen instaan etc)

wel grappig opzich , in ieder geval kan op dit topic een slotje !

[RobIII]

Aionicus schreef op woensdag 09 januari 2013 @ 17:49:
wel grappig opzich , in ieder geval kan op dit topic een slotje !

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

[ Voor 33% gewijzigd door RobIII op 09-01-2013 19:17 ]