Virusscanner tips?
Responsive webdesign dmv image-repeat
Ik ben een website aan het maken, waarvan de div die de content bevat, een background image is. Op het moment dat de tekst langer is dan deze afbeelding, moet er via image-repeat een andere afbeelding van 1px hoog, dit contentvlak langer maken.
Ik heb al meerdere dingen geprobeerd, maar ik ben hier nog steeds niet in geslaagd. Zou iemand mij hier mee kunnen helpen?
Bij voorbaat dank,
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="div1">
Tekst
</div>
<div id="verlengstuk">
(Als tekst langer is dan de grootte van <div id="div1"></div> moet verlengstuk automatisch langer worden. (background-image staat in de CSS)
</div>
<div id="footer">
</div>
Tekst
</div>
<div id="verlengstuk">
(Als tekst langer is dan de grootte van <div id="div1"></div> moet verlengstuk automatisch langer worden. (background-image staat in de CSS)
</div>
<div id="footer">
</div>
Ik denk dat dit beter zal werken
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="verlengstuk">
<div id="div1">
Tekst
</div>
</div>
<div id="footer">
</div>
<div id="div1">
Tekst
</div>
</div>
<div id="footer">
</div>
C Stonebakers op 01/10/2013 13:32:56:
...Ik heb al meerdere dingen geprobeerd, ...
Je hebt vier divs in een document geplaatst. Meer zie ik niet.
Wij zijn geneigd om beter en vlugger te reageren wanneer:
- mensen tonen hoe ver ze geraakt zijn; met de fouten er bij. Alle relevante code
- als er error messages zijn: copy/paste ze hier
- mensen ons vertellen wat ze van plan zijn; wat het eindresultaat moet worden
- mensen ons vertellen waar ze de code gevonden hebben, als ze iets gecopy/paste hebben
Als mensen geen code tonen; vaag blijven; dummy voorbeelden geven, die niet overeen komen met wat ze echt willen; niet precies vertellen wat er fout loopt ...
Als mensen een vraag stellen die in feite overeen komt met: "leg mij heel dit concept eens volledig uit" ...
dan is het enthousiasme om te antwoorden heel vlug weg.
Daarbij komt dat wij eerst om verduideliking moeten vragen, dat het 4, 5 keer over en weer gaat, vooraleer wij het gevoel hebben dat een vraag kan beantwoord worden
Probeer daar op te letten; je zal hier veel beter en vlugger geholpen worden
Gewijzigd op 01/10/2013 14:08:50 door Kris Peeters
Ja inderdaad, dat werkt. Maar ik wil pas dat het plaatje zich verlengt zodra de tekst langer wordt dan het plaatje wat bij <div id="div1"></div> is ingesteld.
Hier volgt een stukje CSS van de pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
#div1{
width:940px;
margin:0 auto 0 auto;
background-image:url(images/content/contentBackgrounds/backgrounds/contentContainerImage.png);
}
#verlengstuk{
height:auto;
width:940px;
background-image:url(images/content/contentBackgrounds/contentExtension.png);
}
#Footer{
width:940px;
background-image:url(images/content/contentBackgrounds/contentFooterImage.png);
}
width:940px;
margin:0 auto 0 auto;
background-image:url(images/content/contentBackgrounds/backgrounds/contentContainerImage.png);
}
#verlengstuk{
height:auto;
width:940px;
background-image:url(images/content/contentBackgrounds/contentExtension.png);
}
#Footer{
width:940px;
background-image:url(images/content/contentBackgrounds/contentFooterImage.png);
}
Mvg,
Gewijzigd op 02/10/2013 09:34:39 door CNEPHP -
dan zul je in verlengstuk je background position moeten aanpassen.
uit mijn hoofd zou dit kunnen werken
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#verlengstuk{
height:auto;
width:940px;
background-image:url(images/content/contentBackgrounds/contentExtension.png);
background-position: 0px [hoogte_van_contentContainerImage.png]px;
}
height:auto;
width:940px;
background-image:url(images/content/contentBackgrounds/contentExtension.png);
background-position: 0px [hoogte_van_contentContainerImage.png]px;
}
Het wordt nu wel verlengd. Maar het probleem is nu dat "contentExtension.png" het plaatje contentContainerImage.png overlapt. Dus waarschijnlijk is de positie niet goed bepaald. De reden dat je ziet dat het plaatje is overlapt omdat er enige transparantie in zit.
Gewijzigd op 02/10/2013 10:23:23 door CNEPHP -
Dat werkt veel gemakkelijker. Kunnen we zelf testen/werken/proberen/opslaan zonder zelf alles te onthouden.
Voor nu heb ik het even voor je gedaan: http://jsfiddle.net/pfZJ7/1/
Daar zie je 2 (willekeurige) achtergronden.
De blauwe is de bovenste.
De groen is de onderste (je contentExtension.png).
Die laat ik pas op 400px beginnen (want contentBackground.png is 400px hoog).
Eventueel kan je dat weglaten, maar zou ik niet doen.
Nog een tip: geef een achtergrondkleur op van de afbeelding. Dus blauw/groen. Zo zien mensen het ook al 'goed' zonder afbeeldingen. Pinterest doet dit ook leuk, waardoor je gelijk je 'vulling' hebt, zonder afbeeldingen.
Zeker voor mobiel gebruik (je maakt het niet voor niets responsive...) kan dat handig zijn.
De bedoeling is dus zoals je ziet dat verlengstuk automatisch aangeroepen wordt en automatisch langer wordt wanneer het tekstvlak groter is. Maar dit werkt nog niet..
Als je goed kijkt zie je dat er gaten in de achtergrond zitten in div1 aan de linkerkant. Maar doordat het wordt overlapt door (div) verlengstuk zie je ze minder.
@Q S en @Eddy E, bedankt voor jullie hulp tot nu toe!
Corné
Gewijzigd op 02/10/2013 10:56:42 door CNEPHP -
Als ik http://scrshot.com/4cpz direct in de browser open, opent die wel iets... maar ik zie niets.
Dus... kan je andere plaatjes gebruiken die je wel ziet? Zoals ik deed?
Dus het enige waar ik nu nog mee zit is dat de afbeelding van (div) verlengstuk pas moet beginnen wanneer de afbeelding van (div) div1 is afgelopen. In dit geval dus na 400 pixels.
Corné