28172 sujets

CSS et mise en forme, CSS3

Page trop large

Bonjour,

j'ai créé une page dont voici le code ci dessous. J'ai un problème que je n'arrive pas à résoudre: quand je met width: 100% à ma section d'id "intro", la largeur de la page grandit.

J'ai essayer d'enlever chaque propriété css pour voir le changement, il n'y a que width : 100% de la section d'id "intro" qui enlève le problème, mais ca ne le résout pas, car la section devient trop petite.

J'ai un espoir: quand je met position:fixed à la section d'id "intro", cela résout le problème, mais comme la section devient "fixed", elle reste fixe quand on descend la page, ce qui ne va pas.

Voici le code :

*{
margin: 0;
padding: 0;
}

body{
font-family: "Myriad Pro";
font-size: 14px;
}

#logo{
position: absolute;
left: 42%;
top: 3%;
}

#intro{
width: 100%;
height: 160px;
background: #00b4ff;
position: absolute;
top: 120px;
}

#intro p{
position: relative;
top: 65px;
left: 30%;
font-size: 40px;
color: white;
}


Auriez vous par hasard une idée ? Merci beaucoup à vous.

Bon après-midi
Pardon, j'ai oublié le code html.

Voici le code complet:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Newsletter</title>
	<style type="text/css">
	*{
margin: 0;
padding: 0;
}

body{
font-family: "Myriad Pro";
font-size: 14px;
}

#logo{
position: absolute;
left: 42%;
top: 3%;
}

#intro{
width: 100%;
height: 160px;
background: #00b4ff;
position: absolute;
top: 120px;
}

#intro p{
position: relative;
top: 65px;
left: 30%;
font-size: 40px;
color: white;
}
	</style>
</head>
<body>
<img src="images/apple.png" id="logo" alt="" />
<section id="intro">
<p>Offres spéciales nouvelle année 2015</p>
</section>
</body>
</html>
Modérateur
Bonjour,

S'il s'agit juste de faire en sorte que la page ne fasse pas plus de 100% de la largeur de la fenêtre, tu peux ajouter :


#intro p{
width: 70%;
}


Amicalement,
Salut,

Je vois plein de mauvaises choses à revoir dans ton code.

En premier, ceci à supprimer définitivement et à bannir à tous jamais de tes pratiques :
*{
margin: 0;
padding: 0;
}


Ensuite, l'utilisation de position requiert de vraiment maîtriser ce qu'on fait. Ce n'est pas un bon outil pour les développeurs débutants. De même que les % sont à utiliser avec parcimonie.

Enfin, jamais de width: 100%; (sauf sur les tableaux).

Bref, il te manque des bases en mise en forme de document. Tu peux suivre l'exemple de ce cours (très basique et loin d'être parfait, mais qui a le mérite d'exister : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page

De manière générale, enveloppe ton site dans une div (souvent avec la classe wrap ou page), à laquelle tu donnes une largeur et que tu centres. Ainsi, tout ton site aura une taille délimitée. Exemple : http://codepen.io/Manumanu/pen/qniHp

parsimonhi: Yosumi sur le san-san. Smiley cligne
Modifié par Manumanu (13 Jan 2015 - 16:32)
Bonjour
Manumanu a écrit :
ceci à supprimer définitivement et à bannir à tous jamais de tes pratiques :
*{
margin: 0;
padding: 0;
}

Pourquoi ?
SolidSnake a écrit :
Pourquoi ?

A une époque on disait que l'astérisque altérait les performances de l'affichage puisque tous les éléments html doivent être formatés. Les meilleurs ténors du css, (français et internationaux) se sont exprimés sur ce sujet en défaveur de cette pratique (Goëtter, pour ne pas le citer, mais tous les autres de même). D'où les resests css & Cie. La question était donc close.

Et puis, en faisant des tests, on s'est rendu compte qu'en fait... non : il n'y a pas d'impact sérieux sur un site moyen. Du coup on retrouve cette pratique au goût du jour, par exemple dans le framework Knacss de Goëtter.
Modifié par Olivier C (25 Jan 2015 - 13:56)
Sujet clos
Aller à