28172 sujets

CSS et mise en forme, CSS3

Bloc qui apparaît en trait

Bonjour à tous,

voilà je ne parviens pas comprendre ce qui se passe.

voilà mon code html :



<form action="#">
	
	<div id="titreForm">Inscription : Etape 4 </div>
	<div id="corpForm">
		<fieldset id="info_bien">
			<legend> Votre logement : PHOTOS</legend>
			
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
	
			
			
				
		</fieldset>
			
			
			<br />
			<em>* Champs obligatoires</em>
		
	</div> <!-- fin de corpForm -->
	
		<div id="piedForm">
			<input type="submit" value="Envoyer ces informations" />
		</div>
</form>


mon souci se situe au niveau du bloc photo01

voici le css:



.photo01
{
float:left;
width:60%;
height:250px;
margin-top:5px;
margin-bottom:5px;
margin-left:15px;
border: 0px solid black;
}



au lieu d'obtenir des bloc j'ai uniquemnt des traits sur toute la longeur autant sur FF que sur IE

pouvez-vous me dire d'ou cela peut-il venir ?

Merci d'avance pour votre réponse.
Bonsoir,

D'après ton code HTML et CSS, tu ne devrais pas avoir des traits, mais juste des blocs invisibles. En effet, tes blocs sont:
- dénués de tout contenu (<div class="photo01"></div>);
- dénués de tout style CSS qui pourrait les rendre visibles: pas de couleur de fond, pas de bordure.

Donc on ne devrait rien voir. Smiley murf
j'ai fait le test mais même en faisant apparaître les bordure, ça me donne toujours la même chose.
En ce qui concerne e contenu, normalement même s'il n'y pas de contenu je devrais quand même avoir des carres et non des traits...
Oui. Tu dois avoir d'autres styles qui rentrent en ligne de compte, des styles CSS hérités peut-être. En tout cas le code que tu as donné ne peut pas correspondre au problème que tu décris (sauf erreur de ma part). Donc: peut-on voir le code complet, c'est à dire pour faire simple la page en ligne?
désolé,

je n'ai pas le moyen de le mettre en ligne

mon html en entier :




<body>


<div class="banniere">

</div>

<div class="total">


<div class="colonne_gauche">

	<form method="post" action="recherche.php" class="form02">


			
			<div class="form02_02">
				Votre nom d'utilisateur
			</div>

			<div class="input02">
				<input type="text" name="email" size="18" maxlength="40" value="" id="email" class="user" />
			</div>

			<div class="form02_02">
				Votre mot de passe
			</div>	

			<div class="input02_bis">

				<input type="text" name="mot de passe" size="15" maxlength="40" value="" id="mdp" class="mdp" />
	

				<input type="submit" value="OK" class="bouton_02" />

			</div>

			<div class="form02_02_bis">
				Mot de passe oublié ?</br>
				<a href="#">Cliquez ici</a>
			</div>	
	

		</form>





</div>

<div class="colonne_milieu">


	
	<div class="menu">
	
		<div class="menu01">
		</div>
		<div class="menu01">
		</div>
		<div class="menu01">
		</div>
		<div class="menu01">
		</div>
		<div class="menu01">
		</div>
		<div class="menu01">
		</div>
	
	</div>
	
	<form action="#">
	
	<div id="titreForm">Inscription : Etape 4 </div>
	<div id="corpForm">
		<fieldset id="info_bien">
			<legend> Votre logement : PHOTOS</legend>
			
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
			<div class="photo01">
			</div>
	
			
			
				
		</fieldset>
			
			
			<br />
			<em>* Champs obligatoires</em>
		
	</div> <!-- fin de corpForm -->
	
		<div id="piedForm">
			<input type="submit" value="Envoyer ces informations" />
		</div>
</form>


</div>


</div> <!--fin du div total-->


</body>
</html>


et mon css : 



div {border: 1px solid black}
* {margin:0; padding:0}

body
{
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
/*background-color:green;*/
/*background-repeat: repeat-x;*/
/*background-color:white;*/
/*background-image:url('../images/design/banner_blank.gif');*/
background-color:white;
/*background-image: url('../images/design/backg.jpg');*/
}

a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}

.clear
{
clear:both;
border:none;
}

.banniere
{
width:1000px;
height:120px;
}


.total
{
width:1000px;
height:805px;
}


.colonne_gauche
{
float:left;
width:210px;
height:800px;
}

.colonne_milieu
{
float:left;
width:785px;
height:800px;
margin-left:1px;
}




.menu
{
margin-top:1px;
width:782px;
height:35px;
margin-left:auto;
margin-right:auto;
}

.menu01
{
float:left;
width:127px;
height:35px;
margin-left:1px;
}


/******************************************************debut form02************************************************************************/


.form02
{
margin-top:2px;
background-color:white;
width:165px;
height:150px;
margin-left:auto;
margin-right:auto;
border:1px solid #99CCFF;
border-style:ridge;
}


.form02_02
{
height:10px;
width:140px;
margin-top:5px;
margin-left:2px;
font-weight:bold;
font-size:10px;
border:none;
}

.form02_02_bis
{
height:15px;
width:150px;
margin-left:2px;
border:none;
}

.input02
{
height:25px;
width:160px;
border:none;
}

.input02_bis
{
height:30px;
width:160px;
margin-bottom:20px;
border:none;
}



input.user
{
height:20px;
width:160px;
font-weight:bold;
cursor:pointer;	
margin-left:5px;
margin-top:5px;
border:1px solid black;
}

input.mdp
{
height:20px;
width:110px;
font-weight:bold;
margin-left:5px;
margin-top:10px;
float:left;
border:1px solid black;
}


input.bouton_02
{
border:2px outset red;
height:21px;
width:30px;
font-weight:bold;
cursor:pointer;	
margin-left:5px;
margin-top:10px;
float:left;
}

input.bouton_02:hover
{
height:20px;
width:30px;
border:2px outset blue;
background-color:gray;
color:red;
margin-left:5px;
float:left;
}

input.bouton_02:active
{
height:20px;
width:25px;
border:2px inset red;
background-color:red;
color:white;
margin-left:5px;
float:left;
} 



/******************************************************fin form02************************************************************************/

/***********************************************debut form ******************************************************************************/

form {
	width: 600px;
	padding: 10px 20px;
	/*background: lavender;
	color: midnightblue;*/
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}
form p {
	margin: 1em 0;
}
form p.double {
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	width: 100%;
}
form p.double label {
	overflow: hidden;
	float: left;
	width: 45%;
	text-align: right;
	font-weight: bold;
	cursor: pointer;
}
form p.double label span.info {
	display: block;
	margin-top: .2em;
	font-size: .8em;
	font-weight: normal;
	cursor: default;
}
form p.double input,
form p.double select,
form p.double textarea {
	display: block;
	margin-left: 32%;
	width: 45%;
	border: solid 1px midnightblue;
	padding: 2px 4px;
}
form p.double select 
{
	padding: 2px 0 0 4px;
	width: 32%;
}
form p.double textarea {
	padding: 2px 0 0 4px;
	width: 65%;
	height: 6em;
}
form p.simple {
	margin-left: 32%;
}


#titreForm, #piedForm 
{	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: orange;
	margin: 0;
	padding: .5em;
	border-color:orange;
}

#corpForm 
{	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid orange;
	color: black;
	background: #efefef;
	margin: 0;
	padding: 1em;
}

#corpForm label.oblig {
	font-weight: bold;	/*** Mise en évidence des champs obligatoires ***/
}

#corpForm label.nonoblig {
	font-weight: 500;	/*** Mise en évidence des champs obligatoires ***/
}

#corpForm .focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: beige;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}

#piedForm
{
	text-align: right; /*** Les boutons sont alignés à droite ***/
}

#piedForm input
{
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}





/*******************************fin form*****************************************************************************************************/


.photo01
{
float:left;
width:60%;
height:250px;
margin-top:5px;
margin-bottom:5px;
margin-left:15px;
border: 1px solid black;
}

.titrebox01 
{	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1em arial, hevetica, sans-serif;
	color: white;
	background: orange;
	margin: 0;
	padding: .3em;
	border-color:orange;
}

.bloc_text01
{
width:130px;
margin-top:5px;
margin-left:50px;
margin-top:5px;
border: 0px solid black;
}


désolé je ne peux pas faire autrement.

Merci d'avance pour votre collaboration.
Sujet clos
Aller à