html - tipos - No se muestra el borde derecho
tipos de etiquetas html (2)
¿sabría por qué el borde azul no se muestra en el lado derecho de mi campo? (el campo tiene un ancho del 100%) Muchas gracias http://jsfiddle.net/KtEdG/
CSS:
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 1000px;
overflow: hidden;
}
.block {
padding: 20px;
background-clip: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow-y: auto;
overflow-x: hidden;
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
/*************************************************************
* CONTACT
*************************************************************/
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
margin-top: 8px;
}
.contact-form textarea {
float: left;
margin-top: 20px;
margin-bottom: 10px;
width: 100%;
height: 70px;
overflow: auto;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label {
cursor: pointer;
}
form textarea, form input[type=text], form input[type=password], form input[type=email] {
padding: 6px 8px;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
background: #d5d5d5 url(''../images/form-bg.png'') left top repeat-x;
color: #7c7c7c;
font-family: ''Arial'', sans-serif;
resize: none;
}
form input:focus, form textarea:focus {
outline: none;
border: 1px solid #0069BA;
background: #d5d5d5 none;
}
form input[type=submit] {
padding: 8px 50px;
border: 0;
background: #0064C4 url(''../images/form-caret.png'') right center no-repeat;
color: #fff;
text-transform: uppercase;
font-weight: normal;
font-size: 14px;
font-family: ''Arial'', sans-serif;
cursor: pointer;
}
#addressbox {
position: relative;
padding: 10px 0px 0 10px;
margin-bottom: 20px;
}
#addressbox p {
line-height: 14px;
}
#contact li {
display: inline;
padding-right: 5px;
color: #333;
list-style: none;
font-weight: 500;
font-size: 13px;
}
#contact li a {
border-bottom: none;
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 13px;
}
HTML
<div class="wrapper white-background">
<div class="block">
<div class="block-left">
<div id="addressbox">
<p><strong>fdsfsd</strong></p>
<p>3, rudsfdser</p>
<p> L53ddfsfurg)</p>
<ul id="contact" class="ul-none">
<li><i class="fa fa-phone blue"></i> +352 691 123.456</li>
<li><i class="fa fa-envelope blue"></i> <a href="javascript:sendAnnotatedMailTo(''contact'',''bfdfs'',''dfsf'',''Contact via blondiau.lu'','''')">[email protected]</a></li>
<li><i class="fa fa-map-marker blue"></i><a href="http://goo.gl/I47" target="_blank"> Plan d''accès</a></li>
</ul>
<div class="contactarrow"><img src="images/contact-handwriting.png" alt="contact-handwriting" width="339" height="69"></div></div>
<!-- End DIV addressbox -->
</div>
<!-- End DIV block-left -->
<div class="block-right">
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Votre message et vos coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
<p class="error" style="display:none;">E-mail non valide et/ou message vide</p>
</form>
</div>
<!-- /.contact-form -->
Debido a que su área de textarea está desbordando .block-right y ya está usando overflow: hidden; no puede ver la parte derecha de su área de textarea , puede asignar un width fijo como
.contact-form textarea {
float: left;
margin-top: 20px;
margin-bottom: 10px;
width: 462px;
height: 70px;
overflow: auto;
}
O si desea mantener el width: 100% del que tendrá que deshacerse del overflow: hidden; de .block-right
Además, tiene una gran cantidad de CSS, lo que podría no ser útil, por lo que el código es muy complicado en general.
Además, como se acaba de notar, está utilizando la propiedad de box-sizing pero no está utilizando las propiedades prefijadas, por lo que fallará en muchos navegadores, así que úselos
.block {
padding: 20px;
background-clip: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Other Properties */
}
El área de textarea está desbordando, como dice el Sr. Alien, ya que el width:100% + border es más de 100% (duh). Para incluir el border y el padding "dentro" de su width , puede usar box-sizing:border-box .
Simplemente agregue box-sizing:border-box de .contact-form textarea a .contact-form textarea y estará bien. Más información disponible en http://css-tricks.com/box-sizing/ .