Page 1 of 1

CSS - Background images + rounded corners

Posted: Mon Dec 20, 2010 9:07 pm
by 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?

Image


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

Re: CSS - Background images + rounded corners

Posted: Mon Dec 20, 2010 9:57 pm
by 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

Re: CSS - Background images + rounded corners

Posted: Tue Dec 21, 2010 11:28 am
by 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.)

Re: CSS - Background images + rounded corners

Posted: Tue Dec 21, 2010 12:03 pm
by 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

Re: CSS - Background images + rounded corners

Posted: Mon Jan 03, 2011 8:51 pm
by Roy2A
Micran, het is opgelost door de plaatjes precies op maat te maken. Bedankt voor je support!

Re: CSS - Background images + rounded corners

Posted: Tue Feb 15, 2011 8:50 am
by 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

Re: CSS - Background images + rounded corners

Posted: Thu Feb 17, 2011 6:34 am
by dam-man
Ik was hier ook me bezig, maar ben gestopt met het HTC bestand, ik krijg deze ook niet aan de praat.

Re: CSS - Background images + rounded corners

Posted: Thu Feb 17, 2011 7:35 am
by 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