Bonjour,
Débutant en CSS, évidemment, je bute sur des problèmes sans trouver les solutions, pouvez vous m'indiquer comment arriver à supprimer ces petits soucis, en m'expliquant si possible le pourquoi du comment ?
j'espère que ça pourra servir à d'autres, je bute surement sur une fusion des marges que je n'arrive pas à déceler, et un float, que je n'arrive pas à décaler ou je veux. du classique j'ai l'impression.
bon l'esthétique est atroce, mais c'est juste pour bien voir mes boîtes, en distinguant bien les couleurs pour chacunes d'elles.
voici l'html:
voici mon css (si vous voyez des trucs à alléger, dites moi, j'ai l'impression de faire trop de boites...):
mes soucis:
1)
comment bien aligner: blocGauche/txtCourant/blocImage ? vous voyez le pixel rose en trop en haut et en bas ? j'aimerai coller ces éléments au menu du haut (juste un pixel de trop)
et tout en bas de ma page, encore un seul pixel de trop.
j'ai essayé avec
2) impossible de ramener mon bloc noir, avec la liste non ordonnée, en haut à droite de ma colonne jaune.
là encore j'ai essayé des position relative et absolute dans tous les coins...sans succès.
Merci beaucoup pour votre aide par avance, et désolé si je suis trop long, mais c'est pas évident de faire au plus court quand on ne maîtrise pas soi même un thème.
A+
Modifié par Grindsable (08 Jan 2009 - 11:41)
Débutant en CSS, évidemment, je bute sur des problèmes sans trouver les solutions, pouvez vous m'indiquer comment arriver à supprimer ces petits soucis, en m'expliquant si possible le pourquoi du comment ?
j'espère que ça pourra servir à d'autres, je bute surement sur une fusion des marges que je n'arrive pas à déceler, et un float, que je n'arrive pas à décaler ou je veux. du classique j'ai l'impression.
bon l'esthétique est atroce, mais c'est juste pour bien voir mes boîtes, en distinguant bien les couleurs pour chacunes d'elles.
voici l'html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><!-- page 1 --></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ecran.css" />
</head>
<body>
<div class= global>
<div class= logo>
logo
</div> <!-- ferme logo -->
<div class= menu>
<div class="menu1">Partie 1</div>
<div class="menu2">Partie 2</div>
<div class="menu3">Partie 3</div>
<div class="menu4">Partie 4</div>
</div> <!-- ferme menu -->
<div class= grosBloc>
<div class= blocGauche>
<img class="blocImage" src="image300px.gif" alt="Image de 300px sur 300" />
<div class= txtCourant>
<p>Aliquam massa eros, porttitor vestibulum, ultrices nec, vehicula eu, risus. Morbi massa lacus, varius hendrerit, feugiat at, condimentum sed, est. Etiam purus ligula, vulputate eu, ornare nec, fermentum in, sem. In malesuada laoreet felis. Nulla facilisi. Nulla mauris. Donec eget quam facilisis lectus iaculis feugiat. Ut egestas dictum ante. Nulla porttitor sagittis lacus. Nulla accumsan, nisi a rhoncus gravida, metus enim varius ligula, ut scelerisque velit ligula a risus. Donec interdum. In semper venenatis odio. Donec accumsan. Vestibulum facilisis, neque imperdiet sagittis consectetur, nisl lectus tempor ante, et mollis lectus lacus et elit. Duis eget justo eu dui varius rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis imperdiet sapien. Proin massa. Etiam at libero.
</p>
</div> <!-- ferme txtCourant -->
<div class= blocDroite>
<ul>
<li>lien 1</li>
<li>lien 2</li>
<li>lien 3</li>
<li>lien 4</li>
<li>lien 5</li>
</ul>
</div> <!-- ferme blocDroite -->
</div> <!-- ferme blocGauche -->
</div> <!-- ferme grosBloc -->
</div> <!-- ferme global -->
</body>
</html>voici mon css (si vous voyez des trucs à alléger, dites moi, j'ai l'impression de faire trop de boites...):
* {margin: 0; padding: 0;}
.global {
width: 680px;
border-style: solid;
border-color: black;
margin-left: auto;
margin-right: auto;
background-color: yellow;
min-height: 480px;
padding: 0px;
}
.logo {
width: 100%;
height: 100px;
background-color: green;
padding: 0px;
}
.menu {
width: 100%;
background-color: red;
height: 30px;
}
.menu1 {
background-color: white;
height: 30px;
width: 100px;
float: left;
margin-left: 3px;
}
.menu2 {
background-color: white;
height: 30px;
width: 100px;
float: left;
margin-left: 40px;
}
.menu3 {
background-color: white;
height: 30px;
width: 100px;
float: left;
margin-left: 40px;
}
.menu4 {
background-color: white;
height: 30px;
width: 100px;
float: left;
margin-left: 40px;
}
.blocGauche {
background-color: pink;
padding: 1px 0;
width: 485px;
}
.txtCourant {
width:485px;
background-color: blue;
padding: 1px 0;
}
.blocImage {
width: 300px;
height: 300px;
float: left;
margin-left: 185px;
}
.blocDroite {
margin-left: 485px;
float: left;
width: 195px;
color: white;
background-color: black;
}mes soucis:
1)
comment bien aligner: blocGauche/txtCourant/blocImage ? vous voyez le pixel rose en trop en haut et en bas ? j'aimerai coller ces éléments au menu du haut (juste un pixel de trop)
et tout en bas de ma page, encore un seul pixel de trop.
j'ai essayé avec
padding: 1px 0; 2) impossible de ramener mon bloc noir, avec la liste non ordonnée, en haut à droite de ma colonne jaune.
là encore j'ai essayé des position relative et absolute dans tous les coins...sans succès.
Merci beaucoup pour votre aide par avance, et désolé si je suis trop long, mais c'est pas évident de faire au plus court quand on ne maîtrise pas soi même un thème.
A+
Modifié par Grindsable (08 Jan 2009 - 11:41)
