[RESOLU] Problème de "Float" dans la #page

Bonjour à tous.

Je suis en train de bidouiller un thème pour un site avec 3/4 pages statique et un blog. J'ai réussi à faire un truc qui me plait avec les pages statique: une colonne empilé #header + # content + #footer. Pour ça j'ai viré le "float" de #content.
En revanche ce "float" me semble indispensable pour la partie blog dans laquelle j'ai besoin que #content et #sidebar flottent joyeusement côte à côte dans #page.
Mes soucis une fois le "float" réintégré sont les suivants:
- #footer "se colle" à #content dans les pages statique (du à l'absence de #sidebar)
- J'ai une page statique en Home, mais le thème que j'utilise inclue d'office la #sidebar dans le fichier "home.php" ce qui décale le #content (car je n'affiche pas le #sidebar)

Voilà, je suis débutant en css et php, et je suis sans doute pas très clair.... Voici le massacre:
/* Theme "test" PluXml */

/* ---------------------
Html et body
--------------------- */
html {
	font : 100% "Lucida sans unicode", Lucida, Tahoma, Arial, sans-serif;
	color : #000000;
	background : #FFFFFF;
	margin : 0;
	padding : 0;
	letter-spacing: 0.5%;
}
body {
	width : 95%;
	margin : 0 auto 0 auto;
	padding : 0 0 0 0;
}

/* ---------------------
Styles generaux
--------------------- */
h1 { font-size : 2.1em; }
h2 { font-size : 1.2em; }
h3 { font-size : 1.1em; margin : 0; padding: 0; }
p { margin : 0; padding: 0; }
a { color : #000000;}
a:hover { color : #2152a7; }
.center { text-align : center; }
.clearer { clear : both; visibility : hidden; margin : 0; padding : 0; }
img {
	border-style: none;
	margin : 2% 0;
}

/* ---------------------
Haut de page (#top)
--------------------- */
#header h1 {
	display: none;
}
#menu {
	margin : 0 0 10px 0;
	background : #00a162;
}
#menu ul {
	list-style-type : none;
}
#menu li {
	display : inline-block;
	padding : 1px 20px 1px 8px;
	margin : 0.5% 0;
	background : url("img/icons.png") no-repeat 0 -351px;
}
#menu li:hover, #menu li.active {
	background : url("img/icons.png") no-repeat 0 -383px;
	font-weight : bold;
	font-variant: small-caps;
}
#menu li a {
	color :  #FFFFFF;
	text-decoration : none;
	position : relative;
	left: 9px;
}
#page {
}

/* --------------------- 
Zone de contenu (#content)  
--------------------- */
#content {
	background: #FFF;
	border: 1px solid #CCC;
	padding : 1% 3%;
	float: left;
}

#sidebar {
	float: right;
}

/* ---------------------
Pied de page (#footer)
--------------------- */
#footer {
	font-size: 50%;
	background : #00a162;
	padding : 0;
	margin : 13px 0 0 0;
	height : 20px;
	clear : both;
	color : #FFFFFF;
}
#footer p {
	float : left;
	padding : 4px 8px;
}
#footer p.right {
	float : right;
	padding: 4px 8px;
}
#footer a {
	color : #FFFFFF;
	border-bottom : 1px dashed;
	text-decoration : none;
}
#footer a:hover {
	border: none;
}
#footer p.right a.top{
	background: url('img/icons.png') no-repeat 0 -449px;
	padding: 0 0 0 19px;
	text-decoration : none;
	border: none;
}
#footer p.right a.admin{
	background: url('img/icons.png') no-repeat 0 -1px;
	padding: 0 10px 0 19px;
	text-decoration : none;
	border: none;
}
#footer p.right a.top:hover{
	background: url('img/icons.png') no-repeat 0 -481px;
	padding: 0 0 0 19px;
	border: none;
}
#footer p.right a.admin:hover{
	background: url('img/icons.png') no-repeat 0 -33px;
	padding: 0 10px 0 19px;
	border: none;
}

/* ---------------------
Border-radius CSS3
--------------------- */
#menu, #footer, #content {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
En tout cas, tout conseil est la bienvenue (même hors sujet)!

Réponses

  • HamtaroHamtaro Member
    mai 2011 modifié
    Il faut tout simplement utiliser deux class différentes pour ton content.
    Par exemple content et content-static. Comme ça, ton design est indépendant de la partie "blog" et page statique ;)

    Ca donne par exemple pour home.php
    <div id="header"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
    
    Et pour static.php
    <div id="header"></div>
    <div id="content-static"></div>
    <div id="footer"></div>
    
  • VictorVictor Member
    Merci à toi, j'essaye ça tout à l'heure.
  • VictorVictor Member
    Ok, c'est impecc', on peu passer en résolu!
Connectez-vous ou Inscrivez-vous pour répondre.