Disposition des blocs, passage a la ligne -->2

Question

doz59

19 Feb 2005 à 18:48

JE reformule donc!!

En même temps j'essaye d'etre plus clair.
Je suis donc débutant en xhtml,css et (j'essaye) je met un site en forme avec le css!

ce site est à l'adresses suivante : http://jeremie.pottier.free.fr/edmf/index.html

il est composé de pas mal de blocs visible sur le screens ce dessous : http://jeremie.pottier.free.fr/blocks.jpg

J'ai avec cette mise en page deux problemes :

Le premier etant que je n'arrive pas a mettre plusieurs blocs cote a cote, de gauche a droite, quand je copie le(s) blocs en questions, l'un va a la gauche et l'autre apres a la ligne enfin bref!!

vous pouvez voir ici un screen de la disposition du blocs copié http://jeremie.pottier.free.fr/copie_bloc.jpg

deuxieme probleme : quand je tape trop de texte dans le bloc h1, il s'élargie alors que je lui ai défini une largeur.

dans le screen suivant j'ai enlevé l'overflow pour que ce soit bien visible

http://jeremie.pottier.free.fr/bcptxt-bloc.jpg

Donc je vous poste le code xhtml et css a la suite pour ceux qui voudrez m'aider :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>www.edmf.org</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
title=Design media=screen href="mep_edmf.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2523" name=GENERATOR></HEAD>
<BODY>

<div class=cases>

<div class=case1><img src="haut_case.jpg"><h1>sdgessssssssssssssssssssssssssssssssssssssssssssssssssssssssssgsjk <br>  kkjhkjhkjff <br>fffffff <br> ffffff ffffffffff</h1><a><img src="bas_case.jpg"></a></div>
</div>



</div>


<div class=logo><img src="logo.jpg">
</div>



<div class=menu>
<img src="haut_menu.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="bas_menu.jpg">

</div>


<div class=texte>
<img src="haut_txt.jpg" WIDTH=608>
</div>




</BODY>

puis le css

body
{
   width: 811px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #263E54;

}

.case1
{
display : inline ;
width: 138px;
background-color: #253E54;
 list-style-type: none;


}



h1
{
font-style:normal;
font-weight: normal;

text-indent: 3px;
font-family: arial;
width: 138px;
background-color : #2F557A;
margin-bottom: 0px;
margin-top: 0px;
font-size: 12px;
height : 100px;
white-space:nowrap;
text-align: left;
overflow : auto;
 list-style-type: none;

}

a
{
width: 138px;
 list-style-type: none;

}


.logo
{
width: 213px;
margin-top : 1px;
height : 150px;
}

.cases
{
float: right;
width: 590px;
height : 150px;
margin-top : 1px;

}





.menu
{
 
 float : left;
width: 169px;

margin-top: 30px;

}

.texte
{
   margin-left: 200px; 
   margin-top: 30px;
width : 608px ;   
   height : 500px;
   color: #B3B3B3;
   background-color: #366592; 

}

voila je croi que vous avez tout...

édit des liens par Igor
Modifié par Igor (19 Feb 2005 - 19:40)

Raphael

Administrateur

19 Feb 2005 à 18:51

Pourquoi ne pas éditer tout simplement tes autres messages comme nous te l'avons suggéré ?
Il ne servait à rien de créer un nouveau sujet !

Que fait-on de celui-ci maintenant ?? http://forum.alsacreations.com/topic.php?fid=2&tid=1972

Igor

19 Feb 2005 à 19:55

Bonjour,
Même remarques que Raphaël, ferme t-on ton autre post ?

Sinon dans la page que tu nous soumets, une erreur importante subsiste: l'absence de la balise html fermante "</html>". Dans cette même balise d'ouverture tu indiques xml:lang qui n'est pas nécessaire puisque tu es en html.

Voilà reprend d'abord ton code, voir ce que cela donne.

doz59

19 Feb 2005 à 20:06

exact je l'avais oublier mais sa ne résou pas mon probleme Smiley confus

et désolé je peu paraitre con comment on édite le message??

Igor

19 Feb 2005 à 20:07

Le bouton "éditer" en haut à droite de ton post.

doz59

19 Feb 2005 à 20:08

ah oui exact désolé alors!!
je suis nouveau Smiley confused

Raphael

Administrateur

19 Feb 2005 à 21:09

doz59 a écrit :
ah oui exact désolé alors!!
je suis nouveau

Aucun problème, on n'est également là pour te guider.
Mais je t'ai bien indiqué dans mon Message Privé (MP) que tu ne devais pas hésiter à me dire si tu avais des soucis pour éditer ton message. Pourquoi ne m'as-tu pas répondu ? Smiley smile

Bref : que fait-on de ton autre sujet ? On le supprime ? Tu l'édites ?
Modifié par Raphael (19 Feb 2005 - 21:10)

doz59

19 Feb 2005 à 21:11

tu peu supprimer!

doz59

20 Feb 2005 à 17:14

bon re bonjour a tout le monde, aujourd'hui j'ai enfin avancé, j'ai réussi à aligner mes blocs côte a côte! j'ai changé de methode, j'ai mi chaque case dans un bloc "side" et ce sont ces blocs que j'ai mit en absolute et que j'ai placé.
sa donne sa :
http://jeremie.pottier.free.fr/edmf/index.html

Mais il y a un probleme, si vous utilisez mozilla/firefox vous pouvez constater un drole de bug, en effet l'overflow que j'ai mi pour avoir une barre de navigation si jamais il y a trop de texte est bloqué sous mozilla ( mais avant que la mise en place des quatre blocs ne marche parfaitement, il y avait 3 bloc bien placés plus un bloc qui était allé a la ligne et celui ci avait une barre de navigation qui marchait)
donc je ne sait vrément pas d'ou sa vient!!

je vous poste donc mon xhtml et css, a vous de me dire d'ou viendrait ce bug!

body
{
   width: 811px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #263E54;

}

.case1
{

width: 138px;
background-color: #253E54;
 list-style-type: none;


}



h1
{
font-style:normal;
font-weight: normal;

text-indent: 3px;
font-family: arial;
width: 138px;
background-color : #2F557A;
margin-bottom: 0px;
margin-top: 0px;
font-size: 12px;
height : 100px;
white-space:nowrap;
text-align: left;
overflow : auto;
 list-style-type: none;

}

a
{
width: 138px;
 list-style-type: none;

}


}
div#side1 {
    position:absolute;
    width:150px;
    top: 0px;
    left:0px;
 
}
div#content {
    position: absolute;
    width: 150px;
    top: 0px;
    left: 150px;

}
div#side2 {
    position:absolute;
    width:150px;
    top: 0px;
    left: 300px;

}

