Entête d'une page avec un logo dynamique

Bonsoir à tous,

Je travaille depuis tout l'après midi pour régler un problème d'ajustement de div selon la taille d'une image... mais sans succès !

Je m'explique :

Ma page est composé de la manière suivante :

<div id="conteneur">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>

La div top doit contenir : un logo, le nom de l'application et des infos utilisateurs (login de l'utilisateur connecté), elle est composé de la façon suivante :

<div id="top">
<div id="logo"><img src="logo.gif"/></div>
<div id="title">titre de l'appli</div>
<div id="remoteuser">toto@free.fr</div>
</div>

et la css :

div#container {
	width:800px;
	margin:0 auto 1em;
}

div#top {
        position:relative;       
        width : 100%;
        margin-bottom : 20px;
        padding : 20px 0;
		height : 8em;		
}

div#top #logo {
        margin-top: 5px;
        margin-bottom: 5px;
        left : 0;
		position: absolute;
		top : 0;
        
}

div#top img {
	
}

div#baseline{
	margin-left : 250px;
	margin-right : 300px;
	top : 0;
font-size: 1.2em;
	color:#aaa;
	font-weight: bold;
}
div#remoteuser{
	padding : 12px 20px;
	position: absolute;
	right: 0; 
	top : 0;
	text-align : right;
}

La particularité c'est que le logo est paramétrable par l'utilisateur : sa taille peut donc varier mais est limité à une certaine taille (200 x 150). Le problème : la div contenant l'image ne s'adapte pas à la taille de l'image, et comme la div "middle" se positionne par rapport à la div "top", l'image lorsqu'elle est trop grande, chevauche la div "middle".

J'ai essayé en fixant la taille de la div "top" à une certaine valeur... mais bien sur si l'image ne fait que 50px de hauteur, c'est pas jolie !

Il faudrait donc tout simplement que le conteneur top s'adapte à la div logo qui elle même s'adapte à la balise <img>, mais je n'y parviens pas.

Si vous avez une piste !

Merci d'avance
Arnaud
Modifié par arno83 (02 Jan 2009 - 18:01)

Salut,

Bah un peu normal ... tes blocs sont posés en absolute...
Tu n'aurais pas un bout de page en ligne? afin de mieux visualiser.

ps vu ton pseudo on doit être voisin non?

Accessoirement, le nom des id de ton css ne correspondent pas à ton html : #container/#conteneur, #baseline/#title, on s'y perds un peu

Ah tiens, un cas de divite aigüe, ça faisant longtemps.

Pour rappel, il existe en HTML un certain nombre d'éléments qu'il peut être utilise d'utiliser à bon escient. Tout n'est pas un DIV! Si les DIV sont utiles pour poser des conteneurs neutres, pour les contenus à proprement parler on privilégiera les paragraphes (P), les titres de section (H1, H2, H3...), les listes (UL, OL, LI), etc. Un usage correct (cohérent et bien pensé) des titres de section, en particulier, est très important.