Un design rond avec contenu dedans

Bonjour,

Je dois intégrer un design dans une maquette html...seulement le design est "rond" et je sais absolument pas comment je vais procéder pour mettre en place ce design.

Voici un exemple du design en question:


Le carré rouge est le logo
Le rectangle orange contiendra le menu
Le rectangle bleu contiendra le contenu du site

Et surtout c'est que si il y a beaucoup de contenu, le rond doit pouvoir s'étendre en hauteur...
Si le rond resterait fixe, il n'y aurait pas de problème...

Avez-vous une idée de comment je pourrais faire pour mettre ce rond?

Merci d'avance.

Bonjour,

Sans trop prendre le temps de réfléchir, la première idée qui me vient serait d'utiliser un div pour ton grand rond et de lui mettre les coins arrondis avec les propriétés CSS border-radius et compagnie, peut-être couplé avec un soupçon de Javascript pour que ça fonctionne sur les vieux navigateurs.

C'est à expérimenter!

Le problème est que si le contenu devient plus important, pour que le rond reste rond, il faudra qu'il s'élargisse tout autant. Très intéressant comme défi en tout cas!
Modifié par Tony Monast (19 Aug 2010 - 15:38)

Hello.

Pas super évident en effet.
La seule solution qui me vient en tête avec les infos que tu donnes serait le tuto faire un arrière plan étirable

Après, il peux y avoir aussi la solution CSS3 avec background-size, mais non supportée par IE

Bonne chance

Edit: Je n'avais pas vu la solution de Tony Monast. En effet, un div vide positionné en absolute + border-radius, ça peux le faire aussi.

Une question, quand tu dis que le rond doit s'étirer en hauteur avec ton contenu ; tu veux dire par là qu'il doit devenir ovale, ou rester rond?
Modifié par Florian_R (19 Aug 2010 - 15:44)

Oui en effet c'est un défi assez intéressant, on arrive au limite du CSS2
Hum je pense pas que je peux utiliser les bordures CSS3, le site doit être compatible IE7

Sinon voici comment le rond doit s'étendre en hauteur (oui c'est pas beau mon image ):


Je pensais aussi mettre le rond en fond, mais après comment faire pour qu'il s'étend suivant le contenu?

Merci pour vos réponses.

Pour ma part, je ne metterais pas le rond en absolu, afin de permettre à son contenu de l'étirer.

Ah, si le rond devient ovale, c'est beaucoup plus simple alors! Tu peux utiliser les propriétés CSS border-radius, ou encore deux images, une en haut et une en bas.

Tony Monast a écrit :
Ah, si le rond devient ovale, c'est beaucoup plus simple alors! Tu peux utiliser les propriétés CSS border-radius, ou encore deux images, une en haut et une en bas.

Du coup challenge pour les autres : comment faire avec un vrai cercle qui s'agrandit ?

Heyoan, c'est très facile. Fais-moi trois paiements par Allopass, et je te file le code.
Modifié par Tony Monast (19 Aug 2010 - 16:21)

Heyoan a écrit :
Du coup challenge pour les autres : comment faire avec un vrai cercle qui s'agrandit ?

Avec ou sans JS?

Mais, mais mon contenu commence dans l'arrondi du haut et fini dans l 'arrondi du bas...alors je ne vois pas comment faire, même avec trois image...(haut, milieu et bas)...
Ce n'est pas un design avec de simple petit coin arrondi...sinon trop facile

Des idées?

En plaçant bien tes background et en mettant des marges négatives sur ton contenu (top et bottom); normalement ça doit le faire...

@Tony > c'était juste pour le fun ! Je n'en ai pas spécialement besoin !

@Florian > sans : sinon c'est trop facile !

@Blogger > on doit pouvoir s'en sortir avec seulement 2 images dont l'une [très] haute.

@Heyoan > Si tu rajoutes la compatibilité IE6, je crois que tu tiens le prochain concours pour Alsa...

Blogger a écrit :
Mais, mais mon contenu commence dans l'arrondi du haut et fini dans l 'arrondi du bas...alors je ne vois pas comment faire, même avec trois image...(haut, milieu et bas)...

En imbriquant les divs (haut, milieu, bas) l'un dans l'autre, ça devrait le faire non? Par exemple :

<div id="haut"><div id="bas"><div>Contenu ici</div></div></div>

Ensuite, il suffit de jouer avec les background (image, position, repeat) et les paddings.
Modifié par Tony Monast (19 Aug 2010 - 16:40)

Heyoan a écrit :
@Tony > c'était juste pour le fun ! Je n'en ai pas spécialement besoin !

Pour toi, je vais le faire gratuitement! Il suffit d'utiliser le HTML5 :

<circle>Le contenu ici</circle>

Modifié par Tony Monast (19 Aug 2010 - 16:49)

Pour faire un bord rond automatique, j'ai essayé de mettre un

*-border-radius: 50% ;

Mais il n'y a que Mozilla qui a compris, pas Chrome.

Mais bon, avec les "px", il n'y a pas de pb (sauf sur IE ).
Modifié par Borak (19 Aug 2010 - 16:51)

Une autre solution possible (en tout cas pour voir le principe) :

* tu dessines ton cercle (diamètre = d) avec une couleur c.
* tu le coupes en 2 et tu nommes les 2 nouvelles images cercle_haut.jpg et cercle_bas.jpg.

et ensuite :

#global {
	background: c url(cercle_bas.jpg) bottom no-repeat;
	width: dpx;
	min-height: dpx;
}
#contenu {
	background: url(cercle_haut.jpg) top no-repeat;
}

<div id="global">
	<div id="contenu">
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
	</div>
</div>

Après il ne devrait plus rester qu'à jouer sur le padding et sur le positionnement relatif.


Edit:
@Tony > je te signale que l'élément CIRCLE est obsolète : il faut désormais utiliser OVALE qui offre beaucoup plus de possibilités.

PS : il est où ton parking ?
Modifié par Heyoan (19 Aug 2010 - 17:18)

J'ai tester la méthode de Tony Monast est j'arrive plus ou moins au résultat attendu, voici le code:

<div id="site">
    <div id="header">
        <div id="footer">
            <div id="content">
                Content
            </div>
        </div>
    </div>
</div>

#site {
    width: 890px;
    margin: auto;
    background: #fff;
    
}

#header {
    min-height: 573px;
    background: url("../img/header2.png") no-repeat;
}

#footer {
    background: url("../img/footer2.png") no-repeat bottom;
    min-height: 431px;
    padding-top: 573px;
   
}

#content {
    margin-top: -300px;
    padding-bottom: 100px;
}

Et ça fonctionne asser bien sous FF, maintenant on va voir sous IE7

En tout cas merci pour vos réponses, je test et je vous redit si tout fonctionne bien.