Organisation de ma Css...[Résolu]

Question

obstirey

27 Nov 2008 à 18:33

Bonjour à toute et à tous,

Pour faire simple, je ne suis pas webmaster...Je vous demande donc d'être indulgent...

Donc...Je réalise actuellement mon site professionnel en CSS. Je suis arrivé plus ou moins à ce que je voulais ( visuellement ), seulement je n'ai eu que peut de temps pour comprendre le strict minimum de ce langage, et je me doute que le code que j'ai écrit comporte quelques erreurs...plus ou moins critique...

J'aimerais que vous m'aidiez à repérer les erreurs , et par la suite les corriger, dans la limites du possible..

Voila le code de la page Galerie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	

<head>


<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
	<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
    <style type="text/css">
	
	body
{
	margin: 0px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 12px "Times New Roman", Times, serif ;
	text-align:center;
	background: #e7e7e7 ;
}

/* conteneur
********************************************/
div#conteneur
{
	width: 706px ;
	margin: 0 auto ;
	text-align: left ;
	border: 0.5px solid #000000 ;
	background: #fff ;
}

h1#header
{
	height: 200px;
	margin: 0 auto ;
}

/* propriété de la page
********************************************/
div#contenu
{
	padding: 0 20px 0 20px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 18px ;
}

div#contenu p
{
	margin:auto ;
	text-align: justify ;
	text-indent: 25px ;
	line-height: 20px ;
}

/* Tableau1
********************************************/
.tableau1
{
	padding: 0 20px 0 20px ;
	margin-top:20px;
}


.tableau1 h3
{
	text-align:center; 
	font-size: 16px ;
	color:#666666;
}

.tableau1 p
{
	text-align: justify ;
	text-indent: 25px ;
	line-height: 20px ;
}

.tableau1sources
{
	width: 675px ;
	height: 207px ;
	background:url(images/t1_architecture.jpg) no-repeat;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom: 10px;
}

.tableau1sources a
{
	width: 675px ;
	height: 207px ;
	display: block ;
}
/* Tableau2
********************************************/
.tableau2
{
	padding: 0 20px 0 20px ;
}


.tableau2 h3
{
	text-align:center;
	font-size: 16px ;
	color:#666666;
}

.tableau2 p
{
	text-align: justify ;
	text-indent: 25px ;
	line-height: 20px ;
}

.tableau2sources
{
	width: 675px ;
	height: 207px ;
	background:url(images/t2_personnages.jpg) no-repeat;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom: 10px;
}

.tableau2sources a
{
	width: 675px ;
	height: 207px ;
	display: block ;
}
/* Tableau3
********************************************/
.tableau3
{
	padding: 0 20px 0 20px ;
}


.tableau3 h3
{
	text-align:center;
	font-size: 16px ;
	color:#666666;
}

.tableau3 p
{
	text-align: justify ;
	text-indent: 25px ;
	line-height: 20px ;
}

.tableau3sources
{
	width: 675px ;
	height: 207px ;
	background:url(images/t3_objets.jpg) no-repeat;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom: 10px;
}

.tableau3sources a
{
	width: 675px ;
	height: 207px ;
	display: block ;
}

/* Pied de page
********************************************/
div#footer
{
	height: 25px;
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #000000 ;	
}

    </style>

<title>Sunnystrics - Galerie </title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head><body>

<div id="conteneur">
	
		<h1 id="header">
        
        
		  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','706','height','215','src','images/Header','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/Header' );</script><noscript>

          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="706" height="215">
            <param name="movie" value="images/Header.swf">
            <param name="quality" value="high">
            <embed src="images/Header.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="706" height="215"></embed></object></noscript>
        </h1>        
        
        	
<div id="contenu">
      
		<h2>Galerie / Réalisations...</h2>
        <p>les illustrations sont intégralement réalisées en trois dimension, et représentent mes travaux personnels et professionnels fait </p>
        <p>jusqu'à ce jour.</p>
        <p><strong>...Concernant la Modélisation 3D</strong></p>
        <p>J'utilise essenciellement les logiciels 3ds Max et Maya (de la compagnie <strong>Autodesk</strong>).Une fois la modélisation terminée, </p>
        <p>vient le texturage des objets, l'animation...</p>
        <p><strong>...Puis la retouche Photo</strong></p>
        <p><strong>Adobe</strong> Photoshop, est l'un des logiciel les plus adapté pour ce genre de d'opération.</p>
        <BR>
        </div>
        
 
<div class="tableau1">
		<h3>Architecture</h3>
        <p>Bâtiments, villes, Usines...ect... Tous ce qui concerne l'Architecture de propre comme de loin.</p></div>
<div class="tableau1sources">
		<a href="images/g_maison.jpg" title="Maison" rel="lightbox[main]"></a></div>            
