Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: 54D3 le le 03-02-2013 a 22:58:43

Titre: prise de tet css
Posté par: 54D3 le le 03-02-2013 a 22:58:43

Bonjour
Tout d'abord excuse pour mon francais.. suis d'origine hollandais...

Je dois faire un truck tout c#n, 1 page, 9 carre
positionnne genre :

# # #
# # #
# # #

donc me suis dit ca doit pas etre complique avec css..
parcontre ca fait long temps que jai pas touche..
je vous montre mon code :

<HTML>
<HEAD>
   <STYLE>
#een{
   background-image: url("immage/een.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
   margin-left: 220px;
   margin-top: 120px;
}

#twee{
background-image: url("immage/twee.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
   margin-left: 420px;
   margin-top: 120px;
}

#drie{
   background-image: url("immage/drie.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#vier{
   background-image: url("immage/vier.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#vijf{
   background-image: url("immage/vijf.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#zes{
   background-image: url("immage/zes.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#zeven{
   background-image: url("immage/zeven.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#acht{
   background-image: url("immage/acht.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
#negen{
   background-image: url("immage/negen.png");
   background-repeat: no-repeat;
   width: 147px;
   height:146px;
}
   </STYLE>
</HEAD>
<BODY bgcolor="#000000">

   <div id="een"><img src="immage/een.png"></div>
<div id="een"><img src="immage/twee.png"></div>
<div id="een"><img src="immage/drie.png"></div>
<div id="een"><img src="immage/vier.png"></div>
<div id="een"><img src="immage/vijf.png"></div>
<div id="een"><img src="immage/zes.png"></div>
<div id="een"><img src="immage/zeven.png"></div>
<div id="een"><img src="immage/acht.png"></div>
<div id="een"><img src="immage/negen.png"></div>

</BODY>
</HTML>

bon le problem cest que la 2eme se ne met pas acote la 1er mais en desous
je doi oublier qlq choise, tout se positionne en desous la 1ere...
un petit peux d'aide svp ;D

Titre: Re:prise de tet css
Posté par: 54D3 le le 03-02-2013 a 23:46:26

lol oke je vais me repondre a moi meme en partie :P
bhe j'avait mal indentifie dabord.. tout pointait vers #een
de gauche a droit ca aligne comme je veux maintenant
parcontre j'arrive pas a les metre cote a cote
veux 3 acote un des autre mais la tout se met un endeous l'autre

Titre: Re:prise de tet css
Posté par: Wolf18 le le 04-02-2013 a 00:30:43

Je pense que tu peux faire beaucoup plus simple si tous tes blocs ont la même taille et les mêmes caractéristiques...

Code:

Et dans ton CSS quelque chose de ce genre là :

Code:

#main_bloc {
margin:0;
padding:0;
width:600px;
}

.bloc {
margin:0;
padding:0;
width:200px;
float:left;
}

.clear {
clear:both;
}

Je n'ai pas testé mais c'est quelque chose dans ce genre là.

Titre: Re:prise de tet css
Posté par: bidouille7 le le 04-02-2013 a 10:21:13

@ wolf 18Ce serait bon si tu donnais une hauteur aux blocks "height: 200px; par exemple. A plus.

Voici le code css, le code html de wolf 18 est bon.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> C'est à mettre sur la page html avant le </head>

Le CSS:
#main_bloc {
margin:0;
padding:0;
width:640px;
height: 900;
}

.bloc {
margin:10px;
padding:0;
width:300px;
height: 300px;
border: 1px solid #000000;
float:left;
}

.clear {
clear:both;
}

J'ai mis une bordure de 1px pour voir en test comment sont positionnés les carrés. Si tu mets une image "background-image: (url etc...); tu pourras supprimer "border".
Dans ce CSS tu ne pourras mettre qu'une image qui s'affichera sur tous les carrés.
Pour mettre une image différente sur chaque carré, il te faudra répèter le code .block{} autant de fois que tu auras de carré.

Cela fonctionne chez moi. A plus.

Titre: Re:prise de tet css
Posté par: bidouille7 le le 10-02-2013 a 20:07:16

Bonjour. Tu ne nous réponds pas, amis as-tu trouvé la solution à ton problème ou t'es-tu basé sur ce que l'on t'a indiqué ici?
Une réponse est toujours sympa pour ceux qui t'aide. A plus.