afgeronde hoeken

Status
Niet open voor verdere reacties.
R

ringo1

Gebruiker
Lid geworden
12 nov 2011
Berichten
112
beste,

ik gebruik nu dit script

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* afgeronde hoeken */
.arhoeken {background:transparent; width:200px; /* boxbreedte */}
.arb1, .arb2, .arb3, .arb4 {display:block; overflow:hidden; background:transparent; font-size:1px;}
.arb1, .arb2, .arb3 {height:1px;}
.arb2, .arb3, .arb4 {background:#FFDEAD; border-left:1px solid #000000; border-right:1px solid #000000;}
.arb1 {margin:0 5px; background:#000000;}
.arb2 {margin:0 3px; border-width:0 2px;}
.arb3 {margin:0 2px;}
.arb4 {height:2px; margin:0 1px;}
.arboxinhoud {
  display:block; 
  background:#FFDEAD; 
  border:0 solid #000000; 
  border-width:0 1px;
  text-align: center;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
}

 
</style>


</head>
<body>
<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="http://www.vissersparadijs.be">forumindex</a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>
</br>
<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="http://www.google.be">google</a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>
</br>
<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="http://www.google.be">google</a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>


</body>
</html>

dit werkt wel goed maar hoe kan ik dit in het midden zetten? nu staan ze rechts maar zou ze in het lidden van mijn blad willen.

grtz ringo
 
Vaak wil het met die commando wel lukken: <center> </center> Mocht deze niet lukken dan moet je het even met hoofdletters proberen ;)
 
Da's geen script maar gewoon wat CSS en HTML, javascript heeft er niets mee te maken. Maar om je vraag te beantwoorden. Als je aan het begin margin:0 auto; toevoegt aan .arhoeken dan komen de drie knoppen in het midden te staan. De code bovenaan komt er dan zo uit te zien
Code: 
.arhoeken {
background:transparent; width:200px; /* boxbreedte */
margin:0 auto;
}

EDIT: Overigens kun je tegenwoordig veel simpeler ronde hoeken krijgen door border-radius te gebruiken (al werkt dat niet in IE8 en lager, maar dat is dan jammer). Als je bijvoorbeeld een div met class="hoeken" ronde hoeken mee wilt geven doe je dat zo.
Code: 
.hoeken{
border-radius:10px; //Afgeronde hoeken met een straal van 10 pixels
-moz-border-radius:10px;// Zodat het ook in oudere versies van Firefox werkt
-webkit-border-radius:10px;/ Zodat het ook in Safari werkt
}

DennisIT zei:
Vaak wil het met die commando wel lukken: <center> </center> Mocht deze niet lukken dan moet je het even met hoofdletters proberen ;)
Klik om te vergroten...
Slecht advies, de <center> tag is verouderd en hoort niet meer gebruikt te worden.
 
Laatst bewerkt:
hallo,

met de <center></center> lukt het
maar met dit
Code: 
.arhoeken {
background:transparent; width:200px; /* boxbreedte */
margin:0 auto;
}

niet

grtz ringo
 
Heb je een link naar de volledige site? Hier werkt het namelijk gewoon.
 
dit is de volledige code

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>vissersparadijs/Snoekvissers</TITLE>
<style type="text/css">
/* afgeronde hoeken */
.arhoeken {
background:transparent; width:200px; /* boxbreedte */
margin:0 auto;
}
.arb1, .arb2, .arb3, .arb4 {display:block; overflow:hidden; background:transparent; font-size:1px;}
.arb1, .arb2, .arb3 {height:1px;}
.arb2, .arb3, .arb4 {background:#FFDEAD; border-left:1px solid #000000; border-right:1px solid #000000;}
.arb1 {margin:0 5px; background:#000000;}
.arb2 {margin:0 3px; border-width:0 2px;}
.arb3 {margin:0 2px;}
.arb4 {height:2px; margin:0 1px;}
.arboxinhoud {
  display:block; 
  background:#FFDEAD; 
  border:0 solid #000000; 
  border-width:0 1px;
  text-align: center;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  padding: 5px;
	
}
body { background-color:#433B38;
       color:#FFDEAD;
			 }
/* css */

img
{
   border: 0;
}
			 

</STYLE>
</head>
<body>
<br>
<br>
<br>
<p align="center"><img src="foto's/handje.gif" alt="handje">&nbsp; Klik 1 van de linken aan om de albums te bekijken &nbsp;<img src="foto's/handje.gif" alt="handje"></p>
<br>

<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="mesure.html">Foto's van de mesure</a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>
</br>
<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="wedstrijden.html">Wedstrijd foto's</a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>
</br>
<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
	<div class="arboxinhoud">
	<a href="etentje.html">Etentje en prijsuitreiking 2011 <img src="logo's/beker.gif" alt="beker" width="30" height="35"/></a>
	</div>
<b class="arb4"></b><b class="arb3"></b><b class="arb2"></b><b class="arb1"></b>
</div>


<br>
<br>
<p align="center"><font size="3">Designed by: van der brugge ringo</font></p>
</body>
</html>
 
Hier staan ze gewoon in het middden met die code. Misschien moet je de cache van je browser even leeghalen.
midden.jpeg
 
in mozilla en chrome staan ze in het midden. explorer niet. raar
 
Ah, IE weer.... Helaas kan ik daar op het moment even niet in testen (zit op Linux).
 
idd explorer doet daar weer moeilijk in, maar de meeste gebruiken nog explorer dus moet ik het wel goed zien te krijgen op de goede manier



ps:

ik heb het op deze manier ook kunnen oplossen

zo was het eerst

<!-- voor ronde hoeken -->
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
<div class="arboxinhoud">
<a href="mesure.html">Foto's van de mesure</a>
</div>

en dit heb ik er boven geplaatst
<div class="center" align="center">

dan krijg ik dit

<!-- voor ronde hoeken -->
<div class="center" align="center">
<div class="arhoeken">
<b class="arb1"></b><b class="arb2"></b><b class="arb3"></b><b class="arb4"></b>
<div class="arboxinhoud">
<a href="mesure.html">Foto's van de mesure</a>
</div>

is dit ook een goede manier?

grtz ringo
 
Laatst bewerkt:
Dat is in elk geval wel valide (al snap ik nog niet waarom het nodig is, IE.... JE hoeft dat align="center" trouwens niet te doen. Die div heeft al de clas center dus je hoeft dan aleen nog maar
.center{
text-align:center;
}
aan de CSS toe te voegen om hetzelfde te bereiken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan