Comment faire des bordures ?!
Résolu/Fermé
Kali01?
Messages postés
122
Date d'inscription
mercredi 8 mai 2013
Statut
Membre
Dernière intervention
12 novembre 2015
-
5 déc. 2013 à 20:35
salim_1305 Messages postés 60 Date d'inscription lundi 18 novembre 2013 Statut Membre Dernière intervention 7 novembre 2018 - 9 déc. 2013 à 21:17
salim_1305 Messages postés 60 Date d'inscription lundi 18 novembre 2013 Statut Membre Dernière intervention 7 novembre 2018 - 9 déc. 2013 à 21:17
A voir également:
- Comment faire des bordures ?!
- Comment faire une bordure de page personnalisée sur word - Guide
- Comment enlever les bordures d'un tableau sur word - Guide
- Cadres et bordures à télécharger gratuitement - Forum Bureautique
- Cadre avec motif dans Microsoft Word - Forum Word
- Ajouter des bordures aux photos ✓ - Forum MacOS
6 réponses
Ysabe_l
Messages postés
12593
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
15 décembre 2024
276
5 déc. 2013 à 22:21
5 déc. 2013 à 22:21
Bonjour,
Premièrement je pense que mettre une taille fixe n'est pas une bonne idée, selon la configuration de chaque ordinateur ça peut vite devenir très très pénible !
Mais si vous voulez absolument suivre cette idée, il faut faire ça avec des div.
Solution 1
Première "ligne" : Une div de largeur 100% et hauteur 100px pour faire la "bordure" en haut.
Deuxième "ligne" : Une div de hauteur automatique (donc non spécifiée) et de largeur 100px en float: left / une div sans hauteur ni largeur spécifique en float: left qui contiendra le contenu du site / une div de hauteur automatique et de largeur 100px en float: right.
Troisième "ligne" : Une div de largeur 100% et hauteur 100px pour faire la "bordure" en bas.
Solution 2
Une div globale dont la largeur sera définie à 100% avec border : 100px solid #ffffff;
Mais je le répète sachez que les gens ont différentes résolutions d'écran et que masquer 200px en largeur et 200px en hauteur risque de rendre votre site totalement illisible chez plusieurs visiteurs et désagréable chez d'autres.
Premièrement je pense que mettre une taille fixe n'est pas une bonne idée, selon la configuration de chaque ordinateur ça peut vite devenir très très pénible !
Mais si vous voulez absolument suivre cette idée, il faut faire ça avec des div.
Solution 1
Première "ligne" : Une div de largeur 100% et hauteur 100px pour faire la "bordure" en haut.
Deuxième "ligne" : Une div de hauteur automatique (donc non spécifiée) et de largeur 100px en float: left / une div sans hauteur ni largeur spécifique en float: left qui contiendra le contenu du site / une div de hauteur automatique et de largeur 100px en float: right.
Troisième "ligne" : Une div de largeur 100% et hauteur 100px pour faire la "bordure" en bas.
Solution 2
Une div globale dont la largeur sera définie à 100% avec border : 100px solid #ffffff;
Mais je le répète sachez que les gens ont différentes résolutions d'écran et que masquer 200px en largeur et 200px en hauteur risque de rendre votre site totalement illisible chez plusieurs visiteurs et désagréable chez d'autres.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 6/12/2013 à 00:31
Modifié par animostab le 6/12/2013 à 00:31
Salut
pour ta solution voila
le CSS
html {
width:100%;
margin:0;
padding:0;
height:100%;
}
body {
width:100%;
margin:0;
padding:0;
height:100%;
}
.global {
height:100%;
margin:0;
padding:20px;
border-left: 100px solid #ffffff;
border-right: 100px solid #ffffff;
background-color:#CCFFFF;
}
le html
<div class="global"><p> ici tout le contenu de ton site</P></div>
Mais comme dit Ysabe_l je te le déconseille : mieux vaut utiliser des pourcentages
tu peux faire ca c'est mieux
le CSS
html {
width:100%;
margin:0;
padding:0;
height:100%;
}
body {
width:100%;
margin:0;
padding:0;
height:100%;
}
.white {
float:left;
margin:0;
padding:0;
background-color:#ffffff;
width: 10%;
height:100%;
}
.blue {
float:left;
margin:0;
padding:20px;
background-color:#CCFFFF;
width: 80%;
height:100%;
}
Le html
<div class="white"></div>
<div class="blue"><p> ici tout le contenu de ton site</P></div>
<div class="white"></div>
Un petit merci vaut mieux qu'une grande ignorance
pour ta solution voila
le CSS
html {
width:100%;
margin:0;
padding:0;
height:100%;
}
body {
width:100%;
margin:0;
padding:0;
height:100%;
}
.global {
height:100%;
margin:0;
padding:20px;
border-left: 100px solid #ffffff;
border-right: 100px solid #ffffff;
background-color:#CCFFFF;
}
le html
<div class="global"><p> ici tout le contenu de ton site</P></div>
Mais comme dit Ysabe_l je te le déconseille : mieux vaut utiliser des pourcentages
tu peux faire ca c'est mieux
le CSS
html {
width:100%;
margin:0;
padding:0;
height:100%;
}
body {
width:100%;
margin:0;
padding:0;
height:100%;
}
.white {
float:left;
margin:0;
padding:0;
background-color:#ffffff;
width: 10%;
height:100%;
}
.blue {
float:left;
margin:0;
padding:20px;
background-color:#CCFFFF;
width: 80%;
height:100%;
}
Le html
<div class="white"></div>
<div class="blue"><p> ici tout le contenu de ton site</P></div>
<div class="white"></div>
Un petit merci vaut mieux qu'une grande ignorance
Kali01?
Messages postés
122
Date d'inscription
mercredi 8 mai 2013
Statut
Membre
Dernière intervention
12 novembre 2015
2
6 déc. 2013 à 10:53
6 déc. 2013 à 10:53
Merci,
Sa marche super !
Par-contre mon texte s'affiche sur la bordure gauche..
Sa marche super !
Par-contre mon texte s'affiche sur la bordure gauche..
Kali01?
Messages postés
122
Date d'inscription
mercredi 8 mai 2013
Statut
Membre
Dernière intervention
12 novembre 2015
2
6 déc. 2013 à 11:02
6 déc. 2013 à 11:02
Voila mon petit code HTML / CSS pas encore trop en forme..:
KALI01?
<HTML>--
<TITLE>
Energie Solaire **
</TITLE>
<HEAD>
BIENVENUE
<link rel="icon" type="image/x-icon" href="E:\SIN\SITE WEB ETLV\FAVICON\favicon.ico" /> <!-- Integration de la Favicon -->
<link href="style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
html {
width:100%;
margin:0;
padding:0;
height:100%;
}
</STYLE>
<STYLE type="text/css">
body {
width:100%;
margin:0;
padding:0;
height:100%;
}
</STYLE>
<STYLE type="text/css">
.white {
float:left;
margin:0;
padding:0;
background-color:#CECECE;
width: 15%;
height:100%;
}
</STYLE>
<STYLE type="text/css">
.blue {
float:left;
margin:0;
padding:0;
background-color:#1560BD;
width: 70%;
height:100%;
}
</STYLE>
</HEAD>
<BODY>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<r1>azerty
<STYLE type="text/css">
text-align : center;
</STYLE>
</BODY>
</HTML>
KALI01?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
6 déc. 2013 à 14:25
6 déc. 2013 à 14:25
Re bonour
1) le texte BIENVENUE et tout autre texte doit être mis dans <div class="blue"></div>
exemple
<div class="blue">
<h1>BIENVENUE</h1>
<p>bla bla bla bla</p>
<p>bla bla bla bla</p>
<p>bla bla bla bla</p>
</div>
Ne mets aucun style dans la page copie le code CSS que j'avais donné tel quel dans un fichier que tu nommeras style.css et que tu mettras à la racine de site.
Pour aller plus loin voici 2 liens
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
http://css.mammouthland.net/premiers-pas-en-css.php
1) le texte BIENVENUE et tout autre texte doit être mis dans <div class="blue"></div>
exemple
<div class="blue">
<h1>BIENVENUE</h1>
<p>bla bla bla bla</p>
<p>bla bla bla bla</p>
<p>bla bla bla bla</p>
</div>
Ne mets aucun style dans la page copie le code CSS que j'avais donné tel quel dans un fichier que tu nommeras style.css et que tu mettras à la racine de site.
Pour aller plus loin voici 2 liens
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
http://css.mammouthland.net/premiers-pas-en-css.php
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
maka54
Messages postés
698
Date d'inscription
mercredi 8 avril 2009
Statut
Membre
Dernière intervention
4 décembre 2016
80
6 déc. 2013 à 14:43
6 déc. 2013 à 14:43
bonjour, pas besoin de faire des choses farfelues ...
tout simplement comme çà :
je te laisse le soin de changer les couleurs comme tu le souhaites
tout simplement comme çà :
<!DOCTYPE html>
<html lang="fr">
<head>
<style type="text/css">
html {
width:100%;
margin:0;
padding:0;
height:100%;
background:white;
}
body {
margin:0 100px;
padding:0;
min-height:100%;
background:blue;
}
</style>
</head>
<body>
</body>
</html>
je te laisse le soin de changer les couleurs comme tu le souhaites
Salut, petite correction aussi:
<HTML>
<TITLE>
Energie Solaire **
</TITLE>
<HEAD>
BIENVENUE
En fait une page HTML est 2 parties: HEAD qui correspond à toutes les informations sur la page et BODY qui correspond au contenu de la page.
La balise TITLE doit être dans HEAD.
BIENVENUE n'a rien à faire dans le head tel quel, il peut par contre être dans le TITLE et/ou dans le body sous la forme d'un titre.
<html>
<head>
<title>
BIENVENUE
</title>
</head>
<body>
<h1>
L'énergie solaire
</h1>
<h2>
BIENVENUE
</h2>
</body>
</html>
Les erreurs que vous faites peuvent se répercuter dans l'affichage et seront contre productive(lors du référencement par exemple).
Même remarque si vous utilisez les balises style(et non une page css externe comme recommandé) vous devez en mettre une seule et elle doit se trouver dans HEAD.
L'écriture correcte d'une balise style est celle ci:
<STYLE rel="stylesheet" type="text/css">
<!-- mes styles ici ->
</STYLE>
Si vous oubliez le rel="stylesheet" les styles peuvent ne pas être pris en compte.
<HTML>
<TITLE>
Energie Solaire **
</TITLE>
<HEAD>
BIENVENUE
En fait une page HTML est 2 parties: HEAD qui correspond à toutes les informations sur la page et BODY qui correspond au contenu de la page.
La balise TITLE doit être dans HEAD.
BIENVENUE n'a rien à faire dans le head tel quel, il peut par contre être dans le TITLE et/ou dans le body sous la forme d'un titre.
<html>
<head>
<title>
BIENVENUE
</title>
</head>
<body>
<h1>
L'énergie solaire
</h1>
<h2>
BIENVENUE
</h2>
</body>
</html>
Les erreurs que vous faites peuvent se répercuter dans l'affichage et seront contre productive(lors du référencement par exemple).
Même remarque si vous utilisez les balises style(et non une page css externe comme recommandé) vous devez en mettre une seule et elle doit se trouver dans HEAD.
L'écriture correcte d'une balise style est celle ci:
<STYLE rel="stylesheet" type="text/css">
<!-- mes styles ici ->
</STYLE>
Si vous oubliez le rel="stylesheet" les styles peuvent ne pas être pris en compte.
salim_1305
Messages postés
60
Date d'inscription
lundi 18 novembre 2013
Statut
Membre
Dernière intervention
7 novembre 2018
1
9 déc. 2013 à 21:17
9 déc. 2013 à 21:17
je vous conseille de mettre la div à laquelle tu veux appliquer une bordure de 100px , dans une autre div dite "container" et d'appliquer a cette dernière un widht supérieur à la première de 200px et un background de la couleur de votre choix(et un "height qui soit égale); puis, centrer la div qui est dedans pour avoir l'effet désiré. c'est mieux qu'une bordure de 100px.