Menu en fond derrière un cercle "contenu"

Bonsoir,

Pour mes études je dois créer mon site personnel qui est à rendre dans une semaine. J'ai imaginé mon site au préalable sauf que je suis incapable de réaliser ce que je souhaite c'est pourquoi je demande votre aide.

Voici en image l'idée de mon site:


J'ai un problème, mon menu composé de 4 options (Accueil, Portfolio, CV, Contact) doit en gros se retrouver à droite et à gauche du cercle "Contenu" en la "coupant" en croix et changer de couleur lorsque la souris passe dessus, je n'y arrive pas.

Voici Mon code html :
Ici

J'ai une page css mais ça ne fonctionne pas du tout je la poste au cas où même si je compte recommencer du début.
Ici

J'espère avoir été clair, merci d'avance
Modifié par LeRat (08 Oct 2013 - 20:57)

Tu peux imager ce que tu veux pour le menu ?
J'ai pas très bien compris ton truc de la croix

Sinon pour faire un lien qui change de couleur au survol tu fais a:hover{color:#XXX;} tout bêtement.

Met ton code sur jsFiddle.net on aura un appercu comme ça pour débuguer en meme temps, (nan c'est pas que du js)

Idem pour moi
Mais ne définit pas de height et de width sur le #contenu, ça ne fonctionnera pas bien sur les écrans de tailles différentes.
Il y a pas mal de choses qui ne vont pas.

Continues sur cette base : http://jsfiddle.net/5Yj7B/

Comme tu débutes, lis cet article qui te permettras d'éviter quelques erreurs de base : http://www.lije-creative.com/erreurs-css/

Bonne chance

Tout d'abord merci de vos réponses, j'ai découverts deux bon liens grâce à vous. C'est vrai que le pour le moment j'ai du mal à structurer mon code, je m'y perd facilement.

J'avais fait une image auparavant et en gros pour le menu ça conserve la même idée.



Je vais essayer de nettoyer un peu mon css en attendant vos réponses.

Bonjour LeRat.

C'est quoi ce cercle au milieu de ta page ?
Est-il obligatoire d'avoir une telle forme ?
Et je suppose que tu veux y mettre du texte qui devra prendre la forme de cette boîte.

Tu parles de tes études. Peut-on savoir ce que tu entreprends ?

@+

Bonsoir,
Le cercle est censé être le contenu, en fait je suis parti du cercle en pensant que mon site serait le reflet de mon univers et donc le cercle représenterait une planète/étoile... Ce n'est pas obligatoire d'avoir un cercle parfait mais j'aimerais quand même avoir une forme arrondie. Dans l'idéal j'aimerai une ellipse comme le premier layout. Pour le texte, je ne compte pas écrire un roman, juste l'essentiel donc je pensais utiliser le carré que contient le cercle en justifiant le texte.

Concernant mes études c'est un DUT Métiers du Multimédia et de l'Internet, on est censé apprendre pleins de choses diverse concernant le multimédia (infographie, vidéo, photographie, son, etc...). J'ai choisi cette filière justement pour me laisser deux années pour savoir ce que j'aime vraiment dans le multimédia. Pour le web pour le moment on a eu quelques cours mais c'est surtout de la débrouille concernant les devoirs à rendre.

salut,
si on la faisait style Des chiffres et des lettres, je dirais que je n'ai pas trouvé le bon compte mais je me rapproche .
Plus sérieusement, les énormes contraintes avec la mise en page que tu imposes est le manque de contrôle sur les styles du contenu. En gros, un texte dans un cercle est toujours extrêmement difficile à manipuler. Si les dimensions étaient fixes cela pourrait se faire avec quelques bidouilles en scindant le texte en plusieurs <span>, puis en appliquant des marges pour qu'il puisse épouser la forme arrondie (car il ne suffit pas de justifier un texte comme tu le dis pour que cela se fasse). Si non personnellement, je n'aurais jamais opté pour un "design" de ce genre pour présenter du texte ou alors il y aurait plusieurs contraintes que je devrais respecter. On pourrait toujours arriver à un bon résultat mais il y aurait beaucoup de travail. Enfin... peut être que quelqu'un a une idée et des connaissances que je n'ai pas.
Si non pour l'exemple j'en suis arrivé à ça.

PS: c'est parfois un peu compliqué pour rien et tu devrais copier directement le code chez toi pour l'avoir en "plein écran".

Salut Zelalsan.

J'ai regardé ton code et tu as utilisé les tableaux, d'une manière détournée, pour effectuer le positionnement de tes quatre blocs.
Je croyais que ce genre d'utilisation était à proscrire dans le bonne usage du CSS.

Une question que je ne sais pas résoudre.

Si tu définies une boîte ayant un "border-radius" formant un cercle, et que tu désires mettre du texte à l'intérieur, alors ce texte va prendre la forme de la boîte parallélépipède et non celle du cercle.

Il existe la solution de faire une image, en plaçant le texte correctement selon la forme de la boîte.

N'existe-t-il pas un autre moyen, dans le cadre du HTML et CSS et sans bidouillage, de faire en sorte que le texte prenne la forme de ce cercle ?

@+

Bonsoir,

Pour que le texte suivent une forme quelconque, on peut se servir d’élément flottant neutre contre lequel le texte viendra se cogner.

En jouant un peu avec d'autre caractéristique CSS.
avec width et padding , on peut former un carré proportionnel à la largeur d'une fenêtre,
avec margin , réduire virtuellement la hauteur(ou largeur) d'un element à rien ou presque,
et avec les transition on peut jouer sur ces marges énormes .

test : http://codepen.io/gcyrillus/pen/otDmz

tournikoti a écrit :
Salut Zelalsan.

J'ai regardé ton code et tu as utilisé les tableaux, d'une manière détournée, pour effectuer le positionnement de tes quatre blocs.
Je croyais que ce genre d'utilisation était à proscrire dans le bonne usage du CSS.

salut,
non je n'ai pas utilisé de mise en page en tableau pour les quatre blocs, c'est du simple "inline-block". Le seul "display:table" utilisé est tout bête et complètement inutile, vu qu'il est là juste pour avoir un centrage vertical du texte "Entête" et "Pied de page" (dont on s'en moque pas mal).
Je ne vois pas non plus comment on pourrait détourner l'utilisation d'une mise en page en tableau et je ne vois pas non plus en quoi c'est à proscrire d'une quelconque manière.

tournikoti a écrit :

Si tu définies une boîte ayant un "border-radius" formant un cercle, et que tu désires mettre du texte à l'intérieur, alors ce texte va prendre la forme de la boîte parallélépipède et non celle du cercle.

C'est exactement ce que je disais dans mon précédent post. Les éléments du DOM sont toujours carrés/rectangles et les arrondies et autres ne sont que de la pure décoration.
Je ne pense pas non plus qu'une image à la place du texte serait une bonne chose et il n'y a rien à ma connaissance qui puisse te permettre de faire cela sans bidouillage.

Zelalsan a écrit :

Je ne pense pas non plus qu'une image à la place du texte serait une bonne chose et il n'y a rien à ma connaissance qui puisse te permettre de faire cela sans bidouillage.

peut-etre acceptable :
figure et figcaption qui apparait(ou pas) en hover,
img avec l'attribut longdesc renvoi au texte dans un conteneur caché ou vers la page.

Ce contenu central, pourrait aussi être un aperçu de la page du lien survolé, ce cercle pourrait ensuite n'être conserver que comme une image de fond en filigrane dans les pages de contenus.
Cela permettrait de garder l'idée de base , sans réduire le contenu principal à 1/4 de la page visible et rendre le site difficile a consulter. .

Cdt,

Le problème n'est pas tant de faire en sorte que le texte de l'image soit du contenu concret mais plutôt le fait que ça ne soit pas pratique du tout. Je parle essentiellement de la fluidité du texte en question qui sera donc une image. Perso je n'opterais pas pour un long texte en image.
Par contre "longdesc" est désuet en HTML5 et je trouve perso que ça changerait la question initiale. Pour moi, <figure> et <figcaption> ne sont pas appropriés non plus. Je pense qu'un simple "alt" ferait l'affaire ou bien mettre un <p> dans le même conteneur de l'image et le mettre en position absolue, couplé à un "font-size:0" voir en plus pour les paranos (comme moi) un "color:transparent" et pourquoi pas ajouter "!important" pour chacun d'eux .
M'enfin, je répète que je trouve tout de même faisable ce truc, ça sera juste très long et je juge perso je ne me compliquerais pas la vie autant pour un résultat plutôt simple.

Bonjour à toutes et à tous.

@ Zelalsan : je n'ai en aucune façon voulu de froisser sur ma remarque.

Pour faire un vertical-align, nul besoin de passer par un "display:table-cell".
Il existe un article que voici de chez Alsacréations où l'on utilise le line-height comme astuce.

@gc-nomade : compliqué comme façon de faire !

Je me posais simplement la question d'une faisabilité simple et basique, autre que l'image avec du texte. Je pensais comme astuce d'utiliser la présentation de type tapisserie.

Voici un exemple de ce que je pense être une solution possible !

@+

@tournikoti> Tu ne m'as nullement froissé (j'avais l'air agressif ?) en tout cas je répondais le plus normalement du monde.
J'ai utilisé dans ce cas un display:table-cell car ce sont des hauteurs en pourcent. Le vertical-align combiné au line-height pour centrer verticalement se fait lorsqu'on connait la hauteur du conteneur. Les valeurs en pourcentage de la propriété line-height se réfèrent à la valeur de l'actuelle taille de police donc impossible de centrer verticalement autrement que par un display:table-cell

tournikoti a écrit :

@gc-nomade : compliqué comme façon de faire !

Pas vraiment, on n'utilise que des propriétes CSS , j'oserais dire basique.
float et pas de contexte de formatage,
un width et padding identique pour dessiner un carré que l'on transform en rond avec border-radius.
et au lieu d'un javascript (ou horrible marquue ), on se sert de transition sur des marges négatives pour faire monter descendre le texte.

tournikoti a écrit :

Je me posais simplement la question d'une faisabilité simple et basique, autre que l'image avec du texte. Je pensais comme astuce d'utiliser la présentation de type tapisserie.

Voici un exemple de ce que je pense être une solution possible !

j'y vois moins de fluidité et un texte qui déborde ou pas selon les résolutions, ce test ne me convainc pas plus que le mien.

sinon, mon avis perso (en dehors du html/css) , c'est que ce rond ne devrait pas véhiculé le contenu du site(trop mini ), mais peut-être un 'teaser graphique' en rapport avec le lien survolé. Ce n'est que mon point de vue. je voyais un truc un peu comme ceci : http://codepen.io/gcyrillus/full/vCbix

@Zelsan, ouui, longdesc ou figcaption était dans le cas ou l'image devait servir a refléter le contenu principal de la page ... contact ? formulaire ou simple coordonnées mail/tel ?, idem pour un porfolio garni même en imaginant le rond plus gros sur le test http://codepen.io/gcyrillus/full/fDegq , des qu'il est plus important, ç'est problématique.
Sur le fond je n’adhère pas a l'idée (ou ne comprend pas la bonne idée) du rond véhiculant le contenu principal de la page,je n'y vois qu'une page d'entrée.
++
Modifié par gc-nomade (11 Oct 2013 - 23:31)

@gc-nomade> Oui tout a fait d'accord avec toi dans l'ensemble, je n'aurais pas fait ça non plus, m'enfin...

Bonsoir à toutes et à tous.

Je crois que c'est un exercice à faire dans le cadre de ses études !
Il me semble avoir déjà vu sur Alsacréations ce sujet, l'année dernière.
Mais bon, j'ai eu la flemme de rechercher le sujet.

@ Gc-nomade : ce que je propose est une simple idée. Tu as vu juste. Cela n'est pas très fluide. De plus, j'ai passé un certain temps à faire en sorte que le texte entre dans le cercle. Je voulais simplement montrer que la présentation tapisserie est ce qui m'est venu de suite à l'esprit.

Je pense que tu viens de faire l'exercice de Mister LeRat !

Mettre une image qui change à chaque passage du curseur sur le menu est une bonne idée.

@+

tournikoti a écrit :

Je crois que c'est un exercice à faire dans le cadre de ses études !
Je pense que tu viens de faire l'exercice de Mister LeRat !

oups, m'enfin ,on y a tous participé .

bon W-E à tous