[HTML] Mise en page CSS je calle.

Mise en page CSS je calle. [HTML] - HTML/CSS - Programmation

Marsh Posté le 24-06-2003 à 00:33:03    

Voilà, je me suis mis aux css parceque c'est bien, j'ai lu quelques tutos sur les positions floats et tout ça mais je n'y arrive pas. J'aimerais faire celà:
 
 http://membres.lycos.fr/thibautcao/page.PNG
Un truc assez simple. En rouge le logo, bleu le menu, le cadre bleu le contenu. Jusque là j'ai su m'en tirer plus ou moins avec des css   et des divs mais je n'ai pas réussi à obtenir un cadre qui fait tout le tour mais c'est un détail. Là ou je ne trouve pas du tout, c'est l'intérieur de mon cadre bleu. Dans ce cadre tous les éléments ont la même largeur mais des longueurs variabales. J'ai le  bloc jaune avec à sa gauche deux blocs verts et en dessous deux lignes de blocs verts. Quels type de positionnement adopter pour mes divs?


Message édité par belgique le 24-06-2003 à 00:33:15
Reply

Marsh Posté le 24-06-2003 à 00:33:03   

Reply

Marsh Posté le 24-06-2003 à 00:49:52    

Pour le cadre principal c'est simple : il faut que tous tes blocs soient contenus dans un grand DIV principal.
 
Pour le reste :
 
 - le bloc rouge -> sans positionnement particulier
 - le bloc bleu -> en flottant à gauche
 - le bloc au cadre bleu -> sans positionnement particulier (avec une marge gauche de la taille du bloc bleu flottant)
 
Ensuite à l'intérieur du bloc au cadre bleu, je commencerais par séparer les blocs par des DIV anonymes. 3 DIV en fait : un premier qui contient le bloc jaune et les 2 verts à droite, et les 2 autres DIV qui contiennent chacuns 2 blocs verts. Bref on découpe en lignes.
Ensuite à l'intérieur de chacun de ces 3 DIV anonymes tu places le bloc de gauche en flottant et celui de droîte sans positionnement particulier, mais avec la marge qui va bien (comme le bloc bleu et le bloc au cadre bleu en fait).
 
Voilà, voilà :)


Message édité par gm_superstar le 24-06-2003 à 00:51:42

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 24-06-2003 à 00:54:47    

Arf, merci pour la réponse, c'ets comme ça que je pensais les choses mais ça marchait pas trop, je vais refaire tout ça calmement  :)

Reply

Marsh Posté le 13-09-2003 à 17:51:38    

Après les conseils, la pratique :)
 
Je n'ai fait que le cadre interne.
L'exemple
 
J'ai essayé de respecter les couleurs du modèle.  
Le but de l'exemple n'est pas d'être joli. J'ai mis des bordures partout pour mieux voir les blocs et les lignes rouges pour les spacers.  
Ca fonctionne très bien sous firebird mais sous IE6, j'ai souvent les vignettes des images qui sont plus hautes que le texte. Comment règler ça  :??:  
 
 :hello:  
 
La css


.content {
background-color: #eff4fa;
 color:#000;
border:1px solid #69c;
width: 600px;
font-family:  verdana, helvetica, arial;
text-align: justify;
 
}
 
.left{
float: left;
width: 49%;
padding: 0px 5px 0px 5px;
border: 1px solid #69c;
}
 
.right{
margin-left:51%;
padding: 0px 5px 0px 5px;
border: 1px solid #69c;
}
 
.spacer{
  background-color: #ff0000;
  display:block;
  clear: both;
  height: 1px;
}
.resume{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
font-size:10px;
background-color: #00ff80;
}
 
.resume a{
font-weight: bold;
}
 
.vignette{
display:block;
float:left;
width:75px;
height:70px;
border: 1px solid;  
}
 
#news{
background-color: #ffff00;  
}

Reply

Marsh Posté le 13-09-2003 à 18:38:56    

Il me semble pas que ça donnait ce que tu atendais.
 
Sois prudent avec les float:left. IE5 peut se mettre à bugger dans certaines situations ( quand il a envie en fait ).
 
 :hello:  
 


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 12:22:43    

Ouais, j'ai pas encore testé sous IE5 . Ca marche si peu que ça? :(
Je peux pas me permettre d'avoir une mise en page hasardeuse sous IE5. Je vais devoir passer aux tableaux :(

Reply

Marsh Posté le 14-09-2003 à 12:29:31    

fadenreturns a écrit :

Il me semble pas que ça donnait ce que tu atendais.
 
Sois prudent avec les float:left. IE5 peut se mettre à bugger dans certaines situations ( quand il a envie en fait ).
 
 :hello:  
 
 


 
