28220 sujets

CSS et mise en forme, CSS3

Salut, je suis actuellement en train de réaliser un site web, et je rencontre quelques problèmes de mise en forme avec mes balises <div>..

J'ai consulté quelques posts sur le forum qui m'ont déjà pas mal aidés mais je rencontre encores 2 problèmes :

1: sous IE ( 6 et 7 ) je me retrouve avec un retour chariot en bas de mon cadre principale ( id="bloc_articles ) alors que je souhaite collé le bas du cadre au bas de page.

Merci d'avance de votre aide. Smiley cligne

<!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="fr" lang="fr">

<head>

 <title>Test</title>

 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-15" />

<style type="text/css">

<!--

body
{ 
  width: 974px;
  margin: 0px auto 0px;  /* Margin = marge extérieur : paramètres = top,right,bottom,left */
  background-image: url("fond_motif.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
  border: 1px solid black;
  text-align : left;
  padding: 0;
}

a{text-decoration: none;}

#fond
{
  width: 974px;
  margin: 0;
  padding: 0;
  background-image: url("fond.jpg");
  background-repeat: repeat-y;
}

#nav
{
  width: 165px;
  height: 50px;
  margin-left: 5px;
  padding : 0px;
  border: 1px solid black;
  float: left;
}

#validator
{
padding: 15px 0px 15px 40px;
}

#bloc_articles
{
  width: 795px;
  height:400px;
  border: 1px solid black;
  margin-left: 1px;
  float: left;
}

#fond hr{clear:both; visibility:hidden;}

#edito
{
  width: 750px;
  height: 100px;
  margin: 40px 0px 30px 20px;
  background-color: gray;
  border: 1px solid black;
}

#articles
{
  width: 500px;
  height: 100px;
  margin: 0px 0px 15px 20px;
  background-color: gray;
  border: 1px solid black;
}

#new_articles
{
  width: 500px;
  height: 50px;
  margin: 0px 0px 15px 20px;
  background-color: gray;
  border: 1px solid black;
}

-->

</style>



</head>

<body>
<div id="fond">
<div id="nav"></div>
<div id="bloc_articles">
<div id="edito"></div>
<div id="articles"></div>
<div id="new_articles"></div>
</div>
<hr />

</div>
</body>

</html>

Modifié par Blackstorm (14 Aug 2006 - 21:14)
Bonjour,

Un problème à régler avant, car il désigne un défaut de conception et de méthode: le "header" (nom du site, tagline, etc) est muet dans mon lecteur d'écran, sur mon mobile, dans ma connection bas-débit, sur mon navigateur texte, pour le robot d'indexation de mon moteur de recherche favori, etc.
Salut, merci de ta réponse, mais pourrais tu etre un peu plus explicatif par rapport a ce qu'il manque dans le header stp ???

Ma page web en cours de dev ce trouve a cette adresse http://81.56.76.80
peut etre que cette page fonctionnera mieux avec tes élements... ( ps : je taf dessus en ce moment donc elle risque de changer au fur et a mesure. )
Une image <img...> dotée d'un attribut alt reproduisant le texte utile contenu dans l'image.

Voir par exemple la FAQ du forum à ce sujet
Modifié par Laurent Denis (14 Aug 2006 - 22:33)
Si tu consulte le lien que j'ai mis au dessus, il y a une image, ainssi que le paramètre "alt" et "title" ... le premier post était un exemple de ce que je souhaitais évoqué...

Ce problème n'affecte que IE, sous FF le bas de mon tableau est bien collé au cadre qui dépend de body..