28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer sur une ligne

Bonjour à tous,

Mon souci est le suivant:
Je souhaite :
-Mettre mettre dans mon "header", 4 images (sur la même ligne).
-les 3 images de gauche ET l'image de droite, mais que celle-ci soit centré non pas sur le milieu de la cellule "TD", mais sur le milieu du tableau complet.

L'image ci-dessous est pour que mes explications soient plus claires.
upload/43715-Sanstitre1.jpg

Voici mon code:
<!DOCTYPE html>
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>test</title></head><body>
<header>
<table style="text-align: left; width: 100%; height: 140px;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top; width: 110px; text-align: center;">Img 1<br>
      </td>
      <td style="vertical-align: top; width: 110px; text-align: center;">Img 2<br>
      </td>
      <td style="vertical-align: top; width: 110px; text-align: center;">Img 3<br>
      </td>
      <td style="vertical-align: top; width: 665px; text-align: center;">Logo<br>
      </td>
    </tr>
  </tbody>
</table>
</header>
  <br>
</body></html>

Dois-je utiliser un tableau ?
Dois-je utiliser un css ?

Merci pour votre aide car là, je suis perdu ... Smiley cligne
Vous me direz, c'est pas la première fois Smiley biggol Smiley cligne
Modérateur
un bon vieux float et un conteneur pour la troisième image avec un padding opposé équivalent à la largeur des 3 images ?
body {
  text-align: center;
}

body>img {
  float: left;
}

body>div {
  padding-right: 150px;/* 3 x img width */
  min-width: 200px;/* 3 x img width + 1 img  */
}

le min-width c'est pour garder en une ligne ..
<img src="http://dummyimage.com/50x50" />
<img src="http://dummyimage.com/50x50" />
<img src="http://dummyimage.com/50x50" />
<div>
     <img src="http://dummyimage.com/50x50" />
</div>

Modifié par gcyrillus (10 May 2016 - 12:11)
Merci pour ton aide et ta réponse gcyrillus.
Je comprends pas tout Smiley eek mais je vais essayer après le repas Smiley cligne ...
Pardon pour ce retard...

<body>
<!--==============================
              header
=================================-->
	<img src="Images/1.png" style="width: 50px; height: 50px;">
	<img src="Images/2.png" style="width: 50px; height: 50px;">
	<img src="Images/3.png" style="width: 50px; height: 50px;">
	<div id="raison-sociale">
	<img id="logo1" alt="Logo" src="Images/Logo.png" style="width: 790px; height: 124px;>
</div>


html {
	margin:0;
	padding:0;
	background: url(Images/Background_1.jpg) no-repeat center fixed; 
	-webkit-background-size: cover;
	background-size: cover;
  }
body {
  text-align: center;
}

body>img {
  float: left;
}

body>div {
  padding-right: 150px;/* 3 x img width */
  min-width: 200px;/* 3 x img width + 1 img  */
}


Je crois faire une erreur, mais...... ???
Que veux-tu dire par boby, body>img, body>div ?
Dans le css, ne dois-je pas mettre un # devant boby, etc... ?
De toute manière, cela ne fonctionne pas quelque soit ce que je marque.
Modifié par valttt (10 May 2016 - 17:15)
valttt a écrit :


Je crois faire une erreur, mais...... ???
Que veux-tu dire par boby, body&gt;img, body&gt;div ?

Ici, notre camarade parle de selecteur, le chevron est un selecteur CSS, renseigne toi la dessus c'est pas très compliquer Smiley smile
valttt a écrit :

Dans le css, ne dois-je pas mettre un # devant boby, etc... ?

Qu'on lui coupe la tête Smiley guillotine !!! le "#" hashtag est UNIQUEMENT pour cibler un id html !, body étant une balise il n'a donc pas besoin de "#" (ou de "." qui sont eux pour les classes html)
valttt a écrit :

De toute manière, cela ne fonctionne pas quelque soit ce que je marque.

ça c'est un autre problème sur lequel je ne me suis pas penché Smiley decu
Modifié par JENCAL (10 May 2016 - 17:29)
Heuuuuuuu, non, pas la tête Smiley rolleyes LOL
Je sais que c'est un sélecteur, mais je ne comprends pas le ">" .
Sujet clos
Aller à