Border-right ne montrant pas
voulez-vous savoir pourquoi le bleu de la frontière ne pas afficher sur le côté droit de mon domaine? (le terrain a une largeur de 100%) un grand merci 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 -->
source d'informationauteur Greg
Vous devez vous connecter pour publier un commentaire.
Parce que votre
textarea
déborde.block-right
et puisque vous êtes à l'aide deoverflow: hidden;
vous ne pouvez pas voir la partie droite de votretextarea
vous pouvez affecter à un certain fixewidth
commeDémo
Ou si vous voulez coller à
width: 100%
que vous aurez à se débarrasser deoverflow: hidden;
de.block-right
Demo 2
Aussi, vous avez beaucoup de CSS, ce qui pourrait ne pas être utile, donc le code est très malpropre en général.
J'ai aussi remarqué, vous êtes à l'aide de
box-sizing
de la propriété, mais vous n'êtes pas en utilisant le préfixe de propriétés, de sorte qu'il échouera dans de nombreux navigateurs, afin de les utiliserDémo
La
textarea
déborde comme M. Alien est à dire depuiswidth:100%
+border
est de plus de 100% (duh). Pour inclureborder
etpadding
"l'intérieur" de votrewidth
vous pouvez utiliserbox-sizing:border-box
.Juste ajouter
box-sizing:border-box
à.contact-form textarea
et vous serez amende. Plus d'informations disponibles sur http://css-tricks.com/box-sizing/.