28173 sujets

CSS et mise en forme, CSS3

re-bonsoir,

En lisant mon titre vous allez tous m'envoyez à la FAQ et aux bases du css mais laissez moi vous expliquer d'abord.

Comme une URL vaut mieux qu'un long discours, voici plus ou moins le résultat que je veux obtenir. Je dis plus ou moins car ce site est fait avec des frames et je préfère m'en passer, ne fut-ce que parce que je peux pas vous donner le lien direct mais que je dois préciser que une fois que vous avez cliqué sur ce lien, vous devrez cliquer sur Sound Affects pour voir exactement oú je veux en venir.

Pour éviter les frames je me suis basé sur ce tuto (très bien fait) d'alsacreations. Le problème c'est que je ne veux pas que le contenu défile verticalement mais bien horizontalement. Un autre détail qui je crois à sn importance est que le contenu de cette pseudo frame sont des photos avec leur titre.

Jusqu'à présent je suis arriver à ça. C'est à dire que j'arrive pas a aligner les div horizontalement dans la div qui les contient.
En deux mots, la pseudo frame est un div (class .frame) qui contient les divs (class .foto) qui contiennent les photos et leur titre.

Un peu de code: la css des classes frame et foto:
.frame {
	margin-left: 180px; /* on place ce bloc à droite du bloc menu de 180px de large */
	overflow:auto;
	height: 550px;
	font-size: 14px;
}
.foto {
	float: left;
	display: inline;
	clear:both;
}
et le html:
<div class="frame">
  <br>
  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/11.jpg"><br>titulo</div>
  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/12.jpg"><br>titulo</div>
  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/13.jpg"><br>titulo</div>

etc...
Je mets pas tout pour pas surcharger mais si ous voulez toute la css elle est ici.

J'ai cru un moment que ce sujet allait tout me résoudre, mais malheureusement non Smiley decu . Dans d'autres forum j'ai lu des solutions avec des div spacer mais même po Smiley decu Smiley decu . Je m'en remets donc à l'élite du css francophone.

Je précise tout de suite que je trouve pas ça très pratique de se déployer horizontalement au lieu de verticalement, mais mon pote le veux comme ça, et c'est quand même son site donc c'est lui qui décide. Plus tard je ferais un petit JavaScript pour que la molette de la souris fasse défiler horizontalement.

Voila, j'espère m'avoir bien expliqué, n'avoir enfreint aucune règle et que vous allez pouvoir me donner les pistes qui me résoudront le problême en moins de deux.

bonne soirée
Modifié par ledave (29 Sep 2006 - 09:27)
Bonjour,

Je suis débutant et l'on a posté presque en même temps ...
Ton post m'interresse aussi.
Je doute que cela soit aussi simple mais le clear : both e signifie t-il pas que l'on veut rien a droite et gauche ? N'est ce pas là, la clef de ton problème ?

Milles excuses si ce n'est point la solution, les CSS c'est relativement frais pour moi.

almr13
salut almr13, et merci de t'intéresser à mon cas Smiley smile
en fait ce clear: both; je l'ai mis suite à la lecture du dernier post de ce sujet, pour rétablir l'équlibre. J'en suis au stade ou j'essaie tout ce qui me tombe sous la main.
Pratiquement, avec ou sans ça ne change rien Smiley decu .
Mais merci quand même.
ciao
la force des communautés d'entraides des forums m'impressione toujours autant!
almr13 tu dis que tu es débutant et que c'est sans doute pas ce que tu dis, mais ta remarque m'a fait réfléchir et j'ai donc investigué cette propriété clear. En lisant ceci:
a écrit :
La feuille de style ou css (cascading style sheets) clear permet de spécifier l'affichage de l'élément flottant par rapport à l'élément précèdent.

La feuille de style css clear semble liée à la feuille de style css float.

La feuille de style ou css clear peut prendre les valeurs de :
- none, l'élément sera affiché à côte de l'élément précèdent.
source: http://zonecss.free.fr/style_css/feuille_css_clear.html , j'ai changé un peu ma css et j'obtiens maintenant ceci (en attribuant un width de 1000px), ce qui est un progrès mais c'est pas encore une réussite vu que j'ai perdu l'effet de pseudo-frame, ya plus l'ascenceur horizontal.
Déjà merci pour le coup de main et si tu penses à autre chose n'hésites pas Smiley cligne
bonne nuit
Modérateur
bonjour,

en fait tu as 2 choses dans ton .frame qui t'empeche d'obtenir le resulatat voulu:
div et br , qui sont des balises de type block, provoquant donc un retour a la ligne automatique.
supprime les br , passe les div en display:inline; le frame avec un white-space:nowrap; et tu devrais avoir un scroll horyzontal automatique.

pour les legendes , tu peut les replacer avec un absolute en prenant le div en reference de positionement et en plaçant les textes dans un <span> ou <p> par exemple.

++

<edit> en enlevant aussi le float a .foto Smiley smile
Modifié par gcyrillus (28 Sep 2006 - 01:16)
Bonjour,

A part en table ça va être dur, on peut éventuellement y arriver mais il ne sera pas possible de positionner tes titres de photo en texte, il faudra les inclures dans la photo (graphiquement) ou hors de la photo mais en en img. Si la contrainte n'est pas trop importante pour toi, ça se fait.
Salut, ton affaire ne peut pas du tout marcher car tu ne comprends pas le fonctionnement du déclenchement du scrolling par l'overflow.

Il faut deux choses :

1. Un conteneur dimensionné et doté de la propriété overflow:auto;
2. un contenu de ce conteneur également dimensionné s'il s'agit de largeur. Ou ayant une dimension intrinsèque. Et dont cette dimension excède celle de son conteneur.

Dans ton cas c'est très simple à régler. Il suffit de comprendre que ton #frame n'a toujours pas de contenu dimensionné plus large que son conteneur.

Donc, et en enlevant pour l'exemple le code autre que celui concernant ta pseudo frame (tel que c'est stylé actuellement ça va te poser des problèmes... Affaire à suivre) le code suivant correspondra assez bien à ce que tu cherche :

html

<div id="frame"><!-- Conteneur support de l'overflow... Il doit pour avoir un scroll être obligatoirement dimensionné !!! -->

  <br>

  <div id="sub_frame"><!-- Contenu du conteneur !!! c'est lui qu'on va pouvoir dimensionné de manière excessive-->

  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/11.jpg"><br>titulo</div>

  

  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/12.jpg"><br>titulo</div>

  

  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/11.jpg"><br>titulo</div>

</div>

</div>


css

#frame {
width:80%;/* Conteneur dimensionné à 80% de la largeur du <body> */
overflow:auto;/* Tout contenu de dimension supérieur déclenchera l'apparition de barre(s) de défilement */
height: 550px;
font-size: 14px;
}
#sub_frame {
width:5000px;/* Contenu direct de #frame d'une largeur supérieure à celle de #frame */
}
.foto {
float: left;
}


Deux remarques :
. Vire le overflow:hidden; sur body... C'est une horreur.
. Clear:none; ne sert à rien, c'est une valeur par défaut.

<edit>
Petit exemple en ligne :
http://clb56.freezee.org/galerie_horizontale.html
</edit>
Modifié par clb56 (28 Sep 2006 - 10:27)
waw, merci beaucoup à tous. On se sent vraiment en bonne compagnie chez vous Smiley biggrin .
gcyrillus: avant de venir au boulot j'ai appliqué ce que tu me conseilles et ça marchait pas mal mais c'est pas encore top. Par exemple ça marche po sur ce-que-micro$soft-ose-appeler-browser Smiley decu (c'est la version qui est pour l'instant en ligne).

ghost: c'est sur qu'avec une table c'est nettement plus facile, mais je ne cherche pas la facilité, au contraire, je préfère apprendre des trucs nouveaux.

clb56: je prends très bonne note de toutes tes remarques. D'après l'exemple que tu donnes c'est exactement ce que je veux! Là je suis au boulot, mais dès que le boss à le dos tourné ou au pire ce soir je l'applique sur le site. Déjà un énorme merci pour tes conseils.

bonne journée à tous.
david
Bonjour,

J'ai retrouvé un bout de code qui ressemble je crois à ce que tu cherchais, si ça t'inspire ... 'je savais bien que je l'avais fait une foi !!)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>test ghost</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

#gauche{
width: 150px;
float: left;
}

.conteneur{
width: 850px;
height: 500px;
border: 1px solid #000;
background: #627dfe;
overflow: auto;
}

.conteneur2{
width: 5000px;
border: 1px solid #000;
background: #627dfe;
}
.photo{
width:400px;
height: 450px;
margin-left: 5px;
margin-right: 5px;
float: left;
}


</style>
</head>
<body>
<div id="gauche">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . </p>
</div>

<div class="conteneur">
<div class="conteneur2">

<div class="photo"><img src="photo.jpg"  alt="" /><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p></div>

<div class="photo"><img src="photo.jpg"  alt="" /><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p></div>

<div class="photo"><img src="photo.jpg"  alt="" /><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p></div>

</div></div>

</body>
</html>


Je l'ai juste remis à plat vite fait c'est à tester ...

Bon courage

<edit> j'arrive après la bataille, tu avais déjà la solution !! </edit>
Modifié par ghost (28 Sep 2006 - 14:42)
et bien ça commence à prendre bonne forme Smiley smile .
Pour qu'on sache de quoi on parle, un petit lien.
Ce que vous voyez c'est la solution de ghost, comme il m'avait inclus la colonne de gauche c'était plus facile à mettre en place.
Ça marche nickel sur IE et FF, ça craint sur Opera.
Mon pote est sur mac, il me dira ce que ça donne sur cet OS.
Si qqun a Konqueror sous la main qu'il me dise si ça le fait, par curiosité.

J'ai essayé rapidement de faire un JS pour redéfinir le width de la div .frame pour qu'il occupe tout l'écran mais jusqu'ici ça ne donne rien. Mais je crois qu'à part ce détail (je pourrais dormir même si j'y arrive pas Smiley ravi ) c'est bon.

Si personne n'a de proposition quant à une ocupation entière de la page et que j'ai la confirmation que ça donne aussi bien sur mac, je cloturerai ce sujet.

Déjà un grand merci à tous pour votre aide. Bonne soirée.
david
Modifié par ledave (28 Sep 2006 - 22:28)
Bonsoir ledave,

Je sais que tu n'es pas venu pour ça, et que mon commentaire n'aura que très probablement peu d'importance dans le résultat que tu désires obtenir, mais je tenais à te conseiller de reprendre certaines (la plupart?) bases de l'HTML et, pourquoi pas, d'entamer une progression intelligente vers l'XHTML.

En jettant un bref coup d'oeil à ton code html (qui, par ailleurs, n'est pas fermé) on s'aperçoit par certaines aberrations que tu te heurtes à des incompréhensions et difficultés parfois basiques parce que justement, tes bases sont faibles; aussi, je te conseillerais vivement de réviser tes notions d'(x?)html, tu ne le regretteras pas Smiley cligne
salut Benjamin D.C.,
Je ne suis pas venu pour ça, oui et non. Je crois que j'aurais ouvert un post disant, "aller les gars, vous m'expliquer le XHTML", on m'envoyait à la FAQ et tutos illico. Par contre je suis là pour apprendre, donc je suis preneur de toutes remarques (par rapport à mon code hein, le premier qui parle de ma coupe de cheveux je le vire, lol Smiley biggol ). En effet j'ai le résultat que je cherchais, mais c'est pas pour ça que je peux pas arranger d'autres points problématiques.

Je sais bien que mon niveau en XHTML n'est pas très brillant. C'est dommage, je suis le premier à le dire.
Je travaille comme programmeur php, mon créneau c'est plutôt ce qui se passe derrière le rideau, ce qu'on ne voit pas mais qui fait que ça marche. Comme "je bosse dans le web", des gens de temps en temps me demandent de leur faire un site. Si c'est vraiment un bon pote, j'accepte. Comme c'est le cas pour ce site. Je prends justement ça comme une occasion de m'améliorer et d'apprendre.

Je suis d'accord avec toi, je ferais bien d'entamer une progression intelligente vers l'XHTML, mais il me manque le temps et l'intérêt. Ne me mal-interprète pas, je pense que tout le monde sort gagnant de respecter des standards, mais c'est juste que la mise en page ça me casse les c******* Smiley lol . Je répète que je trouve ta remarque tout-à-fait juste et pertinente, mais avant de me plonger dans l'XHTML je veux apprendre Ruby, Java et me débrouiller avec Debian. Une question d'intérêt personel

Si tu veux bien, je serais très intéressé que tu me pointes les aberrations dans ces 50 petites lignes de code, juste pour m'ouvrir les yeux. Et je t'avoue que je ne comprends pas ce que tu veux dire par
a écrit :
ton code html n'est pas fermé
...
Bonne nuit
Bonjour à tous,

Au risque de passer pour la deuxième couche, je rejoins un peu Benjamin.

Je ne peux m'empêcher d'exprimer, après ce post, ce que j'ai souvent envie de dire (de crier ?) aux développeurs php, ceux qui m'offrent la possibilité d'aller beaucoup plus loin que ce que je sais faire : de la mise en page.

J'ai passé l'après-midi à trifouiller dans du php pour obtenir une page générée propre...

Je suis une nouille en php. J'apprends sur le tas, non pas pour en faire mais pour y retrouver mes petites balises html bien aimées et les mettre où je veux et comme je veux, nom d'une pipe !

Puisque c'est moi qui gère la mise en page !

Le script en question était bourré d'incohérences, des styles incorporés, du code tellement imbriqué que l'indentation (générée) en devenait catastrophique ...

Loin de moi l'idée de critiquer l'auteur de ce script, celui-ci m'ayant offert généreusement et bénévolement son savoir-faire. Mais en retour, j'aurais envie de lui consacrer 2h de mon temps pour lui apprendre à mettre du html dans son code ... voire lui suggérer de s'en abstenir !

A ce stade, il ne s'agit pas de faire de la mise en page mais d'utiliser les balises html à bon essien d'une part (respect de la sémantique qui est la base du html) et d' obtenir un code généré compréhensible pour pouvoir appréhender une mise en page css dans de bonnes conditions.

Tous les scripts php que je croise sont correctement indentés, il ne manque pas un seul "?>", voir même un ";" : normal, sans le ";", cela ne marche pas !

L'html est beaucoup plus sympa : si une balise est mal fermée, il cause malgré tout ... mais le résultat n'est pas forcément comme on l'aurait souhaité...

La mise en page, c'est le problème du css et éventuellement de ceux qui aiment cela ...

Mais elle ne peut être envisager sereinement sans un balisage propre et conforme et l'objectif à atteindre n'est vraiment pas compliqué ...
En revanche, c'est beaucoup plus fastidieux d'intervenir dans du code php pour en extirper les éléments responsables du rendu, justement ...

Comment un spécialiste d'un langage aussi exigeant, aussi fourni et dont la syntaxe est aussi complexe pour le néophyte (la concaténation de chaîne : bonjour !) peut-il avoir peur d'investir une heure dans l'apprentissage d'html ?

A coupler avec l'excellent billet de la semaine sur l'art et la manière de fermer ses balises en html!

Voilà, je l'ai dit : cela va mieux !
Smiley biggrin

Et j'ai osé le dire parce que j'ai le sentiment que mon interlocuteur est quelqu'un d'ouvert...
Smiley cligne Smiley biggrin
Modifié par Vero (29 Sep 2006 - 02:38)
Modérateur
salut ,

en reprenanat rapidos ton code avec mon idée initial , + bidouille pour Ie a passer en commentaire conditionnel , j'arrive a ça :
<!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><title>Rafael Suñen's website</title>
<style type="text/css">/* Edited with EditCSS */
/*html {height:100%;width:100%;overflow:hidden;}*/
body {
	margin: 0px;
	padding:0px;
	overflow:hidden;
	width:100%;
	height: 100%;
	font-family: verdana, arial, sans-serif;
}
.conteneur {
	/*white-space: nowrap;*/
	
}
.gauche {
	position: absolute;
	left: 0;
	z-index:1;
	width: 180px;
	height: 535px;
	background:#fff url(gauche.gif);
}
.copyright {
	position: absolute;
	bottom: 1px;
	left: 0;
}
.frame {
	margin-left: 180px; /*  on place ce bloc &#65533; droite du bloc menu de 180px de large */
	overflow:auto;
	height: 550px;
	font-size: 14px;
	white-space:nowrap;
/* IE */
	_margin-left:0px;
	_width:100%;
	_position:absolute;

}
.foto {

}

/* class en plus pour IE */
.prem {_border-left:180px solid white;}

