CSS - Background images + rounded corners

Vragen over templates en CSS op Joomla! 1.5.

Moderator: pe7er

Forum rules
Forum Regels
Locked
Roy2A
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sun Sep 06, 2009 1:28 pm

CSS - Background images + rounded corners

Post by Roy2A » Mon Dec 20, 2010 9:07 pm

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

 
micran
Joomla! Intern
Joomla! Intern
Posts: 54
Joined: Tue Aug 26, 2008 7:48 pm
Contact:

Re: CSS - Background images + rounded corners

Post by micran » Mon Dec 20, 2010 9:57 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sun Sep 06, 2009 1:28 pm

Re: CSS - Background images + rounded corners

Post by Roy2A » Tue Dec 21, 2010 11:28 am

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
Joomla! Intern
Joomla! Intern
Posts: 54
Joined: Tue Aug 26, 2008 7:48 pm
Contact:

Re: CSS - Background images + rounded corners

Post by micran » Tue Dec 21, 2010 12:03 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sun Sep 06, 2009 1:28 pm

Re: CSS - Background images + rounded corners

Post by Roy2A » Mon Jan 03, 2011 8:51 pm

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

Joskhuu
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Fri Aug 17, 2007 1:14 pm
Location: Netherlands
Contact:

Re: CSS - Background images + rounded corners

Post by Joskhuu » Tue Feb 15, 2011 8:50 am

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

User avatar
dam-man
Joomla! Exemplar
Joomla! Exemplar
Posts: 7961
Joined: Fri Sep 09, 2005 2:13 pm
Location: The Netherlands
Contact:

Re: CSS - Background images + rounded corners

Post by dam-man » Thu Feb 17, 2011 6:34 am

Ik was hier ook me bezig, maar ben gestopt met het HTC bestand, ik krijg deze ook niet aan de praat.
Robert Dam - Joomla Forum Moderator
Dutch Boards | Joomla Coding Boards | English Support Boards

Joskhuu
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Fri Aug 17, 2007 1:14 pm
Location: Netherlands
Contact:

Re: CSS - Background images + rounded corners

Post by Joskhuu » Thu Feb 17, 2011 7:35 am

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

 

Locked

Return to “Templates”