Sujet Précédent Sujet Suivant

Html/css - Placement bloc + footer

Fermé
ruvele Messages postés 18 Date d'inscription vendredi 14 décembre 2007 Statut Membre Dernière intervention 29 mai 2008 - 6 févr. 2008 à 14:14
 annonyme - 17 août 2010 à 20:45
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 : 

<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
A voir également:

4 réponses

Réponse 1 / 4
Alex
6 févr. 2008 à 14:17
Je suis pas sur de mon coup, mais tente tjrs : 

#blocGch {
float:left;
width:80px;
height:400px;
background-color:pink;
postion:relative;
}
1
Réponse 2 / 4
ruvele Messages postés 18 Date d'inscription vendredi 14 décembre 2007 Statut Membre Dernière intervention 29 mai 2008 5
6 févr. 2008 à 14:23
nan ça passe pas..... ahhhhhh !!!
0
LeDoc
30 déc. 2009 à 18:23
Salut Revele,

J'ai à peu près le même problème que toi.
Alors, je veux savoir si tu as trouvé une solution et si tu t'en souviens pour m'en faire part.

Merci,

LeDoc
0
Réponse 3 / 4
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
30 déc. 2009 à 19:38
Pour positionner tu met 
float:left; (ou right
)
et tu finis avec une div vide qui a pour style 
clear:both;


Cordialement.
0
Réponse 4 / 4
annonyme
17 août 2010 à 20:45
S'uffi de tapper:

#blocGch
{
float: lefth;
width: xxxxpx;
eight: xxxxpx;
}

et il faut remplacer:
xxxxpx

cordialement
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79

11 réponses
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

Bonjour,

je ne suis jamais aller à Bercy et j'aimerais quelles sont les meilleures vues?

GRADIN O rang 11 place 20
GRADIN E rang 25 -26 -27 - 28 -28 30
place 09 à 22

8 réponses
Balise </br>
erf -
erf -

Bonjour,

Je viens de créer un site web, et je me suis rendu sur W3C afin d'obtenir le www. mais le site m'affiche une erreur "End tag BR" (pour la balise
), ce que je ne comprends pas vu que le balise
n'existe pas (il me semble...)

Pouvez-vous m'aider svp ?
Merci d'avance et bonne journée !

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

Bonjour,

Je ne savait pas comment faire un titre explicite donc voilà mon problème:

Je possède un système de news sur mon site mais à chaque fois lors de l'écriture je dois ajouter la balise
pour faire un saut de ligne.

J'ai cherché su google mais ne sachant pas quelle question poser j'ai du mal a bien cibler ma recherche.

Merci d'avance.

Configuration: Windows 7 / Firefox 5.0

13 réponses