<div class="links">
        <a href="images/g_usine.jpg" title="Usine" rel="lightbox[main]"></a>
        <a href="images/g_ville.jpg" title="Ville" rel="lightbox[main]"></a>
        <a href="images/g_hotel.jpg" title="Hotel" rel="lightbox[main]"></a>
        <a href="images/g_supermarche.jpg" title="Supermarche" rel="lightbox[main]"></a>
        <a href="images/g_cafeteria.jpg" title="Cafeteria" rel="lightbox[main]"></a></div>
        
        
<div class="tableau2">
		<h3>Les Personnages</h3>
        <p>Tous ce qui concerne les personnages réalisés jusqu'à maintenant, et ceux à venir... </p></div>
<div class="tableau2sources">
		<a href="images/g_ratatouille.jpg" title="Sunny" rel="lightbox[main]"></a></div>    
<div class="links">
        <a href="images/g_lucie.jpg" title="Lucie" rel="lightbox[main]"></a>
        <a href="images/g_personnages.jpg" title="Personnages" rel="lightbox[main]"></a>
        <a href="images/g_robot.jpg" title="Robot" rel="lightbox[main]"></a></div>
 
        
<div class="tableau3">
		<h3>Paysages et Objets divers</h3>
        <p>cette section mélange des décors et des objets qui pourront apparaitre dans une animation prochaine....</p></div>
<div class="tableau3sources">
		<a href="images/g_arbre.jpg" title="Arbre" rel="lightbox[main]"></a></div>    
<div class="links">
         <a href="images/g_paysage.jpg" title="Paysage" rel="lightbox[main]"></a>
        <a href="images/g_ile.jpg" title="Ile" rel="lightbox[main]"></a>
        <a href="images/g_buggy.jpg" title="Buggy" rel="lightbox[main]"></a> 
        <a href="images/g_materiaux.jpg" title="Materiaux" rel="lightbox[main]"></a> 
        <a href="images/g_taxi.jpg" title="Taxi" rel="lightbox[main]"></a> 
        <a href="images/g_appareilphoto.jpg" title="Appareil Photo Num&eacute;rique" rel="lightbox[main]"></a></div>





<div id="footer">
       <p> © Copyright 2008 - Sunnystrics </p>
      
</div>

</div></body></html>

Modifié par obstirey (01 Dec 2008 - 13:01)

obstirey

27 Nov 2008 à 18:39

Petite information, mon site est en ligne à l'adresse suivante:

http://pagesperso-orange.fr/remy.vignaud

Les scripts 'mootools' et 'Slimbox' sont des scripts prédéfinis pour les liens images...

Corinne S.

28 Nov 2008 à 09:35

Bonjour et bienvenu sur le forum,

Pour commencer, je conseillerais un petit détour par le validateur HTML.
Ensuite concernant les instructions CSS superflues, Firebug est très pratique.
Il serait également bien vu de spécifier la taille de caractères en em et non en px.
Et enfin si cela t'intéresse, voici un petit billet sur l'écriture des feuilles de style.

Bonne lecture... Smiley cligne

obstirey

1 Dec 2008 à 12:39

Bonjour et merci d'avoir pris le temps de me répondre.

En fouillant un peu dans la documentation que vous m'avez fournie, j'ai pu répondre à quelques questions...notamment sur l'écriture du XHTML...

Par contre, j'ai un problème avec 'Validator W3C'....
Toutes les erreurs sont liées à une Swf !!!Comment puis-je réparer ces erreurs? Y a t-il un moyen pour l'intégrer directement dans la CSS???

Merci

6l20

1 Dec 2008 à 12:48

Bonjour abstirey,

obstirey a écrit :

Par contre, j'ai un problème avec 'Validator W3C'....
Toutes les erreurs sont liées à une Swf !!!Comment puis-je réparer ces erreurs? Y a t-il un moyen pour l'intégrer directement dans la CSS???
Merci

Ton animation flash pourra être intégrée à ton code (x)html de manière valide (ie en respectant les standards W3C) en suivant ce point de la FAQ Smiley cligne

Nous allons volontairement ignorer la dernière partie de ta question Smiley cligne

Cdt,
Sylvain

fvsch

1 Dec 2008 à 12:50

obstirey a écrit :
Toutes les erreurs sont liées à une Swf !!!

Pour être exact, elles sont liées au code HTML utilisé pour insérer l'animation Flash dans la page. La manière valide d'insérer une animation Flash est décrite dans la FAQ du forum.

obstirey a écrit :
Y a t-il un moyen pour l'intégrer directement dans la CSS???

Non.

obstirey

1 Dec 2008 à 13:01

Merci beaucoup...

Mon code est valide maintenant....

Encore merci pour vos réponses...
Obstirey

Sujet clos

CSS et mise en forme, CSS3

Organisation de ma Css...[Résolu]