3 divs naast elkaar met bg image

[Saven]

Hi there,

Ik zit met een situatie waarvan ik niet precies weet hoe ik deze het best kan aanpakken. Het gaat er namelijk om dat ik een soort menubalk nodig heb, welke ronde hoeken, een schaduw en een gradient bg heeft.

Nu zou ik dit makkelijk op kunnen lossen met alleen CSS en zonder images, maar helaas moet ik ook rekening houden met wat oudere browsers die hier (geen goede) ondersteuning voor bieden.

Voorbeeld wat de bedoeling is:


Mijn oplossing met het gebruik van images was dat ik 3 div's naast elkaar plaats. Daarvoor heb ik deze sprite gemaakt:


Dit wilde ik doen door een aantal div's te gebruiken, in zo'n opstelling:

HTML:

<div style="width:xx;">
     <div style="float:left; width:xx; background:xx;">
     </div>

     <div style="float:right; width:xx;">
          <div style="float:left; background:xx;">
          </div>
          <div style="float:right; background:xx;">
          </div>
     </div>
</div>

Nou lijkt me dat dit efficiënter moet kunnen, alleen door het gebruik van de ronde hoeken en schaduw kan ik niet 1 div trekken met het middelste plaatje, en daar makkelijk het linker en rechter gedeelte overheen gooien omdat het middelse plaatje er dan nog doorheen komt. Als je snapt wat ik bedoel

De hele bar als png zou ook kunnen, maar vind ik niet zo sexy

Any thoughts/tips/oplossingen?

[syradodo]

Probeer het eens met de sliding doors techniek, die zijn ideaal voor deze situaties.

[Verwijderd]

Als je IE7 niet hoeft te ondersteunen kun je dit makkelijker met :before en :after doen, dan hoef je geen extra <div>s toe te voegen.

[Gamebuster]

http://www.css3.info

ik zie een drop-shadow, border, border-radius en een background met gradient

edit:
Sorry, ik las later pas dat je al op de hoogte was van CSS.
Zie: http://www.htmlgoodies.co...css.html#fbid=KUr_sw1S2-0

[ Voor 115% gewijzigd door Gamebuster op 12-02-2013 10:47 ]

[Saven]

hmm sliding doors gaat m niet worden denk ik, aangezien ik dan net zo goed de hele bar als 1 image kan doen before en after is ook nog een optie maar volgensmij ook niet ondersteund in ie7.

moet eigenlijk in alles vanaf ie7 werken als iemand nog een andere oplossing weet hoor ik het graag

[Wary87]

Hmm heb je al 1 grote div geprobeerd met daarin span(classleft) en span(classright) geprobeerd. Grote div position relative met middelste plaatje als bg en een margin left/right (of nog beter left/right -(x)px ter grootte van de plaatjes. Dan plaatjes absolute met een -margin left/right ter grootte van de margin van het middelste blok.

Zelf gelukkig nooit van die old browser support situaties gehad maar zo zou ik het oplossen zonder echt onderzoek te doen. Zou moeten werken wel wat spelen met de height en width van de spans display block en misschien een z-index.

Edit: zolang de sprite onderdelen onder elkaar staan kan je 1 enkele sprite gebruiken en alle 3 de onderdelen met bg images aanroepen en wat spelen met de position; middelste repeat en hoeken no-repeat. Wel zorgen dat je sprite een png is zodat transparantie behouden blijft.

[ Voor 21% gewijzigd door Wary87 op 12-02-2013 21:43 ]

[_Erikje_]

Wij gebruiken een lange balk met het linker gedeelte (.orange-button) er aan vast en dan 1 right span met daarop het rechter gedeelte (.tail)

HTML:

<div class="orange-button">
    <input type="submit" class="text" value="IN WINKELMANDJE">
    <span class="tail"></span>
</div>

Ik zou dit zelf niet meer zo doen. Het is een enorm geklooi om het cross-browser mooi te krijgen. Gebruik gewoon CSS3 knoppen en degradeer naar vierkante knoppen voor de oudere browsers...

bron: http://www.vd.nl/boeken/l.../zuid/g9789048807697.html

[ Voor 11% gewijzigd door _Erikje_ op 12-02-2013 21:43 ]

[Johnny]

Saven schreef op dinsdag 12 februari 2013 @ 21:29:
hmm sliding doors gaat m niet worden denk ik, aangezien ik dan net zo goed de hele bar als 1 image kan doen before en after is ook nog een optie maar volgensmij ook niet ondersteund in ie7.

moet eigenlijk in alles vanaf ie7 werken als iemand nog een andere oplossing weet hoor ik het graag

Het werkt ook perfect in MSIE 7, alleen ziet het er iets anders uit. Typisch voorbeeld van graceful degradation wat een best practice is. Het hele web is, HTML, CSS en browsers zijn met deze gedachte ontwikkeld.

Je zegt dat je één afbeelding niet "sexy" vind. En nu ga je dus je markup nodeloos ingewikkeld maken, extra CSS toevoegen en 3 afbeeldingen van een webserver ophalen om precies hetzelfde te doen.

Gebruik gewoon één afbeelding en tegen de tijd dat je MSIE kan laten vallen hoef je alleen wat CSS te veranderen.

[ Voor 8% gewijzigd door Johnny op 12-02-2013 21:50 ]

[NMe]

Saven schreef op dinsdag 12 februari 2013 @ 21:29:
hmm sliding doors gaat m niet worden denk ik, aangezien ik dan net zo goed de hele bar als 1 image kan doen

Niet echt?

Het heeft zeg maar een reden dat dit voor CSS3 eigenlijk dé manier was om dit te doen.

Johnny schreef op dinsdag 12 februari 2013 @ 21:47:
[...]

Het werkt ook perfect in MSIE 7, alleen ziet het er iets anders uit. Typisch voorbeeld van graceful degradation wat een best practice is. Het hele web is, HTML, CSS en browsers zijn met deze gedachte ontwikkeld.

GD is maar de helft van de tijd best practice. De andere helft wil je progressive enhancement.

[ Voor 40% gewijzigd door NMe op 12-02-2013 22:12 ]

[Johnny]

NMe schreef op dinsdag 12 februari 2013 @ 22:11:
[...]

Niet echt?

Het heeft zeg maar een reden dat dit voor CSS3 eigenlijk dé manier was om dit te doen.

[...]

GD is maar de helft van de tijd best practice. De andere helft wil je progressive enhancement.

Als je IE7 als uitgangspunt neemt dan is het dat ook.