Sujet Précédent Sujet Suivant

Positionnement des boites en css

Résolu/Fermé
jjaco Messages postés 531 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 30 décembre 2024 - 24 nov. 2011 à 19:06
jjaco Messages postés 531 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 30 décembre 2024 - 24 nov. 2011 à 22:16
Bonjour,
je suis occupé à réaliser une page pour un club qui organise un événement.
Au centre l'image de l'événement et autour des vignettes avec les commerçants qui le sponsorisent

il y a un css et un html.

je n'arrive à mettre de l'ordre dans mes boites... ps (il y a peut-êrte des doublons dans le code html, mais je crois que c'estpas là le probleme...
voici les codes
css:
/* CSS Document */
.container
{
width:100%;
height:650px;
border-width:2px;
position:absolute;
}
.entete /*logo du club*/
{
position:relative;
width:100%;
background-color:yellow;
height:150px;
}
.block /*le bloc pourrait être compose de plusieurs ligneset pourrait se remettre en bas s'il y a plusieurs lignes*/
{
position:relative;
width:100%;
}
.ligne /* une ligne contient 5 vignettes */
{
position:relative;
width:100%;
border-width:2px;
}
.vig /*vignettes*/
{
float:left;
width:19%;
height:120px;
margin:6px;
}
.blockcentre /*bloc composé d'une colonne à droite l'affiche au centre etune colonne à gauche*/
{
width:100%;
float:left;
}
.colonneg /*colonne de gauche*/
{
float:left;
width:20%;
height:650px;
}
.pub /*espace pour annoncer l'événement*/
{
width:100%: /* c'est ici que ça coince*/

}
.colonned /*colonne de droite*/
{
float:right;
width:20%;
height:650px;
}
.vigcol /*vignettes des colonnes*/
{
width:100%;
height:120px;
margin:6px;
}
voici le code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel="stylesheet" href="bis.css" type="text/css">
</head>
<body>
<div class="container" align="center">
<div class="entete"></div>
<!--blockhaut-->
<div class="block">
<!--ligne1-->
<div class="ligne">

<div class="vig">
<a href="#" target="_blank">
<img src="#" height="120" width="100%" title="image">
</a>
</div>

<div class="vig">
<a href="#" target="_blank">
<img src="#" height="120" width="100%" title="image2">
</a>
</div>

<div class="vig">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="image3">
</a>
</div>

<div class="vig">
<a href="#" target="_blank">
<img src="#" height="120" width="100%" title="image4">
</a>
</div>

<div class="vig">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="image5">
</a>
</div>
</div> <!--ligne1-->


</div><!--blockhaut-->

<!--blockcentre-->
<div class="blockcentre">
<!--colonne gauche-->
<div class="colonneg">

<div class="vigcol">
<a href="#" target="_blank">
<img src=""" width="100%" height="120" title="img1">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src=""" width="100%" height="120" title="img2">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="img3">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="img4">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="img5">
</a>
</div>
</div><!--colonneg>
<!--centre--><div class="pub">
<img src="#" width="25%"> </div>
<!--colonne droite-->
<div class="colonned">

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" height="120" width="100%" title="img6">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="img7">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" height="120" width="100%" title="img8">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" title="img9">
</a>
</div>

<div class="vigcol">
<a href="#" target="_blank">
<img src="#" width="100%" height="120" alt="libre">
</a>
</div>
</div><!--coloned-->
</div><!--blockcentre>

</div><!--container-->


</body>
</html>
merci de votre aide





1 réponse

Réponse 1 / 1
jjaco Messages postés 531 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 30 décembre 2024 45
24 nov. 2011 à 22:16
ca va j'ai trouvé... etc'était bien là où ça coince qu'il y a un hic!!! j'ai changé width 100%: par width 100%; et ca fonctionne... c'est con de ma part de vous avoir dérangé ce soir pour une virgule!!!!
sorry
bonne nuit à tous
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses