Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 25/11/2010, 15h59   #1
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 29 982
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 29 982
Points : 45 039
Points : 45 039
Par défaut alignement modifié par contenu ?

le html
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
		    <div id="sommaire_produit" class="titre">
			SOMMAIRE DIFFUSER<br/>
                    </div>
		    <div id="rubrique_12" class="rubrique">
ENTRÉES D'AIR
</div>
<div class="thumb">
<span>VM</span>
</div>
<div class="thumb">
<span>ESEA</span>
 
</div>
<div class="thumb">
<span>AERA HY</span>
</div>
<div class="thumb">
<span>M</span>
</div>
<div class="thumb">
<span>ISOLA 2</span>
</div>
<div class="thumb">
<span>ISOLA HY</span>
</div>
le css
Code :
1
2
3
4
5
6
7
8
.thumb {
	display:inline-block;
	width:100px;
	height:100px;
	border:solid 1px navy;
	margin:5px 7px 5px 0;
	clear:right;
	}
http://www.developpez.net/forums/att...1&d=1290697116

pourquoi si le contenu est sur plusieurs ligne ça foire tout l'alignement ???
Images attachées
Type de fichier : png 000.png (8,6 Ko, 7 affichages)
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 25/11/2010, 16h17   #2
Invité régulier
 
Inscription : août 2007
Messages : 10
Détails du profil
Informations forums :
Inscription : août 2007
Messages : 10
Points : 6
Points : 6
Le pourquoi, je pourrais pas te le dire à froid par contre pour la solution qui est de plus, multi plateforme :

Code :
1
2
3
4
5
6
7
8
9
.thumb {
	display:block;
	float:left;
	width:100px;
	height:100px;
	border:solid 1px navy;
	margin:5px 7px 5px 0;
	clear:right;
	}
le inline est remplacé ici par un float qui est assez sûr.
sebest777 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 25/11/2010, 16h50   #3
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 29 982
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 29 982
Points : 45 039
Points : 45 039
le souci du float est que comme j'ai plusierus blocs de ce type a se suivre ... ça mets le bazar pour les suivant il me faudrait un clear left ...
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 25/11/2010, 17h59   #4
Modératrice
 
Avatar de Candygirl
 
Femme
Inscription : juillet 2006
Messages : 1 529
Détails du profil
Informations personnelles :
Sexe : Femme
Âge : 40
Localisation : Suisse

Informations forums :
Inscription : juillet 2006
Messages : 1 529
Points : 1 869
Points : 1 869
Citation:
Envoyé par SpaceFrog Voir le message
pourquoi si le contenu est sur plusieurs ligne ça foire tout l'alignement
Parce que l'alignement par défaut se fait sur la ligne de base.

Si tu vires ton height de 100px, tu verras que tes boîtes sont alignée sur la ligne de base du texte, ce qui persistes si tu l'ajoutes ensuite.

En ajoutant un vertical-align:middle tu devrais obtenir l'affichage souhaité.
__________________
Les bons réflexes:
  • avant de poser une question:
    règles | faq | tutoriels | recherche
  • clarté, politesse, vocabulaire et orthographe soignés = efficacité
  • remercier ceux qui ont pris le temps d'aider et si c'est le cas
Candygirl est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 19h04.


 
 
 
 
Partenaires

Hébergement Web