Hauteur de la page non étirée et Bloc de News

**Genestoux** · 30/03/2009, 13h21

Bonjour,

donc deux problèmes :
- Ma page ne s'étire pas dans la hauteur. Hors j'ai mis height:100% .... Bien entendu, j'ai du faire une boulette mais je ne vois pas ...
- Ensuite, j'ai un bloc de news et j'aurais voulu savoir si ce dernier était bien mis et bien correct ?

Pour info, j'utilise dreamweaver c'est pour ça qu'il y a autant de truc

c'est pas le débutant que je suis, qui en ferait autant

Si vous voulez je peux épurer les codes.

Page HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<body class="twoColFixLtHdr">
 
<div id="container">
  <div id="header">
 
  <!-- fin de #header --></div>
  <div id="sidebar1">
    <ul><h3>Menu</h3>
    </ul>
  <!-- fin de #sidebar1 -->
  </div>
  <div id="mainContent">
 
<!-- fin de #mainContent -->
  </div>
  <div id="News">
  	<h1>News</h1>
  	<h2>Le 24 mars 2009,</h2>
    <p>Lancement du site.</p>
  </div>
<br class="clearfloat" />
  <div id="footer">
 
<!-- fin de #container --></div>
</body>
</html>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #000000;
	height:100%;
}
.twoColFixLtHdr #container { 
	width: 780px;  
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
	height:100%;
} 
.twoColFixLtHdr #header { 
	background: #DDDDDD; 
	padding: 0 10px 0 20px; 
} 
.twoColFixLtHdr #sidebar1 {
	float: left; 
	width: 200px;
	background: #EBEBEB; 
	padding: 15px 10px 15px 20px;
	height:100%;
}
.twoColFixLtHdr #mainContent { 
	margin: 0 0 0 250px; 
	padding: 0 20px; 
	height:100%;
} 
.twoColFixLtHdr #footer {
	padding: 0 10px 0 20px; 
	background:#DDDDDD;
	font-size: 8px;
} 
.twoColFixLtHdr #News { 
	margin: 0 0 0 250px; 
	padding: 0 20px; 
	border-width:thin;
	border-style:solid;
	list-style:circle;
	font-size:9px;
	height:100%;
 
}

Merci.

**Bisûnûrs** · 30/03/2009, 14h51

Envoyé par Genestoux

Si vous voulez je peux épurer les codes.

C'est ce qu'on demande en général, oui.

Pour la hauteur à 100%, il te manque l'attribution de cette hauteur à l'élément html.

**Genestoux** · 30/03/2009, 18h02

Merci.

Code épuré, en espérant que cela suffit ...

Pour les news, existe-t-il une méthode de les faire ?

**GihefBey** · 30/03/2009, 21h01

Bonjour,

Envoyé par Genestoux

Ensuite, j'ai un bloc de news et j'aurais voulu savoir si ce dernier était bien mis et bien correct ?

Qu'est-ce que tu veux dire ?

Pour le reste, la <div id="footer"> n'est pas refermée.
Et tu ne peux pas mettre autre chose que des <li> dans un <ul>.
Sors le <h3> de là est insère des <li>.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  <div id="sidebar1">
    <h3>Menu</h3>
    <ul>
      <li> quelquechose </li>
      <li> quelquechose </li>
      <li> quelquechose </li>
    </ul>
  </div>

Quant à appliquer une class au body...

-

**Genestoux** · 30/03/2009, 21h15

Bonjour,

le footer pas fermé => trop épuré

Le h3 => je change et merci.
Class dans le body, c'est dreamweaver .... mais je note que ce n'est point utile

J'aurais voulu savoir si pour des news dans une page d'accueil, je dois faire un div après le div correspondant au corps #MainContent ou dedans ?

En tous cas, merci.

bonne soirée à vous !

Edit : En ayant mis la hauteur dans la balise HTML, je viens de voir que mon bloc de news n'est pas correct. Il faut que je le mette dans #MainContent, mais ne faut-il pas utilisé un span au lieu de div ? Merci

**GihefBey** · 30/03/2009, 21h54

La place des éléménts sur la page dépend du résultat que tu cherches.
Si tes news doivent rester sous le contenu, alors elles sont bien placées.
Si elles doivent être ailleurs, alors il va certainement falloir que tu changes quelque chose.

Montre-nous un dessin de ce que tu veux obtenir.

Et si tu veux une height à 100% il faut, comme te l'indique Bisûnûrs, que tu l'appliques aussi au html

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html, body  {
  height:100%;
  }

-

**Genestoux** · 30/03/2009, 22h09

Donc voici ci-dessous la maquette :

Nb : je suis tombé sur le tuto :http://pbnaigeon.developpez.com/tuto...-page-CSS/#LII
je penses que cela devrait répondre à mes besoins et encore merci de l'attention portée à mon post

mais je suis preneur d'infos.

**Bisûnûrs** · 30/03/2009, 22h21

Ton bloc de news fait bien partie de ton corps dans la maquette, donc il doit bien se trouver imbriqué dans le code.

Hauteur de la page non étirée et Bloc de News

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager