Présentation : un à droite, l'autre à gauche

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Présentation : un à droite, l'autre à gauche

robz

www.volumecase.com

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

Publicité

FlorentG

Unité de Masse

Tu peux utiliser position: absolute;, ou alors float: left; et float: right;

robz

www.volumecase.com

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

FlorentG

Unité de Masse

Il faut que tu précise une width à ton .haut. Sinon, prend l'habitude de tout mettre en minuscules

skeye

Tu peux mettre les 2 en float:left, non?

---------------
Can't buy what I want because it's free -

FlorentG

Unité de Masse

Aussi, tu peux mettre text-align: right; dans le .droite

robz

www.volumecase.com

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.

robz

www.volumecase.com

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>

FlorentG

Unité de Masse

Met-nous toutes ces balises en minuscule Comme ça quand tu devra tout réécrire en XHTML, t'aura pas de problèmes

robz

www.volumecase.com

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

Publicité

FlorentG

Unité de Masse

Oui. Je l'avait indiqué dans mon premier post Mais met tout en minuscules

FORUM HardWare.fr

Programmation

HTML/CSS

Présentation : un à droite, l'autre à gauche

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
Plus de sujets relatifs à : Présentation : un à droite, l'autre à gauche

Page générée en 0.044 secondes