.frame div {display:inline;position:relative;}
.frame div span {position:absolute;margin-top:450px;margin-left:-650px;width:650px;background:#eee}
a img {
	border: 0px;
}

</style></head><body>
<div class="conteneur">
<div class="gauche">
	<a href="http://www.rafaelsunen.com/index.html">
<img  src="http://www.rafaelsunen.com/webparts/rafaelsunenhome.gif" alt="Rafael Suñen's Home" title="Rafael Suñen's Home"></a>
	<br>
	<a href="http://www.rafaelsunen.com/nowandthen.html"><img 

src="http://www.rafaelsunen.com/webparts/botones/nowandthen2.gif" alt="now and then" title="now and then" 

onmouseover="Permut(this, 'on');" onmouseout="Permut(this, 'off');"></a><br>
	<a href="http://www.rafaelsunen.com/spell.html"><img src="http://www.rafaelsunen.com/webparts/botones/spell1.gif" 

alt="spell" title="spell" onmouseover="Permut(this, 'on');" onmouseout="Permut(this, 'off');"></a><br>
	<a href="http://www.rafaelsunen.com/blinkofaneye.html"><img 

src="http://www.rafaelsunen.com/webparts/botones/blinkofaneye1.gif" alt="blink of an eye" title="blink of an eye" 

onmouseover="Permut(this, 'on');" onmouseout="Permut(this, 'off');"></a><br>
	<a href="http://www.rafaelsunen.com/humanjukebox.html"><img 

src="http://www.rafaelsunen.com/webparts/botones/humanjukebox1.gif" alt="human jukebox" title="human jukebox" 

onmouseover="Permut(this, 'on');" onmouseout="Permut(this, 'off');"></a><br>
	<a href="http://www.rafaelsunen.com/inthere.html"><img src="http://www.rafaelsunen.com/webparts/botones/inthere1.gif" 

alt="in there" title="in there" onmouseover="Permut(this, 'on');" onmouseout="Permut(this, 'off');"></a>
	<br>
	<a href="mailto:rafa@rafaelsunen.com"><img src="http://www.rafaelsunen.com/webparts/contact.gif" alt="Enviame un 

email" title="Enviame un email"></a>
	<br>
	<a href="http://rafaelsunen.blogspot.com/"><img src="http://www.rafaelsunen.com/webparts/mypatioblog.gif" alt="Rafael 

Suñen's Blog" title="Rafael Suñen's Blog"></a>
	<div class="copyright"><img src="http://www.rafaelsunen.com/webparts/esquinaizqbaja.gif" alt="copyright" 

title="copyright"></div>
</div>
<div class="frame">  
  	<div class="foto prem"><img src="http://www.rafaelsunen.com/images/1NowAndThen/11.jpg" class="prem" 

/><span>titulo</span></div> 
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/12.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/13.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/14.jpg" /><span>titulo</span></div>
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/15.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/16.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/17.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/18.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/19.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/110.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/111.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/112.jpg" /><span>titulo</span></div>  
  	<div class="foto"><img src="http://www.rafaelsunen.com/images/1NowAndThen/113.jpg" /><span>titulo</span></div>
  
</div>
<!--<div class="bas">Cette partie basse reste fixe</div>-->
</div>
</body></html>



pour ton histoire de php , blabla , tu aurais du t'abstenir peut-etre ?, moi je suis cuisinier et le css "validatoriser" j'en met pas dans ma soupe ! ...

++
salut Vero,
ravi que tu te fasses du bien et t'inquiête, ya pas de souci, je suis assez ouvert. En plus ya rien de méchant ni de personnel dans ce que tu dis: au contraire, je suis d'accord avec presque tout (tout à part que le php est exigeant et complexe...mais j'arrive à la conclusion alors que je n'en suis qu'à l'intro Smiley cligne ).

Concernant ton lien, "le xhtml en 1 heure" (j'avoue que le nom m'a fait marrer Smiley biggol ), ça me fait peur: à part la balise doctype, xmls, etc... que je n'ai pas mis et j'y avais même pas penser, je crois pourtant savoir faire un lien ou insérer une image. D'accord j'ai pas mis de alt mais c'est juste parce que je suis encore en développement, ça viendra après.
Ou alors il ya des trucs tellements affreux dans mon code et personne ne veut me les dire... Smiley bawling .

La phrase que j'ai préféré dans ton post:
a écrit :
La mise en page, c'est le problème du css et éventuellement de ceux qui aiment cela ...
Entièrement d'accord, et vice-versa: la programation orientée objet c'est pour les nerds qui code jusqu'aux petites heures du matin et qui abusent du café. On devrait travailler ensemble, tu me ferais une superbe structure xhtml et moi j'y mettrais mon php dedans Smiley lol

amitiés
gcyrillus a écrit :
... pour ton histoire de php , blabla , tu aurais du t'abstenir peut-etre ?, moi je suis cuisinier et le css "validatoriser" j'en met pas dans ma soupe ! ...

++


Bonjour gcyrillus Smiley smile

Peux-tu préciser ta pensée et nous dire à qui elle s'adresse, stp ? J'ai peur qu'elle soit mal interprétée... En effet, nous sommes sur un forum dédié aux standards du Web, donc la validation du code est importante Smiley cligne
Modérateur
salut,

justement , l'interet de faire aussi un code valide derriere/produits/afficher par un programme php a toute sont importance .... c'est bien la la raison d'etre de ces forums ?
<hors-sujet >
a écrit :
heu... ça veut dire quoi "validatoriser"?

:) , ne sert a rien car impossible de "doctyper" une soupe pour la soupiere !
.... il devait etre bien tard Smiley smile

</hs>
++
Modifié par gcyrillus (29 Sep 2006 - 15:45)