IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Placement blocs et images


Sujet :

Positionnement en CSS

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut Placement blocs et images
    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
    Images attachées Images attachées  

  2. #2
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Quel est le problème exactement ?

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut
    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

  4. #4
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut

    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.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut
    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 ...

  6. #6
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut
    je ne comprends parce que chez moi c'est nickel sous IE et FF.
    Tu as bien repris mon code HTML ET CSS ?

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut
    re,

    j'ai tt repris texto !

    bon je suis sur un portable en résolution 1024 x 768 ? ça peut jouer ?
    je viens de tt révérifier, dans le html (pas vraiment de modifs sauf que je suis en 4 transitional et toi en 1 strict ; j'ai tt de mm mis les <br />)
    l'ordre des éléments dans un style est-il important ? du genre, float avant margin par exemple ?
    moi je teste avec le menu execution de notepad et je suis en IE7
    voili voilou !!!


  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut problème affichage avec IE7 : gestion des marges
    bonjour et bonne année à tous !

    après moults modifications, j'arrive à obtenir une page correcte sur FF.
    pour cela j'ai modifié la taille générale de ma page en la passant à 988 px.

    j'ai aussi changé d'hebergeur pour passer de lycos à free, au moins, je n'ai plus les pubs ! déjà ça de gagné

    voici la nouvelle adresse : http://les.seigneurs.dombre.free.fr/

    lorsque je regarde ma page sur FF, ça va ! mais sur IE7, c'est toujours un peu bizarre notamment en ce qui concerne mes blocs texte et image cote à cote.
    est-ce un problème de marges ? ou est-ce IE7 ?
    je ne suis pas assez calée pour répondre à ce genre de questions.
    j'ai tenté d'appliquer les différentes solutions qui m'ont été proposées sans vraiment de succès, alors je vous appelle à nouveau à l'aide ! si tant est que quelqu'un puisse solutionner mon problème !

    je suis en résolution 1024x768 (portable), je ne sais pas s'il y a une incidence ?

    j'aimerai bien passer à la suite, elle me sort par les yeux cette première page, quand je pense à ce qui m'attend sur les pages suivantes, j'en frémis d'avance. Mais je ne désespère pas, je suis du genre têtue

    alors merci par avance de vos tuyaux ...

  9. #9
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Effectivement sur IE7, c'est pas terrible

    Je pense que placer ton corps en float serait plus judicieux et permettrait à IE d'interprêter mieux ton code. Il te suffit de remplacer ton padding par un float:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div#contenu {
    	/* height:400px; pas utile ? */
    	text-align: justify;
    	color: #00CECE;
    	margin-bottom: 5px;
    	float:left; /* au lieu de padding-left: 310px; */
    	font-size: 90%;
    	font-family: "Bookman Old Style", Arial, "Comic Sans MS", serif;
    	width: 678px;
    }
    D'autre part donner un height à ton contenu ne me semble pas utile et pas très judicieux au cas ou tu viendrais à ajouter quelque chose au-desosus...
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 31
    Par défaut
    bonjour candygirl !

    j'essaie de ce pas !!!

    en tout cas merci à toi de prendre un tit peu de temps (de perdre devrai-je dire ...) pour me répondre


    t'es géniale candygirl !!!!! ça marche, j'ai passé des heures sur ce truc !!!

    merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii


+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Homogeneité des blocs d'images
    Par angifilmes dans le forum Images
    Réponses: 3
    Dernier message: 14/03/2011, 10h18
  2. centrer un bloc avec image et son texte à droite
    Par ml1234 dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 17/08/2009, 22h58
  3. Réponses: 1
    Dernier message: 02/06/2008, 11h30
  4. Placement d'une image centrée sous un texte centré
    Par apqmwnqmap dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 14/02/2008, 12h47
  5. Placement de deux images en bordure d'un cadre
    Par bouchette63 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 28/08/2007, 14h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo