CSS - alignement page

wg1972 · 1 Mai 2010

Bonjour à tous, je viens juste m'inscrire.
j'ai créé une page sous CreativeSuite avec la grille de fond de page/alignement: centré pour que la page reste au milieu du fenêtre du browser. Par contre, je n'arrive pas faire la même chose pour les calques qui s'affiche sur cette page: si je les mets également "alignement: centré", ils restent toujours à leur place alors que la page du fond bouge comme je veux avec le résultat que l'emplacement des calques sur ma page de fond ne ressemble plus à rien.
Quelqu'un peut m'aider, svp?
Merci d'avance.

Niconemo · 2 Mai 2010

Tu as du mettre un position:absolute ou position:fixed quelque part sur le sélecteur de ces divs.

Mais on ne pourra pas t'en dire plus si tu ne nous montre pas la page ou au moins des extraits de code.

wg1972 · 5 Mai 2010

Merci pour la réponse. Ci-après une partie du code source. Je dois peut-être préciser mon soucis: je souhaite que la page s'adapte selon la taille du fenêtre du browser (un peu comme google: quand on modifie la taille de la fenêtre, la page s'adapte et les différents éléments reste - proportionnellement - à leur place).
Cela fonctionne - sauf la partie bas/droite, des calques qui s'affiche ou non selon l'intitulé choisi à gauche ("intérêt" " savoir-faire" etc.).

<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Paneaux solaires Côtes d'Azur, Alpes maritimes et bassin méditerranéen. Les avantages et garanties Sun Stream: service de qualité, personnalisé, un bureau d'étude, la proximité, la disponibilité, des techniciens qualifiés et un reseau de partenaires.</title>
<style type="text/css" media="screen"></style>
<csactionitem name="c8067a6b29"></csactionitem>
<csactions>
<csaction name="c7dfd0c60" class="ShowHide" type="onevent" val0="Accueil" val1="0"></csaction>
<csaction name="c7dfd0ce1" class="ShowHide" type="onevent" val0="SF" val1="1"></csaction>
<csaction name="c7dfd0d42" class="ShowHide" type="onevent" val0="Partenaires" val1="0"></csaction>
<csaction name="c7dfd0dc3" class="ShowHide" type="onevent" val0="Interets" val1="0"></csaction>
<csaction name="c7dfd0e34" class="ShowHide" type="onevent" val0="Fleche1" val1="1"></csaction>
<csaction name="c7dfd0ea5" class="ShowHide" type="onevent" val0="Fleche2" val1="0"></csaction>
<csaction name="c7dfd0f26" class="ShowHide" type="onevent" val0="Fleche3" val1="0"></csaction>
<csaction name="c7dfd0f97" class="ShowHide" type="onevent" val0="Visuel1" val1="1"></csaction>
<csaction name="c7dfd10f8" class="ShowHide" type="onevent" val0="Visuel2" val1="0"></csaction>
<csaction name="c7dfd11b9" class="ShowHide" type="onevent" val0="Accueil" val1="0"></csaction>
<csaction name="c7dfd12210" class="ShowHide" type="onevent" val0="SF" val1="0"></csaction>
<csaction name="c7dfd12811" class="ShowHide" type="onevent" val0="Interets" val1="1"></csaction>
<csaction name="c7dfd13112" class="ShowHide" type="onevent" val0="Partenaires" val1="0"></csaction>
<csaction name="c7dfd13813" class="ShowHide" type="onevent" val0="Fleche1" val1="0"></csaction>
<csaction name="c7dfd13e14" class="ShowHide" type="onevent" val0="Fleche2" val1="1"></csaction>
<csaction name="c7dfd14615" class="ShowHide" type="onevent" val0="Fleche3" val1="0"></csaction>
<csaction name="c7dfd14d16" class="ShowHide" type="onevent" val0="Visuel1" val1="0"></csaction>
<csaction name="c7dfd15617" class="ShowHide" type="onevent" val0="Visuel2" val1="1"></csaction>
<csaction name="c7dfd16218" class="ShowHide" type="onevent" val0="Accueil" val1="0"></csaction>
<csaction name="c7dfd16919" class="ShowHide" type="onevent" val0="Interets" val1="0"></csaction>
<csaction name="c7dfd16f20" class="ShowHide" type="onevent" val0="SF" val1="0"></csaction>
<csaction name="c7dfd18521" class="ShowHide" type="onevent" val0="Partenaires" val1="1"></csaction>
<csaction name="c7dfd19422" class="ShowHide" type="onevent" val0="Fleche1" val1="0"></csaction>
<csaction name="c7dfd19b23" class="ShowHide" type="onevent" val0="Fleche2" val1="0"></csaction>
<csaction name="c7dfd1a124" class="ShowHide" type="onevent" val0="Fleche3" val1="1"></csaction>
<csaction name="c7dfd1a925" class="ShowHide" type="onevent" val0="Visuel1" val1="0"></csaction>
<csaction name="c7dfd1b126" class="ShowHide" type="onevent" val0="Visuel2" val1="1"></csaction>
<csaction name="c7e11f736" class="Open Window" type="onevent" val0="Liens.html" val1="" val2="1000" val3="700" val4="true" val5="true" val6="true" val7="true" val8="true" val9="true" val10="true" urlparams="1"></csaction>
<csaction name="c7e11fa07" class="Open Window" type="onevent" val0="Liens.html" val1="" val2="1000" val3="700" val4="true" val5="true" val6="true" val7="true" val8="true" val9="true" val10="true" urlparams="1"></csaction>
<csaction name="c7e12d6610" class="Open Window" type="onevent" val0="contact.html" val1="" val2="882" val3="705" val4="false" val5="false" val6="false" val7="false" val8="false" val9="false" val10="false" urlparams="1"></csaction>
<csaction name="c7e15fd21" class="Open Window" type="onevent" val0="Devis.html" val1="" val2="882" val3="705" val4="false" val5="false" val6="true" val7="true" val8="true" val9="true" val10="true" urlparams="1"></csaction>
<csaction name="c7e1601b2" class="Open Window" type="onevent" val0="Devis.html" val1="" val2="882" val3="705" val4="false" val5="false" val6="false" val7="true" val8="false" val9="false" val10="false" urlparams="1"></csaction>
<csaction name="c8067a6b29" class="ResizeWindow" type="onload" val0="1024" val1="768"></csaction>
</csactions>
<csscriptdict import="import">
<script type="text/javascript" src="../GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"></script>
</csactiondict>
</head>

<body onload="CSScriptInit();preloadImages();" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div style="position:relative;width:1024px;height:768px;background-image:url(../images/fond/Page.png);margin:auto;-adbe-g

,4,4;">
<csgroup name="1D8707A4" locked="locked"></csgroup>
<div style="position:absolute;top:150px;left:428px;width:130px;height:26px;" csgroup="1D8707A4">
<img id="Avantages1" src="../images/Bar/Avantages3.png" alt="" name="Avantages1" height="26" width="130" border="0" /></div>
<div style="position:absolute;top:150px;left:566px;width:130px;height:26px;" csgroup="1D8707A4">
<a onmouseover="changeImages('Clients1','../images/Bar/Clients1.png');return true" onmouseout="changeImages('Clients1','../images/Bar/Clients2.png');return true" href="SunStreamClient.html"><img id="Clients1" src="../images/Bar/Clients2.png" alt="" name="Clients1" height="26" width="130" border="0" /></a></div>
<div style="position:absolute;top:150px;left:152px;width:130px;height:26px;" csgroup="1D8707A4">
<a onmouseover="changeImages('Nous1','../images/Bar/Nous1.png');return true" onmouseout="changeImages('Nous1','../images/Bar/Nous2.png');return true" href="SunStream.html"><img id="Nous1" src="../images/Bar/Nous2.png" alt="" name="Nous1" height="26" width="130" border="0" /></a></div>
<div style="position:absolute;top:150px;left:290px;width:130px;height:26px;" csgroup="1D8707A4">
<a onmouseover="changeImages('Prestations1','../images/Bar/Prestations1.png');return true" onmouseout="changeImages('Prestations1','../images/Bar/Prestations2.png');return true" href="SunStreamPrestations.html"><img id="Prestations1" src="../images/Bar/Prestations2.png" alt="" name="Prestations1" height="26" width="130" border="0" /></a></div>
<div style="position:absolute;top:150px;left:704px;width:130px;height:26px;" csgroup="1D8707A4">
<a onmouseover="changeImages('Pro1','../images/Bar/Pro1.png');return true" onmouseout="changeImages('Pro1','../images/Bar/Pro2.png');return true" href="SunStreamPro.html"><img id="Pro1" src="../images/Bar/Pro2.png" alt="" name="Pro1" height="26" width="130" border="0" /></a></div>
<div style="position:absolute;top:711px;left:541px;width:59px;height:16px;" csgroup="1D8707A4">
<a href="SunStreamAccueil.html"><img src="../images/Boutons/accueil.png" alt="" height="16" width="59" border="0" /></a></div>
<div style="position:absolute;top:712px;left:464px;width:63px;height:15px;" csgroup="1D8707A4">
<a onclick="CSAction(new Array(/*CMP*/'c7e12d6610'));return CSClickReturn()" href="#" csclick="c7e12d6610"><img src="../images/Boutons/contact.png" alt="" height="15" width="63" border="0" /></a></div>
<div style="position:absolute;top:248px;left:88px;width:73px;height:19px;" csgroup="1D8707A4">
<a onclick="CSAction(new Array(/*CMP*/'c7dfd11b9',/*CMP*/'c7dfd12210',/*CMP*/'c7dfd12811',/*CMP*/'c7dfd13112',/*CMP*/'c7dfd13813',/*CMP*/'c7dfd13e14',/*CMP*/'c7dfd14615',/*CMP*/'c7dfd14d16',/*CMP*/'c7dfd15617'));return CSClickReturn()" href="#" csclick="c7dfd11b9,c7dfd12210,c7dfd12811,c7dfd13112,c7dfd13813,c7dfd13e14,c7dfd14615,c7dfd14d16,c7dfd15617"><img src="../images/Avantages/Interet.png" alt="" height="19" width="73" border="0" /></a></div>
<div style="position:absolute;top:280px;left:88px;width:115px;height:19px;" csgroup="1D8707A4">
<a onclick="CSAction(new Array(/*CMP*/'c7dfd16218',/*CMP*/'c7dfd16919',/*CMP*/'c7dfd16f20',/*CMP*/'c7dfd18521',/*CMP*/'c7dfd19422',/*CMP*/'c7dfd19b23',/*CMP*/'c7dfd1a124',/*CMP*/'c7dfd1a925',/*CMP*/'c7dfd1b126'));return CSClickReturn()" href="#" csclick="c7dfd16218,c7dfd16919,c7dfd16f20,c7dfd18521,c7dfd19422,c7dfd19b23,c7dfd1a124,c7dfd1a925,c7dfd1b126"><img src="../images/Avantages/Partenaires.png" alt="" height="19" width="115" border="0" /></a></div>
<div style="position:absolute;top:520px;left:88px;width:151px;height:92px;" csgroup="1D8707A4">
<img src="../images/Avantages/QPV.png" alt="" height="92" width="151" border="0" /></div>
<div style="position:absolute;top:216px;left:88px;width:158px;height:19px;" csgroup="1D8707A4">
<a onclick="CSAction(new Array(/*CMP*/'c7dfd0c60',/*CMP*/'c7dfd0ce1',/*CMP*/'c7dfd0d42',/*CMP*/'c7dfd0dc3',/*CMP*/'c7dfd0e34',/*CMP*/'c7dfd0ea5',/*CMP*/'c7dfd0f26',/*CMP*/'c7dfd0f97',/*CMP*/'c7dfd10f8'));return CSClickReturn()" href="#" csclick="c7dfd0c60,c7dfd0ce1,c7dfd0d42,c7dfd0dc3,c7dfd0e34,c7dfd0ea5,c7dfd0f26,c7dfd0f97,c7dfd10f8"><img src="../images/Avantages/SF.png" alt="" height="19" width="158" border="0" /></a></div>
<div style="position:absolute;top:64px;left:400px;width:263px;height:44px;" csgroup="1D8707A4">
<img src="../images/Avantages/Titre.png" alt="" height="44" width="263" border="0" /></div>
<div style="position:absolute;top:32px;left:864px;width:88px;height:114px;" csgroup="1D8707A4">
<img src="../images/Avantages/Visuel1.png" alt="" height="114" width="88" border="0" /></div>
<div csgroup="1D8707A4" style="position:absolute;top:620px;left:88px;width:151px;height:32px;-adbe-c:c">
<font color="#000060" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><marquee behavior="alternate" width="150">
Devis gratuit
</marquee></font></div>
<div onclick="CSAction(new Array(/*CMP*/'c7e1601b2'));return CSClickReturn()" csclick="c7e1601b2" csgroup="1D8707A4" style="position:absolute;top:620px;left:244px;width:20px;height:24px;-adbe-c:c">
<font color="#880c0c" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong onclick="CSAction(new Array(/*CMP*/'c7e15fd21'));return CSClickReturn()" csclick="c7e15fd21"><a href="Devis.html">+</a></strong></font></div>

</div>
</div>
<div id="SF">
<div style="position:relative;width:582px;height:480px;-adbe-g

;">
<div style="position:absolute;top:32px;left:16px;width:240px;height:17px;-adbe-c:c">
<font color="#000060" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Vos Avantages Sun Stream:</font></div>
<div style="position:absolute;top:275px;left:112px;width:240px;height:17px;-adbe-c:c">
<font color="#000060" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Nos Garanties Sun Stream:</font></div>
<div style="position:absolute;top:80px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- une équipe performante et qualifiée,</font></div>
<div style="position:absolute;top:100px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- un distributeur & poseur multimarques,</font></div>
<div style="position:absolute;top:120px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- notre bureau détude,</font></div>
<div style="position:absolute;top:140px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- notre disponibilité,</font></div>
<div style="position:absolute;top:160px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- notre réseau de partenaires,</font></div>
<div style="position:absolute;top:180px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- une société à taille humaine,</font></div>
<div style="position:absolute;top:200px;left:48px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- notre éthique verte.</font></div>
<div style="position:absolute;top:63px;left:48px;width:400px;height:17px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- un service personnalidé & clé en main,</font></div>
<div style="position:absolute;top:304px;left:144px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- des spécialistes du Photovoltaïque uniquement,</font></div>
<div style="position:absolute;top:324px;left:144px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- un diagnostic & le suivi énergétique,</font></div>
<div style="position:absolute;top:344px;left:144px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- la qualité et le choix de nos produits,</font></div>
<div style="position:absolute;top:364px;left:144px;width:416px;height:39px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- un savoir-faire artisanal & des techniciens spécialisés (compagnons, etc.),</font></div>
<div style="position:absolute;top:403px;left:144px;width:400px;height:20px;-adbe-c:c">
<font color="#737373" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- la proximité de notre agence.</font></div>
</div>
</div>

