28173 sujets

CSS et mise en forme, CSS3

Salut tout le monde,

Après avoir longuement bidouillé, et apres quelques recherches sur google et les fofo de alsacreation, j'ai toujours un énorme probleme... Smiley decu J'espere que quelqu'un aura la solution, car à chaque fois que j'ai demandé votre aide, j'ai loin de la regretter xD

Donc la, on essaie de faire le portfolio d'un ami à moi, et on pinaille depuis longtemps sur la taille d'une case td du tableau...

voila ce que ca fait : http://shinois.free.fr/flo/portfolio.html

j'ai mis en couleur (bleu et rouge) les 3 problemes que l'on a :
- les tailles que l'on a mis sur le CSS ne sont pas respectés.
- ce sont ces cases qui s'agrandisent au lien des motif gauche et droite en repeat-y.


voila le code 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" dir="ltr">

<head>

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

<title>Portfolio-THIERS Florian</title>	   
<link rel="stylesheet" type="text/css" href="css/style.css"/>


</head>
<body>
	<div id="global">

		<div id="header">
		
		<table>
		
		<tr>
			<td colspan="3" width="900px" height="26px"><img src="images/interface/header_01.jpg" /></td>
		</tr>
		
		<tr>
			<td width="46px" height="133px"><img src="images/interface/header_02.jpg"/></td>
			<td width="125px" height="133px"><img src="images/interface/header_03.jpg"/></td>
			<td rowspan="2" width="729px" height="196px"><img src="images/interface/header_04.jpg"/></td>

		</tr>
			
		<tr>
			<td colspan="2" width="171px" height="63px"><img src="images/interface/header_05.jpg"/></td>
		</tr>
		
		</table>
		</div>
		
		
		<div id="container">
		
		<table>
		
		<tr>

			<td id="coin-haut"></td>
			<td id="corps" rowspan="3">
			<p>
hqscjdsfnqkjdsbgsdkjghnsldkgklsdng bnkldfnsbv rgsdge eqrg ergrg esg ezsgezg erg erg erg qerzs
hqscjdsfnqkjdsbgsdkjghnsldkgklsdng bnkldfnsbv rgsdge eqrg ergrg esg ezsgezg erg erg erg qerzs
hqscjdsfnqkjdsbgsdkjghnsldkgklsdng bnkldfnsbv rgsdge eqrg ergrg esg ezsgezg erg erg erg qerzs [.......]
			</p>
			</td>
			<td id="droite"></td>
		</tr>
		
		<tr>
			<td id="motif-gauche"></td>

			<td id="motif-droite"></td>
		</tr>
		
		<tr>
			<td id="coin-gauche"></td>
			<td id="coin-droit"></td>
		</tr>
		
		</table>
		
		</div>
		
		
	</div>

	
		
</body>
</html> 



et le CSS :
*{

	margin: 0;
	padding: 0;

}


body{

	background-color: black;

}

#global{

	width: 900px;
	margin: 0 auto;
}

table{

	border-collapse: collapse;
	border:none;
}

td#droite{
	
	width:31px;
	height: 213px;
	background:url("../images/interface/motif-droite.jpg") repeat-y;
	
}

td#motif-droite{
	
	width:31px;
	background:url("../images/interface/motif-droite.jpg") repeat-y;
	
}

td#motif-gauche{
	width: 194px;
	height: 200px;
	background:url("../images/interface/motif-gauche.jpg") repeat-y;

}

#corps{

	width:675px;
	height:100%;
	background-color:#F5F5F5;
	background-image: url("../images/interface/corps-fond.jpg");
	background-repeat: no-repeat;
	background-position:bottom;
	vertical-align:top;
}

td#coin-haut{

width:194px;
height:213px;
background:url("../images/interface/essai-interface_02.jpg") no-repeat blue;
}

td#coin-droit{

width:31px;
height:304px;
background:url("../images/interface/coin-droit.jpg") no-repeat red;
}

td#coin-gauche{

width:194px;
height:304px;
background:url("../images/interface/essai-interface_06.jpg") no-repeat red;
}



J'ai pensé que le probleme venait des colspan, rowspan, mais j'ai bien vérifié, j'ai meme enlevé un rawspan="2" pour mettre un td en plus sur la droite mais ca veut vraiment pas...

le probleme vient des cases TD qui ont une taille, mais qui s'agrandissent en fonction du contenu...
exemple : le coin gauche (id="coin-gauche") a une taille bien défini, une image en fond, et un background rouge, qui normalement n'est pas affiché :

http://shinois.free.fr/flo/images/interface/essai-interface_06.jpg

La case dépasse largement l'image et fait apparaitre le rouge...

Je vais encore chercher, en attendant, j'espere, une réponse qui nous sauvera xD

Encore merci à vous, et bonne journée
A+++
Léo
Modifié par leomac (10 Nov 2007 - 18:31)
Salut leomac,

Je ne sais pas si l'heure tardive me joue des tours, mais je ne vois aucune différence de rendu sur tes exemples avec ton Doctype modifié Smiley eek

Je ne vois pas très bien l'utilité d'utiliser une mise en page en tableau ?!
Ce ne sont pas les tutoriels qui manquent sur ce site ni les informations

Ton code est invalide

C'est un peu la cata sous Firefox... Smiley decu

Et pour information, Alsa est invariable, et prend toujours un S, donc alsacreations Smiley cligne

Bon courage pour la suite Smiley cligne