28173 sujets

CSS et mise en forme, CSS3

[résolu] Position:absolue inextensible

Bonjour à tous,

Je suis en train de mettre en page un design très light fait essentiellement de borders CSS et dès le header, j'ai un problème entre IE et Firefox Smiley lol . Bon, il faut qu'en même avouer que je n'avais plus touché au XHTML/CSS depuis plus de 6 mois, trop pris par des investigations poussées en PHP/MySQL...

Avant tout, voici mon code :
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#logo {
	float: left;
	margin-top: 17px;
	margin-left: 5px;
	border: 0;
}
#side-bar {
	position: absolute;
	left: 160px;
	right: 5px;
	height: 100px;
	background-color: #000000;/*comme projet ne s'affichait pas, j'ai mis ça pour savoir si la position:absolute marchait ou pas déjà */
}
#projet {
	margin-left: 10px;
	margin-right: 10px;
	background-color: #C3D9FF;
}
</style>
</head>

<body>
<a href="test.html"><img id="logo" src="images/logo.gif" /></a>
<div id="side-bar">
	<div id="projet">blablabla</div>
</div>

Mon problème est que sous IE, les fonds noirs et bleus ne prennent pas toute la largeur de l'écran mais uniquement la dimension de "blablabla"...
J'ai remarqué en lisant Openweb + Alsa que à chaque fois qu'une position:absolute était mise en place, une largeur était spécifié. Le seul inconvénient réside dans le fait que je ne peux pas spécifier cette largeur car j'ai utilisé un position:absolute avec un left: 160px; et un right: 5px; dans le but que mon logo + cette barre prenne l'intégralité de la largeur de l'écran de mon visiteur.

Je ne sais donc pas comment faire. Si au passage vous avez une autre méthode plus pratique et qui marche pour faire ceci (largeur de l'écran visiteur = largeur fixe du logo + largeur dynamique de projet en fonction de la résolution), je suis preneur Smiley lol .

Merci d'avance à ceux qui auront essayé de m'aider Smiley cligne
Modifié par Clausan (30 Jun 2006 - 17:12)
Salut,

Le code (html) que tu présentes est un peu succinct mais bon ...

En l'état je ne vois pas trop de solution purement css. On peut néanmoins se rabattre sur un rajout dans le html en doublant le conteneur :

<div id="side-bar">
<div id="sub_side-bar">
	<p id="projet">blablabla</p> <!-- Je met un p car je ne vois pas trop l'intérêt d'un div à cet endroit -->
</div>
</div>

Et pour le css

#side_bar {
position:absolute;
width:100%;
}
#sub_side_bar {
margin-left:160px;
margin-right:5px;
}


A part ça il y a une erreur dans ton code, ceci :

<a href="test.html"><img id="logo" src="images/logo.gif" /></a>

est enfant direct de body. La balise <a> étant de type inline ce n'est pas possible. Il faudrait donc placer le tout dans un élément de type block.
<edit>
Il faudrait également prévoir un texte alternatif pour l'image (attribut alt)
</edit>
Modifié par clb56 (30 Jun 2006 - 09:19)
Hello,

Merci pour ton code, c'était juste ce qu'il me fallait.
Quant aux erreurs par-ci par-là dans mon code, j'avais pas trop fait gaffe ni passé au validateur, merci de me les avoir souligné Smiley cligne
Sujet clos
Aller à