Alignement de mon design

Question

eMeRiKa

23 Mar 2006 à 19:42

Bonjour, première participation de ma part sur ce forum, je vous demande de l'aide.

Je débute la programation web depuis peu et pour m'entrainer j'ai souhaité coder un design, voici le lien : www.affinity-web.org/xgames . Mais les 3 colones du site (partie principal puis celle de roster sondage.. et enfin celle de sponsor...) ne sont pas alignés horizontalement dans le bas du site. Smiley eek

Et j'ai beau essayer de remettre dans un div puis de metre un motif en bas.. sans y arriver la faute à trop peu de connaissance. J'aimerai donc votre aide.

Voici mon fichier html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Team multigaming xGames</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
		
<body>

	<div id="login">
	</div>
	
	<div id="header">
	</div>
	
	<div id="menu">
		<div id="m1"><a href="#"><img src="images/m1.jpg" alt="" /></a>
		</div>
		<div id="m2"><a href="#"><img src="images/m2.jpg" alt="" /></a>
		</div>
		<div id="m3"><a href="#"><img src="images/m3.jpg" alt="" /></a>
		</div>
		<div id="m4"><a href="#"><img src="images/m4.jpg" alt="" /></a>
		</div>
		<div id="m5"><a href="#"><img src="images/m5.jpg" alt="" /></a>
		</div>
		<div id="m6"><a href="#"><img src="images/m6.jpg" alt="" /></a>
		</div>
		<div id="m7"><a href="#"><img src="images/m7.jpg" alt="" /></a>
		</div>
		<div id="m8"><a href="#"><img src="images/m8.jpg" alt="" /></a>
		</div>
		<div id="m9"><a href="#"><img src="images/m9.jpg" alt="" /></a>
		</div>
		<div id="m10"><a href="#"><img src="images/m10.jpg" alt="" /></a>
		</div>
		<div id="m11"><a href="#"><img src="images/m11.jpg" alt="" /></a>
		</div>
		<div id="m12"><img src="images/m12.jpg" alt="" />
		</div>
	</div>
	
	<div id="last">
		<div id="lastdemos">
			<div id="last1">
			</div>
			<div id="lastb1">
			</div>
			<div id="lastsee1"><a href="#"><img src="images/last_see1.jpg" alt="" /></a>
			</div>
		</div>
		<div id="lastnews">
			<div id="last2">
			</div>
			<div id="lastb2">
			</div>
			<div id="lastsee2"><a href="#"><img src="images/last_see2.jpg" alt="" /></a>
			</div>
		</div>
		<div id="lastwars">
			<div id="last3">
			</div>
			<div id="lastb3">
			</div>
			<div id="lastsee3"><a href="#"><img src="images/last_see3.jpg" alt="" /></a>
			</div>
		</div>
	</div>	
	
	<div id="midd">
	</div>
	
	<div id="all">
	<div id="head">
		<div id="main_h">
		</div>
		<div id="main_m">
		</div>
		<div id="main_b">
		</div>
	</div>
	
	<div id="cd1">
		<div id="roster">
			<div id="roster_h">
			</div>
			<div id="d2_m">
			</div>
		</div>
		<div id="sondage">
			<div id="sond_h">
			</div>
			<div id="d2_m">
			</div>
		</div>
		<div id="xgames">
		</div>
	</div>
	
	<div id="cd2">
		<div id="server">
			<div id="server_h">
			</div>
			<div id="d1_m">
			</div>
		</div>
		<div id="hsponso">
			<div id="hsponso_h">
			</div>
			<div id="sponso_m">
			</div>
		</div>
		<div id="sponso">
			<div id="sponso_h">
			</div>
			<div id="sponso_m2">
			</div>
			<div id="sponso_b">
			</div>
		</div>
	</div>
					
			<div id="c2">
			</div>
			
	</div>
	<div id="footer">
	</div>
	
	
</body>
</html>

Et voici mon fichier css :


body
{
   width: 100%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 0px; /* Marge en haut*/
   margin-bottom: 0px;    /* Marge en bas */
   background-color: #C60F0B;
}

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
   text-decoration: none; /* Les liens ne seront plus soulignés */
}

