probleme CSS pied page sur le forum Programmation - 08-06-2012 09:49:56

Liste des sujets

probleme CSS pied page

lvscarf

Niveau 6

08 juin 2012 à 09:49:56

Salut tout le monde, après quelques jours de galère j’envoie un SOS ^^
Mon problème :
Une div (ici la div "blocvisiteur" s'allonge en dessous du "blocpied". Tant que le contenu du "bloc" prend de la place, ça va.
Une petite image pour mieux comprendre :
http://img594.imageshack.us/img594/996/sosi.png

Le code:
html:
<div class="corps">
<div class="bloc1">
<?php
include("include/connexion.xhtml");
?>
</div>
<div class="blocVisiteur">
<?php
include("include/visiteur.html");
?>
</div>
<div class="bloc">

</div>
<div class="blocpied">
<?php
include ("include/piedpage.html");
?>
</div>
</div>

(contenu enlevé)
maintenant le CSS :

.corps{
width : 1020px;
height : auto;
border-width : 0px;
margin-left : auto;
margin-right : auto;
border : 1px;
border-color : black;
border : solid;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
position : relative;

}

.bloc
{
border-width : 0px;
border-color : black;
border-style : dashed;
width : 600px;
height : auto;
margin-left : 330px;
margin-right : auto;
margin-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
text-align: justify;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
overflow : hidden;
}

.bloc1
{
border-width : 0px;
border-color : black;
border-style : dashed;
width : 200px;
height : auto;
margin-left : 15px;
margin-right : auto;
margin-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
position : absolute;
border-radius : 15px;
}

.blocpied{
border-width : 0px;
border-color : black;
border-style : dashed;
width : 600px;
height : 10px;
margin-top: 90px;
margin-left : 330px;
margin-right : auto;
margin-bottom: 10px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
text-align: center;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
clear:both;
}

.spacer {
clear : right ;
}

.blocVisiteur{
border-width : 0px;
border-color : black;
border-style : dashed;
width : 200px;
height : 300px;
margin-top: 270px;
margin-left : 15px;
margin-right : auto;
margin-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 100px;
background-color : white;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
overflow : hidden;
position : absolute;
}

Je tiens a préciser que je ne suis pas très doué avec le css, et le design en général mais bon ce n'est pas une raison pour boycotter ce langage... quelqu'un peut m'aider svp?

martin232

Niveau 8

10 juin 2012 à 15:48:44

salut,
faudrait englober pour la colonne gauche bloc1 et blocvisiteur dans un div "float:left", pour la colonne bloc et blocpied dans un autre div "float:right", plutot que d'utiliser des "position:absolute" et des "margin" pour positionner les éléments à droite...

.bloc
{
width : 600px;
height : auto;
margin-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
text-align: justify;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
overflow : hidden;
}

.bloc1
{
width : 200px;
margin-left : 15px;
margin-right : auto;
margin-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
}

.blocpied{
width : 600px;
height : 10px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 40px;
background-color : white;
text-align: center;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
clear:both;
}

.spacer {
clear : right ;
}

.blocVisiteur{
width : 200px;
height : 300px;
margin-left : 15px;
margin-right : auto;
margin-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
padding-top : 40px;
padding-bottom: 100px;
background-color : white;
-moz-box-shadow: 0px 0px 9px #000000;
-moz-border-radius : 10px;
border-radius : 15px;
overflow : hidden;

}

conteneurgauche{

float:left;width:340px
}

conteneurdroit{

float:right;width:680px
}
</style>

</head>

</div>

</div>
corps
<div class="blocpied"></div>
</div>

</div>

</body>
</html>

PayGleuh

Niveau 10

10 juin 2012 à 19:52:20

Go Fofo création de sites web + la prochaine fois poste ton code sur pastebin.

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News culture

4 411 spectateurs

"Il faut laisser certains films tranquilles" Robert Redford rejette le remake de classique hollywoodien !

Robert Redford n'a jamais été connu pour ses grands gestes. Disparu le 26 septembre 2025, le comédien et réalisateur était loin d’être un acteur adepte de l’excentricité ou du jeu poussé à l’extrême. Il avait au contraire bâti sa carrière sur une authenticité discrète, une présence naturelle qui n’avait pas besoin d’artifices. Cette retenue n’était pas seulement une posture d’acteur, mais une véritable philosophie. Derrière son statut de star hollywoodienne, Redford a toujours privilégié les personnages complexes, les récits intimistes et les œuvres capables de laisser une empreinte émotionnelle durable plutôt que de chercher l’effet spectaculaire.

Toutes les news culture