Aller au menu - Aller au contenu

fonction aside

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
2 visiteurs sur ce sujet (2 anonymes)
Page 1 
Hors ligne ranok # Posté le 22/02/2012 à 07:43:47

Bonjour j'aimerai faire comme dans le TP sur le positionnement c'est à dire créer un bloc dans un autre. J'ai testé un peu tout mais à chaque fois mon bloc aside se positionne dans le même bloc que mon contenu mais en dessous du texte alors que moi je le souhaite à droite de mon texte, et que par conséquent mon texte s'adapte à la largeur de mon bloc.
Voici mon code
Code : CSS
 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
26
27
28
29
30
31
32
#contenu
	{
	width:auto; float:center; height:700px;
	background-image:url('images/fondecran.jpg');
	
	
	}
#contenu li
{
	margin:3px;

}

#contenu #aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}
#aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
	float:right;
	position:top;
}


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="contenu">
				<h2 class="centrer">Pompe à chaleur (P.A.C)</h2>
<h3>Une pompe à chaleur est un dispositif thermodynamique qui permet de transférer la chaleur du milieu le plus froid vers le milieu le plus chaud, alors que, naturellement, la chaleur se diffuse du plus chaud vers le plus froid, jusqu'à l'égalité des températures.
Une pompe à chaleur capte et utilise l'énergie de l'air, de l'eau ou du sol. 
On distingue trois types :
•	la pompe à chaleur air eau utilise les calories de l'air pour chauffer l'eau de votre chaudière, de vos radiateurs, de votre ballon, ou encore de votre piscine.
•	la pompe à chaleur air air propulse de l'air chaud ou de l'air froid dans les différentes pièces de votre maison.
•	la pompe à chaleur eau eau utilise les calories de l'eau des nappes pour chauffer votre eau.</h3>
				<div id="aside">
                klgnsdmlgnqsgkn<p />
                kfnsdkfneskdfn
                </div>
			</div>


Merci d'avance pour le coup de main
Publicité # Posté le 22/02/2012 à 07:43:47

Hors ligne Vayel # Posté le 22/02/2012 à 08:42:35

Bonjour =)

Il ne faut pas écrire <div id="aside"></div> mais plutôt <aside></aside>. ;)
Du coup, il faut que tu changes ton CSS en mettant aside { } au lieu de #aside { }. ^^
De plus, il ne faut pas que tu places l'élément à mettre de côté dans celui que tu veux mettre "autour".
Je te conseille de placer ton aside puis en-dessous, une section contenant ton texte.

J'ignore s'il est plus haut, mais tu n'as pas de h1. =)
Hors ligne sandhose # Posté le 22/02/2012 à 09:46:44
Mac user et fier de l'être...
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Salut,
Ca n'a rien a voir avec le fait que tu utilise une div au lieu de la balise "aside", ton div "aside" doit être au dessus des autres éléments, sinon le float ne marcheras pas :
Code : HTML
1
2
3
4
5
<div id="contenu">
<div id="aside">...</div>
<h2>...</h2>
<h3>...</h3>
</div>


Une question: Qu'est-ce que c'est que cette balise <p /> en plein milieu de la div ? o_O
C'est pas plutôt un <br /> ?
Photoshop UserCinema 4D User

C : |||||||||| 100%; C++ : |||||||||| 80%;
HTML5/CSS3 : |||||||||| 100%; JS : |||||||||| 100%;
PHP : |||||||||| 100%
 
Hors ligne ronamazona # Posté le 22/02/2012 à 14:43:33
Pseudo classe, non ? ^^
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
width:auto ne sert à rien.
position:top n'existe pas.
Pas plus que float:center
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.
 
Hors ligne rigs # Posté le 22/02/2012 à 15:24:17
Avatar
la balise <h3> : ça c'est du titre !
ligne 10 : je vois </p> mais pas de <p> avant
Hors ligne ranok # Posté le 22/02/2012 à 20:01:52

Bonsoir,

