ronden hoeken

Status
Niet open voor verdere reacties.
willem008

willem008

Gebruiker
Lid geworden
28 sep 2007
Berichten
792
Goede dag

Ik wil een div met ronden hoeken maken hoe kan ik dat het beste doen, ik heb al iets gevonden met het instellen van een radius
maar de werk in somige browser niet.

is er een manier dat in alle browser werkt
 
Hallo Willem,
Inderdaad, de border-radius is een css3-eigenschap en die wordt niet door alle in gebruik zijnde browsers ondersteund.
En ja, die andere manier is er. :)
Het makkelijkst is het om het met javascript te doen. *)
Dat gaat als volgt:
  • De elementen die ronde hoeken moeten krijgen, moeten een <div> zijn.
  • Deze <div>'s geef je een class="autocorners". Als een div al een class heeft, kan "autocorners" er gewoon achteraan, met een spatie ertussen (bv.: <div class="topic">...</div> wordt: <div class="topic autocorners">...</div>).
  • Je maakt een klein langwerpig image met de 4 hoekjes er in (het is langwerpig om op alle breedtes van de div's te passen).
  • Je zet een link naar het stylesheetje "autocorners.css" in de head van de pagina.
  • Je zet een link naar het javascriptje "autocorners.js" aan het eind, vlak voor de </body>.
Klaar.

Dit werkt in alle browsers die javascript aan hebben staan: Internet Explorer te beginnen met IE7, Chrome, Firefox, Opera en Safari.
Mocht javascript niet aan staan, dan komen er gewone rechte hoeken op scherm.
Het voorbeeld:

Met vriendelijke groet,
CSShunter
____________
*) Het kan ook zonder javascript, met alleen css en een image. Dat staat beschreven in het artikel "Flexibele ronde hoeken", met voorbeelden in de "Liquid corners playgarden".
 
Laatst bewerkt:
in ieder geval bedankt voor de link naar diet site,

ik ben even aan het stoeien geweest ,ik krijg nu wel eeen balk met ronden hoek.
Maar ik heb nu een foto geuplead corners9x9x1280.png waar in de ccs style naar verwezen wordt maar hoe kan ik dit nu van groote veranderen.

maar wat moet ik nu als ik bijv een andere foto of gewoon een div ronden hoeken wil geven.

html

<div class="cornerbox">
... content of this box ...
</div>



css

.cornerbox {


border: 1px solid #C00000;
background: #EFEFEF;
color: black;
padding: 9px 10px;
margin: 20px 0;
overflow: hidden;
}
.top-left, .top-right, .bottom-left, .bottom-right {
position: relative; /* for IE6 */
background-image: url(images/corners9x9x1280.png);
height: 9px;
font-size: 2px;
}
.top-left, .bottom-left { margin-right: 9px; }
.top-right, .bottom-right { margin-left: 9px; margin-top: -9px; }

.top-right { background-position: 100% 0; }
.bottom-left { background-position: 0 -9px; }
.bottom-right { background-position: 100% -9px; }

.inside {
position: relative; /* for IE6 */
border-left: 1px solid #C00000;
border-right: 1px solid #C00000;
background: #EFEFEF;
padding: 0 8px 0 10px;
overflow: hidden;
}
 
Laatst bewerkt:
Hoi Willem.
Ik begrijp nog niet helemaal de bedoeling. Heb je een pagina waarop de ronde hoeken moeten komen? En wat moeten er dan ronde hoeken krijgen: zijn dat de kadertjes om een div heen (daar is het script voor bedoeld), of gaat het eigenlijk om afbeeldingen die ronde hoekjes moeten krijgen?

Wat er ook is, en misschien makkelijker toe te passen, is het IE-CSS3 script, dat o.a. ronde hoeken kan maken, ook om afbeeldingen heen.


Met vriendelijke groet,
CSShunter
 
Ik kan nu aardig met css omgaan maar ik wil nu bijv een div van 200 breed en 25 hoog ronden hoeken geven
zodat het allemaal niet zo rechtkoekig is.

ja zou ook zou ik mijn foto's wat hoeken willen geven.

Ben hier al een tijdje mee bezig maar heb nog niet de goede manier gevonden.


bij voorbaat dank
 
Hoi Willem,
Eerst de ronde hoeken bij foto's.

Daarvoor moeten de afbeeldingen er als achtergrond-image in. Dat kan als volgt: de images worden vervangen door div's met dezelfde ID's:
HTML: 
...
    <div id="fotoproef">
    	<div id="fotoeen"></div>
    	<div id="fototwee"></div>
    	<div id="fotodrie"></div>
    </div>
...
Dan worden voor deze afbeeldingen op alle pagina's de algemene eigenschappen in het stylesheet style.css gezet:
Code: 
#fotoproef div {
	width: 160px;
	height: 150px;
	background-color: #14285F;
	-moz-border-radius: 10px;     /* voor oudere Firefoxen */
	-webkit-border-radius: 10px;  /* voor oudere Safari en Chrome */
	border-radius: 10px;          /* voor modernste versies */
	}
