28220 sujets

CSS et mise en forme, CSS3

Probleme de design

Salut a tous ,je suis nouveau et j'ai un problème alors je vous l'expose :

alors voila ,j'ai un design que j'ai coupé en 5 parties ,la baniere ,les deux menus (sachant qu'il y en a un a gauche et un a droite) le corps et le copyright ,le problème c'est que pour les afficher correctement il faut les mettre dans un meme bloc (html) sinon il y a un gros décalage .J'ai réussi a afficher le design mais le problème maintenant c'est que quand je veux mettre du texte (ou un lien) sur un des parties du design ,la partie en question se décale .Alors j'ai enlevé le texte et j'ai juste laissé le design pour vous montré ce que ca donne :

http://pagesperso.laposte.net/bejito/Site/page1.html

Et voici les codes XHTML et CSS

XHTML :

<!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>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
   </head>

   <body>

       <!-- L'en-tête -->

       <div id="banniere">
	   
	  
           
       </div>

       <!-- Les menus -->

       <div>  
        
        <div>		
           <div class="menu1">
		  <div>
		  
               
             
           <div class="corps">
		   
		          
            <div id="menu2">
			
			
		   
		 
            
              			  
		</div>
			
       </div>

       <!-- Le corps -->

       
           
       

       <!-- Le pied de page -->

       <div class="copyright">
          
       </div>
	   
	   

   </body>
</html>


CSS :

body
{
   width: 1000px;
   height: 1500px;
   background-color: black;
   margin: auto;
}

/* L'en-tête */

#banniere
{
   width: 1000px;
   height: 252px;
   background-image: url("images/design_01.jpg");
   margin-bottom: 0px;
   margin-left: 0px;
}

.menu1
{
   width: 244px;
   height: 1234px;
   background-image: url("images/design_02.jpg");
   margin-bottom: 0px;
   margin-left: 0px;
}

#menu2
{
   width: 247px;
   height: 1234px;
   background-image: url("images/design_04.jpg");
   margin-bottom: 0px;
   margin-left: 509px;
}

.corps
{
   width: 509px;
   height: 1234px;
   background-image: url("images/design_03.jpg");
   margin-bottom: 0px;
   margin-left: 244px;
}

.copyright
{
   width: 1000px;
   height: 14px;
   background-image: url("images/design_05.jpg");
   margin-bottom: 0px;
   margin-top: 0px;   
   margin-right: 244px;
}


Perso ,j'ai un peu l'impression d'avoir fait n'importe quoi et que le design s'est affiché par chance lol .

Donc voila pour l'instant j'en suis la ,si j'ai fait n'importe quoi ,j'aimerai bien que quelqu'un me donne un exemple de ce que j'aurai du faire ,et si c'est bon ,j'aimerai bien un exemble de lien placé au bon endroit (dans le premier menu par exemple) .Je dois etre un peu chiant mais bon ,je suis juste un noob qui essaye d'apprendre ^^ .

EDIT : Je viens de voir qu'il y a un problème et que plusieurs élément se répète (pourquoi ? j'en sais rien) pourtant quand j'ai verifié en local avec FireFox il y avait rien d'anormal ,je pige pas .
Sinon je pensais pas qu'on pouvais faire son site avec les <td> et <tr> (donc les tableaux) ,quelle méthode est la meilleur et laquel la plus simple (et oui ,je suis un noob a l'état pur ,qui arrete pas de poser des question et de demender des exemples lol)

Voila ,si vous avez besoin de plus de renseignement je vous les donnerai .

Merci de m'aidé !
Modifié par Kakarotto (01 Sep 2005 - 16:47)
Qu'est ce que je peux faire pour arrangé ca (j'ai pas bien saisi le problème) et je dois codé en quel laguage si le xhtml 1.1 n'est pas bon ?

Sinon j'ai vu de nombreux site qui mettait en page leur design avec les tableaux ,c'est une bonne méthode ?
pour arranger ca tu doit corriger les erreur que t'indique le validateur

voila pour décider en quel language coder : http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

enfin, les site qui utilisent les tableaux pour la mise en pages sont obsolètes, il vaut mieux faire des site dit "tableless" (sans tableaux) en (x)html et css en séparant le fond de la forme car ils sont plus accessible aux handicaps.

Smiley smile
Modifié par the_penguin (01 Sep 2005 - 17:29)
Bon ca va beaucoup mieux maintenant ,je peux affiché mes liens les placé ,ainsi que placé mon texte correctement . J'ai verifié la validité de ma page quand elle était encore sur mon disque dur et elle est valide .J'ai aussi codé en HTML 4.01 (j'ai abandonné le XHTML 1.1)

Il reste néanmoins quelque petit problème ^^ :

1) Mon footer s'affiche mais pas qu'une seule fois ,deux fois ,et la deuxième est coupé (avec IE6 ,sur FireFox le footer s'affiche normalement) .

2) Mon deuxième problème c'est que la page que j'ai crée s'affiche correctement sous IE6 (hors mi le footer) tandis que sur FireFox ,quelque parties du design sont décalé ,et les liens que j'ai mis ne sont pas bien positionné (alors qu'avec IE6 ils sont bien positionné)

3) Ca c'est pas un problème mais une question ,comment faire pour espacé les élément d'une liste a puce ? Parce que la je trouve que c'est un peu trop serré .

