Probleme avec les collones

Question

Pages :

amine84

22 Jun 2005 à 01:12

salut tout le monde!
jai un probleme qui me tracace depuis plusieurs jours je voulait realiser un modele qui ressemble au celui ci http://css.alsacreations.com/modeles/modele5.htm celui la pour etre plus precis pour arriver a un resultat comme celui ci ; http://img67.echo.cx/img67/4020/sssssssssss4hg.jpg sans bug ;p
c'est les collones bleu que je ve elargir afin que le contenu soit au millieu de la page.

c'est les collones bleu que je ve elargir afin que le contenu soit au millieu de la page.

voila ou je bloque en essayant je comprend pas ou jai commis derreur !!?
voila sur index 2 lorsque jai essayé

www.pc-attitude.com/index2.rar
et la le fichier origial

www.pc-attitude.com/mbs.rar

voila jespere que jen demande pas beaucoup mais la je seche (c'est pour mon stage)

merci pour ton aide!
Modifié par amine84 (22 Jun 2005 - 01:14)

Igor

22 Jun 2005 à 01:32

Bonjour et bienvenue amine84 sur Alsacréations,

Pourrais-tu donné le code ou mieux une page en ligne pour tes exemples, car des fichiers compressés sur un forum, je ne me risque (personnelement) jamais à les télécharger sur mon poste et les ouvrir Smiley cligne

. De plus çà oblige les membres à faire eux-même des opérations qui peuvent les décourager de s'interresser à ton problème.

ps: un petit effort sur la syntaxe et l'orthographe serait un plus certain.

amine84

22 Jun 2005 à 11:45

pour loriginal:

<html>
<head>
<title>essai3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
a.image1 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 125px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(08.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image1:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(08-over.gif); /* source de l'image d'arrivée */
     } 
a.image2 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 96px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(10.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image2:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(10-over.gif); /* source de l'image d'arrivée */
     } 
a.image3 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 118px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(11.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image3:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(11-over.gif); /* source de l'image d'arrivée */
     } 
a.image4 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 166px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(12.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image4:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(12-over.gif); /* source de l'image d'arrivée */
     } 
a.image5 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 154px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(14.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image5:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(14-over.gif); /* source de l'image d'arrivée */
     } 
a.image6 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 118px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(16.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image6:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(16-over.gif); /* source de l'image d'arrivée */
     } 
a.up { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 780px; /* largeur de l'image réactive */
     height: 124px; /* hauteur de l'image réactive */}

a.recherche { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 135px; /* largeur de l'image réactive */
     height: 23px; /* hauteur de l'image réactive */}
        
;

}
-->
</style>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tableau_01" width="800" height="801" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="7">
			<img src="1.gif" width="10" height="800" alt=""></td>
		<td colspan="9">
			<img src="index_02.gif" width="780" height="93" alt=""></td>
		<td width="50%" rowspan="7">
			<img src="1.gif" width="10" height="800" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="index_04.gif" width="326" height="22" alt=""></td>
		<td colspan="2" background="bk.gif">&nbsp;			</td>
		<td colspan="3">
			<img src="index_06.gif" width="315" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="index_07.gif" width="780" height="9" alt=""></td>
	</tr>
	<tr>
		<td width="125" height="20" colspan="2" background="bk2.gif"><a class="image1" href=""></a> </td>

	    <td width="96" height="20" background="bk2.gif"><a class="image2" href=""></a></td>
   		
		<td width="118" height="20" colspan="2" background="bk2.gif"><a class="image3" href=""></a></td>
		
		<td width="166" height="20" colspan="2" background="bk2.gif"> <a class="image4" href=""></a></td>
		
        <td width="154" height="20" background="bk2.gif"><a class="image5" href=""></a></td>
		
		<td width="118" height="20" background="bk2.gif"><a class="image6" href=""></a></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="index_14.gif" width="780" height="25" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_15.gif" width="1" height="632" alt=""></td>
		<td height="594" colspan="8">
			<img src="index_16.gif" width="779" height="594" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="index_17.gif" width="779" height="38" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="125" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="96" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="104" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="14" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="125" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="155" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	</tr>
</table>
</body>
</html>

voila

je pense que c'est plus parlant dans mbs.rar vu quil ya les photos
merci Smiley biggrin

Modifié par amine84 (22 Jun 2005 - 22:12)

dominique

22 Jun 2005 à 12:29

Bonjour et bienvenue amine84 Smiley smile

Je n'ai pas compris à quoi servent les tableaux sur ta page ?
C'est pour afficher des données tabulaires ou pour la présentation ?

amine84

22 Jun 2005 à 12:42

merci

au fait jai commencé par faire des tableau ( fait automatiquement lorsque jai exporter d'image ready) puis on ma conseillé le css pour realiser le site jai utiliser ca par la suite mais jai du mal a combiné les deux vu que je conné vraiment le css que depuit peut

javai essayé un moment de refaire completement tout ca
mais ca a pas marché



<html>
<head>
<title>essai3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<style type="text/css">


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#header {
height: 124px;
width: 780px;
}

#conteneur {
position: absolute;
width: 100%;
height: 100%;
}

#centre {
background-color:#9999CC;
height: 100%;
width: 780px;
background-image: url(index_16.gif);
}

#gauche {
position: absolute;
height: 100%;
background-image: url(1.gif);
background-repeat: no-repeat;
}

#droite {
position: absolute;
height: 100%;
background-image: url(1.gif);
background-repeat: no-repeat;
}

#pied { 
width="779";
height="38";
background-image: url(index_17.gif);
background-repeat: no-repeat;
}

a.image1 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 125px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(08.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image1:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(08-over.gif); /* source de l'image d'arrivée */
     } 
a.image2 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 96px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(10.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image2:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(10-over.gif); /* source de l'image d'arrivée */
     } 
a.image3 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 118px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(11.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image3:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(11-over.gif); /* source de l'image d'arrivée */
     } 
a.image4 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 166px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(12.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image4:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(12-over.gif); /* source de l'image d'arrivée */
     } 
a.image5 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 154px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(14.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image5:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(14-over.gif); /* source de l'image d'arrivée */
     } 
a.image6 { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 118px; /* largeur de l'image réactive */
     height: 20px; /* hauteur de l'image réactive */
     background-image: url(16.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
     a.image6:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(16-over.gif); /* source de l'image d'arrivée */
     } 
        
;


<body>

<div id="conteneur">

	
	<div id="gauche">
	</div>
	
	<div id="droite">
	</div>
	
	<div id="header">
		
		<tr>	
			<td>
				<img src="index_02.gif" width="780" height="93" alt="">
			</td>	
		</tr>
		<tr>
			<td colspan="4">
				<img src="index_04.gif" width="326" height="22" alt="">
			</td>
			<td colspan="2" background="bk.gif">&nbsp;			
			</td>
			<td colspan="3">
			<img src="index_06.gif" width="315" height="22" alt="">
			</td>
		</tr>
		<tr>
		<td colspan="9">
			<img src="index_07.gif" width="780" height="9" alt=""></td>
		</tr>
	</div>
	
	<div id="centre">
		<tr>
		<td width="125" height="20" colspan="2" background="bk2.gif"><a class="image1" href=""></a> </td>

	    	<td width="96" height="20" background="bk2.gif"><a class="image2" href=""></a></td>
   		
		<td width="118" height="20" colspan="2" background="bk2.gif"><a class="image3" href=""></a></td>
		
		<td width="166" height="20" colspan="2" background="bk2.gif"> <a class="image4" href=""></a></td>
		
        	<td width="154" height="20" background="bk2.gif"><a class="image5" href=""></a></td>
		
		<td width="118" height="20" background="bk2.gif"><a class="image6" href=""></a></td>
		</tr>
		
		<tr>
			<td>
			<img src="index_14.gif" width="780" height="25" alt=""></td>
		</tr>	

	</div>
	
	<div id="pied">
	
	</div>

</diV>
</table>
</body>
</html>

comme vous lavez sans doute remarque je suis une quiche css
Modifié par amine84 (22 Jun 2005 - 12:43)

dominique

22 Jun 2005 à 13:04

Sauf erreur de ma part, tu places tes colonnes en position absolute, essai plutôt le float...

Tu es passé voir les tutoriels ?

et plus précisemment celui-ci

amine84

22 Jun 2005 à 15:25

trés bien je pense que je fait tout refaire en css Smiley murf

Alors voila pour linstant jessaye de commencer "simple"

voici le resultat au quel je veut arriver:
suppression de l'image par Igor à voir dans un post plus bas
voici le code que jai utilisé suivant le tutorial

<html>
<head>
<title>essai3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<style type="text/css">


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#header1 {
background-image: url('index_02.gif');
height: 93px;
width: 780px;
}


