Placement blocs et images

**criscaro** · 25/12/2006, 23h34

bonsoir et joyeux Noël !!!!!

bon, je n'ai toujours pas compris pourquoi mes différents éléments ne se placent pas comme je le veux

j'ai fait ts les tutos que j'ai trouvé tant en css qu'html ; j'ai appliqué ts les conseils que l'on m'a donnés !

rien à faire !!!

heureusement pas pour toute ma page, mais seulement sur la partie centrale, la plus importante bien sûr ...

en gros, j'ai un contenu avec des blocs et des images ! sur firefox, ça va mais pas sur ie7, qu'est-ce qui coince, je n'en sais rien, j'ai fait plusieurs manips mais là, je suis désespéréééée !!! mm papa noël n'a rien pu faire pour moi (snif)

un tit peu d'aide, svp !!!

j'ai fait un topo en pj, quelqu'un ... pourrait-il me conseiller ?

merci d'avance

**blueice** · 26/12/2006, 15h33

Quel est le problème exactement ?

**criscaro** · 27/12/2006, 21h51

bonsoir,

j'ai fait une page index, sur laquelle je cafouille pas mal. Lorsque je la teste avec notepad sur FF ça peut aller, mais avec IE, ça met la partie contenu l'une sur l'autre, j'ai cherché partout, j'ai fait beaucoup de modifications suite à différents conseils mais ça ne s'arrange pas

http://membres.lycos.fr/lesseigneursdombre/

bon c'est temporairement hébergé chez lycos après ça passe chez free. je me doute que la pub sur le côté doit être en partie responsable de mon pb mais il y a surement autre chose (c'était plus simple avec les tableaux, mais comme il ne faut pas ...)

là, j'avoue que j'aurai besoin de conseils éclairés et sûrs car à force d'écouter les uns et les autres et d'appliquer ce que je trouve dans les tutos, je suis perdue !

merci d'avance

**trotters213** · 28/12/2006, 22h39

J'ai isolé le problème et il vient de ton padding-left:310px dans #contenu apparemment.
Essaie ceci :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
body {
background-image: url("img/petite_etoile.jpg");
margin:10px 0 10px 0;
font-family: BlackChancery, Arial, "Comic Sans MS", serif;
padding: 10px;
}
 
.lettrine{
color: #fff;
font-family: oldlondon;
font-size: 200%;
}
 
@font-face {
font-family:BlackChancery; 
src:url(font/BlackChancery.ttf), format(TrueType); 
}	
 
a:active, a:link, a:visited { 
text-decoration: none;
color: #C00;
} 
 
div#menu {
float:left;
width:290px;
height:400px;
background-image: url("img/menu_parchemin.gif"); 	/* arrière-plan général du menu */
background-repeat: no-repeat; 
color: #C00;
font-size:130%;
padding-top:70px;
}
 
.ul, li {	/* utilisation de liste pour le menu */
list-style-type: none;	/* suppression des puces de liste */
margin:0 0 8px 0;
padding:0;
}
 
.ul {
position:absolute;	/* positionnement pour IE5 et IE5.5 */
padding-top:20px;
text-align:left;
margin-top:50px;
margin-bottom:10px;
}
 
.li{
display: inline;
}  /* correction pour IE5 et IE5.5 */
 
div#contenu {
float:left;
height:400px;
text-align:justify;
color:#00CECE;
margin-bottom:5px;
font-size:120%;
width:798px;
}
 
p#bloc1{
float:left;
width:390px;
}
 
#droite{
float:right;
height:300px;
width:390px;
margin-top: 45px;
}
 
p#bloc2 {
float:right;
width:390px;
}
 
#gauche{
float: left;
height: 375px;
width:390px;
margin-top: 20px;
}

Code HTML :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>
<meta content="text/html; CHARSET=ISO-8859-1" http-equiv="content-type">
<meta content="Marc CLEMENT" name="author">
<meta name="Publisher" content="Marc CLEMENT">
<meta name="Description" content="site sur le jeu de r&ocirc;le bas&eacute; sur les romans de Roger Zelazny : le cycle des Princes d'Ambre et de John Gregory Betancourt : les neuf Prince du Chaos">
<meta name="Keywords" content="jeu de r&ocirc;le,betancourt,zelazny,ambre,ombre, prince d'ambre,prince du chaos,roman hero&iuml;c fantasy">
<meta name="Indentifier-URL" content="non d&eacute;termin&eacute;">
<meta name="Copyright" content="&copy; 2006 Marc CLEMENT">
<meta name="Date" content="Dec 2006 08:00:00">
<meta name="Robots" content="NoIndex, NoFollow">
<meta name="Revisit-after" content="15">
<title>Le Repaire des Seigneurs d'Ombre</title>
<style type="text/css">
/*ton CSS*/
</style>
</head>
<body>
<div id="menu">				
	<ul>
		<li><a href="index.html">Accueil</a></li>
		<li><a href="atouts_henner.html">Galerie d'atouts d'Henner</a></li>
		<li><a href="atouts_meladius.html">Galerie d'atouts de M&eacute;ladius</a></li>
		<li><a href="presentation_joueur.html">Pr&eacute;sentation des P. J.</a></li>
		<li><a href="journal_campagne.html">Journal de Campagne</a></li>
		<li><a href="betisier.html">B&ecirc;tisier</a></li>
		<li><a href="antre_mj.html">L'antre du Ma&icirc;tre de Jeu</a></li>	
	</ul>
</div>
<div id="contenu">	
 
	<p id="bloc1">
		<span class="lettrine">B</span>ienvenue &agrave; toi, voyageur... Arr&ecirc;te-toi un instant en ce lieu et repose-toi.<br /><br />
		&nbsp;Tu es fatigu&eacute;, d&eacute;sorient&eacute; et troubl&eacute;.
		Tu te demandes ce qui se passe, tu as l'impression de sombrer dans la
		folie. Mais es-tu vraiment fou ?&nbsp; Ce que tu vois autour de toi
		est-il r&eacute;el ? Que dirais-tu s'il n'existait pas un monde, mais
		une infinit&eacute; d'univers ? Si ton monde n'&eacute;tait qu'une
		ombre parmi les ombres ? Une Ombre se d&eacute;formant en fonction de
		son &eacute;loignement de la seule source de r&eacute;alit&eacute;...
		Ambre ... <br /><br />
 
		Viens avec nous, marche vers ton destin. Nous t'emmenons
		voyager &agrave; travers ... Ombre. 
	</p>
	<img alt="Mausol&eacute;e de Corwin" src="img/mausolee_corwin.jpg" id="droite">		
 
	<p id="bloc2">
		<span class="lettrine">A</span><span class="citation">mbre projette Ombre.
		Celle-ci peut &ecirc;tre fa&ccedil;onn&eacute;e &agrave; volont&eacute;	
		si on sait comment s'y prendre. Il n'y a pas d'endroit imaginable qui
		n'existe quelque part en Ombre. </span>(Les fusils d'Avalon)
		<br /><br />
		Nous voulions, par l'interm&eacute;diare de ce site, faire partager
		&agrave; tous l'oeuvre de Roger Zelazny et l'univers envo&ucirc;tant de
		l'hero&iuml;c fantasy. Mais ces quelques pages sont &eacute;galement le
		r&eacute;cit des aventures de quatre amis jouant &agrave; Ambre : Alex
		(Henner), J-B (M&eacute;ladius), Fred (James) et Marc (Ma&icirc;tre de
		Jeu et Web Master). Ainsi, nous esp&eacute;rons apporter un peu de
		r&ecirc;ve &agrave; ceux qui passeront par l&agrave; et&nbsp;que tous
		pourront suivre nos campagnes, partager nos fous-rires
		et&nbsp;d&eacute;couvrir notre univers,&nbsp;notre vision d'Ambre.<br /><br />
	</p>
	<img id="gauche" src="img/tir_na_nogth.jpg" alt="Tir Na Nog'th">
</div>
 
</body>
</html>

!!ATTENTION : j'ai isolé ton problème donc il faut que tu rajoutes l'entête et le pied de page et les styles qui vont avec.

**criscaro** · 29/12/2006, 11h52

Salut trotters,

bon, j'ai fait les quelques modifications que tu me proposes mais ça ne le fait pas vraiment !

en gros :
- mes blocs 1 et 2 ainsi que mes images ont basculé sous le menu alors que je les voulais à droite du menu
- bloc1 et droite ont la mm apparence sur IE et FF
- bloc2 et gauche sont l'un sous l'autre sur IE et l'un à côté de l'autre sur FF

tu enlèves le clear par rapport à mon menu, est-ce que ça n'empêche donc pas de passer mon #contenu à droite du menu ?

enfin bref, c'est tj un peu la pagaille !!!

je craque ...

**trotters213** · 29/12/2006, 12h12

je ne comprends parce que chez moi c'est nickel sous IE et FF.
Tu as bien repris mon code HTML ET CSS ?

Placement blocs et images

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager