prise de tet css - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  prise de tet css

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: prise de tet css (Lu 1282 fois)

prise de tet css
« sur: le 03-02-2013 a 22:58:43 »

54D3
Membre récent

Hors-Ligne

Messages: 2

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

Rapporter au modérateur

Re:prise de tet css
« Répondre #1 sur: le 03-02-2013 a 23:46:26 »

54D3
Membre récent

Hors-Ligne

Messages: 2

lol oke je vais me repondre a moi meme en partie
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

Rapporter au modérateur

Re:prise de tet css
« Répondre #2 sur: le 04-02-2013 a 00:30:43 »

Wolf18
Guru

Hors-Ligne

Sexe: Male

Messages: 1343

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:
<div id="main_bloc">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
<div class="clear"></div>
</div>

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à.

« Dernière Édition: le 04-02-2013 a 00:33:57 par Wolf18 »

Rapporter au modérateur

Création de sites internet sur mesure Var (PACA) | Webdesign, découpage/codage, programmation, référencement
Communauté GTA5 francophone
Partageons l'actualité jeux-video

Re:prise de tet css
« Répondre #3 sur: le 04-02-2013 a 10:21:13 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

@ 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.

« Dernière Édition: le 04-02-2013 a 10:55:24 par bidouille7 »

Rapporter au modérateur

http://www.alenchere.com

Re:prise de tet css
« Répondre #4 sur: le 10-02-2013 a 20:07:16 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com