Présentation : un à droite, l'autre à gauche
Présentation : un à droite, l'autre à gauche - HTML/CSS - Programmation
Marsh Posté le 09-02-2005 à 09:04:06
Tu peux utiliser position: absolute;, ou alors float: left; et float: right;
Marsh Posté le 09-02-2005 à 09:47:06
J'ai essayé :
.haut
{
COLOR: #fff;
HEIGHT: 50px;
BACKGROUND-COLOR: #06c
}
.gauche
{
FLOAT:LEFT;
width:50%;
}
.droite
{
FLOAT:RIGHT;
width:50%;
}
Avec ou sans POSITION : abolute, ça ne fonctionne pas.
Soit ça affiche :
TitreUtilisateur
soit
Titre Utilisateur
alors que je souhaiterais que "Utilisateur" soit cadré à droite (en gros le float n'y fait rien !)
De plus, le width:50% me parait inutile pour faire cela, mais sinon, les 2 sont collés.
Message édité par robz le 09-02-2005 à 09:48:25
Marsh Posté le 09-02-2005 à 09:48:54
Il faut que tu précise une width à ton .haut. Sinon, prend l'habitude de tout mettre en minuscules 
Marsh Posté le 09-02-2005 à 09:49:51
Tu peux mettre les 2 en float:left, non?
---------------
Can't buy what I want because it's free -
Marsh Posté le 09-02-2005 à 10:02:37
En effet, ça fonctionne pas mal avec ça :
.haut
{
COLOR: #fff;
HEIGHT: 40px;
BACKGROUND-COLOR: #06c
}
.gauche
{
FLOAT:LEFT;
width:50%;
}
.droite
{
FLOAT:LEFT;
text-align:right;
width:50%;
}
Un détail est que sous IE, lorsqu'on resize la fenêtre, l'Utilisateur clignote entre deux positions :
- en haut à droite
- une ligne en dessous et au milieu (50%)
Est-ce un bug de IE ? ou une mauvaise utilisation des CSS ?
Sous FF, pas de soucis.
Marsh Posté le 09-02-2005 à 10:05:24
Pour vous faciliter les tests, voici tout le code de ma page html (à partir de l'exemple du site alsacreation, que j'ai un peu modifié...).
<!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>Frames en CSS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
HTML
{
PADDING: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
WIDTH: 100%;
FONT-FAMILY: verdana, arial;
HEIGHT: 100%
}
BODY
{
PADDING: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
WIDTH: 100%;
FONT-FAMILY: verdana, arial;
HEIGHT: 100%
}
.haut
{
COLOR: #fff;
HEIGHT: 40px;
BACKGROUND-COLOR: #06c
}
.gauche
{
FLOAT:LEFT;
width:50%;
}
.droite
{
FLOAT:LEFT;
text-align:right;
width:50%;
}
.conteneur
{
WIDTH: 100%;
HEIGHT: 80%
}
.frame
{
FONT-SIZE: 14px;
MARGIN-LEFT: 180px;
OVERFLOW: auto;
WIDTH: auto;
HEIGHT: 100%
}
.bas
{
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 10px;
WIDTH: auto;
COLOR: #fff;
PADDING-TOP: 10px;
HEIGHT: 10%;
BACKGROUND-COLOR: #06c
}
</STYLE>
<BODY>
<DIV class=haut>
<DIV class=gauche>
Titre
</DIV>
<DIV class=droite>
Utilisateur
</DIV>
</DIV>
<DIV class=conteneur>
<DIV class=frame>
<H1>Une présentation sans Frames !</H1>
<P>Blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
<P>blablabla blablabla blablabla blablabla blablabla blablabla</P>
</DIV>
</DIV>
<DIV class=bas>Cette partie basse reste fixe</DIV>
</BODY>
</HTML>
Marsh Posté le 09-02-2005 à 10:21:29
Met-nous toutes ces balises en minuscule Comme ça quand tu devra tout réécrire en XHTML, t'aura pas de problèmes
Marsh Posté le 09-02-2005 à 11:49:57
Autre solution qui fonctionne sous IE et FF :
.haut
{
COLOR: #fff;
HEIGHT: 40px;
BACKGROUND-COLOR: #06c
}
.gauche
{
position:absolute;
LEFT: 0px;
}
.droite
{
position:absolute;
RIGHT: 0px;
}
Merci de votre aide.
Robz
Marsh Posté le 09-02-2005 à 11:52:31
Oui. Je l'avait indiqué dans mon premier post Mais met tout en minuscules
Sujets relatifs:
- Présentation fenêtre fixe
- left ou gauche
- [CSS] Décalage et incoherence entre IE et Firefox sur <div > droite.
- Espace à droite d'une balise <li> ou <ul>
- Liste - Comment avoir moins de retrait à gauche?
- Presentation de site en fenetre, help !
- [CSS] Aligner une image à gauche, c'est pourtant pas compliqué !
- forum phpbb : comment créer un lien sur le logo en haut à gauche ?
- [Conseil]Présentation d'une page web <table>?
- [CSS] div en haut a droite de la page
Marsh Posté le 09-02-2005 à 08:53:51
Salut,
je souhaiterais présenter un titre dans la bande supérieur de mon site en les présentant comme suit:
<div class=haut>
<div class=gauche>
Titre (collé à gauche)
</div>
<div class=droite>
Utilisateur (collé à droite)
</div>
</div>
Quelle est la meilleure façon d'organiser mes CSS gauche et droite ?
Merci de votre aide.
Robz