28173 sujets

CSS et mise en forme, CSS3

Salut,

Me revoilou, apres avoir trouvé mon précédent problème me voila avec un autre... Smiley confus

Ceci concerne la mise en page de tranches creer sous image ready.

Donc comme je l'ai dit dans le titre c'est impec sous Firefox mais pas sur IE et dreamweaver(je fou en peu du dernier Smiley lol ).
Sur IE tout ce qui se trouve sous mon header(2 lignes de 3 images cote à cote) est décalé sur la droite et la derniere image de chaque ligne se retrouve sur la ligne en dessous

Voici mon code ...
img {
display: block;
}

body {
margin: 0;
font-family: verdana, arial, sans-serif;
/*font-size: 75%;*/
text-align:center;
margin: 0 0 0 0;
}

.global {
width: 740px;
height: 735px;
margin-right:auto;
margin-left:auto;
margin-top:5px;
/*padding:0px;*/
text-align:left;
}

.menu {
width : 250px;
height: 170px;
float:left;
/*margin: 0 0 0 0;
padding:0px;*/
}

.header {
width:740px;
height: 120px;
background-image: url('images/Header-740x120.gif');
}

.colonnemilieugauche {
background-image: url('images/Colonne-gauche-milieu-70x170.gif');
width: 70px;
height: 170px; /* cette ligne indique la hauteur du bloc menu */
float:left;
}

.header2 {
background-image: url('images/Header2_380x135.gif');
width: 420px;
height: 170px; /* cette ligne indique la hauteur du bloc menu */
float:right;
}

/*---------------------------------------------------*/
/*------------ les Boutons --------------------------*/
/*---------------------------------------------------*/

.bouton1 {
background-image: url('images/Bouton1-OFF-250x25.gif');
width: 250px;
height: 25px; /* cette ligne indique la hauteur du bloc menu */
float:left;
}

.sous_bouton1 {
background-image: url('images/Sous-Bouton1-250x5.gif');
width: 250px;
height: 5px; /* cette ligne indique la hauteur du bloc menu */
float:right;
}

.bouton2 {
background-image: url('images/Bouton2-OFF-250x25.gif');
width: 250px;
height: 25px; /* cette ligne indique la hauteur du bloc menu */
float:right;
}
.sous_bouton2 {
background-image: url('images/Sous-Bouton2-250x5.gif');
width: 250px;
height: 5px; /* cette ligne indique la hauteur du bloc menu */
float:right;
}
.bouton3 {
background-image: url('images/Bouton3-OFF-250x25.gif');
width: 250px;
height: 25px; /* cette ligne indique la hauteur du bloc menu */
float: right;
}

.sous_bouton3 {
background-image: url('images/Sous-Bouton3-250x5.gif');
width: 250px;
height: 5px; /* cette ligne indique la hauteur du bloc menu */
float: right;
}

.bouton4 {
background-image: url('images/Bouton4-OFF-250x25.gif');
width: 250px;
height: 25px; /* cette ligne indique la hauteur du bloc menu */
float:right;
}
.sous_bouton4 {
background-image: url('images/Sous-Bouton4-250x5.gif');
width: 250px;
height: 5px; /* cette ligne indique la hauteur du bloc menu */
float: right;
}
.bouton5 {
background-image: url('images/Bouton5-OFF-250x30.gif');
width: 250px;
height: 30px; /* cette ligne indique la hauteur du bloc menu */
float: right;
}
.sous_bouton5 {
background-image: url('images/Sous-Bouton5-250x20.gif');
width: 250px;
height: 20px; /* cette ligne indique la hauteur du bloc menu */
float: right;
}

/*---------------------------------------------------*/
/*------------ FIN des Boutons ----------------------*/
/*---------------------------------------------------*/



.colonnegauchebas {
background-image: url('images/Colonne-gauche-bas-40x395.gif');
width:40px;
height:395px;
float:left;
}

.main {
background-image: url('images/Main-660x395.gif');
width:660px;
height:395px;
float:left;
}

.colonnedroitebas {
background-image: url('images/Colonne-droite-bas-40x395.gif');
width:40px;
height:395px;
float:right;
}


