28172 sujets

CSS et mise en forme, CSS3

Problème mise en page + saut de ligne

Bonsoir,

Je dois faire un site pour mon stage, mon site est fini (ou presque) mais j'ai deux problèmes qui se posent, premiérement dans ma page photos j'ai 3 photos une que j'ai placé a gauche et une autre à doite grace à la propriété float j'ai ensuite utilisé clear:both; pour passer à la ligne et placer une autre photos au centre, le probléme c'est que je n'arrive pas a mettre un espace entre les images contenant les float et mon image placée au centre je suis obligéd'utilisé au moins 30 <br/> pour avoir enfin un espace.

Je vous montre le probléme en image:

upload/54983-Capture.JPG

Voici le code HTML de la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

		<head>
		
			<link rel="shortcut icon" type="image/x-icon" href="../Djebel-officiel/image-djebel/kebab.ico"/>
			<title> Djebel </title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<link rel="stylesheet" type="text/css" href="djebel-css.css"/> 
			
		</head>
	
			<body background="../Djebel-officiel/image-djebel/fond.jpg">
				
				<center> <img src="../Djebel-officiel/image-djebel/header.jpg" style="border-radius:5px; border:solid 3px #FFA500;"/> </center>
	
				<br/>
				<center><b><i><h2><p> Bienvenue sur le site du DJEBEL Fast-food Kebab</p></h2></i></b></center>
				<br/>
	
				<center>
				
						<a href="accueil-djebel.html"><input type="button" value="Accueil" style="cursor:pointer; font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"/></a>
				
						<a href="La-carte-djebel.html"><input type="button" value="La carte"  style="cursor:pointer;  font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"/></a>
				
						<a href="Photos-Djebel.html"><input type="button" value="Photos" style="cursor:pointer;  font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"/></a>
				
				</center>

				<br/>
				<br/>
	
				
	
				<a href="../Djebel-officiel/image-djebel/agranmer.jpg"><img src="../Djebel-officiel/image-djebel/merhoul.jpg" title="Merhoul le Gérant" style="float:left; border-radius:5px; border:solid 3px #FFA500;"/></a>

				<a href="../Djebel-officiel/image-djebel/agranint.jpg"><img src="../Djebel-officiel/image-djebel/interieur.jpg" title="Intérieur du Kebab" style="float:right; border-radius:5px; border:solid 3px #FFA500;"/></a> 
				
				<center> <div id="clear">																																																																										
				<a href="../Djebel-officiel/image-djebel/agranfac.jpg"><img src="../Djebel-officiel/image-djebel/djebel-facade.jpg" title="Intérieur du Kebab" style="border-radius:5px; border:solid 3px #FFA500;"/></a>
				</div> </center>
				
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
		
				<p align="right"><b>Copyright © 2014 Djebel.com</b></p>
					
	</body>

</html>


Voici le code CSS du site:

 #coordhoraire{

	float: left;
	background: black;
	border: 3px solid #FFA500;
	border-radius: 10px;
	color:#FFA500;
	padding:3%;
	margin: 0 auto; 
	width: 35%;

}

#paiement{

	float:right;
	border: 3px solid #FFA500;
	border-radius: 10px;
	width:35%;
	margin: 0 auto; 
	padding:3%;
	background: black;
	
	}

#carte{

	border: 3px solid #FFA500;
	border-radius: 10px;
	background: black;
	width: 60%;
	margin: 0 auto;

}

#clear{

	clear:both;

}

b{

	color: #FFA500;
	font-style:italic;
 
}

td{

	color: #FFA500;
	
}

table{

	font-weight:bold;
	font-style : italic;
	margin: 0 auto;

}

body{

	background-attachment: fixed; 
	background-size: cover;
	
}

p{

	text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

}

a{

	text-decoration:none;

}



Mon deuxiéme problème est que quand je reduis la page de mon navigateur tous les éléments de ma page se retrécisse autant que la taille de la page, les textes sort de leurs bordures, les input se mettent les uns en dessous des autres etc..

Mon soucis en image avec avant après:

upload/54983-Capture2.JPG

upload/54983-Capture3.JPG

Voici le code de cette page HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

		<head>
		
			<link rel="shortcut icon" type="image/x-icon" href="../Djebel-officiel/image-djebel/kebab.ico"/>
			<title> Djebel </title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<link rel="stylesheet" type="text/css" href="djebel-css.css"/> 
			
		</head>
	
			<body background="../Djebel-officiel/image-djebel/fond.jpg">
				
				<center> <img src="../Djebel-officiel/image-djebel/header.jpg" style="border-radius:5px; border:solid 3px #FFA500;"/> </center>
	
				<br/>
				<center><b><i><h2><p> Bienvenue sur le site du DJEBEL Fast-food Kebab</p></h2></i></b></center>
				<br/>
				<center>	
				
						<a href="accueil-djebel.html"><input type="button" value="Accueil" style="cursor:pointer; font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"></a>
				
						<a href="La-carte-djebel.html"><input type="button" value="La carte"  style="cursor:pointer;  font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"></a>
				
						<a href="Photos-Djebel.html"><input type="button" value="Photos" style="cursor:pointer;  font-weight:bold; border-radius:5px; padding:15px 40px; background-color:black; border:solid 2px #FFA500; color:#FFA500;"></a>
				
				</center>

				<br/>
				<br/>
	
				
				<div id="coordhoraire">
		
					<table style='width:100%;'>
			
						<tr><td style='text-align:left;'>Horaire d'ouverture: Ouvert 7j/7</td></tr>
				
						<td>&nbsp;</td>
				
						<tr><td style='text-align:left;'>Du lundi au jeudi:</td> <td style='text-align:right;'>11h00 à 14h00</td></tr>	
						<tr><td style='text-align:left;'>&nbsp;</td> <td style='text-align:right;'>18h00 à 00h00</td></tr>
					
						<td>&nbsp;</td>
				
						<tr><td style='text-align:left;'>Du vendredi au dimanche:</td> <td style='text-align:right;'>11h00 à 14h00</td></tr>
						<tr> <td style='text-align:left;'>&nbsp;</td> <td style='text-align:right;'>18h00 à 02h00</td></tr>
				
						<tr><td style='text-align:left;'>Nous contacter:</td></tr>
				
					</table>
			
					<br/>
					<b><center>  02.35.54.31.05  </center></b>
					<br/>

					<table style='width:100%;'>
					
						<tr> <td style='text-align:left;'>Adresse du Djebel:</td> <td style='text-align:right;'>339 rue de verdun </td></tr> 
						<tr> <td style='text-align:left;'>&nbsp;</td> <td style='text-align:right;'>76600 </td></tr> 
						<tr> <td style='text-align:left;'>&nbsp;</td> <td style='text-align:right;'>Le Havre  </td></tr>
						
					<td>&nbsp;</td>
					
					</table>
					<br/>
			
					<center><b><i> Wi-Fi disponible sur place ! </b></i></center>
				
				</div>
		
				<div id="paiement">
		
					<table style='width:100%;'>
					
						<tr><td style='text-align:left;'>Les modes de paiement acceptés:</td> <td style='text-align:right;'>Espèces </td></tr> 
						<tr><td style='text-align:left;'>&nbsp </td> <td style='text-align:right;'>Ticket restaurant </td></tr>
				
						<td>&nbsp;</td>
				
						<tr><td style='text-align:left;'>Les modes de paiement refusés:</td> <td style='text-align:right;'>Carte bancaire </td></tr> 
						<tr><td style='text-align:left;'>&nbsp; </td> <td style='text-align:right;'>Chèque </td></tr>
						
					</table><br/>
			
					<center><b><i> La maison ne fait pas crédit ! </i></b></center>
				</div>

				<center><h3><i><b><p style="clear:both;">Plan d'accés:</p></b></i></h3></center>
				 
				<center>
				
				<iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;q=363+Rue+de+Verdun,+Le+Havre,+France&amp;aq=0&amp;oq=363+rue+de+verdun&amp;sll=37.0625,-95.677068&amp;sspn=42.901912,56.513672&amp;ie=UTF8&amp;hq=&amp;hnear=363+Rue+de+Verdun,+76600+Le+Havre,+France&amp;t=m&amp;z=14&amp;ll=49.502462,0.173686&amp;output=embed" style="border-radius:5px; border:solid 3px #FFA500;"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=fr&amp;geocode=&amp;q=363+Rue+de+Verdun,+Le+Havre,+France&amp;aq=0&amp;oq=363+rue+de+verdun&amp;sll=37.0625,-95.677068&amp;sspn=42.901912,56.513672&amp;ie=UTF8&amp;hq=&amp;hnear=363+Rue+de+Verdun,+76600+Le+Havre,+France&amp;t=m&amp;z=14&amp;ll=49.502462,0.173686" style="color:#0000FF;text-align:left; "></a></small>
				
				</center>
				
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
				<br/>
		
				<p align="right"><b>Copyright © 2014 Djebel.com</b></p>

	</body>
	
</html>


Le code CSS est le même que celui du haut.

Voilà j'espére que vous pouvez m'aider, merci d'avance Smiley smile
Modifié par kamikaze76600 (02 Jun 2014 - 22:51)
Je suis navrée de devoir te dire ça, mais même avec toute la patience du monde je doute que quelqu'un sur ce forum ai le courage de débuguer ton code.

Ne prends pas mal ce qui va suivre, mais puisque tu es stagiaire je suppose que tu souhaites faire du web ton métier : ton code HTML est obsolète et tu essaies de construire une maison avec des fondations en bois moisi et vermoulu.
Tu utilises des tableaux de mise en page, du <center> qui est déprécié depuis un moment, tu mets du CSS dans ton HTML, des <br> partout à des fins de mise en page, tu mets des éléments inline dans des blocs dans des inlines, bref, tu viens de poster ici un exemple de toutes les mauvaises pratiques des 10 dernières années que la standardisation HTML/CSS a essayé de se battre.

La bonne nouvelle est que tu es sur le bon forum pour te former. Je te propose de commencer par les bases à savoir une petite initiation au positionnement CSS pour t'éviter les mises en page en tableaux :
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html et http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

Tu trouveras ici pleins de ressources pour re-apprendre le HTML/CSS correctement : http://www.alsacreations.com/apprendre/

Je me doute que ce n'est pas la réponse que tu souhaitais lire, j'en suis désolée. Mais là ce n'est pas possible de résoudre ton bug avec une structure pareille, ou alors ça serait un gros hack patch qui risque de ne pas fonctionner partout.
Modérateur
Bonjour,

On ne peut qu'être d'accord avec Stéphanie : pour bien faire, ton code est à revoir entièrement. Cependant, en attendant, comme on n'apprend pas html+css en 5mn, tu peux déjà régler le problème de l'espace entre les photos en rajoutant par exemple un "margin:5px" dans le style des images (note qu'il faut mettre ce margin sur les 3 photos si tu veux qu'elles soient alignées quand il y a assez de place pour qu'elles tiennent toutes les 3 dans le sens de la largeur. Par exemple :


				<a href="../Djebel-officiel/image-djebel/agranmer.jpg">
				<img src="../Djebel-officiel/image-djebel/merhoul.jpg" title="Merhoul le Gérant" style="margin:5px;float:left; border-radius:5px; border:solid 3px #FFA500;"/></a>

				<a href="../Djebel-officiel/image-djebel/agranint.jpg">
				<img src="../Djebel-officiel/image-djebel/interieur.jpg" title="Intérieur du Kebab" style="margin:5px;float:right; border-radius:5px; border:solid 3px #FFA500;"/></a> 
				
				<center> <div id="clear">																									
				<a href="../Djebel-officiel/image-djebel/agranfac.jpg">
				<img src="../Djebel-officiel/image-djebel/djebel-facade.jpg" title="Intérieur du Kebab" style="margin:5px;border-radius:5px; border:solid 3px #FFA500;"/></a>
				</div> </center>


Bon coding !
Modifié par parsimonhi (03 Jun 2014 - 12:26)
Modérateur
Bonjour,

Pour le texte qui sort de son cadre, on peut par exemple rajouter un "min-width:150px;" dans le style du conteneur :


<div id="coordhoraire" style='min-width:150px;'>


Ceci étant, tu pourrais déjà faire un truc pour améliorer ton code, ce serait de mettre tous les styles dans la feuille de style au lieu de les mélanger avec le HTML (il faudra évidemment au passage rajouter des attributs class à toutes les balises HTML qui ont des styles particuliers). Ce serait une première étape.

Bon coding
Bonjour,

Merci à tous pour vos réponse aussi constructives les unes que les autres.

Bon tout d'abord dans notre école ou ne nous a pas appris quel HTML est obsolète ou non, puis pour les tableaux c'est moi qui a décidé de de les utilisés car je ne voyez comment faire a par comme ça pour pouvoir aligner du texte en 2 colonnes et face à face je pensais que ça aurait était une bonne idée..

Et puis pour les styles j'en est fait exprès de le mettre ici je ne voulais pas trop charger ma feuille de style justement..

Avez-vous quelque chose d'autre à me proposer que des tableaux ?

Merci d'avance
kamikaze76600 a écrit :

Bon tout d'abord dans notre école ou ne nous a pas appris quel HTML est obsolète ou non, puis pour les tableaux c'est moi qui a décidé de de les utilisés car je ne voyez comment faire a par comme ça pour pouvoir aligner du texte en 2 colonnes et face à face je pensais que ça aurait était une bonne idée..

C'était une bonne idée, il y a plus de 10 ans, du coup comme tu es en stage et jeune je suppose, ça m'étonne un peu que tu connaisses des pratiques aussi vieilles ^^
En fait tu peux déjà commencer par valider ta page avec cet outil http://validator.w3.org/ qui te dira les erreurs. Au niveau du doctype, on a tendance à utiliser un doctype HTML5 de nos jours.
Pour ce qui est des balises dépréciées ou pas, ça se trouve assez facilement sur le net, mais c'est sure qu'on ne peut pas l'inventer, tu as par exemple des memento en ligne pour t'aider.
Tu peux jeter un oeil à ces petits gabarits pour t'inspirer, même s'ils datent un peu : http://www.alsacreations.com/static/gabarits/

Oserai-je demander le nom de l'école ? Smiley ohwell

kamikaze76600 a écrit :

Et puis pour les styles j'en est fait exprès de le mettre ici je ne voulais pas trop charger ma feuille de style justement..

Bah justement, une feuille de style c'est fait pour ça Smiley lol . L'avantage d'externaliser les styles dans une feuille et dans le HTML est multiple :
1. séparation de la structure et de la forme = sémantique durable et maintenable, du coup on peut s'amuser à faire ce genre de choses pour montrer la puissance de la séparation HTML/CSS : http://www.csszengarden.com/
2. un code ré-utilisable : ta feuille de style est appliquée à toutes tes pages HTML
3. des mises à jour plus simples et durables : à chaque nouvelle page tu n'as pas besoin de recopier tout ton style, puisqu'il est externalisé. En plus le jour où tu veux changer une couleur, tu la changes dans la feuille de style.

kamikaze76600 a écrit :

Avez-vous quelque chose d'autre à me proposer que des tableaux ?

Là pour le coup, tu as pas mal de choix :
- la mise en page avec des flottants (voir les 2 liens dans ma réponse précédente)
- mise en page grâce à la propriété display
- voir si tu as un foufou du CSS3, tu peux commencer à jouer avec flexbox (mais attention à la compatibilité)


Voilà voilà, y encore un peu de boulot, mais sache que beaucoup d'intégrateurs que je connais sont autodidactes, donc même si à l'école on ne t'a pas tout appris, ce n'est pas perdu. Avec un peu de lecture et de patience tu peux améliorer tout ça Smiley smile
salut,
vite fait et en plus de ce qui a été dit, pour répondre à ta question, ton cas est typiquement relatif aux flottants.
Il faut déjà bien maîtriser la notion de flux CSS pour comprendre ce comportement.
Les flottants sont assez particuliers. Un élément en "float" est sorti du flux et est placé à une extrémité la plus haute de son conteneur (gauche ou droite) tout en forçant les éléments qui lui succèdent à s'écouler autour de lui. C'est l'utilité même des flottants. Comme un élément sorti du flux n'occupe pas d'espace concret dans le document, si un élément quelconque ne contient que des flottants, celui-ci n'aura pas de hauteur définie.
C'est très légèrement complexe quand on aborde ça pour la première fois mais pour remédier à ça, il faut appliquer un "overflow" autre que "visible" sur ce conteneur ou bien créer un élément qui possède un "clear". On utilise très souvent les pseudo éléments pour faire "plus propre" si on a des contraintes avec les "overflow":

#conteneur:after {content:"";display:block;clear:both}


Je sais que ça doit ressembler à du charabia et peut être que je n'aide pas trop dans mes explications Smiley biggrin mais c'est de là que vient le problème.
Cela dit, ça ne remet en rien les remarques précédentes.
Sujet clos
Aller à