28172 sujets

CSS et mise en forme, CSS3

Background image et div

Bonjour à tous,

Malgré la lectures de nombreux tutoriels et mes recherches, je n'ai toujours pas trouvé la solution à mon petit soucis (qui ne doit certainement pas être des plus complexes à résoudre pour un acharné du CSS Smiley lol ).

Donc. Je crée un div avec une image en fond. À l'intérieur de celui-ci, je veux créer deux autres div en colonne (deux zones de texte).

Problème : ces deux div ne sont pas transparents ! en d'autres termes, mon image de fond ne s'affiche plus, s'affiche plus...

En illustration, un screen :

http://img528.imageshack.us/img528/6530/screenfsu.jpg

Et le code :

<html>
 <head>
  <title>maquette</title>
  <link href="mesSyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="central">
  <div id="header"></div>
    <div id="contenu">wtf ?</div>
    <div id="news">wth !</div>
  <div id="footer"></div>
 </div>
</body>
</html>


Et le CSS :

#central {
	width:963px;
	margin: 0 auto;
}
#header {
	height:253px;
	background-image:url(../header.jpg);
}
#main {
	background-image:url(../background.jpg);
	padding: 0;
}
#contenu {
	float:left;
	width:700px;
}
#news {
	float:right;
	width:263px;
	height:150px;
	
}
#footer {
	margin-top:0px;
	height:300px;
	padding-left:10px;
	background-image:url(../background.jpg);
	clear:both;
}


Hum, désolé si ça paraît vraiment con, mais je suis loin d'être pro !

D'avance merci !
Bonjour,

<body>
 <div id="central">
  <div id="header"></div>
   <div id="main">
    <div id="contenu"></div>
    <div id="news"></div>
   </div>
  <div id="footer"></div>
 </div>
</body>


Dans ce cas-ci non plus, ça ne fonctionne pas (peu importe si j'englobe #contenu et #news dans #main).
Je débute totalement, mais c'est peut être :

#main {

background-image:url(../background.jpg); < repeat-y ?

padding: 0;

}
J'ai rajouté repeat-y dans la ligne correspondate, rien n'y fait.

C'est quand même incroyable, même le site AlsaCréations utilise cette technique : un dégradé entourant le cadre principal qui est lui-même composé de plusieurs colonnes...
Bonjour,

À vue de nez: une simple histoire de dépassement des flottants. Le div#main a une hauteur de 0px, car les deux éléments qu'il contient sont flottants et sortent donc du flux. Solution: les faire rentrer dans le droit chemin.

Pour les détails, faire une petite recherche dans les ressources d'apprentissage, hum?

PS: j'ose espérer que cette page a, en réalité, un Doctype en bonne et due forme. Parce que sinon ça va pas aller. Smiley fache
Modifié par Florent V. (26 Apr 2009 - 21:11)
Salut,

je n'ai pas très bien compris ce que tu voulais faire... mais peut-être que ce tuto pourrait t'éclairer sur l'intégration d'une page web.

Au passage tu n'as pas renseigné de doctype. Smiley cligne
Bonjour,

J'ai bien entendu un doctype Smiley cligne

Pour être clair ; je veux créer un div (avec une image de fond) dans lequel j'ai deux colonnes de texte, tout simplement !

@Heyoan : j'ai commencé par ce tuto, en complétent de celui du Site du Zér0. Et après recherche, je n'ai toujours pas trouvé la solution à mon problème.

Ou alors je lis mal (ce qui est tout à fait possible Smiley biggrin )



Un grand merci à tous Smiley smile
Modifié par aRok (26 Apr 2009 - 21:29)
Sujet clos
Aller à