Bonjour ! Je m'essaie à mon premier site, et je rencontre des problèmes pour mettre en place mes divisions, je ne sais pas si c'est mon fichier html ou css qui pose à problème..
Je cherche à faire une marge de chaque coté de mes divisions, comme sur ce forum, ou par exemple sur http://www.lemonde.fr/ ou il y a 3 cm de vide de chaque coté de l'écran.
Pour ça j'ai fait une div "container" qui englobe les autres, mais impossible de la voir apparaître !
Et deuxièmement ma ligne de menu ressort avec des cases séparées au lieu d'avoir une barre entière d'un coté à l'autre
voici ma page css
et ma page html :
Merci d'avance de votre attention !
Modifié par Marxkas (22 Jun 2015 - 20:36)
Je cherche à faire une marge de chaque coté de mes divisions, comme sur ce forum, ou par exemple sur http://www.lemonde.fr/ ou il y a 3 cm de vide de chaque coté de l'écran.
Pour ça j'ai fait une div "container" qui englobe les autres, mais impossible de la voir apparaître !
Et deuxièmement ma ligne de menu ressort avec des cases séparées au lieu d'avoir une barre entière d'un coté à l'autre
voici ma page css
<meta charset="UTF-8">
#container{width:1000px; height: 1500px; margin:5px; float:left; background-color:red; color: red;}
div#entete { width:800px; height:100px; background-color:#CCCCCC; text-align:center;}
#menu{width:auto; display:block; height:35px;}
div#corps {float:left; width:650px; height:700px; background-color:pink; text-align:left;}
div#droite{float:left; width:300px; height:700px; background-color:#eeeeee; text-align:left; color:black;}
/*
div.spacer, permet de faire deux colonne dans #container
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}et ma page html :
<!DOCTYPE html>
<html lang="Fr">
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<style>
ul#menu {padding: 0;}
ul#menu li {display: inline;}
ul#menu li a {background-color: black;
font-size: 100%;
color: white;
padding: 15px 40px;
text-decoration: none;
border-radius: 4px 4px 0 0;}
ul#menu li a:hover {background-color: red;}</style>
<style>ul { text-align:center; }</style>
<style>h1 {color:red; font-family:verdana; font-size:350%; margin:""0px; text-align:Center;}</style>
<style>h2 { margin: 30px; font-size:135%}</style>
<style>p { margin: 30px; font-size:105%; }</style>
<style>h4 { font-size: 105% }</style>
<meta charset="UTF-8">
<!-- Page principale -->
<title>essai titre</title>
</head>
<body style="background-color:gainsboro">
<div id="container">
<h1 style="color:red">couleur titre taille</h1>
<div id="menu"><ul id="menu">
<li><a href="/html/default.asp">Accueil</a></li>
<li><a href="/css/default.asp">Blog</a></li>
<li><a href="/js/default.asp">Ajouter un service ?</a></li>
<li><a href="/php/default.asp">Recherchez un service</a></li>
<li><a href="/php/default.asp">Contact</a></li>
</ul></div>
<div id="corps">
<p><strong>essai ligne
<br>bla bla bla essai deuxieme ligne bla bla bla bla bla,
<br>bla bla bla bla bla bla bla bla bla</strong></p>
<h2>Aidez nous à nous dévelloper</h2>
<p>essai paragraphe - - - -- - - -- - - - -- - - - - .</p>
<h2>Les derniers articles publiés</h2>
<h4>Titre à mettre avec un lien vers autre page</h4>
<hr>
<br>CGU
</div>
<div id="droite">
<h3>Derniers service ajoutés</h3>
test 1
<br> test 2
<h3>Services les plus vus</h3>
test 1
<br>test 2
<br><a href="default.asp"><img src="facebook.png" alt="facebook" style="width:54px;height:52px;border:0"></a>
<a href="default.asp"><img src="twitter.png" alt="twitter" style="width:54px;height:52px;border:0"></a>
<a href="default.asp"><img src="googleplus.png" alt="googleplus" style="width:54px;height:52px;border:0"></a>
</div>
</div>
<!-- close #container -->
</body>
</html>Merci d'avance de votre attention !
Modifié par Marxkas (22 Jun 2015 - 20:36)
par défaut le site sera centré peut importe la taille de l'écran ou il y a quelque chose à rajouter pour ?
