Problème d'affichage de contenu

WRInaute discret
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
 
WRInaute impliqué
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.
 
WRInaute discret
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
 
WRInaute occasionnel
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>
 
WRInaute discret
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
 
WRInaute occasionnel
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>
 
WRInaute discret
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 :(
 
WRInaute occasionnel
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 ?
 
WRInaute discret
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>
 
WRInaute occasionnel
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 ;)
 
Discussions similaires
Haut