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

Présentation : un à droite, l'autre à gauche - HTML/CSS - Programmation

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

Reply

Marsh Posté le 09-02-2005 à 08:53:51   

Reply

Marsh Posté le 09-02-2005 à 09:04:06    

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

Reply

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
Reply

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 ;)

Reply

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 -
Reply

Marsh Posté le 09-02-2005 à 09:53:04    

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

Reply

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.

Reply

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>

Reply

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 ;)

Reply

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

Reply

Marsh Posté le 09-02-2005 à 11:49:57   

Reply

Marsh Posté le 09-02-2005 à 11:52:31    

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

Reply

Sujets relatifs:

Leave a Replay

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