Problème d'affichage de contenu

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par garancetosello, 19 Janvier 2015.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Bonjour à tous,
    Bonne année à tous. :D
    Que de belles et bonnes choses et donnez-moi un peu de vos neurones ca serait cool!

    Bon cela dit ca faisait longtemps. 8O
    J'ai progressé et j'ai fait plein de pages toute seule mais là
    je bloque, comme d'hab quoi !
    J'ai besoin d'aide comme d'hab.

    Je voudrais mettre des images une en dessous de l'autre comme sur cette page :
    http://www.votre-faire-part.com/carte-enveloppe-blanche-350.htm
    Et ca donne (l'horreur !!) : http://www.votre-faire-part.com/test/carte-enveloppe-blanche-350.htm
    Pour se faire ,
    j'ai crée une page css http://www.votre-faire-part.com/test/css/carte-enveloppe.css

    j'ai crée un DIV #global pour pouvoir centrer mon contenu
    Code:
    #global {
      margin-left: 400px;
      margin-right: auto;
      width: 700px;
    }
    Puis #carte pour dire que l'image est sur la gauche
    Code:
    #carte {
    float:left;
    	}
    Ce qui donne en HTML
    Code:
        <div id="global">
          <div id="carte">
    		<img src="cartes-enveloppes/carte-blanche-350-gr.jpg" alt="" title="">
    	</div>
    	<p><u>Dimension de la carte simple</u><br/>
      Format : 14 X 10.5 CM<br/>
      Grammage : 350 gr<br/><br/>
      <u>Caractéristique de l'enveloppe</u><br/>
      Format : 11.4 x 16.2 cm<br/>
      Grammage : 120 gr<br/></p>
          </div>
    LES HICS ?
    Rien ne se justifie et le contenu ce met tout en bas !
    J'aimerai que le texte soit aligné toujours sur la même colonne


    SVP un p'tit coup de pouce de début d'année <3
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    793
    J'aime reçus:
    0
    ne pas oublier le clear: both quand on utilise des float

    à noter que le nouveau design rentre encore moins dans la largeur de mon écran de bureau, que je dois donc utiliser la barre de défilement horizontal. c'est bien sur, encore pire pour les smartphones.
     
  3. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Ah bon !!! Vous me faites peur !!
    J'ai essayé sur différents ordis et aucune barre de défilement !!
    J'ai essayé le clear: both; est aucun changement
     
  4. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    Tu utilises l'outil de debug de ton navigateur ?

    Un petit F12 te permettra d'y voir plus clair...

    pour simplifier utilise deux bloc aside et main par ex
    h1, h2 et global... dans le main.
    sur main utilise un float right sur largeur fixe ;)

    Après il te reste plus qu'a faire un listing sans float...
    de style
    Code:
    <div class="article">
    <img>
    <div>txt</div>
    </div>
    
     
  5. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Bonjour
    Bon ben j'y comprends rien avec les aside
    j'ai cherché des tutos mais rien trouvé de compréhensif
    C'est tout bête ce que je veux faire
    Je souhaite mettre une image et un texte à sa droite LE TOUT CENTRE (grrrrrrrr)

    Donc je suis arrivée à centrer l'image (yesss !!)
    CSS
    Code:
    IMG.impression {
        display: block;
        margin-left: auto;
        margin-right: auto
    	 }
    	 
    HTML
    Code:
    <img src="cartes-enveloppes/carte-blanche-350-gr.jpg" class="impression" alt="" title="" />
    <p><u>Dimension de la carte simple</u><br/>
      Format : 14 X 10.5 CM<br/>
      Grammage : 350 gr<br/><br/>
      <u>Caractéristique de l'enveloppe</u><br/>
      Format : 11.4 x 16.2 cm<br/>
      Grammage : 120 gr<br/></p>
        <hr class="clear"/>
      </div>
    Le texte s'aligne en dessous mais pas à côté
    http://www.votre-faire-part.com/test/carte-enveloppe-blanche-350.htm
    http://www.votre-faire-part.com/test/css/carte-enveloppe.css
     
  6. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    As tu lu ce que l'on te met ???
    tu utiliserais le debug navigateur, tu verrais le soucis directement....

    Soit logique !

    Code:
    <header/>
    <main>
        <content></content>
        <aside/>
    </main>
    <footer/>
    
    Code:
    content {
    float:right;
    ....
    }
    aside {
    float:left;
    ....
    }
    
    Pas besoin de tuto ;)
    Voilà ta base...
    Ensuite tu remplis le content

    Code:
    <div class="article">
    <img>
    <div>txt</div>
    </div>
     
  7. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Romu
    Je n'ai aucune notion en CSS et donc j'y vais à taton.
    Tu vas me dire "apprends le CSS et après fais ton site " et tu as raison mais je préfère apprendre sur le tas comme on dit.
    Je me suis débrouillée sur pas mal de choses mais là je bloque sur un truc tout con.
    Je travaille sur MAC et je ne sais pas débuguer mon F12 !
    Je ne comprends pas Romu où je dois placer cette partie du code
    Code:
    <header/>
    <main>
        <content></content>
        <aside/>
    </main>
    <footer/>
    Alors stp, ne t'ennerve pas et explique moi :(
     
  8. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    Je te conseil de lire un tuto ou de livre tout de même.
    Pour dans un premier temps tout connaître sur le CSS car en tatonant, tu n'as pas le logique...
    Quoi que, même avec des bouquins, c'est très compliqué de l'avoir ;)
    Seul l'expérience de la feuille blanche et voir comment font les autres pourront te faire progresser ;)

    Alors essayons de t'expliquer :p

    Dans un premier temps la structure !

    ce que tu veux c'est ça :

    Code:
    ---------------------------
    header + nav
    --------------------------
    aside|content              |
         |                     |
         |                     |
         |                     |
         |                     |
    ---------------------------
    footer
    --------------------------
    
    Je vais te parler en HTML5 beaucoup plus facile de compréhension ;)
    Ceci représente la structure ou layout de base

    tu as donc un header (l'entête), le footer (le pied de page) et des éléments au milieu
    Les éléments au milieu seront le main (le contenu principal de la page)
    Dans ce main, on retrouve un aside (section complémentaire à la page) + un content (contenu de la page)

    Jusque la comprends tu ?
    car dans l'exemple que tu nous donnes, il n'y avait pas ça !

    Pour éviter les problèmes avec les différents navigateurs, je te conseil un reset CSS pour le layout :
    Voici le mien ;)

    Code:
    /* =HTML Reset CSS
    ------------------------------ */
    a, abbr, address, article, aside, audio, blockquote, body, button, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, ol, p, pre, progress, q, samp, section, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    	background:transparent;
    	font-size:100%;
    	vertical-align:baseline;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, div, p, ul, h1, h2, h3, h4, h5, h6 {
    	display:block;
    	clear:both;
    	overflow:visible;
    }
    audio, canvas, video {
    	display:inline-block;
    	*display:inline;
    	*zoom:1;
    }
    
    /* =Global Elements
    ------------------------------ */
    * { 
    	-webkit-box-sizing:border-box;
    	   -moz-box-sizing:border-box;
    			box-sizing:border-box;
    	overflow-wrap: break-word;
    	word-wrap:break-word;
    	-webkit-hyphens:none;
    	   -moz-hyphens:none;
    		-ms-hyphens:none;
    		 -o-hyphens:none;
    			hyphens:none;
    	-webkit-font-smoothing:antialiased;
    	   -moz-font-smoothing:antialiased;
    			font-smoothing:antialiased;
    }
    
    ça va te permettre le contrôle de tout tes éléments plus facilement pour tous les navigateurs !
    Veux tu qu'on reprenne à deux ton site étape par étape ?
    en pv peut-être ?
     
  9. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Romu romu hiihhiihiiii pour le moment je comprends.
    Merci vraiment pour ta patience et ta compréhension
    Le truc, j'ai déjà 800 pages de faites et si je change des codes j'ai peur que tout foire !
    Oui je sais que je devrais lire, mais je n'ai pas le temps entre les commandes, la compta, les mises à jour du site et les nouvelles créations ... j'ai envie de crever ! :p
    Je pense avoir trouvé un bon code qui pourrait convenir.

    Code:
    <div style="text-align:center;">
        <img style="vertical-align:top;" src="cartes-enveloppes/carte-blanche-350-gr.jpg" />
        <div style="display:inline-block;text-align:left;">
        <ul>
        	<h5><b>Caractéristique de la carte</b></h5>
                    <li>Format : 14 X 10.5 CM</li>
    		<li>Grammage : 350 gr</li>
            </ul>
    	<ul><h5><b>Caractéristique de l'enveloppe</b></h5>
                    <li>Format : 11.4 x 16.2 cm</li>
    		<li>Grammage : 120 gr</li>
            </ul></div>
     
  10. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    800 page ????
    Tu ne travailles pas avec php ?
    Tu fais un layout et tu n'as plus qu'a remplir le content ;)
    C'est bien plus rapide et tu n'as donc que très peu de chose à modifier ;)
    Si le travaille est bien fait, rien ne devrait bouger ;)

    Pour ton code il n'est pas bon ;)
    Depuis quand tu mets ul > h5 > li XD ?
    Du style dans l'html ? A non ^^

    Première chose : mettre une class à ta section
    Code:
    section {
    float: right;
    width: 880px;
    }
    
    Ensuite, on va tricher un peu.
    Après tout, on est dans l'informatique :p

    le but étant d'obtenir ceci

    Code:
    ------------------------------------
    ------------------  -----------------
    img               | | txt
    -------------------  -----------------
    ------------------------------------
    

    Code :

    Code:
    <div class="box">
    <img style="vertical-align:top;" src="cartes-enveloppes/carte-blanche-350-gr.jpg" alt="" />
    <div>
    <h5>Caractéristique de la carte</h5> 
    <ul>
        <li>Format : 14 X 10.5 CM</li>
        <li>Grammage : 350 gr</li>
    </ul>
    <h5>Caractéristique de l'enveloppe</h5>
    <ul>
        <li>Format : 11.4 x 16.2 cm</li>
        <li>Grammage : 120 gr</li>
    </ul>
    </div>
    </div>
    
    Je le fais à la volé
    du coup après le css :
    Code:
    .box {
    width:570px;
    margin:0 auto;
    overflow:hidden;
    }
    .box img {
    float:left
    }
    .box div {
    float:right;
    width:300px;
    }
    
    
    Tu auras une meilleur base ;)
     
Chargement...
Similar Threads - Problème affichage contenu Forum Date
problème dans l'affichage des stats de contenu Google Analytics 4 Mai 2012
Problème affichage des derniers articles wordpress page accueil Administration d'un site Web Mercredi à 22:36
Problème d'affichage meta titre Débuter en référencement 3 Juin 2019
[Wordpress]Problème affichage article dans sous-catégorie Développement d'un site Web ou d'une appli mobile 11 Juin 2017
Problème d'affichage des commentaires sur Wordpress Développement d'un site Web ou d'une appli mobile 2 Mars 2017
Problème d'affichage de la carte sur Google : Google maps / Google mon entreprise Référencement Google 7 Mai 2016
[Problème] Affichage des 10 derniers sujets de mon forum Développement d'un site Web ou d'une appli mobile 31 Mars 2016
Probleme Affichage Title = Ajout Non Voulu De Google Référencement Google 10 Juin 2015
Problème affichage image Développement d'un site Web ou d'une appli mobile 20 Décembre 2014
Problème d'affichage www.monsite.com/index.php introuvable URL Rewriting et .htaccess 17 Décembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice