[RESOLU] Problème de "Float" dans la #page
Victor
Member
dans Entraide et S.A.T
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:
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)! Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
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 Et pour static.php