18067 sujets

Questions générales et questions de débutants

[RESOLU] Besoin aide et corection pour obtenir un effet TABLE

Bonjour,
Excusez si c'est un peut long,j'ais écrit ce test ,dans le seul but de m’entraîner
a être Responsive Web Design.
Je voudrais en plus éliminer les TABLES , et c'est la ou je bute et demande votre aide.
voici un petit model bien Responsive Web Design (enfin je crois Smiley confused )
Mais normalement le div devrait au moins contenir une table pour séparer la partie droite et gauche.
Si je ne peux y échapper, dommage mais si vous avaient une idée ??
Mille mercis d'avance ....
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel='stylesheet' href='test.css' type='text/css' media='all'  /></head><body>
<div class="general" >
<span class='leTitre'><br />  Un TEST pour tables </span><br /><br />
<br /><br />
<div class="centre">
<b> ANNEE 1822</b> -Revenus et recettes de la fabrique<br /><hr>
<b> ANNEE 1828</b> -Exécution de la circulaire du 1er février 1828<br /><hr>
<b> ANNEE 1845</b> – Proposition nouveaux membres conseil de fabrique<br /><hr>
<b> ANNEE 1848</b> -Banc du Sr Bouvret -Déplacement de la chaire<br /><hr>
<b> ANNEE 1849</b> -Porte du cimetière<br /><hr>
</div>
<br /><br /></div></body></html>


ET LE CSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; } 
table { border-collapse :collapse; border-spacing :0; }   
fieldset, img { border :0;margin: 0px 0px 0px 0px;} 
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; } 
ol, ul { list-style :none; } 
caption, th { text-align :left; } 
/* _____________________________________________________________ */
html, body {  height: 100%; }
body { background-color : #800000; font-family: "Times New Roman", Times, serif;color :#fffacd; font-size :18px; }
div.general {height: auto;width: auto;max-width: 900px;margin: auto;text-align: center;}

div.centre {width : 80%;margin: auto;text-align : left;
padding: 20px;border: 1px solid #fffacd;font-size: 18px !important ;}

img.bande {width : 90%;}
span.LaFonte_blog_left {text-align : left;}
span.leTitre { font-size : 48px; color : #fffacd; }
a.LesA3 {font-size :22px;color :#fffacd; text-decoration :none; } 
a.LesA3:hover { color :#ffaaaa; }
/* ----------------min-width pour moyennes résolutions------------------ */
@media screen and (max-width: 1024px) {
	#main {width:75%;clear:none;}
	#anexes_droites {width:25%;clear:none;}
    div.general {height:auto;width:auto;max-width :90%;margin: 20px auto 0;text-align :center;}
    img {   max-width: 90%; }
    img {   height: auto; width: auto;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; }
    span.leTitre { font-family: "Times New Roman", Times, serif; font-size : 30px; color : #fffacd; } 
}
/* --------------max-width pour faibles résolutions--------------------- */
@media screen and (max-width: 640px) {
    body, element1, element2 {width : auto;margin : 0;padding : 0;}
    img {max-width : 100%;}
    element1, element2 {float : none;width : auto;}
    .hide_mobile {display : none !important ;}
    div.general {height: auto;width: auto;max-width : 90%;margin : 22px ;text-align : center;}
    span.leTitre {  font-size : 30px; color : #fffacd; } 
    body:before {content : "Version mobile du site";display : block;color : #fffacd;text-align : center;font-style : italic;}
}

Modifié par Christele (06 Jan 2016 - 14:33)
Salut,

J'ai un peu du mal à comprendre ta demande, mais tu pourrais déjà simplifier ton code ainsi:

<div class="general">
	<h1>Un TEST pour tables</h1>
	<div class="centre">
		<strong>ANNEE 1822</strong> -Revenus et recettes de la fabrique
		<hr>
		<strong>ANNEE 1828</strong> -Exécution de la circulaire du 1er février 1828
		<hr>
		<strong>ANNEE 1845</strong> – Proposition nouveaux membres conseil de fabrique
		<hr>
		<strong>ANNEE 1848</strong> -Banc du Sr Bouvret -Déplacement de la chaire
		<hr>
		<strong>ANNEE 1849</strong> -Porte du cimetière
		<hr>
	</div>
</div>


Et le peu de changement CSS:

h1 {
  font-size: 2.5em;
  color: #fffacd;
	margin: 1em 0;
}

hr {
	margin: 0.8em 0;
}
Merci pour ton amélioration Smiley decu
Donc il faut te dire que le sujet n'est pas d'utiliser <b> ou <strong> !
Mais d'obtenir un comportement comme une table, si tu te mets sur une tablette ou si tu écrit un texte très long sur une des ligne, la ligne ira à la ligne OK mais sous la totalité de la ligne, pas en s’arrêtant sous le texte de droite comme si j'avais
<table><tr>
<td><strong>ANNEE 1822</strong></td><td> -Revenus et recettes de la fabrique</td>
</tr><tr>
<td><strong>ANNEE 1828</strong></td><td> -Exécution de la circulaire du 1er février 1828</td>
</tr><tr>
<td><strong>ANNEE 1845</strong></td><td> – Proposition nouveaux membres conseil de fabrique</td></tr><tr>
<td><strong>ANNEE 1848</strong></td><td> -Banc du Sr Bouvret -Déplacement de la chaire</td>
</tr><tr>
<td><strong>ANNEE 1849</strong></td><td> -Porte du cimetière</td>
</tr></table>


Vraiment tu as raison j'aurais du commencer par ça Smiley confused
Merci encore à toi.
Modifié par Christele (06 Jan 2016 - 13:09)
J'ai changé la balise b par strong uniquement par habitude Smiley cligne

Si tu souhaites obtenir un retour à la ligne lorsque l'affichage se réduit, tu peux très bien dans ta "media query" ajouter ceci:

.centre strong {
		display: block;
	}


Ce qui passe la balise "strong" de "display: inline" (style par défaut de "strong") à "display: block" (prends toute la largeur disponible). Du coup, le texte se scinde en deux, et la suite passe en dessous.

Code mise à jour (avec mise à jour aussi pour le titre H1 dans la media query que j'avais oublié lors de la première version)
Modifié par Super_baloo8 (06 Jan 2016 - 13:59)
Sujet clos
Aller à