Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Problème avec la fonction "float" > Lecture du sujet

Problème avec la fonction "float"

comment superposer 2 éléments

Vous devez être inscrit pour pouvoir poster des messages

RésoluLe problème de ce sujet a été résolu

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne M3tr0iI) # Posté le 12/07/2008 à 18:50:20
Groupe : Membres
Bonjour,

Non non je n'ai pas un problème de chevauchement d'élément dû à "float"... Mais j'aimerais bien :D ! Je m'explique : j'ai mis une image en "float" et j'aimerai que par dessus (ou par dessous qu'importe, le milieu de l'image en "float" est transparent de toute facon) je puisse placer un cadre texte. Voici une image pour expliquer mon problème :

Image utilisateur

Voici mon code :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>Bienvenue sur mon blog !</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
    </head>
    <body>

<div id="background">   
   
<div id="en_tete">
<?php
include("ban.php");
?>
</div>

<div id="menu">
<?php
include("menu.php");
?>
</div>



<div id="corps">
<div class="element_corps">
   <h1>News</h1>
    
   <p>
       
   </p>
   
   <?php
mysql_connect("", "", "");
mysql_select_db("");

// On récupère les 5 dernières news
$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5') or die (mysql_error());
while ($donnees = mysql_fetch_array($retour))
{
?>

<div id="news">
    <img src="images/avatar.png" align="left">
	<h3>
        <?php echo $donnees['titre']; ?>
    </h3>
    
    <p>
    <?php
    // On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
    $contenu = nl2br(stripslashes($donnees['contenu']));
    echo $contenu;
    ?>
    </p>
	<div class="news_date">
	<em>Posté par M3tr0iI) le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></em>
	</div>
</div>
<?php
} // Fin de la boucle des news
?>
   
</div>
</div>

<div id="img">

</div>

<div id="pied_de_page">
</div>   
</div>
   </body>
</html>


Et mon CSS :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@charset"ISO-8859-1";

body
{
   width: 670px;
   min-height: 550px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 20px;   
   background-color: black;
   border: 0px;
}

/* L'en-tête */

#en_tete
{
   width: 670px;
   height: 175px;
   background-image: url("images/banniere.jpg");
   background-repeat: no-repeat;
}


#background
{
   width: 670px;
   min-height: 550px; 
   background-color: white;
}

/* Le menu */

#menu
{
   width: 670px;
   height: 100px;
   border: 0px;
   text-decoration: none;
   background-image: url("images/menu.jpg");
}

#img
{
   float: center;

   width: 670px;
   height: 525px;
   background-image: url("images/fond2.png");
   background-repeat: no-repeat;
}

/* Le corps de la page */


#corps
{
}

.element_corps
{
   margin-top: 10px;
   margin-right: 100px;
   margin-left: 10px;
   margin-bottom: 15px;
   padding: 5px;
   
   color: black;
   background-image: url("images/fond_corps.png");
   background-repeat: repeat-x repeat-y;
   
   font-weight: bold;
   text-align: justify;
   border: 1px solid black;
}

#corps h1
{
   color: black;
   text-align: center;
   font-family: "Palatino Linotype", Arial, "Arial Black", "Times New Roman", Times, serif;
}

#news
{
	background-image: url("images/news.png");
	border:1px solid #F87600;
	font:10px "Nueva Std", Verdana, Arial, Helvetica, sans-serif;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	min-height: 90px
}
}
Hors ligne Golmote # Posté le 12/07/2008 à 18:59:46
Champi Forever !
Avatar
Groupe : Membres
Je me demande si le plus simple ne serait pas de couper ton background en deux.

Tu mets une en float:left; une en float:right;
puis ton div au milieu ! ;)

oO° Envie de Feu... °Oo
 
Hors ligne M3tr0iI) # Posté le 12/07/2008 à 19:28:32
Groupe : Membres
Après réflexion c'est ce que je me suis dit ^^ Et ca marche :lol:

Merci à toi !

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 159 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0817s (0.0643s)