#header2 {
background-image: url('bk.gif');
height: 22px;
width: 780px;
}


#header2_1 {
.logo {
float: right; /* alignement du logo à droite */
border: 0;
}

#header2_2 {
float: center; 
border: 0;
width: 139px;
height: 22px;
}

#header2_3 {
float: left; /* alignement du logo à gauche */
border: 0;
}

}



<body>

	
	<div class="header1">
		
	</div>
	
	<div class="header2">

		<img src="index_04.gif" class="header2_1" alt="logo" />
		<class="header2_2" alt="" />
		<img src="index_06.gif" class="header2_3" alt="logo" />
	</div>	
</body>
</html>

Pour etre encore plus explicite je dirai que jai un bloc dimage
puis le 2eme en 2eme ligne celui ci contient 3 bloc dont 2 le premier et le dernier sont une image alors que celui qui est au milieu est une case reservé à la date du jour Smiley rolleyes

et ca marche pas Smiley eek

mais quest qui faut faire Smiley bawling

Modifié par Igor (22 Jun 2005 - 16:14)

hellgy

22 Jun 2005 à 15:30

Bonjour!

Alors déja remplace tout tes "class" par des "id" et au lieu de

 <class="header2_2" alt="" />
<img src="index_06.gif" class="header2_3" alt="logo" />
</div>

écrit:

 <div id="header2_2">
<img src="index_06.gif" class="header2_3" alt="logo" />
</div>

Aussi, je ne sais pa si c'est une erreur de copier / coller, mais tu as un } en trop dans ton fichier de css.

Et "normalement", ça devrais déja aller mieux (enfin a première vue je ne vois que ça, je n'ai pas testé ton code)

Si je dis des bétises hésitez pas à me corriger hein Smiley ravi

Modifié par hellgy (22 Jun 2005 - 15:38)

amine84

22 Jun 2005 à 15:39

salut merci pour ta reponse jai fait ce que tu ma dit pour avoir comme code :

<html>
<head>
<title>essai3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<style type="text/css">


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#header1 {
background-image: url('index_02.gif');
height: 93px;
width: 780px;
}


#header2 {
background-image: url('bk.gif');
height: 22px;
width: 780px;
}


#header2_1 {
.logo {
float: right; /* alignement du logo à droite */
border: 0;
}

#header2_2 {
float: center; 
border: 0;
width: 139px;
height: 22px;
}

#header2_3 {
float: left; /* alignement du logo à gauche */
border: 0;
}


<body>
	
	<div id="header1">
		
	</div>
	
	<div id="header2">

		<img src="index_04.gif" class="header2_1" alt="logo" />
		<div id="header2_2" />
		<img src="index_06.gif" class="header2_3" alt="logo" />
	</div>	
</body>
</html>

voici le resultat

Modifié par amine84 (22 Jun 2005 - 15:43)

dominique

22 Jun 2005 à 15:39

Pense, si tu ne l'as pas fait, à déclarer le doctype, c'est très important, ça permet au navigateur de savoir quel langage il doit interpréter Smiley cligne

et ça joue sur le positionnement des éléments.

Edité : Oupssss ! attention ton image est trop grande et explose le forum Smiley rolleyes

Quand tu télécharges une image, tu as la possibilité de faire créer une miniature avec un lien vers l'image agrandie... Merci de corriger Smiley cligne

Modifié par dominique (22 Jun 2005 - 15:42)

hellgy

22 Jun 2005 à 15:42

Ah zut, il manque aussi la fin de ta balise <style>
Ajoute donc un </style> a la fin de la déclaration de ta css.

Essaye de faire attention a tes balises, chaque balise ouverte doit êre fermée!

amine84