#login
{
   width: 1000px;
   height: 26px;
   background-image: url("images/login.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#header
{
   width: 1000px;
   height: 163px;
   background-image: url("images/header.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#menu
{	
	width: 1000px;
	height: 29px;
	margin-bottom: 0px;
}
	
#m1
{
   width: 79px;
   height: 29px;
   float:left;
   background-image: url("images/m1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m2
{
   width: 73px;
   height: 29px;
   float:left;
   background-image: url("images/m2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m3
{
   width: 81px;
   height: 29px;
   float:left;
   background-image: url("images/m3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m4
{
   width: 79px;
   height: 29px;
   float:left;
   background-image: url("images/m4.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m5
{
   width: 87px;
   height: 29px;
   float:left;
   background-image: url("images/m5.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m6
{
   width: 98px;
   height: 29px;
   float:left;
   background-image: url("images/m6.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m7
{
   width: 92px;
   height: 29px;
   float:left;
   background-image: url("images/m7.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m8
{
   width: 57px;
   height: 29px;
   float:left;
   background-image: url("images/m8.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m9
{
   width: 87px;
   height: 29px;
   float:left;
   background-image: url("images/m9.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m10
{
   width: 87px;
   height: 29px;
   float:left;
   background-image: url("images/m10.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m11
{
   width: 86px;
   height: 29px;
   float:left;
   background-image: url("images/m11.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#m12
{
   width: 94px;
   height: 29px;
   float:left;
   background-image: url("images/m12.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#last
{	
	width: 1000px;
	height: 167px;
	float:left;
	margin-bottom: 0px;
}

#lastdemos
{	
	width: 337px;
	height: 167px;
	float:left;
	margin-bottom: 0px;
}

#last1
{
   width: 337px;
   height: 140px;
   float:left;
   background-image: url("images/last1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastb1
{
   width: 272px;
   height: 27px;
   float:left;
   background-image: url("images/last_b1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastsee1
{
   width: 65px;
   height: 27px;
   float: left;
   background-image: url("images/last_see1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastnews
{	
	width: 322px;
	height: 167px;
	float:left;
	margin-bottom: 0px;
}

#last2
{
   width: 322px;
   height: 140px;
   float:left;
   background-image: url("images/last2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastb2
{
   width: 252px;
   height: 27px;
   float:left;
   background-image: url("images/last_b2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastsee2
{
   width: 70px;
   height: 27px;
   float: left;
   background-image: url("images/last_see2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastwars
{	
	width: 341px;
	height: 167px;
	float:left;
	margin-bottom: 0px;
}

#last3
{
   width: 341px;
   height: 140px;
   float:left;
   background-image: url("images/last3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastb3
{
   width: 247px;
   height: 27px;
   float:left;
   background-image: url("images/last_b3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#lastsee3
{
   width: 94px;
   height: 27px;
   float: left;
   background-image: url("images/last_see3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#midd
{
   width: 1000px;
   height: 36px;
   float: left;
   background-image: url("images/midd.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#all
{	
	width: 1000px;
	float:left;
	margin-bottom: 0px;
}

#head
{	
	width: 575px;
	height:100%;
	float:left;
	margin-bottom: 0px;
}

#main_h
{
   width: 575px;
   height: 29px;
   float: left;
   background-image: url("images/main_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#main_m
{
   width: 575px;
   height: 9px;
   float: left;
   background-image: url("images/main_m.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
}

#main_b
{
   width: 575px;
   height: 21px;
   float: left;
   background-image: url("images/main_b.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#cd1
{	
	width: 200px;
	height:100%;
	float:left;
	margin-bottom: 0px;
}

#roster
{	
	width: 200px;
	float:left;
	margin-bottom: 0px;
}

#roster_h
{
   width: 200px;
   height: 29px;
   background-image: url("images/roster_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}


#sondage
{	
	width: 200px;
	margin-bottom: 0px;
}

#sond_h
{
   width: 200px;
   height: 33px;
   background-image: url("images/sond_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#d2_m
{
   width: 200px;
   height: 9px;
   background-image: url("images/d2_m.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
}

#xgames
{
   width: 200px;
   height: 348px;
   background-image: url("images/xgames.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#cd2
{	
	width: 225px;
	height:100%;
	float:right;
	margin-bottom: 0px;
}

#server
{	
	width: 225px;
	margin-bottom: 0px;
}

#server_h
{
   width: 225px;
   height: 29px;
   background-image: url("images/server_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#d1_m
{
   width: 225px;
   height: 9px;
   background-image: url("images/d1_m.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
}

#hsponso_h
{
   width: 225px;
   height: 25px;
   background-image: url("images/hsponso_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#sponso_m
{
   width: 225px;
   height: 130px;
   background-image: url("images/sponso_m.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#sponso_h
{
   width: 225px;
   height: 25px;
   background-image: url("images/sponso_h.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#sponso_m2
{
   width: 225px;
   height: 129px;
   background-image: url("images/sponso_m2.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
   
}

#sponso_b
{
   width: 225px;
   height: 99px;
   background-image: url("images/sponso_b.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#c2
{
   width: 200px;
   height: 4px;
   background-image: url("images/c2.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
   
}

#footer
{
   width: 1000px;
   height: 24px;
   float: left;
   background-image: url("images/footer.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

Merci de jetter un coup d'oeil Smiley biggrin

eMeRiKa

23 Mar 2006 à 20:22

vite vite vite personne ne m'a encore taper sur les doigts.

j'ai trouvé çà http://forum.alsacreations.com/topic-4-12504-1-Comment-etendre-la-hauteur-dun-ltdivgt-jusquau-footer-de-ma-pa.html je vais voir si j'arrive avec ces infos merci Smiley lol

eMeRiKa

23 Mar 2006 à 20:34

En faite si quelque peut m'aider, car dans mon cas il ya des images, je ne peux me contenter de tricher avec un cadre de fond de la couleur de mes colonnes Enfin je suis totalement dépassé.

fvsch

23 Mar 2006 à 21:56

Et avec un cadre de fond ayant une image de fond redessinant tes colonnes ?

eMeRiKa

23 Mar 2006 à 23:06

hum, j'essaye de voir çà. Je vais faire un test, merci de l'idée

eMeRiKa

24 Mar 2006 à 00:12

j'ai plus ou moins réussi à grace à cette technique bien qu'elle ne me plaise que moyennement mais maintenant il me reste 2 bugs que je ne comprend pas : http://www.affinity-web.org/xgames

Pourquoi mon motif ne se répète pas dans mes blocs sous firefox alors que celà marche sous IE, et d'où viennent les 2 traits rouges encadrant les blocks du haut sous IE ? Smiley eek

gege71

24 Mar 2006 à 00:41

chez moi

Ca ne marche pas sous FireFox 1.5
ok IE6

eMeRiKa

24 Mar 2006 à 01:03

qu'est ce qui ne marche pas?? le motif des blocks qui doit se répéter? si c'est çà çà ne marche pas non plu chez moi... Smiley bawling

Sujet clos

CSS et mise en forme, CSS3

Alignement de mon design