28220 sujets

CSS et mise en forme, CSS3

je suis en train de m'exercer au techniques des CSS, et je n'arrive pas a placer mon logo . En fait, en lieu et place du logo, j'ai un carré avec une croix et le alt que j'ai mis dans ma ligne de script.
mon CSS:
*logo*/
.logo {
float: left;
margin-left: 10px;
margin-top: 5px;
border: 0;
}

Ma ligne de script

<div id="head">
<img src="design/logo.gif" class="logo" alt="logo" /></div>

Enfin comme dans l'exemple.
mais pas de logo affiché Smiley lol
Quelqu'un peut m'aider?
toutes mes excuses pour la mise en forme et pour l'impolitesse ( ce n'est pas dans mes habitudes)
L'erreur est humaine, veuillez me pardonner.
Bonjour aussi ganou66 Smiley smile

Si tu veux absolument de l'aide, je te donne gracieusement quelques clefs...

Tu dois absolument lire les Règles des forums, comme te le suggère Olivier.

Ainsi, tu sauras qu'il faut utiliser les balises "code" pour afficher du code.
Ensuite, as-tu jeter un coup d'oeil à la FAQ ... et enfin avant de poser une question, il faut tenter une Recherche ... La réponse est peut être déjà en ligne.

Ceci dit, sois le bienvenue parmi nous et n'oublie pas que le minimum de politesse est toujours bien vue Smiley biggrin ... Bonjour ! merci ! etc...
J'ai consulté la FAQ et je n'ai pas trouvé de réponse.
Pour ce qui est de la recherche, je n'ai rien trouvé non plus. Mais peut etre ai-je mal cherché ou mal entré ma recherche. J'ai l'impression que mon probleme est générique. On dirai que le script ne trouve pas l'image qui se trouve dans le répertoire design.
Enfin bon, en fait je sais pas trop.

ci dessous mon CSS:
body {
font-family: Verdana, Arial, Helcetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
background-color: #000000;
}
/*bandeau*/
#head {
height: 100px;
background-image: url('design/head.gif');
}
/*zone de texte*/
#centre {
background-color:#9999CC;
margin-left: 160px;
margin-right: 160px;
}
/*espace membre*/
#membre {
background-color:#FF3333; /*voir pour mettre une image*/
height: 32px;
}
/*menu de gauche*/
#gauche {
position: absolute;
left: 0px;
width: 160px;
background-color:#3399FF;/*mettre la couleur de fond*/
}
/*menu de droite*/
#droite {
position: absolute;
right: 0px;
width: 160px;
background-color:#3399FF;/*mettre la couleur de fond*/
}
/*position des cadres de titre de menu*/
#cadre {
position: absolute;
left: 0px;
width: 160px;
background-image: url('design/cadretitre.gif');
}
/*pied de page*/
#pied {
height: 30px;
text-align: center;
background-image: url('design/pied.gif');
}
/*titre de page*/
#titre {
margin-left: 160px;
margin-right: 160px;
height: 20;
background-color:#45536C;/*voir pour mettre une image*/
}
/*composition du menu de gauche*/
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
margin-bottom: 5px;
}
.menu a {
margin:10px;
color: #000000;
text-decoration: none;
}
.menu a:hover {
text-decoration: none;
}
/*composition du menu de droite*/
.menud {
list-style-type: none;
margin: 0;
padding: 0;
}
.menud li {
margin-bottom: 5px;
}
.menud a {
margin: 10px;
color: #000000;
text-decoration: none;
}
.menud a:hover {
text-decoration: none;
}
.titre {
margin: 0px;
font-weight: bold;
color: #FFFFFF;
}
/*logo*/
.logo {
float: left;
margin-left: 10px;
margin-top: 5px;
border: 0;
}


et maintenant le script
[code]<head>
	<title>Chef des Travaux</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link href="style.css"  rel="stylesheet" type="text/css">
</head>
	
<body>

	<div id="head">
	<img src="design/logo.gif" class="logo" alt="logo" /></div>
	<div id="membre"></div>

	
	<div id="gauche">
		<ul class="menu">
		<li><a href="">menu 1</a></li>
		<li><a href="">menu 2</a></li>
		<li><a href="">menu 3</a></li>
		<li><a href="">menu 4</a></li>
		</ul>
	</div>
	<div id="droite">
		<ul class="menud">
		<li><a href="">menu 1</a></li>
		<li><a href="">menu 2</a></li>
		<li><a href="">menu 3</a></li>
		<li><a href="">menu 4</a></li>
		</ul>
	</div>
	<div id="titre">
		<ul class="titre">titre de la page</ul>
	</div>
	<div id="centre">
	ici c'est la zone de texte<br>
	voila<br>
	c'est un test<br>
	encore<br>
	bis
	
	
	</div>
	<div id="pied">
		<ul class="titre">c'est le copy</ul>
		</div>
		
		

</body>

</html>


dans le repertoire design se trouve l'image logo.gif

D'avance merci pour votre aide.
ganou66> dans ton code, je ne vois pas de problème particulier. Faudra le voir en situation pour mieux cerner le problème.

Comme l'on dit un peu trop souvent : La vérité est ailleurs. Smiley lol
Merci pour le respect des règles Smiley cligne

En effet, étrange ton problème, si l'image est bien présente, elle devrait à priori s'afficher à la vue du code que tu nous proposes Smiley ohwell

As tu un exemple en ligne que l'on se rende mieux compte de la chose ?

Sinon, dans tes styles CSS, evite l'utilisation des quotes (') dans url(), c'est souvent source de problèmes pour certains navigateurs et c'est inutile, donc autant ne pas les mettres Smiley cligne

Dernière petite remarques en complément, essai de ne pas utiliser d'enchainement de <div> vides sans contenu, à priori si tu utilises ceci, c'est que le code n'est pas adapté au contenu, une balise vide n'a pas lieux d'exister dans une page web en principe
Smiley biggrin
@++
merci pour vos réponses.
On ne peut voir le site nulle part pour l'instant. En fait j'ai un site en ligne mais je souhaite le modifier. C'est pour cela que je m'exerce.
Pour l'instant, je fais tourner le site en local avec easyphp. C'est peut etre lui qui me bloque.
Je vais modifier le CSS en tenant compte des remarques.
Pour ce qui est des <div> vide, je suppose que tu parle de la zone membre, elle est actuellement vide en effet. Mais elle ne le restera pas longtemps Smiley lol .
Je vais continuer a chercher la cause de mon probleme.
Encore merci de votre aide et désolé pour mon premier post. Je ne le ferais plus Smiley lol
Tu peux peut être l'uploader sur un espace de ton hébergeur, upload des fichiers incriminés et on s'en sors Smiley cligne
A priori easyphp ne devrait pas causer de problèmes.

ganou66 a écrit :

Encore merci de votre aide et désolé pour mon premier post. Je ne le ferais plus

Y a pas de mal Smiley cligne
re bonjour tout le monde.
J'ai transférer mon essai en CSS sur mon site heberger.
Maintenant le logo s'affiche. Donc easyphp doit y etre pour quelque chose.
Par contre, je souhaiterais que mon header ait une hauteur fixe et que mon logo s'installe donc a cheval sur le header et sur l'espace membre ( en rouge sur l'essai)
j'ai décalé le logo de 30px par rapport au haut de l'ecran, et mon header s'est étiré en hauteur.
Quelqu'un peut il m'aider?
D'avance merci.

http://cdt.erea.hostgratos.net/essai/
Modifié par ganou66 (21 Mar 2005 - 12:33)