Creation feuille de style
jjaco
-
Webline Messages postés 31 Date d'inscription Statut Membre Dernière intervention -
Webline Messages postés 31 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis autodidacte et je commence une feuille de style en suivant "developpez.com" mise en page rapide et facile...
j'ai créer bandeau, contenu et piedpage.
problème
div#bandeau {width:1200px;height:75px;background-color:#99FFFF;}
div#contenu {width:1200px;height:600px;background-color:#FFFF99;}
div#piedpage {width:1200px;height:75px;background-color:#FFCCFF;}
ces 3 parties ne sont pas alignées verticalement
merci de bien vouloir m'aider à corriger la formule
Attention, je n'attend pas une réponse "formule toute faite", je veux comprendre mon erreur
je suis autodidacte et je commence une feuille de style en suivant "developpez.com" mise en page rapide et facile...
j'ai créer bandeau, contenu et piedpage.
problème
div#bandeau {width:1200px;height:75px;background-color:#99FFFF;}
div#contenu {width:1200px;height:600px;background-color:#FFFF99;}
div#piedpage {width:1200px;height:75px;background-color:#FFCCFF;}
ces 3 parties ne sont pas alignées verticalement
merci de bien vouloir m'aider à corriger la formule
Attention, je n'attend pas une réponse "formule toute faite", je veux comprendre mon erreur
A voir également:
- Creation feuille de style
- Modèle de style word - Guide
- Creation de site web - Guide
- Creation de compte google - Guide
- Creation compte gmail - Guide
- Bruler feuille de laurier - Guide
8 réponses
il n'y a pas d'erreur dans ton code CSS.
il faudrait que tu affiches le code source html pour pouvoir en dire plus.
il faudrait que tu affiches le code source html pour pouvoir en dire plus.
Bonjour,
— Définis les mêmes marges pour chacun pour qu'ils soient placés de la même manière.
Ou
— Place l'ensemble dans un autre conteneur qui les englobera et auquel tu appliqueras les marges pour le placer sur la page.
Comme ça (taille réduite).
++
1200px. Tu as besoin de tout ça ?
Bouton code
--
— Définis les mêmes marges pour chacun pour qu'ils soient placés de la même manière.
Ou
— Place l'ensemble dans un autre conteneur qui les englobera et auquel tu appliqueras les marges pour le placer sur la page.
Comme ça (taille réduite).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #b0c4de;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 762px;
text-align: left;
border : 1px solid #000;
background-color: #f0f8ff;
font-family: 'Trebuchet MS', Verdana, sans-serif;
}
div { border : 1px dashed #d88; }
div#bandeau1, div#contenu1, div#piedpage1 { margin: 0 auto; }
div#bandeau1 {width:760px;height:75px;background-color:#9ff;}
div#contenu1 {width:760px;height:600px;background-color:#ff9;}
div#piedpage1 {width:760px;height:75px;background-color:#fcf;}
div#bandeau2 {width:760px;height:75px;background-color:#9ff;}
div#contenu2 {width:760px;height:600px;background-color:#ff9;}
div#piedpage2 {width:760px;height:75px;background-color:#fcf;}
</style>
</head>
<body>
<div id="bandeau1">
bandeau1
</div>
<div id="contenu1">
contenu1
</div>
<div id="piedpage1">
piedpage1
</div>
<p><br><br></p>
<div id="conteneur">
<div id="bandeau2">
bandeau2
</div>
<div id="contenu2">
contenu2
</div>
<div id="piedpage2">
piedpage2
</div>
</div>
</body>
</html>La 2e solution est la plus pratique.
++
1200px. Tu as besoin de tout ça ?
Bouton code
--
je trouve aussi que 1200px ça fait un peu beaucoup...
Pour mettre le menu à gauche avec le container principal "collé" à coté tu dois les mettre en float:left; tout les 2.
j'ai fait quelques corrections sur ton code pour que tu puisses t'en inspirer :
Pour mettre le menu à gauche avec le container principal "collé" à coté tu dois les mettre en float:left; tout les 2.
j'ai fait quelques corrections sur ton code pour que tu puisses t'en inspirer :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>document</title>
<style type="text/css">
body {margin:0;padding:0;}
div {text-align:center;}
div#container {margin:0;padding:0;width:1200px;}
div#bandeau {height:75px;background-color:#99FFFF;}
div#menu {float:left;width:150px;height:600px;background-color:#66FF66;}
div#contenu {float:left;width:1050px;height:600px;background-color:#FFFF99;}
div#piedpage {clear:left;height:75px;background-color:#FFCCFF;}
</style>
</head>
<body>
<div id="container">
<div id="bandeau">
<h1>images</h1>
</div>
<div id="menu">menu</div>
<div id="contenu">
<br><br><br><br><br>
<h1>outsiplou</h1>
<br><br><br>
<h3>un site convivial</h3>
<br>
<h5>conçu et réalisé<br>par<br></h5>
<h2>le p'tit joseph</h2>
</div>
<div id="piedpage">
<h3>contactez-moi</h3>
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Moi je te conseille de télécharger "simple css" avec sa plus de prise de tête ;) c'est une corde mon ami .
un petit clin d'oeil, merci pour ta réponse, mais je suis un perfectioniste et j'aime les choses compliquées...
par exemple, je sais qu'il est plus facile de réussir une béarnaise avec les sachets de poudre, mais perso je préfère la monter avec les oeufs et le beurre....
en plus c'est pcq je prépare un examen d'entrée, alors il vaut mieux comprendre ce qu'on fait et pourquoi on le fait
merci et bon dimanche à+
par exemple, je sais qu'il est plus facile de réussir une béarnaise avec les sachets de poudre, mais perso je préfère la monter avec les oeufs et le beurre....
en plus c'est pcq je prépare un examen d'entrée, alors il vaut mieux comprendre ce qu'on fait et pourquoi on le fait
merci et bon dimanche à+
merci, ça marche, j'ai adopter ta formule et je continue...
j'ai modifié le texte...
j'ai ajouter une image dans le bandeau, mais est-elle sur la feuille de style? de même que le lien vers formulaire...
quant-au formulaire il est un peu pas beau...
j'aimerais aligner les cases à remplir et les redimensionner en fonction de cqu'elles vont contenir
enfin terminer par un lien vers e-mail pour "valider"
ensuite on verra pour créer une base de donnée en excel
merci, bon dimanche à tous
<html>
<head>
<title>document</title>
<style type="text/css">
body {margin:25px;padding:0;}
div {text-align:center;}
div#container {margin:0;padding:0;width:1200px;}
div#bandeau {height:75px;background-color:#99FFFF;}
div#menu {float:left;width:150px;height:600px;background-color:#66FF66;}
div#contenu {float:left;width:1050px;height:600px;background-color:#FFFF99;}
div#piedpage {clear:left;height:75px;background-color:#FFCCFF;}
</style>
</head>
<body>
<div id="container">
<div id="bandeau"><img src="im9.jpg">
</div>
<div id="menu">menu</div>
<div id="contenu">
<br><br><br><br><br>
<h1>Moulisart</h1>
<br><br><br>
<h3>un site convivial</h3>
<br>
<h5>conçu et réalisé<br>par<br></h5>
<h2>Nestor</h2>
</div>
<div id="piedpage">
<h3><a href="formulaire.html">contactez-moi</a></h3>
</div>
</div>
</body>
</html>
FORMULAIRE:
<H1><u><CENTER>donnez-moi votre avis...</CENTER></u></H1>
<FORM NAME="Fiche_inscription">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
pseudo : <input type ="text" name="pseudo" value=""><br><br>
rue : <input type ="text" name="rue" value="">
n° : <input type ="text" name=" n°" value="">
boite : <input type ="text" name=" boite" value=""><br><br>
code postal : <input type ="text" name=" code postal" value="">
localité : <input type ="text" name=" localité" value=""><br><br>
telephone : <input type ="text" name=" téléphone" value="">
fax : <input type ="text" name=" fax" value="">
gsm : <input type ="text" name=" gsm" value=""><br><br>
e-mail : <input type ="text" name="e-mail" value=""><br>
<p>
Ecrivez ci-dessous :<BR>
<TEXTAREA NAME="Projet" ROWS=8 COLS=55>
</TEXTAREA>
<P>
<INPUT TYPE="RESET" VALUE="Effacer"> Pour recommencer<P>
<INPUT TYPE="SUBMIT" VALUE="Valider" >Pour envoyer ces informations<P>
</FORM >
j'ai modifié le texte...
j'ai ajouter une image dans le bandeau, mais est-elle sur la feuille de style? de même que le lien vers formulaire...
quant-au formulaire il est un peu pas beau...
j'aimerais aligner les cases à remplir et les redimensionner en fonction de cqu'elles vont contenir
enfin terminer par un lien vers e-mail pour "valider"
ensuite on verra pour créer une base de donnée en excel
merci, bon dimanche à tous
<html>
<head>
<title>document</title>
<style type="text/css">
body {margin:25px;padding:0;}
div {text-align:center;}
div#container {margin:0;padding:0;width:1200px;}
div#bandeau {height:75px;background-color:#99FFFF;}
div#menu {float:left;width:150px;height:600px;background-color:#66FF66;}
div#contenu {float:left;width:1050px;height:600px;background-color:#FFFF99;}
div#piedpage {clear:left;height:75px;background-color:#FFCCFF;}
</style>
</head>
<body>
<div id="container">
<div id="bandeau"><img src="im9.jpg">
</div>
<div id="menu">menu</div>
<div id="contenu">
<br><br><br><br><br>
<h1>Moulisart</h1>
<br><br><br>
<h3>un site convivial</h3>
<br>
<h5>conçu et réalisé<br>par<br></h5>
<h2>Nestor</h2>
</div>
<div id="piedpage">
<h3><a href="formulaire.html">contactez-moi</a></h3>
</div>
</div>
</body>
</html>
FORMULAIRE:
<H1><u><CENTER>donnez-moi votre avis...</CENTER></u></H1>
<FORM NAME="Fiche_inscription">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
pseudo : <input type ="text" name="pseudo" value=""><br><br>
rue : <input type ="text" name="rue" value="">
n° : <input type ="text" name=" n°" value="">
boite : <input type ="text" name=" boite" value=""><br><br>
code postal : <input type ="text" name=" code postal" value="">
localité : <input type ="text" name=" localité" value=""><br><br>
telephone : <input type ="text" name=" téléphone" value="">
fax : <input type ="text" name=" fax" value="">
gsm : <input type ="text" name=" gsm" value=""><br><br>
e-mail : <input type ="text" name="e-mail" value=""><br>
<p>
Ecrivez ci-dessous :<BR>
<TEXTAREA NAME="Projet" ROWS=8 COLS=55>
</TEXTAREA>
<P>
<INPUT TYPE="RESET" VALUE="Effacer"> Pour recommencer<P>
<INPUT TYPE="SUBMIT" VALUE="Valider" >Pour envoyer ces informations<P>
</FORM >
apparemment j'arrive un peu tard... désolé
Enfin le plus important est que tu ai réussi à terminer ton formulaire ;-)
Cela mis à part, dans ton avant dernier post tu parles de base de données excel : je te conseillerai plutôt mysql pour stocker les info et php pour effectuer les traitements
Bon courage ;-)
Enfin le plus important est que tu ai réussi à terminer ton formulaire ;-)
Cela mis à part, dans ton avant dernier post tu parles de base de données excel : je te conseillerai plutôt mysql pour stocker les info et php pour effectuer les traitements
Bon courage ;-)
<head><link rel="stylesheet" type="text/css" href="style_div.css">
<body><div id="bandeau"><h1 ><br>images</h></div>
<div id="contenu"><h1 ><br><br><br><br><br>outsiplou<br><h3 ><br><br>un site convivial</h><br><h5>conçu et réalisé<br>par<br></h>
<h2>le p'tit joseph</h></div>
<div id="menu">menu</div>
<div id="piedpage"><h3><br> contactez-moi</h></div>
</body>
</head>
</html>
div{text-align:center;}
div#bandeau {width:1200px;height:75px;background-color:#99FFFF;}
div#contenu {float:right;width:1050px;height:600px;background-color:#FFFF99;}
div#piedpage {width:1200px;height:75px;background-color:#FFCCFF;}
div#menu {float:left;width:150px;height:600px;background-color:#66FF66;}
j'ai deja changer beaucoup de choses, cà a marché et maintenant c'est le "menu" qui ne colle plus au contenu
merci
Ça risque d'être long.
Il est donc préférable que apprennes à produire un code HTML logique, à utiliser les différentes balises correctement et à bon escient. Corrige le code HTML avant de vouloir lui appliquer des styles
w3.org
Sinon, comment veux-tu que les navigateurs s'y retrouvent ?
Les concepteurs ne peuvent pas prévoir toutes les manières erronées de coder.
Ensuite, que tu te renseignes sur les manières de positionner des blocs en CSS
alsacreations
Si tu as besoins de précisions, demande.
--