Le lien :

http://pagesperso.laposte.net/bejito/Site/page1.html

Le code html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>   
   <head>
       <title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css">
   </head>

   <body>

       <!-- L'en-tête -->

       <div id="banniere">
	   
	   
           
       </div>

       <!-- Les menus -->
 
        		
           <div id="menu1">
		   <ul class="1">
                   <li><a href="page1.html">Acceuil</a></li>
                   <li><a href="page2.html">Forum</a></li>
                   <li><a href="page3.html">La Team</a></li>
				   <li><a href="page4.html">Chat</a></li>
                   <li><a href="page5.html">Livre d'or</a></li>
                   <li><a href="page6.html">Awards</a></li>
               </ul>


		   
		   </div>
               
               
          
		   
		          
            <div id="menu2">
			
			<ul class="2">
                   <li><a href="www.inuyasha-no-kokoro.com">Inuyasha No Kokoro</a></li>
                   <li><a href="www.ranma-otaku.com">Ranma Otaku</a></li>
                   <li><a href="page9.html">Ikkoku kan</a></li>
               </ul>

			
			</div>
			
			
		   
		 
		
			

       <!-- Le corps -->

        <div id="corps">
		
		<div class="texte">
	<p>Salut a tous !<br />
meorigjmdroigjemso<br />
rhjseghltrjerlisuheiuthlihlehsgjdghflkjghdlkghkljrethiudfhgkfhgiruthgk</p><p>rfhgurjhtkugfdhkjgkruhtkfjhgiruhgkd
fhgkurehgkjdfghkudrthkdruhjv</p>
		
		</div>
		
		</div>
           
       

       <!-- Le pied de page -->

    <div id="copyright">
      
    </div>

   </body>
</html>


Le code CSS :

body
{
   width: 1000px;
   height: 1500px;
   background-color: black;
   margin: auto;
}

/* L'en-tête */

#banniere
{
   width: 1000px;
   height: 252px;
   background-image: url("images/design_01.jpg");
   margin-bottom: 0px;
   margin-left: 0px;
}

#menu1
{
   width: 244px;
   height: 1234px;
   background-image: url("images/design_02.jpg");
   margin-bottom: -1234px;
   margin-left: 0px;
   float: left;
}

#menu2
{
   width: 247px;
   height: 1234px;
   background-image: url("images/design_04.jpg");
   margin-bottom: -1234px;
   margin-left: 753px;
}

#corps
{
   width: 509px;
   height: 1234px;
   background-image: url("images/design_03.jpg");
   margin-bottom: 0px;
   margin-left: 244px;
}

#copyright
{
   width: 1000px;
   height: 14px;
   background-image: url("images/design_05.jpg");
   float: center;
}

.texte
{
   padding-top: 100px;
   margin-bottom: 0px;
   margin-left: 50px;
   color: black;
   text-align: justify; /* Ils seront justifiés */
   font-size: normal;
}

a
{
   text-align: center;
   text-decoration: none;
   color: #00a5ff;
}

a:hover 
{
   text-decoration: underline;
   color: #0000ff;
}

a:visited
{
   color: black; 
}

.1
{
   float: right;
   margin-right: 20px; 
   margin-top: 200px;
   text-align: center; 
   list-style-type: none   
}

.2
{
   float: left;
   margin-left: 3px; 
   margin-top: 200px; 
   list-style-type: none;
   text-align: center;   
}

Modifié par Kakarotto (02 Sep 2005 - 03:22)
Désolé du double poste ,mais j'ai edité mon précédent message (étant donné que je pouvais pas le rafraichir.)
Sur FireFox c'est pas tout a fait pareil mais c'est dans le meme genre et je comprend pas pourquoi ,merci pour ces images Phil .
Sinon est ce que quelqu'un pourrait m'aidé parce que la je comprend pas tout , ca a marché une fois sur FireFox mais toute les parties du design était dans un meme block et le problème c'est que quand je voulais mettre du texte dessus et le placé ,ca déplacait aussi la partie en question ,ca vient peut etre du code HTML mais je vois pas ou se situe l'erreur ,si quelqu'un pourrait éclairé ma lanterne ca serait vraiment sympa de sa part ,parce que ca fait au moins trois jours que je stagne Smiley bawling .
Pour régler les problèmes d'affichage sur Firefox utilise l'inspecteur DOM (pré-installé normalement).

Cela va te faciliter et simplifier la vie résultat t'auras sûrement trouvé le problème tout seul en moins de deux.

Et un affichage impécable sur FF l'est souvent sur Opera (8)...

