Coins arrondis

+ bordure...

Sujet résolu

28 août 2006 à 21:50:28

Salut tous les zér0s,
j'ai un petit problème avec le corps d'un site. Les coins doivent être arrondis et le fond du corps blanc. J'ai beau chercher tous les tutos du monde je n'y arrive pas

Voilà donc mon code source xHTML correspondant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>champi-world - élevez votre champi !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_officiel.css" />
</head>
<body>


<div class="cadre">

<div class="haut_1">
<div class="haut_2">
<div class="haut">

</div>
</div>
</div>

<div class="milieu_1">
<div class="milieu_2">
<div class="milieu">
<p>milieu</p>
</div>
</div>
</div>

<div class="bas_1">
<div class="bas_2">
<div class="bas">
</div>
</div>
</div>

</div>

</body>
</html>

Et le css qui va avec :

/* pour faire les arrondis */

/* Le corps de la page */
.cadre{
margin-left: 160px;
padding-left: 10px;
margin-top: 20px;
font-family: "Times New Roman", papyrus, Arial, "Arial Black", serif;
color: black;
}

.haut_1{
background-image: url("hautgauche.jpg") top left no-repeat ;
padding-left: 20px;
}

.haut_2{
background : url("hautdroite.jpg") top right no-repeat ;
padding-right: 20px;
}
.haut{
background : url("bordurehaut.jpg") top repeat-x;
}

.milieu_1{
background: url("bordure.jpg") left;
background-repeat: repeat-y;
padding-left: 20px ;
height : 100%; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
}

.milieu_2{
background: url("bordure.jpg") right;
background-repeat: repeat-y;
padding-right: 20px ;
height : 100% ; /* Pour que tout le fond soit visible */
}

.milieu{
color : black;
width : 100%;
height : 100%; /* Pour voir le fond */
}

.bas_1{
background : url("basgauche.jpg") bottom left no-repeat ;
padding-left: 20px;
}

.bas_2{
background : url("basdroite.jpg") bottom right no-repeat ;
padding-right: 20px;
}

.bas{
background : url("bordurebas.jpg") bottom repeat-x;
}

Merci d'avance de votre aide

Asphator

28 août 2006 à 22:02:30

Salut

Il y a un tuto pas très loin d'ici dans la section : tuto des zero
va jeter un coup d'oeil ici

Only limits are ours...

dark.link

28 août 2006 à 22:08:18

-moz-border-radius ne marche pas sous IE

et puis, si tu veux que ton site soit valide, n'y pense même pas

Asphator

28 août 2006 à 22:12:46

Moz-border-radius est la 2e solution proposée.

Mais il reste la première

(d'ailleurs, je crois que c'est celle qu'il tente d'appliquer).

Only limits are ours...

C0c0

28 août 2006 à 22:15:22

Ouais je sais, je ne compte pas l'utiliser

Le tuto, je l'avais déjà vu mais il y a pas moyen, ça ne marche pas, j'arrive pas à mettre des bordures sur le côté, je viens de réessayer, sans succès

Je veux arriver à ça :

Ca fait quelques heures que je cherche déjà donc j'aimerais bien y arriver à force

Merci

dark.link

29 août 2006 à 9:05:55

moi non plus au début ca marchais pas

je prenais le code et ca fonctionnais pas, mais maintenant ca marche

a+

EDIT : va savoir pourquoi je dit ca lol

Anonyme

29 août 2006 à 10:27:55

Le mieux est je pense (en tout c'est ce que j'ai fait et ca marche

) de faire un bloc haut de 1000 pixel de hauteur, qui contient le haut du cadre (avec les coin) et le milieu.

En fonction du contenu, ce cadre s'allonge.

Ensuite, tu fait un bloc bas avec pour image de fond le bas de ton bloc

C0c0

29 août 2006 à 13:40:35

Ouaip, j'ai déjà essayé cette méthode, sans succès

Bon, j'ai retravaillé un peu dessus c'est un peu mieux mais c'est pas toujours ça, j'ai pas de bordure sur les côtés, je ne sais pas comment faire (un repeat-y mais sur quel div ?) :

Code xHTML

</span>

<div id="cadre">

<div class="haut"><div class="hautdroit"></div><div class="hautgauche"></div></div>
<div class="milieu"><p class="texte">yeah man !</p><p>est-ce que ça va à champi world ?</p></div>
<div class="bas"><div class="basdroit"></div><div class="basgauche"></div></div>

</div>

Code CSS

</span>

.hautgauche, .hautdroit, .basgauche, .basdroit /* Propriétés communes aux quatre coins de notre arrondi */
{
height: 20px;
width: 20px;
background-repeat: no-repeat;
}

.hautgauche
{
background-image: url("arrondi/hautgauche.jpg");
}

.basgauche
{
background-image: url("arrondi/basgauche.jpg");
}

.hautdroit
{
background-image: url("arrondi/hautdroit.jpg");
float: right;
}

.basdroit
{
background-image: url("arrondi/basdroit.jpg");
float: right;
}

.haut{
background-image: url("arrondi/bordurehaut.jpg");
background-repeat: repeat-x;
}

.bas{
background-image: url("arrondi/bordurebas.jpg");
background-repeat: repeat-x;
}

Merci pour votre aide

Anonyme

29 août 2006 à 13:48:42

Je te montre ma méthode :

#menu_h {
background: url("haut.jpg") top left no-repeat;/* le heut de mon menu en image + le milieu. Cette image fait a peu près 1000px de haut */
padding-top : 15px ; }
#menu_b {
background: url("bas.jpg") bottom left no-repeat; /* L'image du bas de mon menu */
padding-top : 15px ; }
#menu {
width : 155px;
margin-top : 20px;
float: left;
margin-bottom : 10px;
}

C0c0

29 août 2006 à 14:04:58

Oui ça marche

Merci mais j'ai encore un problème: c'est pas extensible en hauteur ... faudrait rajouter une bordure ?! :euh:

Anonyme

29 août 2006 à 14:14:24

Si ton image haut point.jpg fait 1000px de haut, comme le bloc menu_h s'agrandit en fonction du contenu, le fond va etre affiché en fonction de la taille du bloc.

Normalement, c'est extensible

(saus si ton contenu fait plus de 1000 px de hauteur

)

C0c0

29 août 2006 à 14:18:33

Ben oui, mon corps peut faire plus de 1000px de hauteur, j'appel pas ça être extensible

Je vais voir si y'a pas une manière de le rendre extensible, merci quand même pour l'idée car ça fonctionne quand même pas mal

Anonyme

29 août 2006 à 14:27:34

A ce moment la, tu fais une image de 1000000 px

har1bo

29 août 2006 à 14:40:02

Salut,

Essaie de faire un div corps haut,corps et corps bas,comme ça:

<div id="corps_haut">
<div id="corps">
<p>blabla</p>
</div>
<div id="corps_bas">
</div>
</div>

et dans le css tu mets ça:

#corps_haut
{
background:;
height:;
width:;
}
#corps
{
background:;
width:;
}
#corps_bas
{
background:;
width:;
height:;
}

Explication

En fait,en mettant 2blocks qui englobents le corps en haut et en bas,ça va permettre de mettre une image des deux coins arrondis en haut et en bas,tout en laissant le corps extensible.

+++,en esperant t'avoir aidé

C0c0

29 août 2006 à 15:03:22

Merci à tous de votre aide, je viens de trouver la solution :

il suffit de mettre ça dans corps :

background: url("milieu.jpg") left repeat-y;

#corps {
margin-left: 168px;
margin-bottom : 10px;
background: url("milieu.jpg") left repeat-y;
}

Et faire une image milieu .jpg de la largeur haut et bas.jpg et ça marche. Je ferai peut-être un tuto là-dessus vu le temps que j'ai mis pour trouver.

Merci à tous !

Coins arrondis

× 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.

Coins arrondis

+ bordure...

Explication

Coins arrondis

Supprimer

Modérer

Signaler le message aux modérateurs