28172 sujets

CSS et mise en forme, CSS3

Probleme de codage avec la width 100%

Bonjour !
Etant débutant, je rencontre un problème avec la "one page" que j'ai créé et passé sous Dreamweaver.
Je voudrai avoir une width à 100% mais lorsque je regarde dans le navigateur (safari), mon webdesign dépasse, comme si ma width à 100% ne marchait pas.
J'ai volontairement enlevé le code intermédiaire..
Pouvez-vous m'aider ? Un grand merci d'avance.
Voici mon code :


<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#body {
width: 100px;
}

</head>
<div id"body">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (site.psd) -->
<table id="Tableau_01" width="100%" height="6247" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="53">
<img src="images/site_01.jpg" width="1890" height="429" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="429" alt=""></td>
</tr>


</table>
</div id"body">
<!-- End Save for Web Slices -->
</body>
</html>
bonjour

Alors y a un petit problème de syntaxe au niveau de tes déclarations d'id dans ton html. Ce que je te propose c'est d'enlever ton id body et de faire comme ça:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset=utf-8">
        <style type="text/css"> 
          body {
              width: 100px;
              background-color: #FFFFFF;
              margin: 0px;
          }
        </style>
    </head>
    <body>
         <!-- contenu de ton site -->
    </body>
</html>


Il faut fermer ta balise <style> et il ne faut pas répéter l'id dans la balise fermeture d'une balise . Pour le body, nulle besoin de lui attribuer un id, tu peux juste l'appeler via son attribue en écrivant directement body, comme tu peux le voir ci dessus, sans symbole devant.

Voilà Smiley cligne
Rebonsoir !

Merci beaucoup pour votre réactivité !
Seulement, je crois que le problème est plus profond. Ca me donne un résultat comme cela (pj) :
Cela vient-il du découpage ? Le width à 100% est-il bien compatible avec les tables?

upload/52605-Capturedec.png
D'ailleurs je me suis trompé, je voulais mon width en 100%, pas en 100px.. mais à priori, ça ne change pas grand chose ?
Merci de votre réponse ! Je suis un peu confus, car je ne m'y connais pas encore tellement.
Dois-je mettre uniquement dans le header quelque chose comme cela :
body {
width: 100%;
margin: 0px;
}
}
#body{
table-layout: fixed;
}

ou remplacer à la main dans les tableau ce qu'il y a ci-dessous par <table style="table-layout: fixed;"> chaque <table id> ?

<body>
<!-- Save for Web Slices (Exadone.psd) -->
<table id="Tableau_01" width="1891" height="6247" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="53">
<img src="images/Exadone_01.jpg" width="1890" height="429" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="429" alt=""></td>
</tr>

Vraiment je m'excuse de vous posez cette question mais je patauge.
Cordialement.
Nous parlons de tableau et de leur caracteristique spécifique, body ou tout autre element que <tble> ne sont pas concerné.
Pour fixer la largeur de votre <table> , c'est a <table> qu'il faut appliquer cette règle.

C'est applicable a d'autre éléments seulement si ceux-ci ont aussi un display:table; ou display:inline-table; qui sont l'une ou l'autre des valeur par défaut possibles des caractéristique d'un tableau <table>.
un exemple : http://codepen.io/anon/pen/EDfed tableaux en ligne - en block - en ligne

Cdt,
Modifié par gc-nomade (09 Dec 2013 - 22:07)
Ca devient de plus en plus complexe pour moi..

J'ai dans mon body un seul <table> avec pour commencement :
<table id="Tableau_01" width="1891" height="6247" border="0" cellpadding="0" cellspacing="0">

et mon header est comme cela :
<!DOCTYPE html>
<html>
<head>
<title>Exadone</title>
<meta charset=utf-8">
<style type="text/css">

body {
width: 100%;
margin: 0px;
}
</style>
</head>

Ou dois-je donc placer ce table-layout: fixed; ?

Cordialement.
ah je vois mieux.
Vous donnez une largeur au tableau de 1891pixel ici :
<table id="Tableau_01" width="1891" height="6247" border="0" cellpadding="0" cellspacing="0">

Si la fenêtre fais moins de 1891pixels, elle est trop petite et le tableau déborde en imposant une barre de défilement.

Il est dans tout les cas préférable de les styles d'un tableau via la feuille de style en oubliant ces vieux attributs .
ce serait en CSS:
table#Tableau_01 {
width:1891px;/* a passer en width:100% ?  + table-layout:fixed; */
height:6247px; /* laisser  faire sans spécifier de hauteur, sauf à raison précise */
border:none; /* inutile, sauf reset */
padding:0;
border-spacing:0;/* border-collapse:collapse; même visuel, mais ne permet plus de styler les <tr> */
}

et le HTML devient:
<table id="Tableau_01">


Bonne fin de soirée,
Cdt,
Sujet clos
Aller à