18084 sujets

Questions générales et questions de débutants

Bonjour à tous : Aidez-moi s'il vous plaits comprendre. (édité)

Bonjour à tous Smiley biggrin

Et oui je suis nouveaux !

J'ai un problème car j'ai vraiment envie de ne plus utiliser les tableaux pour positionner les éléments ou les layers qui sortent du flux pour faire la mise en page de mon site.
Voici l'actuelle mise en page avec l'aide d'un tableau
upload/7417-screenshot1.jpg
Je précise aussi que ce n'est pas un frame en dessous du menu ni une iframe mais un overflow. pour ceux qui diraient que les frames c'est passé de mode je le sais déja.

Pour positionner des jpg ou des gif ne pose pas de problèmes mais si il s'agit d'éléments flash séparés, je n'arrive pas à placer deux animations flash l'une à coté de l'autre dans le même bloque ca ne marche pas. Ou le bloque dessant avec les animations falsh dans mozilla, ou les animations ne se positionnent pas correctement. j'ai le morale dans les chaussettes. Smiley bawling
upload/7417-screenshot0.JPG

J'ai écris le fichier

html comme ceci 


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Sidyjonline CSS TESTS</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" type="text/css" media="all" href="style_center.css">
   </head>
   <body>
<div id="headandmenu">
   <div class="flashmenu">
<object class="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="440" height="25">
          <param name=movie value="sidyjonline_menu.swf">
          <param name=quality value=high>
          <embed src="sidyjonline_menu.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="440" height="25">
          </embed> 
        </object>

</div>
<div class="blacklogo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="233" height="103">
          <param name=movie value="sidyjonline_black_animation.swf">
          <param name=quality value=high>
          <embed src="sidyjonline_black_animation.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="233" height="103">
          </embed> 
        </object>
		</div>
</div>
   </body>
</html>


Le Fichier css

body
{
	background: #333333;
	color: #000000;
	font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   margin: auto; 
    }

#headandmenu
{
   width: 860px;
   height: 210px;
   background-image: url("head_and_menu.jpg");
   background-repeat: no-repeat;

} 


.flashmenu {
positionnement : relatif;
padding-left: 25px;  
padding-top: 177px;
}

.blacklogo {
positionnement : relatif;
padding-left: 0px;  
padding-top: -100px;
}

Modifié par sidyj (01 Jul 2006 - 13:33)
Salut Sidyj et bienvenue à bord ! Smiley smile

Comme tu es nouveau ici, je t'invite à lire ces quelques lignes de présentation.
Tu pourras voir qu'il y a quelques règles dont on doit prendre connaissance avant de poster, comme de mettre en forme les messages (notamment le code) ou d'avoir un zeste de courtoisie (une salution est toujours appréciée, surtout s'il s'agit du premier message)
Merci d'avance d'éditer ton message pour baliser le code HTML et CSS ([code ] [/code ] sans espace. Tu peux utiliser le bouton CODE pour cela).

A bientôt Smiley cligne
Modifié par Alan (01 Jul 2006 - 08:07)
Bonjour sidyj,

As-tu pensé à faire valider ton code par un validateur de code HTML ? Cela te permettrait sans doute de repérer certaines erreurs de syntaxe.

En l'occurrence, tout le code suivant :
.blacklogo {
positionnement : relatif;
padding-left: 0px; /* placement du logo dans son conteneur, head1 */
padding-top: -100px;
}

Ne sera pas appliqué, car aucun élément de ton code HTML ne porte la classe « blacklogo ». Pour information, l'attribut classid n'existe pas. Classes et identifiants sont deux choses différentes.

Au passage, je ne suis pas sûr qu'inventer des propriétés CSS soit quelque chose d'efficace. positionnement n'est pas une propriété existante.
De plus, contrairement à ce qu'indique le commentaire dans ton code, le padding n'est pas directement conçu pour permettre le placement d'un bloc, même si on peut parfois l'utiliser ainsi. Mais un padding négatif de 100pixels me semble peu approprié à un positionnement efficace.
C'est une erreur lors de la réécriture du copier collé de mon code je n'avais pas au départ fait de <div classid="blacklogo"> mais <div class="blacklogo"> et au départ j'ai utilisé des positionnement positif et on négatif avec margin et non padding mais dans mozilla le bloc descendait avec les éléments flash.

Je n'essais pas d'inventer des propriétés CSS
sidyj a écrit :
Je n'essais pas d'inventer des propriétés CSS

Je m'en doute. Smiley smile
C'était juste une manière humoristique de te faire remarquer ce qui était sans doute une faute d'inattention. Ça nous arrive à tous ce genre d'erreurs (enfin moi ça m'arrive Smiley confused ).
Quelques pistes :

Le positionnement relatif permet uniquement de décaler un bloc par rapport à sa position normale. Il s'agit plus d'un positionnement « de correction » qu'un positionnement à la carte.

Pour mettre deux blocs côte-à-côte, il y a en gros deux solutions : les flottants, ou le positionnement absolu. Vu que le positionnement absolu est un peu complexe, les flottants seront peut-être plus adaptés à ce que tu veux faire.

Tu peux placer ton premier object en flottant à gauche ou à droite, en n'oubliant pas de lui donner une largeur fixe. Ensuite, le deuxième object peut être positionné en statique (par défaut, pas besoin de préciser un positionnement ou de le mettre en flottant). Si besoin, tu peux lui attribuer une marge du côté où se trouve le flottant.

À vrai dire, gérer les flottants n'est pas toujours de tout repos ! Comme pour le positionnement (relatif et absolu), c'est un des aspects des CSS qui demande une certaine habitude, car les concepts qu'ils recouvrent ne sont pas « naturels ».

Tu peux te reporter à la partie « flottants » sur cette page : ressources XHTML et CSS.
Sujet clos
Aller à