Html/css - Placement bloc + footer
Bonjour,
je souhaite placer un bloc (il s'agit du bloc id="blocGch" sur le côté gauche d'un bloc central (id="bloc_central").
comment puis-je faire ?
voici le code :
Voici le css :
Par la même occasion : mon footer bouge lorsque l'on retrécie la fenêtre : il se place sous le bloc central par exemple... comment puis-je le laisser fixe au bas de la page quoiqu'il arrive ?
Encore merci de votre aide
je souhaite placer un bloc (il s'agit du bloc id="blocGch" sur le côté gauche d'un bloc central (id="bloc_central").
comment puis-je faire ?
voici le code :
<body> <div id="menu"> <div class="outer"><a href="web.html"><span>Web</span></a></div> <div class="outer"><a href="anim.html"><span>Anim.</span></a></div> <div class="outer"><a href="#"><span>Créa.</span></a></div> <div class="outer"><a href="logos.html"><span>Logos</span></a></div> </div> <div id="bloc_central"> <!-- tableau permettant la mise en page des vignettes et des descriptifs --> <table id="tabl_vignette"> <th> Créations graphiques </th> <tr> <td>Bannière - BD 'Auberge du Bout du Monde' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/auberge_top.jpg" class="rollover" title="Bannière web - L'auberge du Bout du Monde - Sci Fi" rel="lightbox"><img alt="Bannière web - Auberge du Bout du Monde - Sci Fi" src="images/th_aubergeNBC.png" width="90" height="90"/></a></td> <td><a href="images/auberge_bandeau_jeu.png" class="rollover" title="Bannière web - L'auberge du Bout du Monde - Sci Fi" rel="lightbox"><img alt="Bannière web - Auberge du Bout du Monde - Sci Fi" src="images/th_aubergeJeuNBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - BD 'Complexe du Chimpanzé' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/complexe_top.jpg" class="rollover" title="Bannière web - Complexe du Chimpanzé - Sci Fi" rel="lightbox"><img alt="Bannière web - Complexe du Chimpanzé - Sci Fi" src="images/th_chimpanzeJeuNBC.png" width="90" height="90"/></a></td> <td><a href="images/complexe_jeu_bandeau.jpg" class="rollover" title="Bannière web - Complexe du Chimpanzé - Sci Fi" rel="lightbox"><img alt="Bannière web - Complexe du Chimpanzé - Sci Fi" src="images/th_chimpanzeNBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - Partenariat 'Ciel et Espace' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/cielEspace_top_jeu.jpg" class="rollover" title="Bannière web - Ciel & Espace - Sci Fi" rel="lightbox"><img alt="Bannière web - Ciel & Espace - Sci Fi" src="images/th_cielEspaceNBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - Partenariat 'Les Dossiers Dresden II' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/dresden2_top3.jpg" class="rollover" title="Bannière web - Les Dossiers Dresden II - Sci Fi" rel="lightbox"><img alt="Bannière web - Les Dossiers Dresden II - Sci Fi" src="images/th_dresdenNBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - Partenariat 'Op Fantastique' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/opFant_top.jpg" class="rollover" title="Bannière web - Op Fantastique - Sci Fi" rel="lightbox"><img alt="Bannière web - Op Fantastique - Sci Fi" src="images/th_opFantNBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - Partenariat 'Le Prestige' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/prestige_top3.jpg" class="rollover" title="Bannière web - Le Prestige - Sci Fi" rel="lightbox"><img alt="Bannière web - Le Prestige - Sci Fi" src="images/th_prestige1NBC.png" width="90" height="90"/></a></td> <td><a href="images/prestige_top6.jpg" class="rollover" title="Bannière web - Le Prestige - Sci Fi" rel="lightbox"><img alt="Bannière web - Le Prestige - Sci Fi" src="images/th_prestige2NBC.png" width="90" height="90"/></a></td> </tr> <tr> <td>Bannière - Partenariat 'Can't Stop the Serenity' <br/>Cadre : Service Web - NBC - Site chaîne Sci Fi <br/>Logiciel : Fireworks <br/>Contraintes : Charte graphique </td> <td><a href="images/cantStopTheSerenity_top_jeu.jpg" class="rollover" title="Bannière web - Can't Stop the Serenity - Sci Fi" rel="lightbox"><img alt="Bannière web - Can't Stop the Serenity - Sci Fi" src="images/th_stopSerenityNBC.png" width="90" height="90"/></a></td> </tr> </table> </div> <div id="blocGch"> </div> <p id="footer"> Portfolio Virginie RENOUF - Créations graphiques - Web - Contact : vrenouf(at)hotmail(point)fr </p> </body> </html>
Voici le css :
body {
background-image:url(bg_trans.png);
background-position:top right;
margin:2em; padding:0;
}
/* ----------------- MENU onglet --------------------------- */
#menu {
position:absolute;
width:500px;
margin-left:-250px;
left:50%;
height: 25px;
/*margin: 3em 0;*/
padding:0 1em;
/*border-bottom: 1px solid black;*/
}
div.outer {
float: left;
width: 120px;
height: 25px;
margin: 0 3px 0 0;
background: url( 'barre.png' ) 0 -50px no-repeat;
}
div.outer a {
display: block;
margin: 0; padding:0;
width:100%;
height:100%;
overflow:hidden;
font: bold 13px/1 Verdana, sans serif;
color:#CF1080; /* coul de police des boutons du menu */
text-decoration: none;
background: url( 'barre.png' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0;
padding: 7px 0 0 13px;
}
div.outer a:hover {
background-image: none;
color:white; /* coul de police des boutons du menu en ro */
}
div.outer a:active {
color: black;
}
/* ----------------------- FOOTER ------------------------ */
#footer {
position:absolute;
bottom:0;
font-family:verdana,sans serif;
font-size:11px;
}
/* ----------------------- BLOC CENTRAL ------------------------ */
#bloc_central {
position:absolute;
width:500px;
margin-left:-250px;
left:50%;
height:400px;
top:55px;
overflow:auto;
background-color:black;
padding:10px;
font-family:verdana;
font-size:11px;
color:white;
}
/* ----------------------- PLACEMENT VIGNETTES ------------------------ */
th {
color:#CF1080;
text-align:left;
height:50px;
font-size:14px;
}
img {
border:none;
}
table {
border:0;
}
td {
height:110px;
text-align:left;
}
/* ----------------------- PLACEMENT VIGNETTES ------------------------ */
#blocGch {
float:left;
width:80px;
height:400px;
background-color:pink;
}
Par la même occasion : mon footer bouge lorsque l'on retrécie la fenêtre : il se place sous le bloc central par exemple... comment puis-je le laisser fixe au bas de la page quoiqu'il arrive ?
Encore merci de votre aide
Configuration: Windows XP Firefox 2.0.0.11
4 réponses
-
Je suis pas sur de mon coup, mais tente tjrs :
#blocGch { float:left; width:80px; height:400px; background-color:pink; postion:relative; } -
nan ça passe pas..... ahhhhhh !!!
-
Pour positionner tu met
float:left; (ou right
)
et tu finis avec une div vide qui a pour styleclear:both;
Cordialement. -
S'uffi de tapper:
#blocGch
{
float: lefth;
width: xxxxpx;
eight: xxxxpx;
}
et il faut remplacer:
xxxxpx
cordialement