Nu is voor alle browsers gezorgd, behalve de Internet Explorers t/m IE8.
Die worden bediend met een Conditional Comment, dat in de head van elke pagina komt:
HTML: 
...
<!--[if lt IE 9]>
   <style type="text/css">
      #fotoproef div { behavior: url(scripts/ie-css3.htc); }
   </style>
<![endif]-->
Daarmee wordt het bestandje ie-css3.htc opgeroepen, dat ronde hoeken in oudere IE's mogelijk maakt.

Nu moet nog per pagina aangegeven worden welke foto's gebruikt worden voor #fotoeen, #fototwee en #fotodrie. Alweer in de head, bv.:
HTML: 
...
<style type="text/css">
	#fotoeen  { background-image: url(http://wlvdmeer-montage.nl/image/Photo-0571.jpg); }
	#fototwee { background-image: url(http://wlvdmeer-montage.nl/image/Photo-0561.jpg); }
	#fotodrie { background-image: url(http://wlvdmeer-montage.nl/image/S7300527.JPG); }
</style>
En dan komt deze testpagina er uit rollen: bliksekaters.nl/tests/willem-rondehoeken.htm

Met vriendelijke groet,
CSShunter
 
Aha, dat komt omdat de opgegeven maat voor alle foto-div's is: 160px bij 400px.
Dat is de ruimte waarin de achtergrond-afbeelding geplaatst wordt.
Maar: een achtergrond-afbeelding kan niet van formaat veranderen (wel met css3, maar dat ondersteunen alle browsers nog niet).


  • Als de afbeelding te klein is voor de opgegeven ruimte, wordt deze herhaald; behalve als je met css het repeat tegenhoudt, maar dan krijg je de achtergrondkleur waar het img niet zit.
  • Als de afbeelding te groot is voor de opgegeven ruimte, dan komt deze er maar gedeeltelijk op (dat was het geval in de testpagina van hierboven).

De background-afbeelding moet dus precies zo groot zijn als het te vullen vlak, en zo nodig moet de afbeelding op maat gemaakt worden (vergroot of verkleind) in een tekenprogramma.

Als je dit doet, zijn de oppervlakken aangepast en gaat het ook goed:
Code: 
div#fotoeen {
    width: 94px;
    height: 94px;
    background-image: url(http://kortebaandatabase.nl/joep/ronden_hoeken/image/paard.jpe);
    }
div#fototwee {
    width: 320px;
    height: 200px;
    background-image: url(http://wlvdmeer-montage.nl/image/Photo-0561.jpg);
    }
div#fotodrie {
    width: 200px;
    height: 200px;
    background-image: url(http://wlvdmeer-montage.nl/image/S7300527.JPG);
    }
Bij de laatste foto is de hoogte correct, maar de breedte te smal > de rechterkant wordt er dan afgesneden.

Verder kan je bij te grote afbeeldingen eventueel rangeren met de plaats van de afbeelding, via de background-position:
Code: 
div#fotodrie {
    width: 200px;
    height: 200px;
    background-image: url(http://wlvdmeer-montage.nl/image/S7300527.JPG);
    background-position: 100% 0;
    }
Nu staat foto3 met de rechterkant op 100%, helemaal rechts. Dan wordt ervan afgesneden wat er aan de linkerkant niet op past.



Met vriendelijke groet,
CSShunter

// Offtopic: het lage brandstofverbruik van de Mini-graafmachine schat ik op ca. 2 boterhammen p/uur. :d
 
Laatst bewerkt:
ok is allemaal nog wel even wennen maar ik ga eruit komen ,alleen nog even dit
ik heb nu dit gemaakt

http://kortebaandatabase.nl/joep/werkmap/index.php

in bijv opera gaat het goed (behalve dat de foto nog niet goed is) maar in internet exploder krijg ik hem niet goed
zal best iets simpels wezen maar toch.
 
Laatst bewerkt:
Ik heb nog even wat gemaakt in een layout maar ik krijg bij internet expl de foto's niet in het content , bij opera en goole chrone gaat het
wel goed

ps het content is nog wel te kort maar even voor het idee

http://kortebaandatabase.nl/joep/ronden_hoeken/rond.php

hij staat in de html toch in het content,heb ook al positie absolute toegevoegd maar lukt ook niet
 
Laatst bewerkt:
Waarschijnlijk zitten de verschillende opgegeven hoogtes dwars.
Bedoel je dit?
HTML: 
<div id="hoofdcontainer">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content">content 
        <div id="fotoproef">
             <div id="fotoeen"></div>
             <div id="fototwee"></div>
             <div id="fotodrie"></div>
        </div>
    </div>
    <div class="clear"><!-- ! --></div>
</div>
Met deze css:
Code: 
body{
   background-color:#ffff00;
}
#hoofdcontainer{
   width: 958px;
   margin: 0 auto;
   background-color: #14285f;
}
#header {
   height: 120px;
   width: 950px;
   text-align:center;
   color: #fff;
   background-repeat: no-repeat;
   background-color: #000;
}

#menu {
   background-color: #14285f;
   height: 400px;
   float:left;
   width:139px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 30px;
   font-size: 17px;
   margin-top: 0;
}

