CSS : Alignement images et autres joyeusetées ...

bad wolf · 23/10/2007, 08h29

le design du site ressemble plus ou moins à ça :

dans la partie "Logo", j'aimerais mettre 2 images indépendantes (donc séparées) : une qui sera tout le temps à la gauche de l'écran, l'autre tout le temps à la droite (même quand on change la taille de l'écran)

mais je n'y arrive pas, les images sont tout le temps superposée, l'une au dessus de l'autre et jamais au même niveau verticalement

mon code :

html :

Code:

<table width="100%" cellpadding="0" class="tableau">
        <tr>
            <td colspan="2" align="right" valign="bottom" class="banniere_haut" height="103">
                <div>
                    <span class="logo1">
                        <a href="menu.php"><img src="http://www.metagames-eu.com/forums/images/logos/egagroup/logo_titre.gif"><a><br /><br />
                    </span>
                    <span class="logo2">
                        <a class="logo2" href="menu.php"><img src="http://www.metagames-eu.com/forums/images/logos/vo/logo_vo.gif"><a><br /><br />
                    </span>
                </div>
            </td>
        </tr>
</table>

css :

Code:

.logo1
{
padding-top: 0px;
padding-left: 30px;
text-align: left;
}

.logo2
{
padding-top: 0px;
padding-right: 30px;
text-align: right;
}

si quelqu'un à une idée ...

FreeZou · 23/10/2007, 19h05

Code HTML:

<div id="header">
  <div id="logo1">
       <a href="menu.php"><img src="http://www.metagames-eu.com/forums/images/logos/egagroup/logo_titre.gif"><a>
  </div>
  <div id="logo2">
      <a href="menu.php"><img src="http://www.metagames-eu.com/forums/images/logos/vo/logo_vo.gif"><a>
  </div>
</div>

Code HTML:

#header{
 width:taille1 + taille2 px;/*Ca n'existe pas les  variables en css c'est juste pour que tu mette la taille de tes 2 images*/
 height:taille px;
}
#header img{border:none;/*Pour eviter les bordures bleues des liens*/}
#logo1
{
  float:left;
  width:taille px;
  height: taille px;
}

#logo2
{
  float:right;
  width:taille px;
  height:taille px;

}

Voila pense à bien remplacer les tailles(si tu veux de la mobilité met un width:100% ou auto dans le header)

ET OUBLIE LES TABLEAUX POUR LA MISE EN PAGE !
:p

ask me if u got more questions :]

bad wolf · 26/10/2007, 10h48

Cool, ça marche bien

Pour ce qui est des tableaux, ouai je sais c'est pas une bonne idée
mais j'ai repris un vieux bout de code que j'avais fait y a quelques temps, et la pas trop le temps de revoir ça, je le referais sûrement plus tard ...

sinon, toujours dans cette mise en page, j'ai un menu sur le côté gauche que je voudrais également modible, c'est à dire qu'il prenne systématiquement la hauteur maxi de la fenêtre web

