Checkbox margin

wimmpie · 24 November 2012

Hallo,

ik heb weeral een probleem met mijn script...
De checkbox op mijn registratiepagina heeft een grote margin links en rechts,
zoals hieronder op de foto...

nu heb ik echt geen enkel idee waaraan dit kan liggen...
Dit is de html code:

HTML

<html><head>  <link href="css/css.css" rel="stylesheet" type="text/css" media="screen">  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  <script type="text/javascript">      function init () {        document.getElementById ('my_link').onclick = function () {            document.getElementById ('registreer').submit ();            return false;        }    }    window.onload = init;    </script></head><body>  <h1>registreren</h1>  <div style="width:49%; float:left;">  <h2>Algemene Voorwaarden</h2>  <ul>    <li>Het gebruik van bots of proxy's is verboden.</li><br>    <li>Maximum 1 account per persoon.</li><br>    <li>Volg altijd instructies van de crew op. Ga niet op een ongepaste manier in discussie met de crew.</li><br>    <li>Maak geen reclame voor andere websites.</li><br>    <li>Toon geen racistische, discriminerende of 18+ content op deze site.</li><br>    <li>Vraag nooit naar iemand zijn wachtwoord, een crewlid zal dit ook nooit vragen.</li><br>    <li>Accounts hacken, het misbruik maken van fouten in een spel is ten strengste verboden.</li><br>    <li>Legend of the samurai mag gebruik maken van cookies.</li><br>    <li><b>Door op Legend Of The Samurai in te loggen ga je automatisch akkoord met deze regels</b></li>  </ul>  </div>    <div style="width:50%; float:right;"> <form method="post" id="registreer">        <div><b>Gebruikersnaam:</b><br /><div class="login_div"><input type="text" name="login" size="24"/></div></div>        <div><b>Wachtwoord:</b><br /><div class="login_div"><input type="password" name="ww" size="24"/></div></div>        <div><b>Herhaal Wachtwoord:</b><br /><div class="login_div"><input type="password" name="hww" size="24"/></div></div>        <div><b>E-mail:</b><br /><div class="login_div"><input type="text" name="mail" size="24"/></div></div>        <div><input type="checkbox"><b>Ik heb de Algemene Voorwaarden gelezen en ben akkoord.</b></div>        <div class="login_div">          <div class="button" style="text-align: center;">          <a href="#" id="my_link">REGISTREER</a>          </div>        </div>      </form>  </div></body></html>

Ziet er iemand waaraan dit kan liggen?
Alvast bedankt

Edit:
om één of andere reden word mijn code opgeslagen zonder enters :s

eeyk · 24 November 2012

je moet

doen en dan met CSS de style aanpassen.

pekelterror · 24 November 2012

Helaas ontbreekt de CSS wat juist erg belangrijk is bij een fout met de opmaak.

Gezien het plaatje vermoed ik dat je opmaak hebt voor input, om zo gelijk de textbox en submit allemaal op 1 formaat te maken.
Een checkbox valt ook gewoon onder input, het gebruikt namelijk ook het input element.

Geef de checkbox opmaak door middel van een ID of Class, of indien er geen andere checkbox op je pagina komt gebruik iets als onderstaand:

PHP

input[type='checkbox']{
// Hier de opmaak voor je checkbox.
}

ismail123 · 24 November 2012

Haal <div> en </div> uit de checkbox

wimmpie · 24 November 2012

Als ik de checkbox een class geef met als margin: 0px gebeurd er niks....
hier is de css

Code

body {
  background:transparent;
}


a {
  text-decoration: none;
  }
a:link {
  color: #ffffff;
  }
a:active {
  color: #ffffff;
  }
a:visited {
  color: #ffffff;
  }
a:hover {
  color: #e2d8ce;
  }
  
  
.intro_bg a {
  color: #000000;
  }


.intro_bg a:hover {
  color: #968d84;
  }


  
.content {
  width: 1000px;
  margin: 0px auto;
}
.title {
  font-family: Viner Hand ITC;
  color: #e2d8ce;
  font-size: 43px;
  text-align: center;
}


.page {
  background-image: url('../images/layout/bg.png');
  width: 802px;
  height: 614px;
  margin: auto;
}