22 Jun 2005 à 15:47

oki dsl pour limage jai edité Smiley biggol

sinon pour le doctype je met quoi exactement dans lentete?

ca marche deja mieu mais reste la petite image qui reste en bas jai limpression que c'est la partie 2 qui la "pousse"
sinon je vais essayé de faire attention au balise c'est pas trés pratique lorquon est sur notepad Smiley lol

dominique

22 Jun 2005 à 16:02

Merci pour l'image Smiley smile

Pour le doctype, une tite recherche sur le forum donne cette discussion :
http://forum.alsacreations.com/topic.php?fid=2&tid=324&s=doctype

Mais en cherchant un peu, tu en trouveras d'autres et des liens utiles, c'est toi seul qui, en fonction de tes besoins, peut déterminer ce choix Smiley cligne

Modifié par dominique (22 Jun 2005 - 16:32)

amine84

22 Jun 2005 à 16:30

oki merci je pense le mettre a la fin pour etre valide w3c (enfin je rêve) Smiley lol

sinon je suis toujours bloqué car ca retourne a la ligne ya til un moyen dempecher cela ?

<html>
<head>
<title>essai3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<style type="text/css">


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#header1 {
background-image: url('index_02.gif');
height: 93px;
width: 780px;
}


#header2 {
background-image: url('bk.gif');
height: 22px;
width: 780px;
}


#header2_1 {
float: right; /* alignement du logo à droite */
border: 0;
}

#header2_2 {
float: center; 
border: 0;
width: 139px;
height: 22px;
}

#header2_3 {
float: left; /* alignement du logo à gauche */
border: 0;
}

#header3 {
background-image: url('index_07.gif');
width: 780px;
height: 9px;
}
</style>

<body>
	
	<div id="header1">
	</div>
	
	<div id="header2">

		<img src="index_04.gif" class="header2_1" alt="logo" />
		<div id="header2_2"/>
		<img src="index_06.gif" class="header2_3" alt="logo" />
	</div>	

	<div id="header3">
	</div>	
</body>
</html>

jai chercher sur le tutorial mais jai pas trouvé un modele comme le mien Smiley rolleyes

dominique

22 Jun 2005 à 16:59

amine84 a écrit :
oki merci je pense le mettre a la fin pour etre valide w3c (enfin je rêve)

Erreur :

dominique a écrit :
Pense, si tu ne l'as pas fait, à déclarer le doctype, c'est très important, ça permet au navigateur de savoir quel langage il doit interpréter et ça joue sur le positionnement des éléments.

Il faut faire les choses dans le bon ordre, comment veux-tu être certain du bon affichage des données sur tous les navigateurs si tu ne lui dis pas quel langage tu utilises ? Smiley ohwell

amine84

22 Jun 2005 à 17:03

bien compris Smiley smile

quen pense tu de celui ci ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

hellgy

22 Jun 2005 à 17:06

Bah il n'est pas mieux ou moins bien qu'un autre... faut voir selon tes besoins si c'est bien celui la qui correspond

amine84

22 Jun 2005 à 17:18

bon je vien dutiliser celle alsacréations je sais pas trop la quel correspond a mes besoin c'est limite je sais a quoi ca sert bref Smiley ohwell

koala64

Modérateur

22 Jun 2005 à 17:22

Salut,

Pour le choix du doctype, je t'invite à lire cet article:
doctype

Lorsque tu passeras au validateur, tu verras si tu respectes les normes... sinon un détail te montrera ce qui ne va pas afin d'agir en conséquence.

Pour empêcher le retour à la ligne, tu peux utiliser l'instruction:

white-space: nowrap;

@+

Modifié par koala64 (22 Jun 2005 - 17:25)

amine84

22 Jun 2005 à 17:45

merci pour larticle je comprend mieux a quoi ca sert Smiley smile

pour le white-space: nowrap; ca a pas marché sur mon image qui reffuse de remonté

		<img src="index_06.gif" class="header2_3" alt="logo" />

qui suit le css

#header2_3 {
float: left; /* alignement du logo à gauche */
border: 0;
}

comme ca plus precisement

Modifié par amine84 (22 Jun 2005 - 17:47)

Pages :

Sujet clos