Cadre arrondi + titre
Résolu
Chamicki
Messages postés
526
Date d'inscription
Statut
Membre
Dernière intervention
-
Chamicki Messages postés 526 Date d'inscription Statut Membre Dernière intervention -
Chamicki Messages postés 526 Date d'inscription Statut Membre Dernière intervention -
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 ?
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 ?
A voir également:
- Cadre arrondi + titre
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Comment faire un cadre sur word - Guide
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Problème cadre frameo ✓ - Forum Graphisme
- Word numérotation titre 2 ne suit pas titre 1 ✓ - Forum Word
23 réponses
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
Mais je pense qu'il doit y avoir plus expert que moi ^^
Cordialement
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 :)
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 ?
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 ?
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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)
(pour tous les coin)
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.
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.
Excuser moi quelque erreur de lien :)
Mon code :
une pour la droite et la gauche ( https://www.just-eat.frlocpt_repeat.png )
un pour un bas ( https://www.just-eat.frlocpt_foot.png )
et un pour le haut ( https://www.just-eat.frlog_h2.png )
ou encore tu peut te construire ton cadre sur mesure en tend que fond d'écran (background : https://www.just-eat.froc_entree.jpg )
Mon code :
une pour la droite et la gauche ( https://www.just-eat.frlocpt_repeat.png )
un pour un bas ( https://www.just-eat.frlocpt_foot.png )
et un pour le haut ( https://www.just-eat.frlog_h2.png )
ou encore tu peut te construire ton cadre sur mesure en tend que fond d'écran (background : https://www.just-eat.froc_entree.jpg )
regardes le premier lien qu'ils donnent: https://www.alsacreations.com/astuce/lire/64-comment-faire-une-bote-avec-des-bordures-en-images-ou-des-coins-arrondisnbsp.html
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)
je te le fait en code attend ( avec les bord arrondie)
tien tu peut aller voir sur mon site se que sa donne :
http://wlcl.net/test.html
et sinon le code
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>
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é ?
Merci.
Je suppose qu'il est obligatoire de laisse le titre encadré ?
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%;
}
aufaite le <fieldset> </fieldset> n'y pour pas grand chose c'est sa class :
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
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
Ah si j'ai trouver... il faut enlever
Merci beaucoup en tout cas, je ne connaissais pas ses balise qui sont vraiment bien !!!
border: 1px solid;
Merci beaucoup en tout cas, je ne connaissais pas ses balise qui sont vraiment bien !!!
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.
Avec cette méthode, la moitié de vos internautes ne verront pas les coins arrondis.
Ah juste une question, est-il possible de différentier la couleur d'écriture avec la couleur du cadre ?
https://www.zonecss.fr/proprietes-css/border-color-css.html border-color pour le cadre
https://www.zonecss.fr/rechercher/proprietes-css-c.html color pour le text
https://www.zonecss.fr/rechercher/proprietes-css-c.html color pour le text
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 :
Sa les met en dessous
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
