Bonjours à tous premièrement,
=> Votre mission, si vous l'acceptez est de m'aider à démêler ce méli-mélo de propriétés CSS, qui me sert de design, pour mon "site" qui ne fait qu'un page !
=> Je cherche :
* A démêler tout et à le rendre clair.
* Le rendre viable sur les différentes résolutions d'écran possible.
* Le rendre viable sur tout les naviguateurs (Et oui, j'ai de l'espoir ...).
=> Pour vous aidez, j'ai un code xhtml en très bonne état. Et le screen ci-dessous, c'est ce que je veux. J'ai réussi à le prendre lors des 5 secondes pendant lesquels j'étais satisfaite visuellement parlant de ce que cela donnais.
=> Ce que l'on n'y vois pas, c'est que tout les éléments sont fixe, (C'est pas moi qui le veux, c'est le design que j'ai fait qui me contraint, je ne cherche pas à vous expliquez, ce serai trop long et vous n'y pigeriez rien.).
=> Je remercie d'avance tout ceux qui m'aiderons.
=> Donc voici le sreen, le code xhtml et css.
Bon j'utilise imagehack, ça suffira bien pour cette fois : Ce que je veux
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr">
<head> <!-- Début des méta de designs --> <li nk rel="alternate stylesheet"media="screen"type="text/css"title="Bloody"href="template_bloody/design.css"/> <linkrel="stylesheet"media="screen"type="text/css"title="Ocean"href="template_ocean\design.css"/> <li nk rel="alternate stylesheet"media="screen"type="text/css"title="Liberté"href="template_liberte\design.css"/> <!-- Fin des méta de designs -->
<!-- Début des méta --> <metaname="description"content="Ici, vous trouverz mon profil, pour en savoir un peu plus sur moi, mes goût (Harry Potter, les fanfictions, les RPG, JDR), ce que je suis, qui je suis, tout de moi quoi !^^"/> <metaname="keywords"content="Plume_Séraphique,Plume,Séraphique,fanfiction,fic,fanfic,rpg,jdr,similar,bretagne,profil"/> <metaname="author"content="Plume Séraphique"/> <metahttp-equiv="robots"content="all,follow,index"/> <metaname="revisit-after"content="7 days"/> <metaname="url"content="httm://plume-seraphique.com"/> <!-- Fin des méta -->
</head>
<body> <!-- Début des images du design --> <!-- Début des images du design Ocean --> <pid="logo_ocean"><imgsrc="template_ocean\logo.png"alt="Logo du design Ocean"></img></p> <!-- Fin des images du design Ocean --> <!-- Début des images du design Liberté --> <pid="logo_liberte"><imgsrc="template_liberte\logo.png"alt="Logo du design Liberte"></img></p> <!-- Fin des images du design Liberté --> <!-- Début des images du design Bloody --> <pid="logo_bloody"><imgsrc="template_bloody/logo.png"alt="Logo du design Bloody"></img></p> <!-- Fin des images du design Bloody --> <!-- Fin des images du design -->
<!-- Début du menu --> <divid="menu"> <ahref="http://127.0.0.1/indexblog/"><spanid="titre accueil">Index</span></a> <ul> <li><ahref="#un">Moi, dans la vrai vie.</a></li> <li><ahref="#deux">Ce que je fait actuellement sur internet ...</a></li> <li><ahref="#trois">Moi et internet</a></li> <li><ahref="#quatre">Mes goût</a></li> <li><ahref="#cinq">Portrait chinois : Si j'étais ...</a></li> <li><ahref="#six">Moi et mon moi intérieur</a></li> <li><ahref="#sept">Je suis, je suis pas ...</a></li> <li><ahref="#huit">Qu'es ce qui me fait ...</a></li> <li><ahref="">Lien</a></li> </ul> </div> <!-- Fin du menu -->
<!-- Message d'accueil --> <divid="accueil"> <h3>Bonjours et bienvenue !</h3> <pclass="puce"><br/></p> <pclass="puce"></p> </div> <!-- Fin du message d'accueil -->
<!-- Début du div de tout les fieldsets --> <divid="fieldset"> <!-- Début du premier fieldset => "un" => "Moi, dans la vrai vie" --> <fieldsetid="un"><legend>Moi, dans la vrai vie.</legend> <pclass="puce">La partie la plus intéressante, je suppose ...</p> </fieldset> <!-- Fin du premier fieldset => "un" => "moi, dans la vrai vie" -->
<!-- Début du deuxième fieldset => "deux" => "Ce que je fait actuellement sur internet ..." --> <fieldsetid="deux"><legend>Ce que je fait actuellement sur internet ...</legend> </fieldset> <!-- Fin du deuxième fieldset => "deux" => "Ce que je fait actuellement sur internet ..." -->
<!-- Début du troisième fieldset => "trois" => "Moi et internet." --> <fieldsetid="trois"><legend>Moi et internet.</legend> </fieldset> <!-- Fin du troisième fieldset => "trois" => "Moi et internet." -->
<!-- Début du quatrième fieldset => "quatre" => "Mes goût" --> <fieldsetid="quatre"><legend>Mes goût</legend> <pclass="puce">Mes goût, sur les sujets les plus farfelus.</p> </fieldset> <!-- Fin du quatrième fieldset => "quatre" => "Mes goût" -->
<!-- Début du cinquième fieldset => "cinq" => "Portrait chinois : Si j'étais ..." --> <fieldsetid="cinq"><legend>Portrait chinois : Si j'étais ...</legend> <pclass="puce">Si j'étais ... je serai ...</p> </fieldset> <!-- Fin du cinquième fieldset => "cinq" => "Portrait chinois : Si j'étais ..." -->
<!-- Début du sixième fieldset => "six" => "Moi et mon moi intérieur" --> <fieldsetid="six"><legend>Moi et mon moi intérieur</legend> </fieldset> <!-- Fin du sixième fieldset => "six" => "Moi et mon moi intérieur" -->
<!-- Début du septième fieldset => "sept" => "Je suis, je suis pas ..." --> <fieldsetid="sept"><legend>Je suis, je suis pas ...</legend> </fieldset> <!-- Fin du septième fieldset => "sept" => "Je suis, je suis pas ..." -->
<!-- Début du huitième fieldset => "huit" => "Qu'es ce qui me fait ..." --> <fieldsetid="huit"><legend>Qu'es ce qui me fait ...</legend> </fieldset> <!-- Fin du huitième fieldset => "huit" => "Qu'es ce qui me fait ..." --> </div> <!-- Fin du div de tout les fieldsets -->
<!-- Début du footer --> <divid="footer">
Design by Plume Séraphique.<br/> <ahref="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a> </div> <!-- Fin du footer -->
</body>
</html>
/* Proriétés principales */
html { background-color: #778899; font-family: Arial, Verdana, serif; font-size: 0.9em; background: url("template_ocean/fond_ocean2.gif")repeat-yfixed; color: black; height: 100%; width: 100%; margin: auto; }
body { width: 100%; height: 100%; margin: auto; /* Pour centrer notre page */ margin-top: -13px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom: 10px; /* Idem pour le bas du navigateur */ background-color: #778899; background: url("template_ocean/fond_ocean2.gif")repeat-yfixed; } /* Liste avec carrés */ .puce { display: list-item; list-style-type: square; }
#logo_ocean /* Logo du design Ocean */ {
margin-left: 320px; margin-top: -15px; width: 544px; height: 101px; position: fixed; }
#logo_liberte, #logo_bloody /* Ne pas faire apparaître les logos des autres designs */ { display: none; }
/* Propriétés du menu*/ #menu { font-size: 0.9em; color: #4598cb; width: 200px; /* Déformation*/
margin-left: 37px; position: fixed; margin-top: 140px; }
#menu a /* Les liens du menu*/ { color: #778899; }
#menu a:hover /* Liens du menu passage de la souris*/ { color: #4598cb; text-decoration: none; }
html>body body /* Juste au cas où. Style appliqué pour tous les navigateurs excepté IE */ {
}
* html body #menu /* Style appliqué seulement pour IE */ {
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
