28173 sujets

CSS et mise en forme, CSS3

Problème Background en premier plan

Pages :
Salut à tous,

Voila je commence mon site web, et il s'avère que je suis déjà confronté à un petit problème.
En effet, j'ai mis un background image en repeat, Lorsque je mets mon logo à l'aide d'une autre div, mon logo apparaît dans dreamweaver en premier plan du background, mais quand je l'affiche dans le navigateur, le logo n'apparaît pas et je ne comprends pas pourquoi !

Can i help me please ?
<title>Document sans nom</title>

<style type="text/css">
<!--
body {
	background-image: url(images/bg2.jpg);
	margin:0;
	padding:0;
}
#logo {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	top:130px;
	float:left;
	left:300px;
	margin:0px;
	height: 482;
	width: 355;
	position:relative;
}
#conteneur {
	height: 700;
	width: 1024;
	position:absolute;
}


-->
</style>
</head>

<body>
<div id="conteneur">
<div id="logo"></div></div>
</body>
</html>
salut dreadstock,

Comme réponse simple je dirais que tu mélange un peu toute les notion de positionnement CSS. Tu met du float left avec du position:relative.. en général on met soit l'un soit l'autre Smiley cligne . je te conseil de commencer par lire le(s) tuto sur le positionnement CSS, se qui te permettra d'utiliser la bonne méthode en fonction de ce que tu veux faire Smiley smile
Modifié par Mikerob (18 Feb 2009 - 10:31)
Bonjour,

dreadstock a écrit :
Salut à tous,

Voila je commence mon site web, et il s'avère que je suis déjà confronté à un petit problème.
En effet, j'ai mis un background image en repeat, Lorsque je mets mon logo à l'aide d'une autre div, mon logo apparaît dans dreamweaver en premier plan du background, mais quand je l'affiche dans le navigateur, le logo n'apparaît pas et je ne comprends pas pourquoi !


Pour mettre un logo on utilise pas un background css mais une image directement dans le HTML avec le alt qui va bien Smiley cligne 
<img src="monimage.png" alt="Nom de ma société" />
Mikerob a écrit :
notion de posiotionnement
Arf, allez essaye encore !

Mikerob a écrit :
tuto sur le positionnemt
Bon... tant pis !


( Smiley lol Smiley cligne )
Modifié par BeliG (18 Feb 2009 - 10:28)
BeliG a écrit :
Arf, allez essaye encore !

Bon... tant pis !


( Smiley lol Smiley cligne )


Mouarf.. je sais, l'aurretteau-graffe n'est pas mon point fort Smiley biggol mais j'essaye de me corriger Smiley cligne .. c'est changé.
Je comprends plus rien, j'ai changé position relative et float left par position absolute. Ca marche dans dreamweaver, mais pas dans le navigateur. 
body {
	background-image: url(images/bg2.jpg);
	margin:0;
	padding:0;
}
#logo {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	position:absolute;
	top:130px;
	left:300px;
	margin:0px;
	height: 482;
	width: 355;
	
}
#conteneur {
	height: 700;
	width: 1024;
	position:absolute;
}


-->
</style>
</head>

<body>
<div id="conteneur">
<div id="logo"></div></div>
</body>
</html>


Ci joint, voici ce que je veux obtenir !
C'est pas vraiment un logo, de toute manière ensuite je dois mettre des images dans des div, sous ce logo pour faire le menu, je rencontrerais exactement le même problème
#logo {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	position:absolute;
	top:130px;
	left:300px;
	margin:0px;
	height: 482;
	width: 355;
	
}
#conteneur {
	height: 700;
	width: 1024;
	position:absolute;
}


et en précisant les unités de largeur/hauteur ?

Parce que là le navigateur il est sencé compté en quoi ? en carottes, en pixels en % ?

Le positionnement absolu n'est (à priori) absolument pas nécessaire ici...

Une relecture du tuto lié par mikerob plus haut serait utile.
dreadstock a écrit :
J'ai vérifier, même si j'enlève le background, mon logo n'apparaît pas, c un truck de fou !!!!!

Bonjour,

1- Eviter d'utiliser le mode visualisation de dreamweaver qui laisse souvent à désirer...

2- Ne pas hésiter à te former sur les feuilles de styles en cascade et le langage html : En ce sens, les tutoriels, les articles et les astuces de l'univers Apprendre d'Alsacreations devraient te fournir une aide appréciable...

3- "Oublie", dans un premier temps le positionnement (sur lequel tu reviendras ultérieurement), relis les réponses et notamment celle d'Igor...
Les images qui ont du sens, qui véhiculent une information doivent se trouver dans le code html pas dans une feuille de styles(en ce qui concerne ton menu, ce sera un autre débat...)

4- Si tu places une image dans le code html, tu peux indiquer ses dimensions sans utiliser d'unités de mesure :

<img id="logo" alt="Alsacreations.com" 
src="http://www.alsacreations.com/css/img/logo-alsacreations.png"
 width="316" height="66" />

Dans ta feuille de styles, les unités de mesure sont obligatoires :
#logo {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	top:130px;
	float:left;
	left:300px;
	margin:0px;
	[b][#red]height: 482;
	width: 355;[/#][/b]
	position:relative;
}
#conteneur {
	[b][#red]height: 700;
	width: 1024;[/#]
	position:absolute;[/b]
}


Bref, il reste du boulot, mais ça va venir pour peu que tu t'en donnes a peine Smiley cligne

Cdt,
Sylvain

J'ai été lent sur ce coup là... Smiley lol
Modifié par 6l20 (18 Feb 2009 - 11:16)
Oh qu'elle erreur de nase, le problème venait en effet de l'oubli involontaire des px !!

merki d'avoir éclairé ma lanterne !
Merci pour votre soutient, je voulais juste revenir sur un truck !

a écrit :
Les images qui ont du sens, qui véhiculent une information doivent se trouver dans le code html pas dans une feuille de styles(en ce qui concerne ton menu, ce sera un autre débat...)


je ne comprends pas cette nuance, pourquoi le logo doit ce trouver dans le code html (quelle est la raison) ?

Merci

6l20
Il y a deux types d'images : celles qui sont purement décorative et celles qui portent du contenu.

Les premières, ce sont les éléments du décor (bordures fantaisie, fond d'écran...).

Les secondes ce sont toute celles qui véhiculent un message.

Ce n'est pas toujours évident de faire la distinction, sauf dans certains cas précis. Pour un logo, c'est TOUJOURS une image qui porte du contenu, soit parce qu'elle comporte du texte, soit qu'elle représente une information qui est nécessaire.

L'avantage de mettre les images porteuses de contenu dans le HTML c'est de pouvoir leur associer un texte alternatif, qui, si les images ne s'affichent pas (pou plein de raison) sera substitué à celles-ci. Le choix de ce texte doit donc être pertinent (le mieux est qu'il apporte la même information, cad pour une image avec du texte, le même texte).
Ok merci pour ces précisions, c'est très intéressant.

Juste une petite dernière question, qui n'a rien à voir : J'ai un ordinateur 15 pouces et je voudrais adapter mon site web a une résolution plus grande, 1280 x 800, mais je n'ai pas de PC 17 pouces pour vérifier si ca marche. En effet, dans mon cas, l'image de fond d'écran ce répète, dans la largeur c pas un problème, mais vers le bas, c'est à dire verticalement, ca m'ennuie, car sur un 17 pouces on voit la répétition de l'image.
Pensez vous qu'avec dreamweaver il y est une astuce pour un affichage 1280 x 800 alors que j'ai un 15 pouces.
Pages :
Sujet clos
Aller à