Beste,

Ik probeer een division een ronde hoek te geven, links en rechts.
Nu heb ik onderstaande code en lukt het niet. Heeft iemand enig idee hoe ik links en rechts een ronde hoek krijg? Ik heb twee afbeeldingen, een linker en een rechter hoek.

Yoeri.

Code:

.header {
	height:60px;
	width:100%;
	background:#bd5407 url(headerhoeklinks.gif) bottom right no-repeat;
	
}

Yoeri, waarschijnlijk is er iets fout gegaan of ben je het vergeten bij te voegen, want ik zie je code niet. Kun je deze er alsnog even bij zetten?

Inderdaad Bas, heb het even toegevoegd. :)

Met css 3 gaat dit erg makkelijk, alleen is het probleem dat ie 8 het niet ondersteund (hogere versie misschien wel).

Hiervoor zijn volgens mij ook weer andere oplossingen.

Even voor de duidelijkheid: ik wil geen border als hoek. Achter het 'rondehoek-plaatje' zit nog schaduw.

Wat ben ik blij dat CSS 3 dit allemaal ondersteund! Helaas is Microsoft zo eigenwijs om dit niet te ondersteunen. Geruchten gaan dat dit wel het geval is bij IE9.

Ik denk dat je nu al fout begint. Het is niet mogelijk om 2 aparte plaatsjes in 1 'class' te zetten. Je zou gebruik moeten maken van meerdere classes om de 2 plaatjes aan te spreken.

Kijk eens op http://css3pie.com/. Je kan dan gebruik maken van de CSS3 border-radius ook in IE6+ zonder javascript.

Ik had inderdaad al de border-radius gebruikt. Helaas zonder de schaduw maar zo ziet het er ook wel goed uit.

Dan maak je toch gebruik van box-shadow?

Origineel gepost door Leon Zoutewelle

Kijk eens op http://css3pie.com/. Je kan dan gebruik maken van de CSS3 border-radius ook in IE6+ zonder javascript.

Ik denk dat dit niet zonder javascript is te gebruiken. Dit heb je er wel bij nodig, anders kan IE er nog niet mee overweg. Pas vanaf IE9.0 wordt CSS3 pas ondersteund. Correct me if i'm wrong.

Origineel gepost door Leon Zoutewelle

Dan maak je toch gebruik van box-shadow?

De volgende code aanvullen bij de DIV waarvan je schaduw wil gebruiken. Uiteraard kun je zelf de aanpassingen verrichten door de waardes te veranderen.

#Voorbeeld {
-moz-box-shadow: 5px 5px 2px #000; **Support voor Firefox 3.5
-webkit-box-shadow: 5px 5px 2px #000; **Support voor Safari
box-shadow: 5px 5px 2px #000; **Support voor IE9, Firefox4.0 en OPERA
}

@paulijnmker

Als je even op de website had gekeken dan zie je dat javascript niet nodig is. http://css3pie.com/documentation/getting-started/

Je hebt een .htc bestand die het werk voor je doet.

Code:

.header {
	height:60px;
	width:100%;
	background:#bd5407 url(headerhoeklinks.gif) bottom right no-repeat;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
}

Volgens mij is hij zo goed.
als het bugt wil je dat dan even doorgeven?

Origineel gepost door Leon Zoutewelle

@paulijnmker

Als je even op de website had gekeken dan zie je dat javascript niet nodig is. http://css3pie.com/documentation/getting-started/

Je hebt een .htc bestand die het werk voor je doet.

Bedankt voor deze opheldering, ik had er nog nooit van gehoord. Dan is dit zeker een goed alternatief.

Helaas ccs3pie kan niet draaien zonder JavaScript een behavioris namelijk javascript