Aller au menu - Aller au contenu

Positionement css

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 Smikpaf # Posté le 22/02/2012 à 13:43:00
What the f***
Avatar
Bonjour

J'ai créer un site pour un ami et cette ami veut que sur la page d'accueil il y est des bannière a droite et à gauche du corps après 2 jours de codage de débogage et de reflexion j'ai enfin réussi a faire tenir les bannières à droite et a gauche sans qu'elle ne gène le corps et que selon la résolution les bannière n'empiete pas sur le corps

Sauf que j'ai oublié de vérifier sur les navigateur et du coup sur google chrome ça marche correctement et sur les autre le corps est décalé sur la gauche au lieux d'être centré

Pouvez vous m'aider a trouver le code correct svp?

Code HTML
Code : HTML
 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>

<html>
	<head>
        <meta charset="utf-8" />
        <title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/menu.css" />
		<meta name="Keywords" CONTENT="Au bon pitou, Ecole de dressage pour chiens, Chiens Montreal, dres-sage de chien, cours de dressage pour chien, au bon pitou montréal, le bon pitou ">
		<link rel="shortcut icon" type="image/x-icon" href="images/icon.ico" /> 
		<link rel="icon" type="image/x-icon" href="images/icon.ico" />
	</head>
	
	<body>
		<header>
			<?php include('menu.php'); ?>
		</header>
		
		<aside id="gauche" >
		</aside>
		
		<aside id="droite" >
		</aside>
		
		<section id="corps" >
			<article>
				<p class="titre" >Qui somme-nous ?</p>
				<p>Une jeune école de dressage à domicile qui espère créer l'harmonie entre le maître et son chien.<br />
				Notre entraineuse à reçu sa formation dans une école réputé par un formateur agréé du québec.<br />
				Nous utilisons une méthode sans violance centré sur l'encouragement et la joie.</p>
			</article>
			<section id="bas">
				<table>
					<tr>
						<td><img src="images/chien-niche.jpg" /></td>
						<td><p id="special" >
							<p class="titre" style="text-align: left;" >Nous offrons :</p>
							Évaluation, cours et équipements.<br />
							Services à Montréal seulement.
						</p></td>
					</tr>
					<tr>
						<td><a href="formulaire.php" >Formulaire d'inscription</a></td>
						<td>
							<p class="titre" >Vous pouvez nous contacter :</p>
							<p>du lundi au vendredi 9h a 20h,<br />
							samedi et dimanche 11h a 18h</p>
							<p class="center" >Au : 438-380-8347</p>
							<p>Ou par mail :<br /> <a href="mailto:au_bon_pitou@hotmail.com">au_bon_pitou@hotmail.com</a></p>
						</td>
					</tr>
				</table>
			</section>
		</section>
		
		
		
		<footer>
			<p>© 2012 par Au Bon Pitou. Tous droits réservés.</p>
		</footer>
	</body>
</html>


code css
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
body
{
	background: url('../images/background.jpg') center top fixed no-repeat;
	min-width: 1200px;
	margin: 0 auto;
}

header, footer, nav, aside, section, adress, article
{
	display: block
}
#corps
{
	background: #d4d5d9;
	position: relative;
	min-width: 800px;
	display: table;
	padding: 10px;
	width: 800px;
	color: black;
	margin: auto;
	z-index: 20;
}

.titre
{
	font-weight: bolder;
	text-align: center;
}

table
{
	margin: auto;
	width: 700px;
}

#special
{
	margin-top: -50px;
}

p
{
	text-align: center;
}

#gauche
{
	background: url('../images/banniereg.jpg');
	position: absolute;
	height: 350px;
	width: 200px;
	z-index: 10;
}

#droite
{
	background: url('../images/banniered.jpg');
	height: 350px;
	width: 200px;
	float: right;
	z-index: 10;
}

footer
{
	text-align: center;
	padding: 10px;
	clear: left;
}


http://www.aubonpitou.com/index.php

merci d'avance
Édité le 22/02/2012 à 13:43:37 par Smikpaf
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Publicité # Posté le 22/02/2012 à 13:43:00

Hors ligne Shineliss # Posté le 22/02/2012 à 13:54:19
Avatar

Études : BTS IG Dole
ôte le Code : CSS
1
display:table

Je pense que c'est ça que tu veux.
Tu as sous Google Chrome et Firefox des outils de développement qui te permettent d'enlever des propriétés css sans toucher au code pour voir ce que ça donne
Édité le 22/02/2012 à 13:59:31 par Shineliss
Dernière ligne droite avant la fin du BTS-Premières épreuves J-5,ça bosse...
 
Hors ligne iradorn # Posté le 22/02/2012 à 13:59:03
We are legion
Avatar
dans un premier temps je dirai les meta tags sont peu osbolète

en suite je dirai que
Code : CSS
1
2
3
4
header, footer, nav, aside, section, adress, article
{
	display: block
}

ton display: block n'a pas son point virgule ^^

et je terminerai par dire ... ( nightmat va te le dire sans doute XD ) " pas bien, pas de tableau ..."
Édité le 22/02/2012 à 14:00:31 par iradorn
Image utilisateur
un petit lien pour mon site ^^
 
Hors ligne rigs # Posté le 22/02/2012 à 14:02:12
Avatar
Le point virgule n'est pas obligatoire sur la dernière ligne...

Si tu tiens à cette conception de ton site, applique la même méthode à #droite qu'a #gauche. C'est a dire le positionnement absolu

Code : CSS
1
2
3
4
5
6
7
8
#droite
{
	background: url('../images/banniered.jpg');
	height: 350px;
	width: 200px;
	position: absolute;
        right:0;
	z-index: 10;}
Édité le 22/02/2012 à 14:02:26 par rigs
Hors ligne Smikpaf # Posté le 22/02/2012 à 14:30:30
What the f***
Avatar
ca fait passer la bannière de droite derriere le corps
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Hors ligne rigs # Posté le 22/02/2012 à 14:31:14
Avatar
Tu n'as pas oublié le right:0 ?
Hors ligne Smikpaf # Posté le 22/02/2012 à 14:32:01
What the f***
Avatar
non j'ai copié coller ton code
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Hors ligne rigs # Posté le 22/02/2012 à 14:36:57
Avatar
Bizarre parce que je viens de faire en direct les modifs sur firefox et chrome.
Cela marche.
Hors ligne Smikpaf # Posté le 22/02/2012 à 14:37:54
What the f***
Avatar
oui en pleine écran mais diminue ta fenetre de moitier la bannière de droite n'est plus a droite du corps
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Hors ligne Shineliss # Posté le 22/02/2012 à 14:48:09
Avatar

Études : BTS IG Dole
T'as essayé ma solution c'est-à-dire d'enlever le display:table ?parce que de mon côté ça fonctionne en faisant comme ça
Dernière ligne droite avant la fin du BTS-Premières épreuves J-5,ça bosse...
 
Hors ligne Smikpaf # Posté le 22/02/2012 à 14:50:31
What the f***
Avatar
je vient de le faire pas de changement
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Hors ligne Shineliss # Posté le 22/02/2012 à 14:53:56
Avatar

Études : BTS IG Dole
J'ai fais ça pour ton "corps" ça marche:

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#corps {
    background: none repeat scroll 0 0 #D4D5D9;
    color: black;
    display: table;
    margin-left: 20%;
    margin-top: 0;
    min-width: 800px;
    padding: 10px;
    position: relative;
    width: 800px;
    z-index: 20;
}



Edit:Désolée ça ne fonctionne pas quand on rétrécie la fenêtre,je pense que ça sera bien que tu reprennes le style de ton #corps depuis le début,soit tu enleves petit à petit soit tu refais depuis le début en commençant juste avec ça:
background,width,height et margin
Édité le 22/02/2012 à 14:56:27 par Shineliss
Dernière ligne droite avant la fin du BTS-Premières épreuves J-5,ça bosse...
 
Hors ligne rigs # Posté le 22/02/2012 à 14:55:52
Avatar
arg... les pourcentages magiques :(

Edit : il y a possibilité alors de faire sans position absolute et avec float mais cela implique d'imbriquer #gauche, #droite et #corps dans un div
Édité le 22/02/2012 à 14:57:21 par rigs
Hors ligne Smikpaf # Posté le 22/02/2012 à 14:56:21
What the f***
Avatar
ca ne change rien c'est même pire
Oui voila une div comune c'est ce que je pensait faire mais je n'y avait pas pensé
Édité le 22/02/2012 à 15:05:45 par Smikpaf
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 
Hors ligne rigs # Posté le 22/02/2012 à 15:05:30
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Si je n'ai rien oublié :-° voici la solution dont je parle de l'edite de mon précedent message.
Code : HTML
1
2
3
4
5
6
7
<div id="centre">	
               <aside id="gauche" >
		    .....
                    .....
                    ..... 
		</section>
       </div>

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
33
body {
     background: url("../images/background.jpg") no-repeat fixed center top transparent;
     margin:0;
    }

#corps {
     background: #D4D5D9;
     color: black;
     margin: auto;
     padding: 10px;
     width: 800px;
     z-index: 20;
}

#gauche {
     background: url("../images/banniereg.jpg") no-repeat;
     float: left;
     height: 350px;
     width: 200px;
     z-index: 10;
}

#droite {
     background: url("../images/banniered.jpg") no-repeat;
     float: right;
     height: 350px;
     width: 200px;
     z-index: 10;
}

#centre{
    margin:0 auto;
    min-width:1220px;}


Edit : le mieux serait de placer également le header et le footer dans le div #centre
Édité le 22/02/2012 à 15:07:36 par rigs
Hors ligne Smikpaf # Posté le 22/02/2012 à 15:08:21
What the f***
Avatar
Voila ca fonctionne enfin

Merci

par contre plutot que de faire une div ce ne serai pas mieux de faire

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<section id="corps" >
   <aside id="gauche">
   </aside>
  
   <article id="centre">
   </article>

   <aside id="droite">
   </aside>
</section>



??
Édité le 22/02/2012 à 15:11:36 par Smikpaf
Programmeur: C, xHTML, CSS (prochainement PHP, Mysql)
 

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

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