or, si je mets un height:100%, il prend la taille de la fenêtre + la taille du header, du coup ça dépasse :[

FreeZou · 26/10/2007, 16h31

Pense à mettre des clear:both; sur les blocs qui doivent être en dessous (clair? cette propriété dit au bloc met toi en dessous des flottants; both=right+left, tu peux aussi mettre que left ou right).

bad wolf · 29/10/2007, 10h31

je suis en train de virer les tableau dans l'entête du site,

je les remplace par des listes non ordonnées (ul / li ...)

par contre pour faire mon menu, je transforme les listes en éléments "inline", or je veux que le texte de ce menu soit aligné sur la droite

ça pas de problème,
le souci c'est qu'il y a une marge de plusieurs pixels sur le côté droit, et je ne vois pas comment la virer

le code :
html

Code:

<ul class="menuhaut">
        <li>
            <a href="">Menu 1</a>
        </li>
        <li>
            <a href="">Menu 2</a>
        </li>
        <li>
            <a href="">Menu 3</a>
        </li>
        <li>
            <a href="">Menu 4</a>
        </li>
    </ul>

CSS :

Code:

#haut                /* menu haut*/
{
width: auto;        /* fluidité */
height: 42px;        /* hauteur de l'image de fond */
text-align: right;    /* le texte sera positionné sur la droite */
background-image: url('../images/bannieres/separateur_egagroup.gif');    /* image de fond */
background-repeat: repeat-x;    /* l'image de fond est répétée sur toute la longueur de la page */
}

.menuhaut
{
list-style-type: none;
margin: 0;
padding:0;
}

.menuhaut li
{
display: inline;
margin: 0;
padding:0;
}

.menuhaut a
{
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

.menuhaut a:hover
{
text-decoration: none;
}

le résultat :

EDIT : résolu
j'avais pas placé le text-align là ou il fallait

bad wolf · 29/10/2007, 15h50

Hop,

une petite dernière demande :

voici le design du site :

je souhaite que :

- le corps soit fluide (ça pas de problème)

- le menu gauche soit fluide en hauteur (fixe en largeur, ça pas de problème), mais avec une hauteur minimum égale à la somme des hauteurs des images servant de liens

- que le pied de page soit toujours juste en dessous du menu (soit toujours en bas de page, soit en dehors de l'écran si la fenêtre n'est pas assez grande pour afficher tout les liens du menu.

Voila, j'ai essayé plusieurs trucs, mais ça ne donne rien de génial
et le "clear:both" semble ne pas fonctionner, ou alors j'ai pas compris son utilité ...

FreeZou · 29/10/2007, 20h54

Okeille alors si j'ai bien compris fluide = extensible ?

Pour ton menu tu crée une div #menu qui contient ton contenu (wohoo les explications) sans height(il fera en fonction de ce qu'il y a à l'intérieur).

Ton menu tu le met en float:left ton corps en float:left;

et sur le footer tu met clear:both (what does it mean ? en fait si tu le met pas il va se caler apres le corps et si ton menu grandit il passeras par dessus, alors qu'avec clear, le footer se mettra en dessous de tous les flottants au dessus de lui).

Code HTML:

<head>
<style>
#menu{
    float:left;
    border:1px dashed orange;
}
#corps{
    float:left;
    width:500px;
    border:1px dashed green;
}
#footer{
    clear:both;
    border:1px dashed purple;
    width:500px;
}
</style>
</head>
<body>
<div id="menu">
    <ul>
        <li>Lala</li>
        <li>Lala</li>
        <li>Lala</li>
        <li>LalaLAAAAA</li>
    </ul>
</div>
<div id="corps">
    <p>Paragraphe eheh</p>
    <p>Paragraphe eheh</p>
</div>
<div id="footer">
    <h1>Titre dans un footer</h1>
</div>
</body>

Bien sur mon code est pas valide w3c hein pas de style dans le head toussa mais la flemme de faire un css

bad wolf · 30/10/2007, 11h13

Ok,
un grand merci

ça donne pas exactement ce que je voulais

, mais ça me convient quand même

je vais pouvoir me focaliser sur le contenu maintenant ...

++

FreeZou · 30/10/2007, 13h18

Bah après t'adaptes, la c'est juste pour te montrer le footer et la disposition menu/corps

bad wolf · 30/10/2007, 13h36

ok

par contre, quand une ligne est trop longue dans le corps, le bloc "corps" se déplace et se positionne sous le bloc "menu", puis le texte va directement à la ligne du dessous

comment faire pour le figer et que le texte aille directos à la ligne du dessous??

EDIT : en fait ça marche bien sous IE, le corps ne passe jamais en dessous du menu
par contre avec firefox, ça le fait ...

EDIT2 : résolu en enlevant le float du bloc "corps", ça ne change rien au reste de la mise en page et ça résout ce problème