CSS - Background images + rounded corners

[Roy2A]

Hoi,

Ik probeer ik de standaard template the achtergrond van het main menu te veranderen. Ik heb 8 png files (4x rounded corners + 4x sliced image voor top/bottom/left/right).

De rounded corners gaat prima maar als ik via repeat-x het "top" image toevoeg in css loopt deze door tot achter de rounded corners (waardoor het geen rounded corners meer zijn ;-)

weet iemand een oplossing hiervoor?




Verder weet ik niet zeker of het met div's gaat zoals standaard in de template staat om ik in totaal 8 plaatjes wil gebruiken ipv4. Of kan ik onbeperkt div's toevoegen?


Dit is de CSS die ik gebruik:

Code: Select all

div.module_bluebox   {    
background: url(../images/bluebox/top_left.png) 0 0 no-repeat;
padding-left:5px;
background: url(../images/bluebox/top.png) 0 0 repeat-x;
margin-right:-15px;
}

div.module_bluebox  div {    
background: url(../images/bluebox/bottom_left.png) 0 100% no-repeat;
margin:0px;
border:0px;
}

div.module_bluebox  div div {    
background: url(../images/bluebox/top_right.png)  100% 0 no-repeat;
padding-right:5px;
}

div.module_bluebox  div div div {    
background: url(../images/bluebox/bottom_right.png)  100% 100% no-repeat;
padding-bottom:0px;
}

div.module_bluebox  div div div div{    
background: url(../images/bluebox/top.png) 0 0 repeat-x ;
}

Alle suggesties zijn welkom!

Roy

[micran]

Dag Roy,

Je kunt meer div's toevoegen wanneer je die nodig hebt.
Ik zie niet direct in waarom je meer dan 4 plaatjes nodig zou hebben.
De plaatjes zijn achtergrondplaatjes, waarbij de volgende over de vorige heen valt.
Wanneer je de breedte of hoogte groter maakt dan wat ze feitelijk kunnen worden past het altijd.

In ieder geval: wil je de hoeken bedekken, dan moet je eerst de rechte kanten laden in de eerste 4 divs, en vervolgens de hoeken er overheen zetten in de volgende serie divs.

Groet,
Micran

[Roy2A]

Bedankt voor de snelle reactie Micran,

Reden waarom ik 8 images wil gebruiken is omdat ik de laadsnelheid van het menu wil verhogen (door 8 kleine plaatjes te gebruiken ipv paar grotere) maar als ik 8 div's moet gaan gebruiken weet ik ook niet of dat bevordelijk is....

Verder loop ik met het over elkaar plaatsen van de background images tegen het volgende probleem:
De rounded corner images hebben een transparant hoekje waardoor de body background zichtbaar is (zodat de body background kan wijzigen zonder alle hoekjes aan te passen). Als ik deze rounded corners over de rechthoekige top background image zet zie ik het rechthoekige image door het transparante hoekje.

Is hier een oplossing voor?

(Misschien moet ik maar met 2 background images gaan werken top en down.)

[micran]

Dag Roy,

Achtergrondplaatjes zullen toch niet zo zwaar zijn? Je kunt met het oog op snelheid beter het aantal aanvragen voor plaatjes verlagen.

Wanneer je vaste breedte hebt voor het element met ronde hoeken kan je natuurlijk het eenvoudigst met 2 plaatjes werken.

Wil je met 4 plaatjes werken en je probleem oplossen, dan zal je een systeem moeten maken waarmee je speelt met margin of padding, waarmee je voorkomt dat volgend plaatje helemaal over je transparante ronde hoek schuift.

Groet,
Micran

[Roy2A]

Micran, het is opgelost door de plaatjes precies op maat te maken. Bedankt voor je support!

[Joskhuu]

Hallo,
CSS is misschien een makkelijkere/betere oplossing als iemand je kan vertellen hoe je het voor elkaar moet krijgen in IE8 en hoger.

Voeg dit aan de CSS van je module:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;

Dan werkt het in ieder geval in Firefox, safari en chroom.
Voor IE8 moet je gebruik maken van "border-radius.htc" alleen ben ik er niet helemaal uit, hoe dit werkt want bij mij verdwijnt dan de hele achtergrond.

Gr. Jos

[dam-man]

Ik was hier ook me bezig, maar ben gestopt met het HTC bestand, ik krijg deze ook niet aan de praat.

[Joskhuu]

Ik denk dat HTC in combi met andere css website misschien wel zal werken maar volgens mij totaal niet met Joomla, er is dus volgens mij geen goeie manier om ronde hoeken te krijgen in IE

Gr. Jos