Merci pour vos réponses, il y a quelques résidus qui trainent à force d'essayer tous plein de choses.
merci à sandhose et ronamazona, cela fonctionne maintenant.
J'ai mis <div id=aside> car si je met que <aside></aside> et bien j'ai une erreur qui se met sur W3.
Hors ligne ronamazona # Posté le 22/02/2012 à 23:50:20
Pseudo classe, non ? ^^
Avatar
Je pense que tu peux quand même mettre aside.
C'est étonnant que tu es une erreur...
Ou alors tu as un code qui n'est pas bon.
Teste ce code tu verras que ça passe :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>test</title>
    </head>
<body>
    <aside>
    </aside>
</body>
</html>
Édité le 22/02/2012 à 23:54:39 par ronamazona
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.
 
Hors ligne sandhose # Posté le 22/02/2012 à 23:54:35
Mac user et fier de l'être...
Avatar
L'erreur doit sûrement venir du Doctype... vérifie que tu as bien <!DOCTYPE html>
Photoshop UserCinema 4D User

C : |||||||||| 100%; C++ : |||||||||| 80%;
HTML5/CSS3 : |||||||||| 100%; JS : |||||||||| 100%;
PHP : |||||||||| 100%
 
Hors ligne ranok # Posté le 23/02/2012 à 07:55:24

Voilà mon en tête :
Code : HTML
1
2
3
4
5
6
7
8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenue sur VD energie clim</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

J'ai l'aissé ce qu'il y avait à l'origine.
Hors ligne Pitox # Posté le 23/02/2012 à 08:00:58
Avatar

Ville : Cholet
Pays : France métropolitaine
La balise aside provient du HTML5, tu dois donc changer ton doctype en fonction. Mets ce que t'as dit sandhose.
Utilisez jsFiddle pour vos problèmes de code HTML/CSS/JS et postez le lien dans votre sujet, ce sera plus simple pour ceux qui vous aideront !
Webdesigneur et intégrateur web dispo (mais pas gratuit), contactez moi ;)
 
Hors ligne sandhose # Posté le 23/02/2012 à 16:24:18
Mac user et fier de l'être...
Avatar
Par contre, si tu utilise le doctype HTML5, il faut que tu replace le <html xmlns="http://www.w3.org/1999/xhtml"> par juste <html>
Édité le 24/02/2012 à 16:20:28 par sandhose
Photoshop UserCinema 4D User

C : |||||||||| 100%; C++ : |||||||||| 80%;
HTML5/CSS3 : |||||||||| 100%; JS : |||||||||| 100%;
PHP : |||||||||| 100%
 
Hors ligne ranok # Posté le 23/02/2012 à 18:36:50

sandhose tu veux dire :
<html xmlns="http://www.w3.org/1999/xhtml"> par juste <html>?

Je ne comprends pas trop en faite
Hors ligne Pitox # Posté le 23/02/2012 à 19:40:29
Avatar

Ville : Cholet
Pays : France métropolitaine
Oui, il a du se tromper entre head et html :)
Utilisez jsFiddle pour vos problèmes de code HTML/CSS/JS et postez le lien dans votre sujet, ce sera plus simple pour ceux qui vous aideront !
Webdesigneur et intégrateur web dispo (mais pas gratuit), contactez moi ;)
 
Hors ligne sandhose # Posté le 23/02/2012 à 21:03:55
Mac user et fier de l'être...
Avatar
Autant pour moi, on vas dire que j'était fatigué... :-°
C'est bien <html> qu'il faut mettre...
Photoshop UserCinema 4D User

C : |||||||||| 100%; C++ : |||||||||| 80%;
HTML5/CSS3 : |||||||||| 100%; JS : |||||||||| 100%;
PHP : |||||||||| 100%
 
Hors ligne ranok # Posté le 24/02/2012 à 07:40:57

Pas grave, un petit coup de mou ça arrive^^
merci pour le coup de main

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

Pour accéder à cette section
Connectez-vous !
connexion_rpx