Structure HTML CSS de ma page
Bonjour à tous et merci de me lire,
j'ai quelques notions en HTML mais j'ai un peu de mal pour trouver la bonne structure pour une page web.
Cependant le développement web m'attire et je souhaite créer un petit site pour débuter.
Pour créer ma page je vais vous dire comment j'imagine la structure html mais comme j'ai personne pour me guider j'aimerai que vous me disiez si je vais dans la bonne direction.
la page va contenir a gauche (environ 30%) des photos verticalement, au centre (environ 60%) le contenu texte + lien et enfin 10% a droite qui sera juste une bande vertical de la meme couleur que celle du menu de la page.
je souhaite et c'est meme obligatoire d'après ce que je sais, utiliser également CSS pour la mise en forme.
voici le code html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="containerA">
<img src="img/couvert croise.jpg" class="imgCouteauFourchette">
</div>
<div id="container">
<div id="banner">
<h1>Titre</h1>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="index.php">Acceuil</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Titre 2</h2><br>
<p>TEXTE</p>
<p>TEXTE</p>
</div>
<div id="container-foot">
<div id="container-gauche"><a href="">contact</a></div>
<div id="container-droite">site crée en 2013</div>
</div>
</div>
</div>
</body>
</html> |
j'ai donc comme vous le voyez dans le html positionner un conteneur A qui va acceuillir les 30% a gauche et un autre conteneur pour la partie de droite.
Pour "essayer" de faire propre j'ai utiliser en css le positionnement relatif et float :
voici le code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| html, body {
height: 100%; */
}
body {
margin : 0;
padding : 0;
font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
border:solid 10px black;
background-repeat: no-repeat;
background-image : url(img/backgroundV_2.png);
}
/*CONTAINER*/
#container {
margin-left : 480px;
border:solid 10px blue;
}
#containerA {
border:solid 10px yellow;
position: relative;
float: left;
}
.imgCouteauFourchette {
width: 20px;
height:20px;
border : solid 2px;
}
* html #container {
height: 100%;
}
/*BANNER*/
#banner {
/*border:solid 1px red;*/
background : url(img/banner.png);
} |
j'affiche les bordures de chaque élément pour comprendre ce qu'il se passe, et le premier truc qui m'interpelle c'est que le #banner du conteneur central n'est pas coller en haut de son conteneur il y a un écart.
Ecart qui disparait lorsque je ne met pas en commentaire la ligne
Code:
/*border:solid 1px red;*/
bizare bizare.
Savez vous pourquoi ?
Et d'un manière général pensez-vous que je suis bien partie pour la structure général de la page ?
Merci a vous :ccool:
