Comment faire des bordures ?!
Résolu
Kali01?
Messages postés
127
Date d'inscription
Statut
Membre
Dernière intervention
-
salim_1305 Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
salim_1305 Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je veut faire un petit site juste comme ca, mais je voudrais avoir des bordures (100PX) de chaque coté ( pas en haut et en bas) .
Et que celle-ci soit blanches alors que le reste de la page est bleu clair, j'ai essayer de faire ca mais sa me donne jamais ce que je veut..(Tous le fond est bleu, bordures trop épaisses..)
Merci d'avance !
Je veut faire un petit site juste comme ca, mais je voudrais avoir des bordures (100PX) de chaque coté ( pas en haut et en bas) .
Et que celle-ci soit blanches alors que le reste de la page est bleu clair, j'ai essayer de faire ca mais sa me donne jamais ce que je veut..(Tous le fond est bleu, bordures trop épaisses..)
Merci d'avance !
A voir également:
- Comment faire des bordures ?!
- Comment faire une bordure de page personnalisée sur word - Guide
- Comment supprimer les bordures d'un tableau sur word - Guide
- Comment supprimer les bordures d'une zone de texte ✓ - Forum Bureautique
- Comment imprimer sans bordure blanche - Forum Imprimante
- Marge impression ✓ - Forum Powerpoint
6 réponses
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.
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
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?
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
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.
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.