CSS, une image par div
Résolu
RomantikA
Messages postés
27
Date d'inscription
Statut
Membre
Dernière intervention
-
RomantikA Messages postés 27 Date d'inscription Statut Membre Dernière intervention -
RomantikA Messages postés 27 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila j'ai un souci, j'ai parcouru l'ami Google, mais je ne trouve pas explicitement ce que je cherche , ne sachant même pas comment qualifier cette opération.
en effet, j'ai une image au milieu de ma page, comme un tableau, et au milieu (zone achurée) il devrait y avoir du texte. Alors pour que ce soit plus simple je désire faire un montage de cette image.
J'ai essayez de faire avec différentes DIV comme cela:
<div class="haut">
<div class="milieu">
<?php include("Mon_texte.txt"); ?>
<div class="bas">
</div>
</div>
</div>
avec pour chaque DIV une image correspondante et un css définit.
et bien sur le texte s'affiche dans la partie du "milieu".
voici un aperçu:
http://serveur.chrysalide.free.fr/apercu.jpg
mais en faite je croi que je m'égare, car en faite je réalise que je ne sais pas comment procéder.
Je me tourne donc vers vous savoir si vous pouviez me venir en aide s'il vous plait :(
Je vous remercie d'avance pour votre aide et votre attention.
Cordialement,
Voila j'ai un souci, j'ai parcouru l'ami Google, mais je ne trouve pas explicitement ce que je cherche , ne sachant même pas comment qualifier cette opération.
en effet, j'ai une image au milieu de ma page, comme un tableau, et au milieu (zone achurée) il devrait y avoir du texte. Alors pour que ce soit plus simple je désire faire un montage de cette image.
J'ai essayez de faire avec différentes DIV comme cela:
<div class="haut">
<div class="milieu">
<?php include("Mon_texte.txt"); ?>
<div class="bas">
</div>
</div>
</div>
avec pour chaque DIV une image correspondante et un css définit.
et bien sur le texte s'affiche dans la partie du "milieu".
voici un aperçu:
http://serveur.chrysalide.free.fr/apercu.jpg
mais en faite je croi que je m'égare, car en faite je réalise que je ne sais pas comment procéder.
Je me tourne donc vers vous savoir si vous pouviez me venir en aide s'il vous plait :(
Je vous remercie d'avance pour votre aide et votre attention.
Cordialement,
A voir également:
- CSS, une image par div
- Image iso - Guide
- Légender une image - Guide
- Recherche par image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
21 réponses
tu fait un div avec un fond en css background:url("")
et dans ce div tu met 3 div un pour le haut un pour le milieux et un pour le bas et tu leur donne des taille en height
et dans ce div tu met 3 div un pour le haut un pour le milieux et un pour le bas et tu leur donne des taille en height
Bonjour math 2000, et merci pour ta réponse, ça ressmble à ce que j'ai fait, mais le css varie beaucoup du coup, et bizzarement ça fonctionne pas mal, sauf que j'ai toujours du mal pour adapter mon texte juste pile poil dans le cadre hachuré, puis si je veu faire un margin-left pur le texte par une div texte ba du coup ça me décalle aussi le bas du tableau... :(
pour le magin left tu l'aplique à la balise a ou tu mettra ton texte ou avec une class
si tu me passes la page je te le fais
si tu me passes la page je te le fais
ba en faite, dans ma page index j'ai une partie où se panneax devrait se situer, à la zone "à venir". et là en faite j'ai quelques difficulté, plus j'essai plsu ça m'embrouille... :/
Voici ma page pour comprendre un peux mieux.
<?php include("head_Index.php"); include("menu_Index.php"); ?>
<style type="text/css">
<!--
.Style1 {font-size: 16px}
dl#Dedicace
{
background-image: url("Images/Dedicace/barre_dedicace.png");
background-repeat:no-repeat;
background-position:5px;
margin-left: 0.5%;
padding: 0px;
height: 59px;
width: 410px;
}
#Layer1
{
position:absolute;
width:365px;
height:31px;
z-index:1;
left: 454px;
top: 630px;
}
-->
</style>
<body>
<div id="corps">
<center>
<span class="Style1"><strong>Bonjour et bienvenue !</strong></span>
</center>
<br /><br /><br /><br /><br /><br /><br /><br /><br />br />br />
<center>
<br />
A venir:
De nombreuses rubriques seront modifiées, avec des rajouts de vidéo pour les effets lumineux. <br />
- <del>Installation d'un formulaire de contact du Webmaster.</del><br />
- <del>Installation d'un plan du site.</del><br />
- Installation d'une catégorie "Karaoké" pour choisir les titres disponibles et "commander" votre playlist.<br />
- Installation d'un calendrier pour réserver une date.<br />
- Installation d'une zone de compteur de visites et de pages vues. <s>(compteur temporaire mis en place)</s><br />
- Correction des dernières pages (pages non publiées (ce qui cause une Erreur 404)) avant installations.<br />
- Amélioration des services visant la perfection.<br />
- Installation d'une rubrique "Souvenirs de Soirée" pour voir nos quelques photos prise lors de votre soirée.
</center>
<br /><br /><br /><br /><br/>
<center><dl id="Dedicace"></center>
<div id="Layer1"><br/>
<?php
include("pub.php");
?> <br/>
</div></dl>
<br /><br /><br /><br /><br /><br />
</div>
</body>
<?php include("pied_de_page.php"); ?>
Et à la plce du texte que j'ai mis là, dont ça fai pas térrible, je voulais justement mettre ce panneaux en place.
J'ai essayé avecun truc du genre:
<style type="text/css">
<!--
div.fond{
background:url(milieu.png);
background-repeat:no-repeat;
height:auto;
}
div.haut{
background:url(haut.png);
background-repeat:no-repeat;
height:70px;
}
div.bas{
background:url(bas.png);
background-repeat:no-repeat;
height:52px;
}
div.texte{
}
-->
</style>
<div class="fond">
<div class="haut">
<div class="texte"><?php include("News.txt"); ?>
<div class="bas">
</div>
</div>
</div>
</div>
mais voila, j'ai quelques difficultée comme précisé plus haut pour cadrer mon texte :( Je sais que c'est tout con, mais à force de voir du code php et JS et tout... mon piti cerveaux sature et ne veuxx plus rien voir là :s
Voici ma page pour comprendre un peux mieux.
<?php include("head_Index.php"); include("menu_Index.php"); ?>
<style type="text/css">
<!--
.Style1 {font-size: 16px}
dl#Dedicace
{
background-image: url("Images/Dedicace/barre_dedicace.png");
background-repeat:no-repeat;
background-position:5px;
margin-left: 0.5%;
padding: 0px;
height: 59px;
width: 410px;
}
#Layer1
{
position:absolute;
width:365px;
height:31px;
z-index:1;
left: 454px;
top: 630px;
}
-->
</style>
<body>
<div id="corps">
<center>
<span class="Style1"><strong>Bonjour et bienvenue !</strong></span>
</center>
<br /><br /><br /><br /><br /><br /><br /><br /><br />br />br />
<center>
<br />
A venir:
De nombreuses rubriques seront modifiées, avec des rajouts de vidéo pour les effets lumineux. <br />
- <del>Installation d'un formulaire de contact du Webmaster.</del><br />
- <del>Installation d'un plan du site.</del><br />
- Installation d'une catégorie "Karaoké" pour choisir les titres disponibles et "commander" votre playlist.<br />
- Installation d'un calendrier pour réserver une date.<br />
- Installation d'une zone de compteur de visites et de pages vues. <s>(compteur temporaire mis en place)</s><br />
- Correction des dernières pages (pages non publiées (ce qui cause une Erreur 404)) avant installations.<br />
- Amélioration des services visant la perfection.<br />
- Installation d'une rubrique "Souvenirs de Soirée" pour voir nos quelques photos prise lors de votre soirée.
</center>
<br /><br /><br /><br /><br/>
<center><dl id="Dedicace"></center>
<div id="Layer1"><br/>
<?php
include("pub.php");
?> <br/>
</div></dl>
<br /><br /><br /><br /><br /><br />
</div>
</body>
<?php include("pied_de_page.php"); ?>
Et à la plce du texte que j'ai mis là, dont ça fai pas térrible, je voulais justement mettre ce panneaux en place.
J'ai essayé avecun truc du genre:
<style type="text/css">
<!--
div.fond{
background:url(milieu.png);
background-repeat:no-repeat;
height:auto;
}
div.haut{
background:url(haut.png);
background-repeat:no-repeat;
height:70px;
}
div.bas{
background:url(bas.png);
background-repeat:no-repeat;
height:52px;
}
div.texte{
}
-->
</style>
<div class="fond">
<div class="haut">
<div class="texte"><?php include("News.txt"); ?>
<div class="bas">
</div>
</div>
</div>
</div>
mais voila, j'ai quelques difficultée comme précisé plus haut pour cadrer mon texte :( Je sais que c'est tout con, mais à force de voir du code php et JS et tout... mon piti cerveaux sature et ne veuxx plus rien voir là :s
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bon voila, j'ai essayé d'avancer, mais mes montages pour le cadre beug un peut, il faudrait que j'arrive à décaller certaines parties de façon à ce que les ombres ne se chevauchent pas, et donc que ça ne fasse pas des parties d'ombres plus foncées que d'autres....
Voici un aperçu (en zip):
http://serveur.chrysalide.free.fr/page.rar
Voici un aperçu (en zip):
http://serveur.chrysalide.free.fr/page.rar
oulà tu complique les chose moi j'au rais mis 4 div un en haut un en bas ;à droite et à gauche puis 4 coins
ba en même temps, la transparence... c'est déjà ça qui pose problème :(... je vais essayer de voir si je pe faire un montage avec les angles, voir pour enlever la transparence sur les zones susseptibles d'étre chevauchée.
erf, j'ai essayer mais ça ne vas pas, avec les coins arrondis, et les effets d'ombres.. impossibles d'enlever une zone d'ombre ou de la modifier... donc bon, ba je ne sais pas... retour au même point, ça bloque :(
Je sais pa :/ tout se mélange là :s :$
Je crois je vais tout recommancer... au moins ça sera peut être plus claire :s
Je crois je vais tout recommancer... au moins ça sera peut être plus claire :s
Dis moi, si tu est encore là... tu n'aurais pas une solution, une idée... ?.. car en faite je laisse tomber l'idée du tableau comme je voulais faire.... mais je désire tout de même faire une sorte de tableau, car le texte affiché normalement dans la page, ça fait pas terrible... J'ai pensé à un champ texte avec scroolbar, mais je trouve maintenant que ça fait.... viling. Je désire cependant faire un système où je puisse insérer un long texte au besoin, mais de façon à ce que ça ne me prenne pas une place énorme sur ma page...
En attendant j'essie de vori comment je pourrais coder un système similaire au système de news... pour voir ce que ça pourrat donné.
En attendant j'essie de vori comment je pourrais coder un système similaire au système de news... pour voir ce que ça pourrat donné.
je vois pas le pb tu fais une cellule avec avec le coté gauche le droit le haut le bas et tu en met aussi au coins maios bon il serait plus imple de faire une image dfe fond avec un div dessus http://www.musthaveonline.fr/futur/2009/04/10/kitsune-tabloid-by-phoenix/
re. alors voila... pour donner des nouvelles...après de longs essais, j'ai terminé.
Le résultat du tableau est comme cela:
http://serveur.chrysalide.free.fr/resultat.jpg
Voila, je te remercie pour ton aide et ton attention. Ce n'est pas parfait parfait, mais je pense que pour l'instant ça suffira bien :s.
Merci beaucoup :)
Le résultat du tableau est comme cela:
http://serveur.chrysalide.free.fr/resultat.jpg
Voila, je te remercie pour ton aide et ton attention. Ce n'est pas parfait parfait, mais je pense que pour l'instant ça suffira bien :s.
Merci beaucoup :)