#content {
   float:left;
   width: 794px;
   background-color: #ccc;
   color:#fff;
   padding: 45px 0 0 25px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
}
.clear {
   clear: both;
}
Zodat de grijze achtergrond doorloopt onder de ge-floate #content?
 
Laatst bewerkt:
Ik heb nu die clear class toegevoegd zowel in de stylesheet als in de html maar hij blijft bij
inter expl onder het content.

dit zijn van die dingetjes die wil ik hellemaal snappen voordat ik het toepast op mijn website.
 
Hoi Willem,
Het loont vaak de moeite om eerste even de html-validator op de pagina los te laten. Die signaleert twee foutjes, o.a. een </> ipv een </div>.

Maar dat is het hier niet waarom IE afwijkt.
Stap 2 is even kijken wat de verschillende IE-versies doen. Dat kan online met Netrenderer (voor in de favorieten!).
Dan zien we:
  • IE7 trekt ten onrechte de blauwe <body> background-kleur door tot waar het gefloate menu eindigt.
  • IE8 doet dat niet, maar heeft problemen met de stapeling van de lagen.
  • IE9 doet het zoals het hoort, en zoals de andere browsers doen.

De verklaring? Eigenlijk alleen maar: "Het is weer een versie van Internet Explorer die zich niet aan de standaarden houdt, uit eigenwijzigheid of door een bug."
Verder valt het gewoon niet te begrijpen, en hoef je van het waarom niet wakker te liggen.
Wel soms van de manier om de IE-problemen te omzeilen! ;)

Met vriendelijke groet,
CSShunter
 
ok
ga me er verder in verdiepen,
mij bedoeling is eigelijk op foto's en div's ronde hoeken te geven

Ik ben nu bezig om een site'tje voor een jongetje van 12 die met zijn opa wat op internet gaat zetten.

nou zou ik bijv op de startpagina de twee kleine foto's ronde hoeken willen geven maar wel zo dat het het liefst in
alle brouwsers ondersteunt, ook zou ik bijv de vakken op de pagina's machines wat ronder willen maken.

dit alles om een beetje van dat hoekerige af te komen.

http://kortebaandatabase.nl/joep/index.php
 
Om nog een keer terug te komen op het bovenstaande linkje met de ronde hoeken
ik heb hem nu even aangepast met een z-index ,ik heb zowel het content als het fotoblok een z-index meegeven
nu komt hij wel in het content te staan,

mijn vraag is dit een beetje de manier of mag je dat eigelijk niet zo doen.

ps dat netrenderen staat zeker nu in mijn favorieten ,heb ook even die link getest
ging goed alleen bij inter netxpl 5,5 en 6.0 geeft hij geen foto's weer alleen het vak, moet je daar vandaag de dag nog rekening meehouden
of zijn deze brouwsers uit de tijd.
 
Laatst bewerkt:
Als je de <div class="clear"><!-- ! --></div> na de </div> zet waar hij nu vóór staat, wordt in alle browsers ook het blauw van de menu-kolom tot onderaan doorgetrokken (dat eigenlijk het blauw van de #hoofdcontainer is).
Dan kan de opgegeven hoogte van 500px van de #content komen te vervallen, en ik denk dat dan ook de {position:relative} van de #header en de #content niet meer nodig is. Ik gok dat ook de z-indexen kunnen vervallen.

Maar verder is alles wat mij betreft toegestaan om de IE-versies aan de praat te krijgen, eventueel met een Conditional Comment als het anders geen valid html is. :)

O ja, IE6 en voorgangers hoef je geen rekening meer mee te houden. In de statistieken van browser-gebruik komen ze niet meer voor, dwz ze zitten tussen de 0 en de 1%. Die mogen wel eens een nieuwe versie nemen!
 
Laatst bewerkt:
hallo

Ik heb nu even een foto met ronden hoeken in de site gemaakt.
alleen als ik hem in internet exploder open toont hij eerst de foto half naast de site ,en als
ik dan op vernieuwen(f5) druk springt hij naar de goede positie.

legt dat aan mijn browser of is dat overal zo

http://kortebaandatabase.nl/joep/index.php
 
Laatst bewerkt:
Hoi Willem,
Bij mij in Internet Exporer 7 komt hij meteen op de goede plaats.
Maar als je het browser-window van formaat verandert terwijl de pagina open staat, blijft de ronde hoeken-afbeelding wel op een rare plaats staan. Kennelijk werkt dan de rendering met het ie-css3.htc behavior-script niet goed meer.

Daar heb ik een klein javascriptje voor bedacht, dat bij een resize de pagina nog een keer inlaadt: dan heb je er geen last van. Dit hoeft alleen voor de oudere IE's (7 en 8), dus het kan opgenomen worden in het Conditional Comment:
Code: 
<!--[if lt IE 9]>
	<style type="text/css">
		#fotoproef div { behavior: url(scripts/ie-css3.htc); }
	</style>
	<script type="text/javascript">
		window.onresize = function(){
			location.href=location.href;
		}
	</script>
<![endif]-->

PS: Check je nog even de html- en de css-validator? ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan