28173 sujets

CSS et mise en forme, CSS3

Problème d'alignements

Salut les gens...
Désolé si je post une question déjà posée, mais j'ai pas trouvé de réponse à mon problème...
OK, alors allons-y gaiement...
La dame veut ça sur son site (j'y suis pour rien, c'est son choix, désolé)

http://tchernopuss.ovh.org/docs/design.gif

Pour ma part j'ai commencé gentiment mon fichier CSS comme suit, bossant avec Dreamweaver CS3 :


body {
	background-color: #FFFFCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}

body, td, th, h3, h6 {
	color: #330000;
}

h1, h2, h4, h5 {
  color: #660000;
}

a {
	color: #003366;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-align: justify;
	vertical-align: top;
	word-spacing: normal;
	margin: 5px;
	float: none;
	height: 180px;
	width: 480px;
	position: absolute;
	left: 40px;
	top: 210px;
	padding: 5px;
}
.picture1 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 40px;
	top: 30px;
	background-color: #ff7777;
	text-align: center;
	vertical-align: middle;
}
.picture2 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 280px;
	top: 30px;
	background-color: #ff7777;
	text-align: center;
	vertical-align: middle;
}
.picture3 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 520px;
	top: 30px;
	background-color: #ff7777;
	text-align: center;
	vertical-align: middle;
}
.textforpicture1 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 160px;
	top: 30px;
	background-color: #FFFFCC;
	text-align: center;
	vertical-align: middle;
}
.textforpicture2 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 400px;
	top: 30px;
	background-color: #FFFFCC;
	text-align: center;
	vertical-align: middle;
}
.textforpicture3 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 640px;
	top: 30px;
	background-color: #FFFFCC;
	text-align: center;
	vertical-align: middle;
}
.photograph {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-align: justify;
	vertical-align: top;
	word-spacing: normal;
	margin: 5px;
	float: none;
	height: 180px;
	width: 120px;
	position: absolute;
	left: 520px;
	top: 210px;
	padding: 5px;
}
.picturebottom1 {
	position: absolute;
	height: 180px;
	width: 120px;
	left: 40px;
	top: 390px;
	background-color: #ff7777;
	text-align: center;
	vertical-align: middle;
}


Mon souci c'est que les trucs sont pas alignés... Genre ma grande zone de texte bouffe sur l'image au-dessus. L'image à gauche de la zone de texte n'est pas alignée avec ce qui est dessus. Alors j'ai peut-être connerisé, je fais pas beaucoup de CSS, même si je suis assez content de mon site Jaafir. Donc si vous trouvez quelle couille j'ai mis dans le potage, ce serait sympa. Merci d'avance...
personnellement Smiley cligne
je dirais qu'il s'agit d'un problème de padding et margin non spécifiés pour tes différents éléments, ce qui provoque un chevauchement de part leurs positionnements absolus...
j'essaierai donc de mettre un margin: 0 e padding: 0 à tous les blocks
C'est dreamweaver qui sort des CSS pareil ? C'est plutôt fun... 75% des propriétés ne servent à rien.

Rien ne vaut coder à la main..
Je faisais mes CSS à la main. mais la personne pour qui je fais le site veut apprendre Dreamweaver et Photoshop. Et utiliser du WYSIWYG sans coder à la main. Du coup oui c'est plur lourd, faut tout spécifier...
Bonjour,

Est-ce que tu as quelque chose contre le “float” ?
Si non, je supose que DW permet de générer un code CSS qui ressemblerait à :
    .petit_bloc {
        float : left;
        width : 120px;
        height : 180px;
        border : 1px solid #ccc;
        }
    #grand_bloc {
        float : left;
        width : 486px;
        height : 180px;
        border : 1px solid #fff;
        background-color: #ff7;
        }
    .separ {
        clear : left;
        height : 1px;
        line-height : 1px;
        height : 0px;
        line-height : 0px;
        }
    .img {
        background-color: #f77;
        }
    .txtpourimg {
        background-color: #ffa;
        }
Non ?

Tu pourrais t'en servir comme dans cet exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Proposition pour des blocs divers</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css.css" />
  <style type="text/css">
    .petit_bloc {
        float : left;
        width : 120px;
        height : 180px;
        border : 1px solid #ccc;
        }
    #grand_bloc {
        float : left;
        width : 486px;
        height : 180px;
        border : 1px solid #fff;
        background-color: #ff7;
        }
    .separ {
        clear : left;
        height : 1px;
        line-height : 1px;
        height : 0px;
        line-height : 0px;
        }
    .img {
        background-color: #f77;
        }
    .txtpourimg {
        background-color: #ffa;
        }
</style>
</head>

<body>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="separ"></div>
    <div id="grand_bloc"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="separ"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
    <div class="petit_bloc img"></div>
    <div class="petit_bloc txtpourimg"></div>
</body>
</html>


À tester.


+ Je veux bien tester ton code CSS, mais il me faudrait aussi le HTML.
Modifié par Gihef (01 Aug 2007 - 23:28)
Merci, je vais voir ça.
Ah oui, mon code 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="stylesheet" type="text/css" href="fichiercss.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p class="picture1"><img src="image1.jpg" alt="blabla" width="113" height="170" align="absmiddle" /></p>
<p class="textforpicture1"></p>
<p class="picture2"></p>
<p class="textforpicture2"></p>
<p class="picture3"></p>
<p class="textforpicture3"></p>
<p class="text">blablabla</p>
<p class="photograph"><img src="image2.jpg" alt="blabla" width="120" height="180" /></p>
<p class="picturebottom1"></p>
</body>
</html>
Sujet clos
Aller à