Des images sur les bords

Sujet résolu

24 décembre 2005 à 19:32:00

Salut

J'ai une autre problème

J'ai un bloc et je voudrais que les cotés soit des images, je m'explique:
Image utilisateur

Je voudrais donc placer les deux images (bloc blue) sur les cotés du texte
Mais je voudrais aussi qu'ils s'adaptent au texte

Merci pour votre aide

QuentinGo

24 décembre 2005 à 20:28:07

Et bien la slution la lpus simple serit de faire ton image dans toshop ou gimp comme tu veut.

Comme celle la par exemple, car c'est le meme genre.
Image utilisateur

Puis tu crée un tableau, lecon sur les tableau de mateo.
Ensuite tu n'a ca mettre ton image dans ton tableau, dans cas il ne faudra crée qu'une seule colone avec le nombres de lignes que tu souhaite avoir, suivant le nombres de lien dans ton menu, si c'est une news tu ne met qu'une seul ligne.

Citation : css

td
{
background-image: url("ton_image.ca_que_tu_veut");
}

PaNTi

24 décembre 2005 à 20:31:00

Non ca je sais le faire moi même le faire moi meme

Ce que je veut c'est 2 images séparer car il doit etre extensible horizontalement et verticalement

QuentinGo

24 décembre 2005 à 21:01:44

Ca c'est un systeme de news en php, il fait tu aprenne le php pour pouvoir adapter ton idée

PaNTi

24 décembre 2005 à 21:07:56

Ta rien compris, ou tu vois du PHP dans ce que j'écris et ce que je demande ? o_O

J'ai en fait 3 block, 2 avec les images et 1 avec le texte, ce que je veux c'est les 2 blocs images soit de part et d'autre du text et qu'il soit extensible verticalement avec le texte

QuentinGo

24 décembre 2005 à 21:30:49

Oui et bien ca tu peut le réaliser soit avec du php !
Soit avec un tableau a 3 colone, tu met tes image sur les colone des cotés et ton texte au milieu, vu que ton tableau va ensuite s'adapter tout seul a la taille de tn texte.

PaNTi

24 décembre 2005 à 21:43:13

Pas besion de PHP lol

C'est au niveau de l'affichage donc => XHTML/CSS

Exemple:

<div id="gauche"></div>
<div id="contenu">Ton texte</div>
<div id="droite"></div>

Maintenant ce qu'il me faut c'est le CSS et c'est ça le blem, ça marche pas chez moi

#gauche{
width:18px;
float:left;
background: url(./images/cadre/bord_gpx.jpg);
}
#droite{
width:18px;
float:right;
background: url(./images/cadre/bord_dpx.jpg);
}
#contenu{
}

QuentinGo

24 décembre 2005 à 22:10:35

Ah d'accord et bien ca c'est bizarre, tu a essayer de le mettre sur un ftp pour voir ?

jp949

25 décembre 2005 à 8:19:09

dans le code html , il faut placer les flottants avant les fixes
<div id="global">
<div id="gauche"></di>
<div id="droit"></di>
<div id="contenu"></di>
</di>

PaNTi

25 décembre 2005 à 12:39:06

Ok mais au niveau du CSS j'arrive pas

jp949

25 décembre 2005 à 12:43:56

#gauche{
width:18px;
float:left;
background: url(./images/cadre/bord_gpx.jpg);
}
#droite{
width:18px;
float:right;
background: url(./images/cadre/bord_dpx.jpg);
}
#contenu{
width:auto;
margin:auto;
}

PaNTi

25 décembre 2005 à 19:48:18

Ca marche pas

[EDIT] Voici mon code

<html>
<head>
<title></title>
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="test.css" />
</head>
<body>
<div id="tableau">
<div class="hautgauche"></div><div class="hautdroit"></div><div class="haut"></div>
<div id="gauche"></div><div id="droit"></div>
<div id="texte">
Mon texte ici <br/><br/> salut comment va ?
</div>

<div id="basgauche"></div><div id="basdroit"></div><div id="bas"></div>
</div>
</body>
</html>

#tableau {
margin:auto;
width:80%;
}

.hautgauche, .hautdroit, #basgauche, #basdroit {
height: 18px; width: 18px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}

/*Cadre du haut*/
.hautgauche {
float:left;
background: url(./images/cadre/bord_hg.jpg);
}

.hautdroit {
float:right;
background: url(./images/cadre/bord_hd.jpg);
}

.haut {
height: 18px;
background: url(./images/cadre/bord_hpx.jpg);
}

/*Carde du bas*/
#basgauche {
float:left;
background: url(./images/cadre/bord_bg.jpg);
}

#bas {
height: 18px;
background: url(./images/cadre/bord_bpx.jpg);
}

#basdroit {
float:right;
background: url(./images/cadre/bord_bd.jpg);
}

#gauche{
width:18px;
float:left;
background: url(./images/cadre/bord_gpx.jpg);
}
#droite{
width:18px;
float:right;
background: url(./images/cadre/bord_dpx.jpg);
}

#texte{
width:auto;
margin:auto;
padding:15px;
}

PaNTi

27 décembre 2005 à 12:13:15

Up 1er page car il était en 3eme

jp949

27 décembre 2005 à 16:44:14

<div id="droite"> pas "droit"

PaNTi

27 décembre 2005 à 22:46:46

oui faute de frappe

mais ça ne marche toujours pas. Si je définis manuellement une valeur pour height ça marche mais justement je voudrais que cela soit automatique et c'est la que je bloque

gcyrillus

28 décembre 2005 à 0:12:15

bonsoir,
comme dans le topic de micka914, je lui replace ses 2 barres (en reprenant la tecnique des cadres avec des bords arrondis, que tout le monde connait ou trouveras tres interressante).
Donc dans le cas de 2 bordures 2 div suffissent ,l'un dans l'autre:
ex

<div class="droit"><div class="gauche">blabla</div></div>

et le css

.droit {width:80%;
background:url(bordure_droite.jpg) repeat-y top right;}
.gauche {background:url(bordure_gauche.jpg) repeat-y top left;
margin-right:XXpx/*largeur de la bordure de droite histoire de ne rien afficher au dessus*/;
}

une couleur de fond peut-etre ajouter pour annihiler la transparence de l'ensemble.sans donner de hauteur l'extensibiliter en hauteur sera automatique en fonction du contenu

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

PaNTi

28 décembre 2005 à 0:22:59

Merci beaucoup sa marche