28172 sujets

CSS et mise en forme, CSS3

Transformer un style css html en feuille de style css ?

Bonjour à tous,

Je viens de passer 48h sans trouver de réponse à cette question.

J'ai exporter ma page html via PS et voudrais transformer mon style css en feuille afin de ne pas répéter chaque fois la même chose. J'ai bien vu une histoire de tableau masi rien n'y fait.

Voici ma page 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>
<title>Sans titre-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (Sans titre-1.psd) -->
<link rel="stylesheet" href="image\new3.css">

<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (Sans titre-1.psd) -->
<div id="Tableau_01">
	<div id="Sans-titre-1-01_">
		<img id="Sans_titre_1_01" src="images/Sans-titre-1_01.png" width="900" height="213" alt="" />
	</div>
	<div id="Sans-titre-1-02_">
		<img id="Sans_titre_1_02" src="images/Sans-titre-1_02.png" width="24" height="69" alt="" />
	</div>
		<div id="Sans-titre-1-08_">
		<img id="Sans_titre_1_08" src="images/Sans-titre-1_08.png" width="24" height="69" alt="" />
	</div>
	<div id="Sans-titre-1-09_">
		<img id="Sans_titre_1_09" src="images/Sans-titre-1_09.png" width="900" height="678" alt="" />
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>


et ma feuille css 

#Tableau_01 {
	position:absolute;
	left:125px;
	top:0px;
	width:900px;
	height:960px;
}

#Sans-titre-1-01_ {
	position:fixed;
	left:0px;
	top:0px;
	width:900px;
	height:213px;
}

#Sans-titre-1-02_ {
	position:fixed;
	left:0px;
	top:213px;
	width:24px;
	height:69px;
}

#Sans-titre-1-08_ {
	position:fixed;
	left:876px;
	top:213px;
	width:24px;
	height:69px;
}

#Sans-titre-1-09_ {
	position:fixed;
	left:0px;
	top:282px;
	width:900px;
	height:678px;
}


Mon probleme est que les images _02 et _08 devraient etre sur la meme ligne mais finissent toujours l'une au dessus de l'autre.

Je ne comprends pas pourquoi, si vous pouviez m'aiguiller.

MErci
Modifié par camarade35 (01 May 2010 - 14:50)
Bonjour.
Ce comportement est tout à fait normal dans la mesure où chaque image est placée entre des balises <div>...</div>. Or, ces blocs sont de type block, c'est à dire qu'ils forcent un retour à la ligne après avoir été affiché. Deux <div> à la suite seront donc toujours, par défaut, l'une en-dessous de l'autre.
Merci je vais réétudier les bases du css, j'ai bien compris le fait des div, me reste a trouver ce qui me permettrai de remplacer ce code.

Merci pour la réponse --> go to search
Modifié par camarade35 (01 May 2010 - 23:22)
Sujet clos
Aller à