.char {
  float: left;
  width: 422px;
  height: 614px;
  background-image: url('../images/layout/char.png');
  background-repeat: no-repeat;
  background-position: 20px 20px;
  
}


.intro_bg {
  padding-top: 30px;
  float:left;
}
.intro {
  font-family: Verdana;
  font-size: 13px;
  color: #000000;
  padding-left: 5px;
  padding-top: 7px;
  background-color: rgba(255, 255, 255, 0.324);
  width: 357px;
  height: 77px;
  border-radius:5px;
}


.reg_bg {
  background-color: rgba(255, 255, 255, 0.324);
  border-radius:5px;
  margin-top: 20px;
  float:left;
  width: 264px;
  height: 38px;
}
.reg {
  font-family: Verdana;
  font-size: 25px;
  font-weight: bold;
  color: #000000;
  padding-left: 5px;
  padding-top: 2px;
}


.login_font {
  font-family: Verdana;
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  margin-bottom: 5px;
}


.login_div {
  background-color: rgba(255, 255, 255, 0.324);
  width: 357px;
  height: 77px;
  border-radius:5px;
  width: 182px;
  height: 22px;
}


.ww_font {
  margin-top: 5px;
  font-family: Verdana;
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  margin-bottom: 5px;
}


input {
  background: transparent;
  border: transparent;
  width: 182px;
  height: 22px;
}
.login {
  font-family: Verdana;
  font-size: 17px;
  font-weight: bold;
  color: #000000;
  padding-left: 5px;
}


.screen_bg {
  float:left;
  width: 327px;
  height: 206px;
}


.screenbox {
  width: 357px;
  height: 206px;
  background-color: rgba(255, 255, 255, 0.324);
  border-radius:5px;
}
.screenbox img.screen{
  float: left;
  margin-left: 15px;
  width: 100px;
  height: 90px;
  border: 0px;
  margin-top: 10px;
}


.link {
  text-align: center;
  clear: both;
  font-size: 15px;
  font-family: Verdana;
  font-weight: bold;
  color: #ffffff;
  }


.footer {
  text-align: center;
  font-size: 14px;
  font-family: Verdana;
  color: #ffffff;
  margin-top: 5px;
  }


/* NU HET LIGHTBOX GEDEELTE*/


.close {
  font-family: Verdana;
  font-size: 20px;
  font-weight: bold;
  width: 50px;
  float: right;
  margin-top: 20px;
  margin-right: 5px;
  text-align: center;
  }
  
.close a:link {
  color: #000000;
  }
.close a:visited {
  color: #000000;
  }
.button a:hover {
  color: #968d84;
  }  
  
.framez {
  width: 760px;
  height: 550px;
  margin-top: 15px;
  margin-left: 20px;
  border: transparent;
  }


#test {
  position: absolute;
  background-image: url('../images/layout/bg.png');
  width: 802px;
  height: 614px;
  margin: 0px auto;
  margin-top: -654px;
  margin-left: 99px;
  display: none;
  }
  
/* NORMAL PAGE CSS */


h1 {
  font-family: Viner Hand ITC;
  text-transform: uppercase;
  margin-top: -10px;
  }
  
h2 {
  font-family: Verdana;
  }
  
div {
  font-size: 13px;
  font-family: Verdana;
  }  
  
.button a:link {
  color: #000000;
  }
  
.button a:visited {
  color: #000000;
  }


.button a:hover {
  color: #968d84;
  }  


.button {
  font-family: Verdana;
  font-size: 17px;
  font-weight: bold;
  color: #000000;
}


.checkbox {
  margin: 0px;
  }

Toon Meer

M.Beers · 27 November 2012

Je checkbox krijgt de breedte van het input veld mee...

Code

input {
  background: transparent;
  border: transparent;
  width: 182px;
  height: 22px;
}

om dit op te lossen zou je hiervan kunnen maken:

Code

input[type="text"], input[type="password"] {
  background: transparent;
  border: transparent;
  width: 182px;
  height: 22px;
}

DNS update Directadmin

Graag advies voor mijn website

Ik wil op afstand studeren, kennen jullie Tech?

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

Dating software

250 Nieuwe domeinnamen April 2024

Xenforo buckaroo plugin

Checkbox margin

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen