Problème de mise en page générale...

25 févr. 2006, 17:43

Bonjour à tous!
Je suis en train de réaliser un site et je m'efforce de la faire en css...
mais y a quelques merdouille (j'en suis qu'au début)
Bon je met déja les adresses pour que vous voyez:
Fichier styles.css
Le fichier html
J'explique les différents problèmes:
Le premier:
Sous firefox: il y a un espace entre le cadres violet et le pied de page
J'aimerai que le menu s'alonge autant que le cadre violet(même si il y a moins de chose dans le menu).
Voila j'espère que je suis clair dans mes attentes

Sinon hésité pas...
Merci d'avance

26 févr. 2006, 02:57

Salut.

Juste pour info :

Dans ton code html, tu as mis du script javascript. C'est bien mais il est tres mal place.
Il faut que tu le deplace dans les balises <html> et <head> si c'est un script qui sera appeler lors d'un evenement ou autre. Petit exemple :

Code : Tout sélectionner

<html>
<head>
  <script  language="Javascript" type="text/javascript">
   //ici ton script.
  </script>
</head>
<body>
</body>
</html>

Voila le minimum pour bien commencer.

Ensuite pour les problemes de navigateur, il est vivement conseiller de mettre la doctype:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ceci est a mettre au debut de ta page HTML. Attention, il ne faut aucun espace ou retour a la ligne avant cette ligne de code.

Je t'invite a aller voir ce site la : alsacreations

Je te recommende vivement la FAQ qui est dans le menu du haut. Il est aussi tres important de lire les differents tutoriaux qui se trouvent dans la section tous les tutoriels.

Tu trouveras toujours sur le meme site, une section qui te presente differentes possibilites pour faire des sites a partir de patron. Regarde dans la partie modeles.

Bon au final, suffit d'aller sur ce site ou d'acheter le bouquin CSS 2 : Pratique du design web qui est tres bien pour apprendre le css. Il ne coute pas cher et en une petite semaine tu connais le css.

Bon courrage et bonne lecture.

26 févr. 2006, 12:22

Pour te répondre en partie, le javascript, c'est pas de ma faute...

c'est ifrance (mon hébergeur), qui rajoute automatiquement ça pour mettre sa bannière de pub...
Mais je vais continuer à me documenter...
Une autre question, j'ai lu ce tutoriel(le premier), mais je me demande comment on peut faire, si on veut avoir plusieurs cadre alongeables...????
Vu que les balises sont les mêmes?
je vous pose donc la question!
merci d'avance

26 févr. 2006, 23:16

le mieux pour avoir un menu de même taille que le contenu qui est à coté est de mettre le menu dans une div colonne_menu et de faire en sorte que celle si est la même hauteur que celle de contenu et la même couleur d'arriere plan que celle du menu

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <script  language="Javascript" type="text/javascript">
   //ici ton script.
  </script>
</head>
<body>
<div id="global">
	<div class="entete">blabla<br>ra</div>        
        <div class="container">
		<div id="colonne_menu">
		      <div id="menu">
                      <a>essai</a>
                      </div>
                </div>
                <div class="contenu">							                  <p>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br></p>
		</div>
		
	</div>
<div class="pied">bla</div>
</div>
</body>
</html>

essaye de voir ensuite avec le CSS pour la mise en forme

26 févr. 2006, 23:21

Quelle horreur de voir des choses pareille: de la mise en page à coup de <br />

Une petite référence peut-être ?

27 févr. 2006, 00:18

Merci à vous pour les réponses... Mais je suis partit sur une autre voie, finalement, je fait un cadre fixe, avec le centre en overflow...

Quelle horreur de voir des choses pareille: de la mise en page à coup de <br /> Shocked

il à pas mit de <br> pour la mise en page, c'est pour faire semplant que ya du contenu... (enfin je croit

)

27 févr. 2006, 11:08

il à pas mit de <br> pour la mise en page,
c'est pour faire semplant que ya du contenu... (enfin je croit )

Et le Lorem ipsum, ça sert à quoi alors ?...

28 févr. 2006, 00:30

perso voici le cadre global que j'utilise pour la majorité de mes sites, après je brode autour:

Code : Tout sélectionner

<html>
<head>
<title>Mon site de base</title>
</head>
<body>
<div id="conteneur">
   <div id="header">ICI TON HEADER</div>
   <div id="menu">TON MENU (époustouflant nan?)</div>
   <div id="contenu">TA PAGE PROPREMENT DITE</div>
   <div id="footer">TON FOOTER</div>
</div>
</body>
</html>

et ensuite coté CSS:

Code : Tout sélectionner

#conteneur {
width: 750px; //toujours une largeur, sinon bug
}
#menu {
float: left;
width: 160px;
}
#contenu {
margin-left: 160px;//à ajuster à ±1 pour les chevauchements
}
#footer {
clear: both; // te permet d'étirer le plus court des deux divs du dessus à la bonne longueur
}

vala, en espérant que ça t'aide

28 févr. 2006, 00:34

Code : Tout sélectionner
...//toujours une largeur, sinon bug

Pas normal ça, pourquoi aurais-tu un bug en ne fixant pas de largeur ? Ça n'a strictement rien d'obligatoire et tu peux parfaitement avoir une mise en page générale qui occupe toute la largeur de l'écran en s'adaptant selon la définition de l'internaute.

28 févr. 2006, 12:56

perso voici le cadre global que j'utilise pour la majorité de mes sites, après je brode autour:

Code : Tout sélectionner
<html> <head> <title>Mon site de base</title> </head> <body> <div id="conteneur"> <div id="header">ICI TON HEADER</div> <div id="menu">TON MENU (époustouflant nan?)</div> <div id="contenu">TA PAGE PROPREMENT DITE</div> <div id="footer">TON FOOTER</div> </div> </body> </html>

Tu ne mets pas ton DOCTYPE par defaut. C'est pourtant super pratique de garder sur chaque page un en-tete equivalent. De plus selon les navigateurs le mode quirck est tres differents, si je me souvients bien.

Problème de mise en page générale...

Qui est en ligne