|
|
|
|
Bonjour,
voila j'ai des probleme de mise en forme de ma page.
http://www.sandrineetgwen.fr/emelinejourj.php
alors cette page a des problèmes différents suivant les navigateurs.
En fait je voudrais que mon texte rentre dans le cadre et si ca doit dépasser mettre un scrolling.
J'ai essayé mais ca marche pas.
Elle vient d'ou mon erreur?
voila le code
body {
background-color: #FBE3DE;
}
body2 {
background-color: #FBE3DE;
margin-right:auto;
margin-left: auto;
background-color: #FBE3DE;
}
img {
border:0;
vertical-align:middle;
}
a {
text-decoration:none; }
#unite
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image: url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#texte
{
overflow:auto;
width: 330;
margin-left:330px;
margin-top:150px;
}
#rubrique2
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}
/* pour le menu deroulant */
#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: yellow;
}
#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
/* on cache tout les menus avec la propriété display none*/
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Jour J</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> </head> <body> <div id="rubrique"> <div> <?php include("menu.php"); ?> <div id="texte"> Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc... Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend. Il existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques connaissances en informatique. Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Mon rôle sera de vous apprendre à vous en servir. Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ? C'est vrai que, quand je vous dis que vous allez apprendre 2 langages à la fois, vous vous demandez si ce n'est pas déjà trop pour vous. Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure que tout a été très bien pensé. Chacun de ces 2 langages sert à faire quelque chose de précis, et les deux se complètent naturellement pour au final donner un site web : * XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir ;) Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...". Vous avez peut-être entendu parler aussi du HTML. En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML. En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML. C'est pour cela que nous étudierons XHTML dans ce cours. </div> </div> </div> <script type="text/javascript"> initMenu(); </script> <script type="text/javascript"> var imgs = document.getElementsByTagName('img'); for (var i = 0; i < imgs.length; i++) { if (imgs[i].className == 'rollOver') { imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; }); imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; }); imgs[i].className = ''; } } </script> </body> </html>
Configuration: Windows XP Firefox 3.0.7
Salut,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Jour J</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> </head> <body> <div id="rubrique"> <div> <html> <head> <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover = function() { var titre = this.getElementsByTagName("a")[0]; var a = titre.src; titre.src = titre.alt; titre.alt = a; this.getElementsByTagName("ul")[0].style.display = "block"; } sfEls[i].onmouseout = function() { var a = titre.src; titre.src = titre.alt; titre.alt = a; var titre = this.getElementsByTagName("a")[0]; this.getElementsByTagName("ul")[0].style.display = "none"; } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> tu ouvres deux fois <html>, ça fait pour le moins désordre… et pour CSS tu utilises de fausses bonnes méthodes. pour centrer le contenu par exemple, {position:absolute;} et marges négatives. c'est déjà risqué alors qu'on en est juste à centrer la corps de page. alors qu'avec : body{
width:800px;
margin:0 auto;
}
c'est 1000 fois plus simple et surtout c'est stable. il vaut mieux reprendre tout ton document, bien l'ordonner, mettre tout le JS dans des fichiers externes et grouper tes CSS. ensuite construit ton document avec une vraie architecture, utilises des titres, des paragraphes… le meilleur moyen pour savoir si un document est bien construit c'est de le regarder avec un éditeur texte. ton doc n'a pas de titre, le menu est un enchevêtrement d'images (alors qu'elles ne servent qu'à la déco) et de liens (capturé dans Lynx). si ce n'est pas navigable en mode texte c'est que c'est mal construit. regarde ce tuto, c'est rapide, clair et net. en suivant ces recommandations tu mettra en page beaucoup plus facilement et tu auras beaucoup moins de différences d'un navigateur à un autre. [ Mathieu ] Il y a sûrement des pandas pour ne dépendre de rien
|
ca fais beaucoup non pour une simple page?
<script type="text/javascript" src="chemin/vers/ton/fichier.js"></script> en adaptant l'URL du fichier. [ Mathieu ] Il y a sûrement des pandas pour ne dépendre de rien
|
J'essaie de te trouver un bon cours ou tuto pour le placement du code mais rien ne me satisfait vraiment.
|
Aide cellule de mise en forme dreamweaver Appliquer mise en forme conditionnel avec formule excel 2007 à toute une ligne Comment selectionner les dates dans calendrier la mise en forme conditionnel sur excek Ecran bleu au formatage mis a jour carte video Excel exercices mise en forme conditionnel Excel mise en forme conditionnelle Formater mise a jour psp Formater un disque dur Insert vba mise à jour d'une table access avec un formulaire J ai formater mon systeme et je n arrive pas a installer des mises a jour Microsoft access mise a jour sous formulaire vba Mise en forme conditionnelle condition texte Mise en forme conditionnelle excel 2007 Mise en forme saisie zone de texte php Mise en forme word Mise en place de la formation Style mise en forme word works Vba mise à jour d'une table access avec un formulaire
