Problème CSS

Problème CSS - HTML/CSS - Programmation

Marsh Posté le 14-04-2005 à 00:31:16    

Salut !  
 
Voila je pose mon probleme:
 
J'ai creé un bloc Head, Gauche (menu), Milieu et Bas
 
Dans le milieu (zone de texte) j'ai ecrit beaucoup de ligne. Le probleme c'est que le menu de gauche et le bas s'arrete et mon bloc de texte lui continue vu qu'il est rempli de texte.  
 
Cela donne sa : http://viceland.free.fr/Sanstitre5.jpg
Mon site en HTML : http://viceland.free.fr/accueil.htm
 
Comment corriger ce gros problème et si possible améliorer.
Je compte sur vous pour m'aider.
 
Mon CSS (peut etre nul je suis tout débutant) :
 
body {background-color:#333333;
 
margin: 0;/* sans marges, la page sera collée aux bords */
 
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
}
a:link {color: #ffffff; text-decoration:none;}
a:visited {color: #ffffff; text-decoration:none;}
a:hover {color: #ffffff; text-decoration:underline;}
.head1 {
 BACKGROUND-IMAGE: url(design/head1.jpg); WIDTH: 800px; HEIGHT: 130px
}
.gauche {
 LEFT: 0px; BACKGROUND-IMAGE: url(design/menua.jpg); WIDTH: 160px; POSITION: absolute; HEIGHT: auto; padding-top: 0px;  
 top: 130px; z-index: 1;
}
.milieu {
 LEFT: 160px; margin-top: 0px; BACKGROUND-IMAGE: url(design/milieu.jpg); WIDTH: 640px; POSITION: absolute;
 HEIGHT: 800px; top: auto;
}
.bas {
 BACKGROUND-IMAGE: url(design/bas.jpg); WIDTH: 800px; HEIGHT: 58px; POSITION: absolute; left: 0px; top: auto;
}


---------------
-- Creasyman2 --
Reply

Marsh Posté le 14-04-2005 à 00:31:16   

Reply

Marsh Posté le 14-04-2005 à 00:34:02    

[:daplopbot]  
 
1/ c'est quoi tous ces tableaux ??
2/ et ces majuscules ??
 
3/ et les balises [code]  [:florentg]


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 14-04-2005 à 11:09:16    

KangOl a écrit :

[:daplopbot]  
 
1/ c'est quoi tous ces tableaux ??
2/ et ces majuscules ??
 
3/ et les balises [code]  [:florentg]


 
 
de quoi tu parle ??? du site version HTML ? ou du code


---------------
-- Creasyman2 --
Reply

Marsh Posté le 14-04-2005 à 11:10:23    

Y'a plein de tableaux qui n'ont rien à foutre ici dans ton code :D Et par convention, on n'écrit jamais de propriété en majuscules

Reply

Marsh Posté le 14-04-2005 à 19:32:26    

le quel tableau ??? j'ai le header, le bloc de menu à gauche, le bloc de texte central, et le bas


---------------
-- Creasyman2 --
Reply

Marsh Posté le 15-04-2005 à 12:12:36    

Moi je vois plein de tableaux dans la page que t'as donné ;)

Reply

Marsh Posté le 15-04-2005 à 14:21:00    

des tables ??? yen a pour la partie central (texte) mais cela fait pas partie du design... qqn pourrait m'aider a résoudre ce probleme : http://viceland.free.fr/Sanstitre5.jpg  
 
merci


---------------
-- Creasyman2 --
Reply

Marsh Posté le 15-04-2005 à 14:34:08    

creasyman2 a écrit :

des tables ??? yen a pour la partie central (texte) mais cela fait pas partie du design... qqn pourrait m'aider a résoudre ce probleme : http://viceland.free.fr/Sanstitre5.jpg  
 
merci


Ah bon :heink:  
 
Alors qu'est ce qu'elles foutent là?
Elles battent le beur?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-04-2005 à 15:43:59    

Voila je vais reposer exactement le problème de A à Z.
 
Pour commencer j'aimerai faire mon design en CSS avec des blocs etc...  
Pour le moment il est en HTML avec des tableaux de partout  
   Ex: http://viceland.free.fr/accueil.htm (version HTML)
 
J'aimerai le faire comme ceci :
   Modèle dessin : http://viceland.free.fr/dessin.jpg
   Modèle réel   : http://viceland.free.fr/dessin2.jpg
 
Pour résumer :
  - Design fixe d'une largeur de 800px
  - Header se place toujours tout en haut
  - Menu toujours à gauche ET qui se prolonge verticalement jusqu'à ce qu'il n'y est plus de texte dans la partie "CENTRE".
Autrement dit si j'ai une page avec beaucoup d'information le menu doit suivre jusqu'en bas mais si ma page est courte, le menu s'arrete aussi.  
  -Pied toujours en bas en dessous du texte et du menu de gauche (tout comme le menu il continue si la page est longue.  
 
Chose qui ne doit pas se produire : http://viceland.free/Sanstitre5.jpg
 
Une question :
 - Quel est la difference entre :  
 
<div class="...."></div> , <div id=...></div> et <ul class=...></ul>
 
 
Voilà j'ai essayé d'être le plus clair possible, cela serait vraiment sympas que vous m'aidiez car je suis bloqué depuis pas mal de temps.  
 
Merci
 
 


---------------
-- Creasyman2 --
Reply

Marsh Posté le 15-04-2005 à 16:24:10    

creasyman2 a écrit :


 
  - Design fixe d'une largeur de 800px


 
Div global de 800px de large et d'une hauteur en auto. (au fait, si tu veux la compatibilité avec les écran 800/600, c'est 768 le maximum... et 760 même dans certains cas)/

Citation :


 - Header se place toujours tout en haut


 
Un simple div avec width en auto et hauteur que tu veux précisée.
 

Citation :

 - Menu toujours à gauche ET qui se prolonge verticalement jusqu'à ce qu'il n'y est plus de texte dans la partie "CENTRE".
Autrement dit si j'ai une page avec beaucoup d'information le menu doit suivre jusqu'en bas mais si ma page est courte, le menu s'arrete aussi.  


 
Une table de deux colonnes, la colonne de gauche pour le menu et la colonne de droite pour le contenu. C'est ce qu'il y a de moins lourd et de plus compatible à l'heure actuelle, même si ce n'est pas non plus LA solution. Il n'y a pas de solution réellement satisfaisante, mais c'est la solution la plus sûre, la plus simple et la plus efficace, qui ne repose pas sur des bugs ou des hacks en tous genre...
 

Citation :

 -Pied toujours en bas en dessous du texte et du menu de gauche (tout comme le menu il continue si la page est longue.


 
Un simple div avec width en auto et height précisé.
 

Reply

Marsh Posté le 15-04-2005 à 16:24:10   

Reply

Marsh Posté le 15-04-2005 à 17:31:07    

creasyman2 a écrit :


Quel est la difference entre :  
<div class="...."></div> , <div id=...></div> et <ul class=...></ul>


 

Code :
  1. <div class="...."></div>


 
tu met class quand tu veut appliquer plusieurs fois la même chose
par exemple:  
<div class="corps">Présentation</div>
<div class="corps">Infos</div>
etc...
 

Code :
  1. <div id=...></div>


id quand ce sera le seul
par exemple:
<div id="footer">Pied de page</div>
 

Code :
  1. <ul class=...></ul>


là je sais pas quoi te dire  :pt1cable:  :sarcastic:  [:airforceone]  
 
 
(je sais pas si j'ai été clair, mais j'ai fais de mon mieux  :D)


Message édité par blastman le 15-04-2005 à 17:39:41

---------------
http://www.blastmanu.info
Reply

Marsh Posté le 15-04-2005 à 17:36:36    

blastman a écrit :

Code :
  1. <div class="...."></div>


 
tu met class quand tu veut appliquer plusieurs fois la même chose
par exemple:  
<div class="corps">Présentation</div>
<div class="corps">Infos</div>
etc...


À noter qu'on peut avoir des éléments différents de la même classe, si le style (ou l'effet à produire à coup de JS) est commun:

<div class="mahou"></div>
<span class="mahou"></span>
<a class="mahou" href="#"></a>


Citation :

Code :
  1. <ul class=...></ul>


là je sais pas quoi te dire [:airforceone]


"Voir au dessus" :o


Message édité par masklinn le 15-04-2005 à 17:36:57

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-04-2005 à 17:41:38    

masklinn a écrit :


Citation :

Code :
  1. <ul class=...></ul>


là je sais pas quoi te dire [:airforceone]


"Voir au dessus" :o


 
j'ai rajouté 2 smiley que j'aurais dù mettre :)


---------------
http://www.blastmanu.info
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed