Problème d'affichage de contenu

[garancetosello]

Bonjour à tous,
Bonne année à tous.
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

#global {
  margin-left: 400px;
  margin-right: auto;
  width: 700px;
}

Puis #carte pour dire que l'image est sur la gauche

#carte {
float:left;
	}

Ce qui donne en HTML

    <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

 

[loubet]

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.

 

[garancetosello]

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

 

[-Romu-]

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

<div class="article">
<img>
<div>txt</div>
</div>

 

[garancetosello]

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

IMG.impression {
    display: block;
    margin-left: auto;
    margin-right: auto
	 }

HTML

<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

 

[-Romu-]

As tu lu ce que l'on te met ???
tu utiliserais le debug navigateur, tu verrais le soucis directement....

Soit logique !

<header/>
<main>
    <content></content>
    <aside/>
</main>
<footer/>

content {
float:right;
....
}
aside {
float:left;
....
}

Pas besoin de tuto
Voilà ta base...
Ensuite tu remplis le content

<div class="article">
<img>
<div>txt</div>
</div>

 

[garancetosello]

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

<header/>
<main>
    <content></content>
    <aside/>
</main>
<footer/>

Alors stp, ne t'ennerve pas et explique moi

 

[-Romu-]

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

Dans un premier temps la structure !

ce que tu veux c'est ça :

---------------------------
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

/* =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 ?

 

[garancetosello]

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 !
Je pense avoir trouvé un bon code qui pourrait convenir.

<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>

 

[-Romu-]

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

section {
float: right;
width: 880px;
}

Ensuite, on va tricher un peu.
Après tout, on est dans l'informatique

le but étant d'obtenir ceci

------------------------------------
------------------  -----------------
img               | | txt
-------------------  -----------------
------------------------------------

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 :

.box {
width:570px;
margin:0 auto;
overflow:hidden;
}
.box img {
float:left
}
.box div {
float:right;
width:300px;
}

Tu auras une meilleur base