<p></p>
</body>

</html>

momo-fr · 5 Mai 2010

Je vois que tu utilises GoLive, je ne connais pas vraiment ce logiciel.

Regardes si tu n'as pas tous un tas de modèles disponibles à la création de ton document, notamment des squelettes nommés "fluide".

Le vrai problème de ce type de logiciel c'est en regardant le code généré une horreur. Par exemple ta page peut être construite en CSS avec les mêmes fonctionnalités (rollover notamment) avec moins d'un quart du code présent actuellement.

Le "contenant" général est bien en position relative, ceux qu'il contient sont en "position absolute" tout cela semble bien fonctionner mais effectivement tu es sur un squelette "fixe central", ce que tu veux faire doit être construit autrement.

Je te propose de regarder cette galerie de modèles CSS (tu auras accès aux CSS en regardant le code source de chaque modèles), tu as ici aussi des sources avec leur code CSS, au passage Golive, tel que tu l'utilises, génère des styles localisés ce qui va à l'encontre des règles actuelles en CSS, il est préconisé de regrouper les styles soit dans les CSS du <head> soit, et c'est la bonne règle, dans un fichier externe de feuille de styles.

Tout ceci pour te dire que si le développement web n'est pas ta passion il faut peut-être trouver un générateur moins complexe que GoLive pour créer ton site.

:siffle:

Niconemo · 5 Mai 2010

Les sirènes du wysiwyg ont encore frappé !

wg1972 · 10 Mai 2010

Merci beaucoup pour tes conseils que je suis actuellement en train mettre en oeuvre. C'est vrai que GoLive ne me facilite pas vraiment la tâche.
Peux-tu conseiller un autre générateur moins complexe que GoLive?

Gr3gZZ · 11 Mai 2010

Oh mon dieu c'est quoi ce code. Fait ton css toi même c'est pas si dur, je voulais t'aider mais là, ça donne pas envie de lire

momo-fr · 11 Mai 2010

wg1972 a dit:
Merci beaucoup pour tes conseils que je suis actuellement en train mettre en oeuvre. C'est vrai que GoLive ne me facilite pas vraiment la tâche.
Peux-tu conseiller un autre générateur moins complexe que GoLive?

Heu Dreamweaver non je dis n'importe quoi, en fait tu n'as pas grand choix, certes Freeway semble un peu plus "facile" d'accès, après on va "descendre" dans les petits intégrateurs comme Rapidweaver, Sitesimple, Sandvox un plus radicalement iWeb livré sur les Mac.

Ces derniers n'offrent pas toutes les possibilités du web, la vraie question c'est de savoir ce que tu veux, comment tu le veux et ce que tu es prêt à faire pour cela.

Pour simplifier :

- Pas envie de comprendre tout = intégrateur limité qui fonctionne sur des modèles, saisi facilité du contenu mais possibilités limités d'intégration et de gestion du contenu

- Pas envie de comprendre tout mais besoin de choses évoluées = intégrateur en ligne (type CMS) mais là il te faudra sans doute une aide extérieure (professionnelle ou non)

- Curieux (et il vaut mieux téméraire) et envie de comprendre les choses = un simple éditeur HTML + un bon livre sur les bases du XHTML et des CSS + quelques heures à consulter le Site du Zéro et ça devrait venir

Pour m'a part c'est la dernière qui m'a fait arriver où j'en suis avec une cinquantaine de sites professionnels en main et des projets sous CMS qui se multiplient (Wordpress, Joomla, Thelia, Drupal).

CSS - alignement page

wg1972

Membre enregistré

Niconemo

Modo (toujours vivant !)

wg1972

Membre enregistré

momo-fr

Ancien Aveyronnais

Niconemo

Modo (toujours vivant !)

wg1972

Membre enregistré

Gr3gZZ

Membre actif

momo-fr

Ancien Aveyronnais

Sujets similaires