HTML
<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="format.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="global">

	<div class="header"> <img src="images/Header-740x120.gif" class="header" alt="Header"></img> </div>
	
			<div class="colonnemilieugauche"><img src="images/Colonne-gauche-milieu-70x170.gif" class="colonnemilieugauche" alt="colonnegauche"></img></div>
		<div class="menu">
			<div class="bouton1"><img src="images/Bouton1-OFF-250x25.gif" class="bouton1" alt="bouton1"></img></div>
			<div class="sous_bouton1"><img src="images/Sous-Bouton1-250x5.gif" class="sous_bouton1" alt="sousbouton1"></img></div>
			<div class="bouton2"><img src="images/Bouton2-OFF-250x25.gif" class="bouton2" alt="bouton2"></img></div>
			<div class="sous_bouton2"><img src="images/Sous-Bouton2-250x5.gif" class="sous_bouton2" alt="sousbouton2"></img></div>
			<div class="bouton3"><img src="images/Bouton3-OFF-250x25.gif" class="bouton3" alt="bouton3"></img></div>
			<div class="sous_bouton3"><img src="images/Sous-Bouton3-250x5.gif" class="sous_bouton3" alt="sousbouton3"></img></div>
			<div class="bouton4"><img src="images/Bouton4-OFF-250x25.gif" class="bouton4" alt="bouton4"></img></div>
			<div class="sous_bouton4"><img src="images/Sous-Bouton4-250x5.gif" class="sous_bouton4" alt="sousbouton4"></img></div>
			<div class="bouton5"><img src="images/Bouton5-OFF-250x30.gif" class="bouton5" alt="bouton5"></img></div>
			<div class="sous_bouton5"><img src="images/Sous-Bouton5-250x20.gif" class="sous_bouton5" alt="sousbouton5"></img></div>
		</div> <!-- fin menu -->
		<div class="header2"><img src="images/Header2-420x170.gif" alt="header2" width="325" height="155" class="header2"></img></div>
	
	<div class="colonnegauchebas"><img src="images/Colonne-gauche-bas-40x395.gif" class="colonnegauchebas" alt="colonnegauchebas"></img></div>
	<div class="main"><img src="images/Main-660x395.gif" class="main" alt="main"></img></div>
	<div class="colonnedroitebas"><img src="images/Colonne-droite-bas-40x395.gif" class="colonnedroitebas" alt="colonnedroitebas"></img></div>
							
	
</div> <!-- fin class global -->

</body>
</html>


Merci pour votre aide Smiley cligne
Modifié par Mrunknow5 (03 Nov 2006 - 20:48)
Salut.

Il y a plusieurs causes possibles ... Tu n'aurais pas une page de test en ligne dans tes cartons ? Quelle est l'ampleur du décalage ?

Par ailleurs, ton code html me semble assez mal structuré ... les divisions (div) sont des éléments génériques pour séparer les grandes zones de la page.

Enfin, toutes balises sont repérées par des classes, alors que la plupart sont uniques sur la page ! Dans ce cas, il faut utiliser les id, ils sont faits pour ça.
Sopo a écrit :

Par ailleurs, ton code html me semble assez mal structuré ... les divisions (div) sont des éléments génériques pour séparer les grandes zones de la page.


... et il n'y a que des images Smiley sweatdrop , on dirait un découpage en tableaux Smiley cligne et pas de DTD Smiley sweatdrop .
Autant faire une image-map.
Modifié par Igor (03 Nov 2006 - 22:12)
Ah oui tiens, j'avais pas regardé plus loin que les div Smiley eek

Alors comme ça, ImageReady génère des div à la place des cellules de tableau, alors ? Smiley biggol
Sopo a écrit :
Alors comme ça, ImageReady génère des div à la place des cellules de tableau, alors ? Smiley biggol

C'est peut-être plus profond, récupérer les images-tranchées pour des cellules de tableaux pour les mettre dans des div à la main Smiley lol
Salut

merci pour votre interet !! Smiley cligne

je vous ai fait un print screen... upload/9278-print.jpg

Par ailleur je ne comprend pas pourquoi mon code HTML est mal structuré... mais bon, je suis ouvert a toute critique! Smiley biggrin comment devrais je m'y prendre a ton avis???

Pour ce qui est des balises j'ai cru comprendre qu'il etait plus interessant d'utiliser des class plutot que des ID d'un point de vue 'compatibilité'... ? Smiley confus

Igor :
je ne comprend pas trop ce que tu souhaites me dire.. Smiley ohwell (débutant attitude... Smiley lol ) DTD??? Image-map???
en esperant repondre a ta question , j'ai découpe un design sous image ready et je l'ai coupe pour permettre d'y inserer facilement des liens et mon texte mais encore une fois, si je m'y prend mal dites le moi.

Merci
Oula vous me faite peur... Smiley sweatdrop

C'est si grave que ca...

je me suis en fait basé sur un tutoriel et encore un fois j'ai 'cru' compendre qu'il fallait eviter les tableaux... Smiley rolleyes
Sur un autre forum on m'a déconseille d'utiliser le code générer automatiquement par image ready!
J'pige plus rien moi Smiley confus
Modifié par Mrunknow5 (03 Nov 2006 - 22:33)
Igor a écrit :
C'est peut-être plus profond, récupérer les images-tranchées pour des cellules de tableaux pour les mettre dans des div à la main
Smiley malade Naan, pas ça !
Mrunknow5 a écrit :
Par ailleur je ne comprend pas pourquoi mon code HTML est mal structuré... mais bon, je suis ouvert a toute critique! biggrin comment devrais je m'y prendre a ton avis???
Toutes les balises html ont une signification : les <hn> sont des titres, les <ul> & <li> sont des listes, les <a> sont des liens, etc. Il n'y a que les <div> et les <span> qui n'ont pas de signification (et peut-être les <p>, mais le vendredÿ est un peu trop avancé pour relancer ce débat Smiley smile ).

