High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Creation feuille de style

Dernière réponse le 10 déc 2007 à 11:29:05 jjaco, le 8 déc 2007 à 20:34:22 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « creation feuille de style » dans :
[Outils] Freewares pour la création de sites Voir1. Éditeurs WYSIWYG 2. Éditeurs de code 3. Client FTP 4. Graphisme et retouche d'images 5. Graphisme de style FLASH 6. Édition audio 7. Serveur web Freewares pour la création de sites Vu le nombre de demandes pour créer un site, voici...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...
Tableur - Les feuilles de calcul VoirLa notion de feuille de calcul Un tableur présente les données et les formules sous forme d'un tableau (lignes et colonnes) appelé feuille de calcul. Une feuille de calcul est constitué de lignes (numérotées à l'aide de chiffres) et de colonnes...
Les unités dans les feuilles de style (CSS) VoirLes boîtes Les balises DIV définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts. Le standard CSS propose un certain nombre de propriétés permettant de contrôler...
Posez votre question Répondre

1

JBiN-1, le 8 déc 2007 à 20:37:48

Peux tu envoyer ta page html associée ainsi que spécifier ce que tu obtient à l'écran !

   
Répondre à JBiN-1

4

jjaco_tsx, le 9 déc 2007 à 00:15:52

<html>
<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

   
Répondre à jjaco_tsx

5

Gihef, le 9 déc 2007 à 00:46:47

On peut t'indiquer les nombreuses erreurs qui parsèment ton code.
Ç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.

--

   
Répondre à Gihef

2

Webline, le 8 déc 2007 à 20:51:21

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.

   
Répondre à Webline

3

Gihef, le 8 déc 2007 à 22:22:59

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).

<!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

--

   
Répondre à Gihef

6

Webline, le 9 déc 2007 à 01:05:48

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 : 

<!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>

   
Répondre à Webline

7

lothi, le 9 déc 2007 à 01:22:24

Moi je te conseille de télécharger "simple css" avec sa plus de prise de tête ;) c'est une corde mon ami .

   
Répondre à lothi

9

jjaco_tsx, le 9 déc 2007 à 13:48:54

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 à+

   
Répondre à jjaco_tsx

8

jjaco_tsx, le 9 déc 2007 à 12:17:55

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 >

   
Répondre à jjaco_tsx

10

jjaco_tsx, le 9 déc 2007 à 23:42:50

Ok je peux dormir en paix
j'ai déjà réussi ma feuille de formulaire
bonne nuit à tous et merci

   
Répondre à jjaco_tsx

11

 Webline, le 10 déc 2007 à 11:29:05

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 ;-)

   
Répondre à Webline
Posez votre question Répondre
Ils ont besoin de votre aide