Discussion :

[roro54]

Bonjour à tous,

étant débutant dans l’utilisation des css, j'ai besoins de vous pour m'aider a solutionner un problème qui me bouffe la vie depuis 48 heures maintenant :]

le css de mon footer est simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
footer{
	background-color: #333333;
        position: absolute;
	bottom: -980px;
	left:0px;
	right: 0px;
	width: 100%;
}
.myfooter{
	position: relative;
	left: 120px;
}

dès que je décalle je contenu de mon footer sur la droite pour le centre comme je voudrais, ma page s’agrandit en largeur, ce que je ne souhaite pas..

Petit explicatif avec screenshot :



bien entendu si je retire mon left: 120px; plus de soucis..

Quelqu'un pour éclaircir la situation ? Allez j'ai confiance!

Merci d'avance et bonne journée,

Roro!

P.S : Voici le css de mon contenu (mes 3 blocs), ça peut peut-être aider :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
footer{
	background-color: #333333;
        position: absolute;
	bottom: -980px;
	left:0px;
	right: 0px;
	width: 100%;
}
.myfooter{
	position: relative;
	left: 120px;
}
h5{
	font-family: Calibri, sans-serif;
	font-size: 20px;
	color: #09BFA6;
}
p{
	font-size: 12px;
	color: #CED2D2;
	margin: 5px;
}
#aboutme{
	float: left;
    margin: 0 100px 0 0;
    width: 200px;
}
#contacto{
	position: relative;
    float: left;
	left: 140px;
    width: 150px;
}
#categorias{
	position: relative;
	left: -200px;
	float: right;
    padding: 5px;
    width: 200px;
}
#categorias a{
	color: #CED2D2;
	font-variant: small-caps;
}
.Fb{
	position: relative;
	top: 250px;
	float: right;
	left: -150px;
}
.google{
	position:relative;
	top: 370px;
	float: right;
	padding-left: 150px;
	margin-right: 180px;
	margin-top:-119px;
 
}
.twitt{
	position:relative;
	top: 262px;
	left: 80px;
	float: right;
	margin-right: 80px;
}

[laurentSc]

ce qui aiderait, c'est que tu donnes aussi le code html.

[roro54]

code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<footer>
	<div class="myfooter">
		<div id="aboutme">
			<h5>testo</h5>
			<p> blablablab kdkd</p>
		</div>
		<div id="contacto">
			<h5> Contact </h5>
			<p>Fundador: X</br> <a href="mailto:X@gmail.com">X@gmail.com</a></p>
		</div>
		<div id="categorias">
			<h5> Categories </h5>
			<ul class="left">
				<li> <a href="historia.html"> Historia </a> </li>
				<li> <a href="america.html"> América </a> </li>
				<li> <a href="europa.html"> Europa </a> </li>
				<li> <a href="africa.html"> Africa </a> </li>
				<li> <a href="asia.html"> Asia </a> </li>
				<li> <a href="oceania.html"> Oceania </a> </li>
			</ul>
		</div>
		<div class="Fb">
			<a href="https://www.facebook.com/CocinaMundo?fref=ts"><img src="fb.jpg" width="40" height="40"/></a>
		</div>
		<div class="google">
			<a href="https://plus.google.com"><img src="gplus.png" width="40" height="40" /></a>
		</div>
		<div class="twitt">
			<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @twitter</a>
			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
		</div>
	</div>
</footer>

[laurentSc]

Je suis loin d'être une lumière en css, mais on sait jamais...sauf que j'ai pas réussi à faire un code html qui marche :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head> 
<title>titre du site</title>
<link href="style.css" rel="stylesheet"/>
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
 
<section>
<article>
squelette
</article>
 
 
<footer>
 
			<div class="myfooter">
 
			<div id="aboutme">
				<h5>testo</h5>
				<p> blablablab kdkd</p>
			</div>
 
			<div id="contacto">
				<h5> Contact </h5>
				<p>Fundador: X</br> <a href="mailto:X@gmail.com">X@gmail.com</a></p>
			</div>
 
			<div id="categorias">
				<h5> Categories </h5>
				<ul class="left">
					<li> <a href="historia.html"> Historia </a> </li>
					<li> <a href="america.html"> América </a> </li>
					<li> <a href="europa.html"> Europa </a> </li>
					<li> <a href="africa.html"> Africa </a> </li>
					<li> <a href="asia.html"> Asia </a> </li>
					<li> <a href="oceania.html"> Oceania </a> </li>
				</ul>
			</div>
 
			<div class="Fb">
				<a href="https://www.facebook.com/CocinaMundo?fref=ts"><img src="fb.jpg" width="40" height="40"/></a>
			</div>
 
			<div class="google">
				<a href="https://plus.google.com"><img src="gplus.png" width="40" height="40" /></a>
			</div>
 
			<div class="twitt">
				<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @twitter</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
			</div>
 
			</div>
</footer>
</section>
 
</body>
</html>

[roro54]

Humm pas compris.

Mon code marche à moi aussi, voila des screenshot de ce qui ne va pas :

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.myfooter
{
	position: relative;
	left: 120px;

Screen :



J'ai ma page qui s’agrandit de 120px sur la droite, voir la scrollbar.

Sans left: 120 px; je n'ai pas cet élargissement de page :



Mais le texte n'est bien entendu pas où je veux!

Mon but : Rogner ses 120px sur la droite..

[NoSmoking]

Bonjour,

Mon but : Rogner ses 120px sur la droite..

il faut bien être conscient que le left:120px décale ton élément et que à partir de cette position on applique le width:100%, donc la largeur est 100% + 120px d'où présence de la scrollBar.

Dans ton cas il te suffit de déporter le décalage de 120px sur ton premier élément en float:left soit la <div id="aboutme"> en lui affectant par exemple un margin-left:120px.

[roro54]

Bonjour NoSmoking,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#aboutme{
	float: left;
     margin-left:120px
    margin: 0 100px 0 0;
    width: 200px;
}

n'a pas d'impact sur mon code en ayant retiré mon left du .myfooter et ajouté le margin-left du #aboutme, la catégories ne se décalent pas sur la droite..

[laurentSc]

Essaye ça pour voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#aboutme
{
    float: left;
    margin-left:120px
    width: 200px;
}

[roro54]

ça ne marche pas non plus.

Voici le css et le fichier html si vous voulez essayer..

index.html
style.css

A utilise avec Chrome sinon vous obtiendrez un décalage du menu avec Firefox, dunno why..

[laurentSc]

si tu appliques le style à myfooter et pas seulement à aboutme, ça marche mieux :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.myfooter{
	position: relative;
        float: left;
        margin-left: 120px;
}
#aboutme{
    float: left;
    width: 300px;
}

[roro54]

super!

merci