Puisque nous avons toutes ces significations à notre disposition, on essaie de l'utiliser : mettre les titres dans des <hn>, les citations dans <blockquote> ou <q>, les listes ordonnées dans <ol> et les non ordonnées dans <ul>, etc. En gros, on essaie que le choix des balises soit basé sur leur contenu. On appelle ça un balisage sémantique.

Donc, le problème, c'est que si ton code ne comporte que des div, il n'a aucune structure sémantique. Désactives les styles et les images, et ta page ne devient qu'un amas de mots sans relief, sans squelette. Une catastrophe pour un visiteur utilisant un lecteur d'écran, ou pour le robot de Google, entre autres inconvénients ...

Ca c'était pour l'utilisation des div à outrance. Passons aux images Smiley cligne

Apparemment, ton site ne comporte que des images. J'en déduis que tu as inséré le contenu sous forme de texte dans Photoshop ou ImageReady, puis que tu as exporté le tout. Imagine une seconde que tes images soient innacessibles, suite par exemple à un pépin sur le serveur. Tout ton site a disparu. Idem pour le lecteur d'écran de tout à l'heure, il ne voit absolument rien (ben non, il ne sait pas lire les images, il ne voit que leur description) ou googlebot. Un visiteur utilisant un navigateur graphique ne peut pas sélectionner le texte pour te citer si il trouve ton propos intéressant. Tu veux encore des exemples ou tu as saisis le pépin ? Ton contenu est inaccessible.

Et bonjour le boulot quand tu voudras mettre une page à jour ...

Alors, qu'est-ce qu'il faut faire ?

1. Repenser la structure de ton site. Schématise la hiérarchie du site sur papier pour mettre en évidence les niveaux de titres. Choisis les balises html appropriées en fonction du contenu que tu vas y placer.
2. Oublie le texte sous forme d'image. Les images décoratives doivent se trouver dans la feuille de style, sous forme d'images d'arrière-plan. Le texte ou les images explicatives ou illustratives doivent au contraire se trouver dans le code html.

J'allais oublier Smiley smile

0. Relire et refaire les tutoriels d'Alsacréations Smiley cligne

EDIT : Yaah ! J'ai mal aux doigts, maintenant Smiley lol
Modifié par Sopo (03 Nov 2006 - 22:47)
Modérateur
bonsoir,

ne desepere pas .

a priori tu as commencé les "bonnes" demarches vers un site "standardisé Smiley smile .

pour la structure html , il te faut d'abord commencer par decider d'un doctype. (voir la faq) , ce qui va te permettre d'esperer un rendu "CSS" assez homogene avec IE6 et + et les autres navigateurs.

ensuite , comment dire , pense econome , pas de div a la pelle , d'abord le contenu balisé correctement .
<h1> <hn> , <p> <ul> , etc ...

ensuite si necessaire, les div pour englober chaque section du site avec un id .
Plusieurs avantage a cela ,
ils dispose d'une ancre grace a leur id ,
ensuite les elements interne peuvent etre directement ciblé par les style sans devoir les surchargé d'une class si cela s'applique a tout les element de cette section (DIVision),
idem pour le Dom , ça faciletera eventuellement le travail pour les script , javascripts ou ajax par exemple ,
je crois même qu'a partir de php5 (le dom encore) ,cela a aussi son avantage si besoin (cas des tempates par exemple).

Le div n'est pas si innocent que ça , et peut avoir plusieurs utilités (html/dom/css).

++
a écrit :
ne désèpere pas
Non, surtout pas ! J'espère que ma tirade ne t'as pas effrayé Smiley confused

C'est sûr qu'il y a du chemin à faire avant d'arriver à un site de qualité, mais c'est très amusant à apprendre, et on est là pour dépanner si tu crèves un pneu en chemin

Smiley cligne
Bonjour,

J'ajouterai aussi de ne pas se fier au rendu du site fait par Dreamweaver, utilise le seulement pour écrire ton code, n'utilise pas la fonction de rendu, elle ne sers à rien pratiquement, et puis je doute que beaucoup d'internautes naviguent sur le web avec Dreamweaver Smiley cligne

P.S: J'utilise aussi Photoshop & ImageReady pour faire ma charte graphique, mais je genere seulement les images, le code HTML qui est généré est rempli de tableaux, bref l'horreur... Smiley smile
Hello,

Merci pour vos conseils...
Je vais me remettre donc dans la theorie!

Je vous rassure, je ne desirai pas faire un site uniquement en images, je souhaitais juste inserer le texte ensuite mais aussi via des balises DIV... Smiley ohwell
J'ai en fait pris exemple sur le tutoriel suivant :
http://rbox.free.fr/kit/vieuxkit/

Mais je doit comme meme utiliser les balises DIV pour afficher mon fond d'ecran?? car j'ai des boutons dessus sur lequel je desire faire un rollover, je dois donc pouvoir les isoler!?
Modifié par Mrunknow5 (05 Nov 2006 - 21:37)