[Résolu] Centrer sur une ligne

Question

valttt

10 May 2016 à 11:48

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.

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

gcyrillus

Modérateur

10 May 2016 à 12:09

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)

valttt

10 May 2016 à 12:16

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

...

valttt

10 May 2016 à 17:11

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)

JENCAL

10 May 2016 à 17:27

valttt a écrit :

Je crois faire une erreur, mais...... ???
Que veux-tu dire par boby, body>img, body>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)