Cadre arrondi + titre

Résolu
Chamicki -  
Bonjour à tous,

J'aurai voulu intégrer dans mon site sur mon club de foot des information sur des sponsors.

Le problème c'est que j'aimerai bien qu'il soit dans un cadre du type https://www.just-eat.fr en bas
Avec le Nom de l'entreprise comme titre et les info en dessous .

Comment puis-je faire cela ?

23 réponses

Résumé de la discussion

Intégrer des informations sur des sponsors dans un cadre visuel proche de Just Eat, avec le nom de l'entreprise comme titre et les informations en dessous, constitue le cœur du problème. Plusieurs éléments suggèrent d'utiliser des éléments HTML/CSS tels que fieldset et legend, avec border et color pour le cadre et le texte, et d'exploiter -moz-border-radius pour les coins arrondis. Des liens et extraits de code illustrent des exemples concrets, notamment des propriétés border-color, color et des exemples XHTML/CSS, afin d'obtenir un cadre personnalisé et une présentation claire des sponsors. En cas de doute, il est recommandé d'adapter le rendu selon les navigateurs et d'éviter les solutions dépendantes d'un seul navigateur, afin de conserver l'uniformité visuelle et fonctionnelle.

Bobot (l’IA à votre service)
  1. leototo75
    Bonjour, bon n'étant aps expert, personnellement j'aurais fait une image que j'aurais insérer et mis tes liens sur l'image.Si tu veux plus d'explications il n'y a pas de problème.
    Mais je pense qu'il doit y avoir plus expert que moi ^^
    Cordialement
    0
    1. graffx Contributeur
      Si tu parles des cadres a interieur blanc, crée ton images, et tu la met en background dans ton css , tu n' a plus qu' a remplir sur ton image, ce qui donnera l' impression d' un cadre :)
      0
      1. Chamicki Auteur
        Wai bof. Avec une image je ne peut pas mettre le titre en haut.
        De plus avec une image suivant la longueur des infos le cadre sera toujours pareil et donc il se peut que les infos sortent du cadre...

        Quelqu'un a une autre idée...
        Tableau avec CSS peut-être ?
        0
        1. Rodolphe_
          Je crois que tu n'as pas trop le choix, surtout si comme sur alloresto tu veux une police particulière.
          Tu connais la technique des cadres arrondis et extensibles en css? c'est le même principe.
          Et oublies les tableaux, c'est pas fait pour la mise en page.
          0
          2. Zeos
            Salut .
            c'était pour dire que les bord arrondie sa pose souvent plein de problème pour les webmaster
            mais que ce n'est pas impossible .
            Pour prendre exemple le site dont tu fait reférence ce utilise des images (ce qui est le plus compatible)
            une pour la droite et la gauche (https://www.just-eat.fr
            un pour un bas (https://www.just-eat.fr
            et un pour le haut (https://www.just-eat.fr

            ou encore tu peut te construire ton cadre sur mesure en tend que fond d'écran (background : https://www.just-eat.fr

            mais cela dit j'ai trouver un balise css (qui fonctionne très bien avec FIREFOX ) qui permet d'arrondir les bord :

            (pour chaque coin) 
            -moz-border-radius-topright : 2px;
-moz-border-radius-topleft : 2px;
-moz-border-radius-bottomright : 2px;
-moz-border-radius-bottomleft : 2px;

            (pour tous les coin) 
            -moz-border-radius : 6px;


            plus d'info sur : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

            Voila . et bon code :) .
            PS : Désoler pour les faute d'orthographe potentielle.
            0
          4. Chamicki Auteur
            Et sa marcherai pour écrire le titre comme ceci :
            http://imagik.fr/view/93718
            0
            2. Chamicki Auteur
              OUi voilà ce que je veut faire a peu près qu'elle est la façon de faire ?
              0
              1. Zeos
                Ba sa doit pas être très compliquer a partir du moment ou tu te sert de Mozilla Firefox

                je te le fait en code attend ( avec les bord arrondie)
                0
                2. Zeos
                  tien tu peut aller voir sur mon site se que sa donne :

                  http://wlcl.net/test.html

                  et sinon le code 

                  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>fieldset et legend</title>
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
}
fieldset {
	color: #005fa1;
	border: solid 1px;
	padding: 15px;
	-moz-border-radius: 7px;
}

legend {
	padding: 0.2em 0.5em;
	border: 1px solid;
	-moz-border-radius: 7px;
	font-size:90%;
}

-->
</style>
</head>
<body>
<div id="main">
	  <fieldset>
		<legend>Webmail</legend>
        <p>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
        </p>
	  </fieldset>
</div>
</body>
</html>
                  0
                  1. Zeos
                    J'ai oublier d'enlever '<div id="main"> ..... </div>' je compte sur vous pour le faire !
                    0
                3. Chamicki Auteur
                  Ah yes c'est cool. C'est donc les balise <fieldset> qui font cela...

                  Merci.

                  Je suppose qu'il est obligatoire de laisse le titre encadré ?
                  0
                  1. Zeos
                    tu n'est pas du tout obliger de garder le tire ( <legend>Webmail</legend> ) en cadrer cela ne varie celant : 
                    legend {
	padding: 0.2em 0.5em;
	border: 1px solid;
	-moz-border-radius: 7px;
	font-size:90%;
}
                    0
                    1. Zeos
                      aufaite le <fieldset> </fieldset> n'y pour pas grand chose c'est sa class : 
                      fieldset {
	color: #005fa1;
	border: solid 1px;
	padding: 15px;
	-moz-border-radius: 7px;
}


                      et pour être plus précis :

                      color: couleur du cadre
                      border: définit le style de trait "solid" et sa largeur
                      padding: Padding est une zone, appelée aussi "marge interne" ou "intervalle"
                      -moz-border-radius: fait en sorte que le cadre a une forme arrondie
                      0
                  2. Chamicki Auteur
                    Ah si j'ai trouver... il faut enlever 
                    border: 1px solid;


                    Merci beaucoup en tout cas, je ne connaissais pas ses balise qui sont vraiment bien !!!
                    0
                    1. Rodolphe_
                      N'oubliez pas moz-border-radius est une propriété css3 non encore implémentée ailleurs que dans firefox.
                      Avec cette méthode, la moitié de vos internautes ne verront pas les coins arrondis.
                      0
                      1. Chamicki Auteur
                        Ah juste une question, est-il possible de différentier la couleur d'écriture avec la couleur du cadre ?
                        0
                        2. Chamicki Auteur
                          Ok sa marche pour la différence de couleur. Une dernière question et après je vous laisse trankil.
                          Puis-je mettre deux cadre a coter l'un de l'autre.
                          Si je fait : 
                           
<fieldset>
		<legend>Entreprise X</legend>
        <p>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
        </p>
	  </fieldset>
	  <fieldset>
		<legend>Entreprise Y</legend>
        <p>
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
        </p>
	  </fieldset>

                          Sa les met en dessous
                          0
                          1. Zeos
                            oui tu peut , je te l'aisse regarder les source sur mon site :
                            http://wlcl.net/test.html
                            0
                            • 1
                            • 2

                            Discussions similaires

                            Affichage numérique FRAMEO
                            A_4201

                            7 réponses
                            Cadre photo numérique en panne
                            ED87

                            9 réponses
                            problème de numérotation des titres
                            ameu00

                            2 réponses
                            "Nom de l'adresse" lors d'une inscription sur une site
                            ScarexStupid

                            9 réponses
                            Javascript Arrondi à 2 chiffres après la virgule
                            jeremy

                            14 réponses