Centrage html/css encore...
seagull
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonjour,
Bonjour à tous, je ne suis bien sûr pas le premier à galérer sur le sujet mais, en plus je suis trés basique en se qui concerne la mise en oeuvre des codes de langage.Ceci dit, voici ma question en èspérant que vous ne serez pas lassé d'y répondre.Ci-après, un exemple de structure de base que j' aimerais utiliser dans mon site(code complet).
je souhaiterais, en fait, centrer cette mise en page quelque soit la résolution.celle qui est adaptée actuellement est (1024X768). Aprés modif du code, je souhaiterais donc avoir le calque 1 centré par rapport à l'écran (quelque soit la résolution),et pour les autres calque, leur disposition par rapport au calque 1 serai maintenue. mes divers essais d'incersion de lignes de codes proposées sur le net n'ont jamais aboutis car je ne parviens jamais à les placer ou il faut. C'est pourquoi je vous transmet le code complet afin SVP d' y apporter votre sympathique correction. Merci d'avance pour votre coopération.j'utilise Dreamweaver
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="Layer1" style="position:absolute; left:10px; top:50px; width:980px; height:500px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;">
<div id="Layer1.1" style="position:absolute; left:681px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer
1</font></div>
<div id="Layer2" style="position:relative; left:0px; top:0px; width:500px; height:275px; z-index:2; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000;">
<div id="Layer2.1" style="position:absolute; left:161px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer
2 </font></div>
</div>
<div id="Layer3" style="position:relative; left:500px; top:0px; width:480px; height:224px; z-index:3; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;">
<div id="Layer3.1" style="position:absolute; left:181px; top:109px; width:154px; height:58px; z-index:5">
<p><font size="40">Layer 3</font></p>
</div>
</div>
</div>
</body>
</html>
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
Bonjour à tous, je ne suis bien sûr pas le premier à galérer sur le sujet mais, en plus je suis trés basique en se qui concerne la mise en oeuvre des codes de langage.Ceci dit, voici ma question en èspérant que vous ne serez pas lassé d'y répondre.Ci-après, un exemple de structure de base que j' aimerais utiliser dans mon site(code complet).
je souhaiterais, en fait, centrer cette mise en page quelque soit la résolution.celle qui est adaptée actuellement est (1024X768). Aprés modif du code, je souhaiterais donc avoir le calque 1 centré par rapport à l'écran (quelque soit la résolution),et pour les autres calque, leur disposition par rapport au calque 1 serai maintenue. mes divers essais d'incersion de lignes de codes proposées sur le net n'ont jamais aboutis car je ne parviens jamais à les placer ou il faut. C'est pourquoi je vous transmet le code complet afin SVP d' y apporter votre sympathique correction. Merci d'avance pour votre coopération.j'utilise Dreamweaver
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="Layer1" style="position:absolute; left:10px; top:50px; width:980px; height:500px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;">
<div id="Layer1.1" style="position:absolute; left:681px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer
1</font></div>
<div id="Layer2" style="position:relative; left:0px; top:0px; width:500px; height:275px; z-index:2; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000;">
<div id="Layer2.1" style="position:absolute; left:161px; top:109px; width:154px; height:58px; z-index:5"><font size="40">Layer
2 </font></div>
</div>
<div id="Layer3" style="position:relative; left:500px; top:0px; width:480px; height:224px; z-index:3; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;">
<div id="Layer3.1" style="position:absolute; left:181px; top:109px; width:154px; height:58px; z-index:5">
<p><font size="40">Layer 3</font></p>
</div>
</div>
</div>
</body>
</html>
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
A voir également:
- Centrage html/css encore...
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Nbsp html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
4 réponses
salut,
tu devrais séparer CSS et HTML.
pour centrer le site en entier il suffit de centrer <body>.
tu devrais séparer CSS et HTML.
pour centrer le site en entier il suffit de centrer <body>.
body
{
width:1024px;
margin:0 auto;
}
Merci pour ta réponse rapide mais comment separer html et css, dans la même feuille?
la ligne "body{width:1024px;margin:0 auto;}" permettra-elle un centrage dans toutes les résolutions?
pour ne pas me planter peux tu appliquer tes conseils au code de mon premier message et le rediffuser?
merci encore
la ligne "body{width:1024px;margin:0 auto;}" permettra-elle un centrage dans toutes les résolutions?
pour ne pas me planter peux tu appliquer tes conseils au code de mon premier message et le rediffuser?
merci encore
comment separer html et css, dans la même feuille?
non, faire une feuille de style et l'intégrer comme ça.
ou dans une balise <style>.
peux tu appliquer tes conseils au code de mon premier message et le rediffuser?
c'est d'une base comme ça qu'il faut que tu partes.
et TOUT le style doit être dans la feuille de style ou la balise <style>.
pas de prologue XML (la première ligne) ça met le bronx.
et hop, le meilleur des sites pour la mise en page XHTML/CSS.
non, faire une feuille de style et l'intégrer comme ça.
ou dans une balise <style>.
peux tu appliquer tes conseils au code de mon premier message et le rediffuser?
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{ width:1024px; margin:0 auto;}
</style>
</head>
<body>
<div>
<p>Layer 1</p>
<div>
<p>Layer 2</p>
</div>
<div>
<div>
<p>Layer 3</p>
</div>
</div>
</div>
</body>
</html>
c'est d'une base comme ça qu'il faut que tu partes.
et TOUT le style doit être dans la feuille de style ou la balise <style>.
pas de prologue XML (la première ligne) ça met le bronx.
et hop, le meilleur des sites pour la mise en page XHTML/CSS.
Bonjour,
Une 1re proposition.
Nomme tes blocs (que tu appelles calques) de manière plus explicite.
“Layer1” pourrait être “#conteneur” parce qu'il contient tout le reste.
“Layer2” pourrait être “#hautgauche”.
etc.
Ça serait plus clair.
Ensuite, comme te le propose Dalida, revoie tes choix de positionnement.
Si tu veux qu'il bouge, le “absolute” n'est vraiment pas adapté pour “Layer1”.
Enfin, pour centrer le contenu de ta page, essaye de modifier tes styles comme ça
--
Une 1re proposition.
Nomme tes blocs (que tu appelles calques) de manière plus explicite.
“Layer1” pourrait être “#conteneur” parce qu'il contient tout le reste.
“Layer2” pourrait être “#hautgauche”.
etc.
Ça serait plus clair.
Ensuite, comme te le propose Dalida, revoie tes choix de positionnement.
Si tu veux qu'il bouge, le “absolute” n'est vraiment pas adapté pour “Layer1”.
Enfin, pour centrer le contenu de ta page, essaye de modifier tes styles comme ça
body {
text-align : center;
}
#Layer1 {
position : relative;
margin : 50px auto;
/* et tout le reste sauf position:absolute; left:10px; top:50px;*/
}
Ça devrait suffire.
--