Les float left ça marche avec IE5 tant qu'il n'y en a pas trop.
 
Creuse un peu tu vas y arriver.
 
Tu veux pas prendre un truc déjà tout fait dont tu est sûre que ça marche ?  
 
Comme ici  
 
http://www.thenoodleincident.com/t [...] boxes.html
 
 
 


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 14:09:45    

Il faut mettre l'image *dans* le paragraphe :
 

<div>
  <p class="resume"><a href="#"><img src="/img.gif" class="vignette" alt="Lire" /></a>bla bla bla bla bla bla bla bla bla bla ...    
  </p>
  <div class="spacer">&nbsp;</div>
</div>


 
 
Remarque : float: left; sous implique que l'élément est un bloc. Donc le "display: foat" est inutile dans .vignette

Reply

Marsh Posté le 14-09-2003 à 14:37:08    

J'avais mis un display:block dans la vignette mais c'était un peu crade peut être. Merci pour les conseils  :jap:
Edit: en fait j'ai rien compris... Qu'est ce que je ne dois pas mettre dans vignette ?


Message édité par belgique le 14-09-2003 à 14:38:10
Reply

Marsh Posté le 14-09-2003 à 14:40:53    

float: left;


 
suffit. Pas besoins de :
 

float: left;
display: block;

Reply

Marsh Posté le 14-09-2003 à 14:40:53   

Reply

Marsh Posté le 14-09-2003 à 14:46:05    

Ah,oui, maintenant que tu précises je comprends pas comment je n'ai pas compris ton premier post.. Fatigue  :)

Reply

Marsh Posté le 14-09-2003 à 19:06:13    

BOn, j'ai des problèmes assez bizarres sous ie.  
 
sous ie
http://membres.lycos.fr/thibautcao/ie.png
 
sous firebird
http://membres.lycos.fr/thibautcao/firebird.png
 
Je dois mal m'y prendre. Les lignes rouges sont mes div spacers. Il faudrait qu'elles se placent comme sous firebird, c-a-d juste en dessous de la vignette. Comment faire?


Message édité par belgique le 14-09-2003 à 19:07:21
Reply

Marsh Posté le 14-09-2003 à 19:12:33    

Comme ça c'est difficile à dire sans avoir le site sous les yeux...
 
Tu pourrais pas le mettre online ?


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 19:15:54    

L'exemple.
Je l'avais déjà mis juste au dessus de la css mais c'est vrai que els liens ressortent pas trop  :)
En fait le problème en autre est que le clear left se fait à fond à gauche. Il s'applique sur le bloc jaune et non sur la vignette comme je le voudrais :(


Message édité par belgique le 14-09-2003 à 19:17:10
Reply

Marsh Posté le 14-09-2003 à 19:35:07    

Mets tout tes éléments en float:left et donne leurs une largueur pour voir.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 19:36:44    

du style, tu spécifie une largeur pour les blocs jaune et vert. Puis une hauteur pour les blocs vert.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 19:42:32    

je crois que je vais craquer et passer au tables :/. Je peux pas spécifier de hauteur pour mes blocs. c'est du contenu variable.


Message édité par belgique le 14-09-2003 à 19:43:08
Reply

Marsh Posté le 14-09-2003 à 20:20:46    

<html>
<head>
<title>mam page</title>
</head>
 
<style>
 
body,html{
margin:0;
padding:0;
}
 
#header{
    height:100px;
    background-color:red;
    }
     
#blue{
    background-color:blue;
    position:absolute;
    top:100px;
    left:0;
    width:20%;
    height:300px;
    }
     
#header{
    height:100px;
    background-color:red;
    }
     
#contenu{
    background-color:#eee;
    position:absolute;
    top:100px;
    left:20%;
    width:80%;
    height:300px;
    }
     
#jaune{
    float:left;
    background-color:yellow;
    width:40%;
    margin:1em;
    }
     
.vert{
    float:left;
    width:40%;
    background-color:green;
    margin:1em;
    }
 
</style>
 
<body>
 
<div id="header">
</div>
 
<div id="blue">
bla bla
</div>
 
<div id="contenu">
 
<div id="jaune">
asdlfkjasll32krlk32lérkj32élrk23
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
</div>
 
 
</body>
</html>


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:32:16    

:jap: pour le temps passé, je vais tester tout ça ce soir :)

Reply

Marsh Posté le 14-09-2003 à 20:37:28    

Je viens de regarder. Le positionnement absolu avec le contenu variable, je peux déjà oublier. En fait mon gros problème n'est pas de faire la mise en apge comme le premier post.  
C'est pour ça que je me concentre sur le bloc interne. Mais c'est de bien placer mes blocs verts et que le contenu de mes blocs verts  se place bien.

Reply

Marsh Posté le 14-09-2003 à 20:39:24    

Belgique a écrit :

Je viens de regarder. Le positionnement absolu avec le contenu variable


 
Pourquoi ?
 
Tu prend très cumuler les deux !


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:43:08    

Si je positionne les blocs en absolu, je peux oublier l'idée d'un cadre qui fait le tour. Enfin, il me semble. Puis tout ça est secondaire ;). Je me concentre sur le div contenu pour le moment :)


Message édité par belgique le 14-09-2003 à 20:44:04
Reply

Marsh Posté le 14-09-2003 à 20:46:00    

Belgique a écrit :

Si je positionne les blocs en absolu, je peux oublier l'idée d'un cadre qui fait le tour. Enfin, il me semble. Puis tout ça est secondaire ;). Je me concentre sur le div contenu pour le moment :)


 
Humm qu'est ce qui va pas dans le div contenu ? ... de tt facon si tu veux un contenu variable sans fixer une hauteur avec les blocs vert tu aura forcement des pc c'est obligé...
 
Crois moi j'ai fait un site similaire.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:47:24    

des pc?

Reply

Marsh Posté le 14-09-2003 à 20:49:08    

je voulais dire pb = problème ... ;)


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 20:58:38    

Sur la  page ici, le rendu est presque correct sous IE6.0 hormis le padding. J'avoue que j'ai pas encore osé regarder sous IE5.5. A part un petit problème de padding. Donc je pense que ça doit être possible. Mais je me demande de plus en plus pourquoi je n'utilise pas de tableaux. Les divs, je m'y remettrai plus tard. De toutes façons vu le nombre de boîtes qui laissent encore des vieux netscape 4.7 :/


Message édité par belgique le 14-09-2003 à 20:59:01
Reply

Marsh Posté le 14-09-2003 à 21:00:10    

décéption  :(


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 21:08:54    

Je te conseil d'oublier ta mise en page. Elle est foireuse, et même avec des tableau ça va pas être logique ... essaie de fair quelque chose de plus simple. Plus linéaire.
 
Les visiteurs ne demande pas un présentation exotique... À moins que tu veuille faire un site artistique ... Dans ce cas je te conseil flash.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 21:10:25    

La mise en page est un peu imposée en fait :/

Reply

Marsh Posté le 14-09-2003 à 21:16:50    

Belgique a écrit :

La mise en page est un peu imposée en fait :/


 
Ben faut expliquer que tu connais ton métier et que si il veulent ça il peuvent l'avoir mais ce sera un site pourri ( faut pas le dire texto evidemment ).
 
Sinon tu peux spécifier une hauteur au div et offrir une scrollbar dans le cas ou le contenu dépasse. Et comme ça tout le monde il est content  :pt1cable:


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 14-09-2003 à 21:22:09    

fadenreturns a écrit :


 
Ben faut expliquer que tu connais ton métier et que si il veulent ça il peuvent l'avoir mais ce sera un site pourri ( faut pas le dire texto evidemment ).
 
Sinon tu peux spécifier une hauteur au div et offrir une scrollbar dans le cas ou le contenu dépasse. Et comme ça tout le monde il est content  :pt1cable:  


Pas beau scrollbar :p.
Pour ce qui est de la mise en page, étant donné que je débute, je vais pas être affirmatif comme ça ;). Merci pour toute l'aide :)

Reply

Marsh Posté le 14-09-2003 à 22:56:10    

Belgique a écrit :

BOn, j'ai des problèmes assez bizarres sous ie.  
 
sous ie
http://membres.lycos.fr/thibautcao/ie.png
 
sous firebird
http://membres.lycos.fr/thibautcao/firebird.png
 
Je dois mal m'y prendre. Les lignes rouges sont mes div spacers. Il faudrait qu'elles se placent comme sous firebird, c-a-d juste en dessous de la vignette. Comment faire?


Comme il l'est précisé dans la FAQ, IE a du mal avec les flottants lorsque aucune largeur est précisée.
 
Ajoute donc simplement un "width: 100%" à la classe .right


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 14-09-2003 à 23:30:23    

Merci beaucoup gm, faut mettre plus un truc comme 50% je pense.
Là j'ai mis un 47% pour les div gauches et droites et le résultat me semble correct pour le moment à part sour opera mais bon. Ca reste présentable . Merci pour l'aide précise. Je vais relire ta FAQ pcq j'ai loupé des trucs on dirait :)


Message édité par belgique le 14-09-2003 à 23:30:35
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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