PS : j'avais trouvé un trés bon tutorial pour utiliser l'inspecteur DOM de Mozilla en français mais impossible de remettre la main dessus si quelqu'un voit de quoi je parle...
Il était hébergé sur le site officiel Mozilla je crois.
Kakarotto sans tomber dans la démarche marketing d'Opera Software je t'inciterais tout de même à tester ce navigateur qui dans sa dernière version a fait évoluer son interface utilisateur qui selon moi est de trés loin la meilleure sur le marché.

Opera 8 n'est pas payant. Sauf si tu es fort incommodé par la bannière pub qui s'affiche mais qui passe inaperçu quand tu es dans une résolution comme 1280*1024 et puis elle se confond presque avec l'interface. Smiley lol
Ouai faudrai que je l'essaye un de ces jours car ce navigateur me parait prometteur .
Sinon en ce qui concerne FireFox ,j'ai l'inspecteur DOM mais je sais pas comment l'utilisé ,après une recherche sur le net ,je n'ai trouvé qu'un tuto assez mal expliqué .
Je sais google est mon ami ,mais la il veut pas m'aidé Smiley lol .
Donc si quelqu'un pouvait le faire a sa place ce serait gentil ^^.

EDIT : Et si j'aligne les bloc ca pourrai arrangé l'affaire ?
Modifié par Kakarotto (03 Sep 2005 - 19:45)
Bon désolé du double poste mais c'est une nouveau problème ,alors l'affichage du design de est impeccable sous FireFox ,mais sous IE6 la colone de droite est légèrement décalé vers la droite ,le problème c'est que si j'utilise un margin-right pour la réemboité avec le design ,il se décale aussi sur FireFox .

Un autre petit problème ,cette fois ci au niveau des listes a puces qui constituent les menus ,j'ai mis une class différente au deux listes ,le problème c'est qu'elles sont pas modifiable via la class ,mais via la balise <ul> ,hors si j'effectue les modifs sur la balise ,ca modifiera toute les listes a puces qu'il y a sur ma page (c'est plus pour l'emplacement des liens que pour autre chose) ,donc j'aimerai modifié seulement la class .

Revoici le lien : http://pagesperso.laposte.net/bejito/Site/page1.html

Etant donné que je ne vois pas ou se site le problème je vous met les deux listes a puces qui figurent sur ma page . 

<div id="menu1">
		   <ul>
                   <li><a href="page1.html">Acceuil</a></li>
                   <li><a href="page2.html">Forum</a></li>
                   <li><a href="page3.html">La Team</a></li>
				   <li><a href="page4.html">Chat</a></li>
                   <li><a href="page5.html">Livre d'or</a></li>
                   <li><a href="page6.html">Awards</a></li>
               </ul>
            </div>

		   
               
               
          
		   
		          
            <div id="menu2">
			
			<ul class="2">
                   <li><a href="www.inuyasha-no-kokoro.com">Inuyasha No Kokoro</a></li>
                   <li><a href="www.ranma-otaku.com">Ranma Otaku</a></li>
                   <li><a href="page9.html">Ikkoku kan</a></li>
               </ul>

			
			</div>


Code CSS :

#menu1
{
background-image: url("images1/design_02.jpg");
float: left; 
width: 244px;
height: 1248px; 
}


#corps
{ 
background-image: url("images1/design_03.jpg");
position: absolute;
left: 244px;
top: 252px;
height: 1248px;
width: 509px;
}

#menu2
{
background-image: url("images1/design_04.jpg");
float: right; 
width: 247px;
height: 1248px; 
}

ul
{      
   list-style-type: none;
   text-align: center;
}

.1
{
float: right;
}


J'ai effectué un float:right exprès pour vous montré qu'elle ne prend pas en compte la class (sauf sur IE6 ,bizarre Smiley sweatdrop ).
Bref je vois pas comment résoudre ces deux problèmes (et dieu seul sait combien de temps j'ai cogité) donc je m'en référe a vous .

Merci d'avance !

EDIT : Je fais un edit pour vous dire que la question d'affichage est réglé ,mon doctype était un HTML 4.01 transitionnal ,je l'ai mis en XHTML 1.0 strict .
Par contre j'ai toujours pas réussi a réglé le problème de lien ,j'arrive toujours pas a les déplacé .
Modifié par Kakarotto (04 Sep 2005 - 02:57)
Salut a vous ,bon j'ai réussi a me débrouillé et maintenant mon site semble bien se porté sans problème (aussi bien sur IE que FireFox) .
Ce que je voudrais savoir ,c'est comment rendre un design extensible vers le bas , je demende ca au cas où le contenu de mon corps est plus long que le design .Si ca concerne le CSS ,j'aimerai bien connaitre les propriétés .

Merci

PS : Je m'excuse si cette question a déja été posé ,mais j'ai fais une recherche sur le forum et apparament elle ne l'a pas été.
Sujet clos
Aller à