> Le Site du Zéro - Informatique

> Les forums

> Site Web

> HTML / CSS

> aside mal positionné

> Lecture du sujet

aside mal positionné

Pour accéder à cette section
Connectez-vous !

Page 1

Auteur

Message

2 visiteurs sur ce sujet (2 anonymes)

Page 1

ibrahim54

# Posté le 22/02/2012 à 14:33:59

Bonjour,

je viens a vous pour une demande d'aide afin de reussir a placer des aside correctement.

J'aimerai placer 3 aside l'un a coté de l'autre sur mon site et qu'ils soient egalement en dessous de l'article. Pourtant je n'arrive pas a les positionner comme il le faudrait :'(

Voici mon code html :

Code : HTML

<div id="global_aside">
		   <aside>
			<h4 class="titre_aside">Horraires</h4>
			   <p><strong>Matin</strong> - <strong>Apres-Midi</strong></p>
			   <p><strong>LUNDI</strong> <strong>8h-12h</strong><strong>14h-19h</strong></p>
			   <p><strong>MARDI</strong> <strong>8h-12h</strong><strong>14h-19h</strong></p>
			   <p><strong>MERCREDI</strong> <strong>8h-12h</strong><strong>14h-19h</strong></p>
			   <p><strong>JEUDI</strong> <strong>8h-12h</strong><strong>14h-19h</strong></p>
			   <p><strong>VENDREDI</strong> <strong>Fermé</strong><strong>Fermé</strong></p>
			   <p><strong>SAMEDI</strong> <strong>8h-12h</strong><strong>14h-19h</strong></p>
		   </aside>
		   <aside>
			<h4 class="titre_aside">Nouveautés</h4>
			   <p><strong>22/02/2012 : </strong>Le site arrive enfin sur internet</p>
		   </aside>
		   <aside>
			<h4 class="titre_aside">Contactez-nous</h4>
			   <p><strong>Tél. Fixe :</strong> 03.83.98.61.66</p>
			   <p><strong>Tél. Portable :</strong> 06.24.62.29.03</p>
			   <p><strong>Mail :</strong> <a href="mailto:sysdevpc@free.fr">Sysdevpc@free.fr</a></p>
		   </aside>
		</div>

et voici mon code CSS 3 :

Code : CSS

#global_aside
{
    display: inline-block;
    font-size: 0.8em;
}

Merci de votre aide

Édité le 22/02/2012 à 15:40:29 par ibrahim54

# Posté le 22/02/2012 à 14:33:59

ronamazona

# Posté le 22/02/2012 à 14:36:47

Pseudo classe, non ? ^^

Salut,

mets leurs display:inline-block.
Et enlève les margin.

Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur

Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur

Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.

warpShadow

# Posté le 22/02/2012 à 14:38:36

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Bonjour,

donne un id à ta div qui contient les aside et tu fais :
Code : CSS

#tadiv aside {
	display: inline-block;
	width: XXXpx; /*à toi de voir */
}

#tadiv aside + aside {
	margin-left: 10px;
}

EDIT: grillé par ronamazona

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.

ibrahim54

# Posté le 22/02/2012 à 15:29:38

J'ai mis mon code a jour mais ca n'a pas l'air de fonctionner :'(

Je vous ajoute ce que je souhaite optenir en editant mon message d'origine

warpShadow

# Posté le 22/02/2012 à 16:21:53

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Si tu as modifié ton code du premier post, c'est parce que tu n'as pas fait ce que je t'ai montré.

Dans mon exemple j'applique display: inline-block et une largeur aux blocs aside dans la div générale, toi tu l'appliques sur la div générale.

Édité le 22/02/2012 à 16:22:24 par warpShadow

ibrahim54

# Posté le 22/02/2012 à 16:52:14

j'ai utilisé une autre methode qui sombe avoir porté ces fruit mais qui est compliqué, voici mes bout de code concerné :

Code : HTML

<div id="global_aside">
		   <aside id="aside_left">
			<h4 class="titre_aside">Horraires</h4>
			   <p><strong>Matin</strong> - <strong>Apres-Midi</strong></p>
			   <p><strong>LUNDI</strong> 8h-12h 14h-19h</p>
			   <p><strong>MARDI</strong> 8h-12h 14h-19h</p>
			   <p><strong>MERCREDI</strong> 8h-12h 14h-19h</p>
			   <p><strong>JEUDI</strong> 8h-12h 14h-19h</p>
			   <p><strong>VENDREDI</strong> Fermé Fermé</p>
			   <p><strong>SAMEDI</strong> 8h-12h 14h-19h</p>
		   </aside>
		   <aside id="aside_middle">
			<h4 class="titre_aside">Nouveautés</h4>
			   <p><strong>22/02/2012 : </strong>Le site arrive enfin sur internet</p>
		   </aside>
		   <aside id="aside_right">
			<h4 class="titre_aside">Contactez-nous</h4>
			   <p><strong>Tél. Fixe :</strong> 03.83.98.61.66</p>
			   <p><strong>Tél. Portable :</strong> 06.24.62.29.03</p>
			   <p><strong>Mail :</strong> <a href="mailto:sysdevpc@free.fr">Sysdevpc@free.fr</a></p>
		   </aside>
		</div>

et le CSS 3 :

Code : CSS

#aside_left
{
    width: 180px;
    float: left;
    border-top: 2px black solid;
}

#aside_middle
{
    margin-left: 165px;
    border-top: 2px black solid;
    border-right: 2px black solid;
    border-left: 2px black solid;
    width: 436px;
}

#aside_right
{
    margin-right: 2px;
    border-top: 2px black solid;
    width: 180px;
}

aside, p
{
    font-size: 0.8em;
}

.titre_aside
{
    text-align: center;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-bottom: 2px;
    background-color: #FEFEE0;
}
aside
{
    height: 200px;
}

warpShadow

# Posté le 22/02/2012 à 17:13:47

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Code : CSS

#global_aside aside {
	display: inline-block;
	width: 180px;
	border-top: 2px solid #000;
	box-sizing: border-box;
	min-height: 200px;
	vertical-align: top;
}

#global_aside aside + aside {
	border-left: 2px solid #000;
}

#aside_middle {
	width: 440px;
}

Ça doit marcher correctement. Sinon, il y a un soucis.

Autre version possible :
Code : CSS

#global_aside aside {
	display: table-cell;
	width: 180px;
	border-top: 2px solid #000;
	min-height: 200px;
	vertical-align: top;
}

#global_aside aside + aside {
	border-left: 2px solid #000;
}

#aside_middle {
	width: 440px;
}

Encore une autre version possible:

Code : CSS

#global_aside {
	overflow: auto;
}

#global_aside aside {
	float: left;
	width: 180px;
	border-top: 2px solid #000;
	box-sizing: border-box;
	min-height: 200px;
	vertical-align: top;
}

#global_aside aside + aside {
	border-left: 2px solid #000;
}

#aside_middle {
	width: 440px;
}

Édité le 22/02/2012 à 17:14:20 par warpShadow

ibrahim54

# Posté le 22/02/2012 à 17:20:53

Merci ca fonctionne niquel mais j'ai du mal a comprendre :'(

me reste a redimensionner les aside et ca devrait être bon

warpShadow

# Posté le 22/02/2012 à 17:23:30

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Dis-moi ce qui t'échappes, et je t'explique

ibrahim54

# Posté le 22/02/2012 à 17:32:55

le fait de mettre des inline-block transforme bien le block aside en inline ?

warpShadow

# Posté le 22/02/2012 à 17:36:21

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Non, display:inline; transforme un block en inline. inline-block, c'est pour induire un comportement entre inline et block, c'est à dire un bloc qui s'insère dans une ligne.

Donc lorsque tu veux aligner des blocs, il faut qu'ils aient tous cette propriété, sinon l'un d'eux sera en mode block.

Image utilisateur

ibrahim54

# Posté le 22/02/2012 à 17:39:03

ok c'est noté, mais pour ce qui est des border-top, comment ce fait il qu'il ne se touche pas ?

warpShadow

# Posté le 22/02/2012 à 17:44:20

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Qu'il ne touche pas quoi exactement ?

ibrahim54

# Posté le 22/02/2012 à 17:54:51

sur mon navigateur on voit que les border-top ne sont pas continue et on un petit espace entre chaque aside.

Je souhaiterai que le border-top soit long en tout de 800px (qui est mon width de body)

warpShadow

# Posté le 22/02/2012 à 17:55:56

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

C'est la marge automatique entre les éléments inline-block ; mets-plutôt ton border sur #global_aside

ibrahim54

# Posté le 22/02/2012 à 18:06:30

Code : CSS

#global_aside aside 
{
    display: inline-block;
    border-top: 2px solid #000;
    min-height: 200px;
    vertical-align: top;
}

#aside_left
{
    width: 193px;
    border-right: 2px solid black;
}

#aside_middle 
{
    width: 400px;
}

#aside_right
{
    width: 193px;
    border-left: 2px solid black;
}

Je suis obligé de faire comme ca sinon les aside ne sont plus aligné sur la meme ligne et ca fait des double border (le aside a gauche aura une bordure a droite et le aside a droite une border a gauche qui ne se fusionne pas avec les bordures de aside du milieu)

warpShadow

# Posté le 22/02/2012 à 18:13:55

3ème dan de CSS

Blog
Twitter

Ville : Pia
Pays : France métropolitaine

Je n'ai pas vraiment compris ce que tu disais, mais tant que ça marche... Mais je ne vois pas pourquoi tu ne gardes pas simplement

Code : CSS

1
2
3

#global_aside aside + aside {
	border-left: 2px solid #000;
}

ibrahim54

# Posté le 22/02/2012 à 18:29:27

je le fais pas car les deux border s'additionnent donnant des border de 4px au lieux de 2

(je m'absente 2h dsl pour le temps de reponse peux rapide)

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !

Les cours phares

Tous les cours par catégories

Autres

Programmation (263 Cours)

Graphisme (29 Cours)

Bureautique (27 Cours)

Jeux Vidéo (18 Cours)

Matériel (7 Cours)

Dernières annonces

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Dynamisez vos sites web avec JavaScript

Créez des applications pour iPhone, iPad et iPod Touch

Cours

Nouveau ?

Nouveautés

Site Web

Programmation

Bases de données

Mobiles

Systèmes d'exploitation

Graphisme

Infographie 3D

Bureautique

Réseaux

Matériel

Mapping

aside mal positionné