div#side3 {
    position:absolute;
    width:150px;
    top: 0px;
    left: 450px;

}



.logo
{
left : 0px;
position:relative;
margin-top : 1px;
height : 150px;
}

.cases
{
left : 2px;
position:relative;
float: right;
width: 590px;
height : 150px;
margin-top : 1px;

}





.menu
{
 
 float : left;
width: 169px;

margin-top: 30px;

}

.texte
{
   margin-left: 200px; 
   margin-top: 30px;
width : 608px ;   
   height : 500px;
   color: #B3B3B3;
   background-color: #366592; 

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML  xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>www.edmf.org</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
title=Design media=screen href="mep_edmf.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2523" name=GENERATOR></HEAD>
<BODY>

<div class=cases>


    <div id="side1">

      

       <div class=case1><img src="haut_case.jpg"><h1>sdgessssssssssssssssssssssssssssssssssssssssssssssssssssssssssgsjk <br>  kkjhkjhkjff <br>fffffff <br> ffffff ffffffffff</h1><a><img src="bas_case.jpg"></a></div>
    </div>

    <div id="content">

      
<div class=case1><img src="haut_case.jpg"><h1>sdgessssssssssssssssssssssssssssssssssssssssssssssssssssssssssgsjk <br>  kkjhkjhkjff <br>fffffff <br> ffffff ffffffffff</h1><a><img src="bas_case.jpg"></a></div>
    </div>

    <div id="side2">

      
<div class=case1><img src="haut_case.jpg"><h1>sdgessssssssssssssssssssssssssssssssssssssssssssssssssssssssssgsjk <br>  kkjhkjhkjff <br>fffffff <br> ffffff ffffffffff</h1><a><img src="bas_case.jpg"></a></div>
     </div>



 
 <div id="side3">

      <div class=case1><img src="haut_case.jpg"><h1>sdgessssssssssssssssssssssssssssssssssssssssssssssssssssssssssgsjk <br>  kkjhkjhkjff <br>fffffff <br> ffffff ffffffffff</h1><a><img src="bas_case.jpg"></a></div>
     </div>

	 
	 </div>







<div class=logo><img src="logo.jpg">
</div>



<div class=menu>
<img src="haut_menu.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="menu_1.jpg">
<img src="bas_menu.jpg">

</div>


<div class=texte>
<img src="haut_txt.jpg" WIDTH=608>
</div>












</BODY>
</html>

doz59

20 Feb 2005 à 20:31

je croi qu'on a le droit de se poser la question "pourquoi les macs existent???" eh oui voila que la mise en forme n'est pas compatible a internet explorer pour mac ni a safari,... tss!!

quand je racourci la fenetre, tout se chevauche... Smiley bawling

doz59

22 Feb 2005 à 22:50

beh dites donc sa se bouscule pour me repondre lol!!

donc c'est juste pour dire que la mise en page c'est résolu mais j'ai toujours le bug des scrolls sous mozilla

Raphael

Administrateur

23 Feb 2005 à 11:56

En attendant, puisque c'est une question de mise en page, je déplace en "CSS et mise en page"

Nilpohc

25 Feb 2005 à 17:58

Salut,

Bon, je pense avoir trouvé : ton div "logo" n'ayant pas de largeur précisée, sous Firefox il prend toute la largeur de la page et recouvre donc les cases du haut, rendant tous les éléments inactifs( mets lui un background pour voir). A l'inverse, IE doit lui donner une largeur liée à l'espace disponible dans le conteneur parent (logique).

Ceci-dit, tu n'avais pas besoin de faire un div pour le logo : en déclarant ton image en class (ou id plutôt) "logo", tu évitais ton souci.

Petit conseil (sans prétention) : si possible, indique la taille de tes images dans ton HTML tu gagneras du temps à l'affichage.

@+ Smiley biggrin

Modifié par Nilpohc (25 Feb 2005 - 17:58)

Sujet clos