Partage

Des images sur les bords

Sujet résolu
24 décembre 2005 à 19:32:00

Salut

J'ai une autre problème :p

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 ;)
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");
}

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
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
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
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.
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{
}


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 ?
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>
25 décembre 2005 à 12:39:06

Ok mais au niveau du CSS j'arrive pas
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;
}
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;
}
27 décembre 2005 à 12:13:15

Up 1er page car il était en 3eme
27 décembre 2005 à 16:44:14

<div id="droite"> pas "droit"
27 décembre 2005 à 22:46:46

oui faute de frappe :p 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
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
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |

Des images sur les bords

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown