CSS sans tableaux dans les feuilles html

[marcelman]

Bonjour à tous,

Je suis en train de revoir mon site en y incluant des CSS et en virant les tableaux qui ont l'avantage de la simplicité pour les béotiens (j'en était il y a peu), mais qui rajoutent des lignes de code de façon parfois grotesque.

Petit problème : si je veux, dans une page, avoir des éléments images qui s'affichent proprement les uns en dessous des autres, je suis obligé d'insérer un espaceur ou des lignes balisées par des <p> </p>.

Ce qui m'ennnuie un peu.

Y a-t-il moyen de positionner ces éléments en colonnes et faire en sorte qu'ils se positionnnent les uns en dessous des autres gentiment ?

Pour le code et l'exemple, voir la page sans tableau dudit site

Pour info, les adresses des feuilles CSS sont les suivantes contenu.css et structure.

Merci pour vos réponses.

Autre chose, le menu déroulant que je suis obligé de répéter dans chaque page (c'est lourd !). Y a-t-il moyen de le mutualiser aussi comme un CSS ?

[slender]

Petit problème : si je veux, dans une page, avoir des éléments images qui s'affichent proprement les uns en dessous des autres, je suis obligé d'insérer un espaceur ou des lignes balisées par des <p> </p>.

Y a-t-il moyen de positionner ces éléments en colonnes et faire en sorte qu'ils se positionnnent les uns en dessous des autres gentiment ?

Bonsoir,

tu peux éventuellement lire avec bénéfice cet tuto: Les vignettes : une utilisation du spacer et des flottantes. Normalement il devrait répondre à ton besoin.

Encore une chose: si ta page est lisible sous IE, elle l'est beaucoup moins en revanche sous Firefox. Il faudrait que tu adaptes et remanies ton CSS de manière à ce que les deux navigateurs offrent des aspects similaires (17% des utilisateurs naviguent sous Firefox... )

slender

[marcelman]

Bien vu, je n'avais pas encore fait le test sous firefox. Bon là j'ai un bébé qui vient de naître, alors j'aurais moins de temps, mais je vais aller voir le tuto dont tu parles rapidement.

Pour le reste, des éléments de réponses ?

[Dudu]

Salut

Petit problème : si je veux, dans une page, avoir des éléments images qui s'affichent proprement les uns en dessous des autres, je suis obligé d'insérer un espaceur ou des lignes balisées par des <p> </p>.

Ce qui m'ennnuie un peu.

Obligé ? Ne te sens pas obligé de bousiller ainsi la sacro-sainte sémantique

Très simplement, tu as des propriétés CSS telles que padding ou margin qui te permettent de gérer les marges intérieures et extérieures (respectivement) d'un élement donné.

Au vu de ton code, tu aurais à mon avis intérêt à morceler ta page en 3 ou 4 <div> fondamentaux (pas besoin d'en mettre des tonnes), d'assigner à des <div> des noms bien précis via l'attribut id et de régir ta mise en page via CSS ainsi.

Cela t'éviterait encore quelques gros paragraphes de code inutile comme tout ce Javascript juste pour faire un effet de survol (1 ligne de CSS), ou les atroces <font> qui traînent par-ci par-là. Alléger son code le rend plus lisible

Pour ton histoire d'alignement des images, je te conseille également le lien donné par slender. Et j'y rajoute ces deux-là:

Practical CSS Layout Tips, Tricks, & Techniques

Floating Thumbnails

Et puis en passant:

- sous Safari aussi, l'affichage est franchement atroce

- félicitations aux parents

[marcelman]

OK,

J'ai transpiré, mais j'ai quelque chose qui commence à ressembler à une page sans tableau et clean. Le tuto indiqué par slender est tout-à-fait bien, pour peu qu'on prenne la peine de tout remettre à plat sans vouloir partir de ce qu'on a créé avant.

Pour les copains qui rameraient comme moi, voici les éléments essentiels du code :

Dans la CSS

.colonne1{position:absolute;left:0;width:154;height:500;top:0}
.colonne2{position:absolute;left:154;width:650;top:0}

.flottante {
  background-color: #ccccff;
  border: 0px;
  margin: 0 0 0 0;
  float: left;
  text-align: center;
}

.titres {
  width: 650;
  height:40;
  margin:0 0 0 154;
}
.spacer {
  clear: both;
  height:10;
}
.iframe {
  width: 620;
  height:400;
  overflow:auto;
  margin:0 0 0 154;
  padding:20px;
}
.conteneur {
  width: 650;
  height:130;
  margin:0 0 0 154;
}

Et pour le html

<div class="colonne1">
<div class="menu">
<ul id="nav>
bla bla
</ul>
</div>
</div>
<div class="colonne2">
<div class="conteneur">
bla bla
</div>
  <div class="titres">
blabla
</div>
<div class="iframe">
<p class="flottantes">bli bli</p>
</div>

Ca a l'air un peu usine à gaz vu comme ça. Mais ça me permet de retrouver exactement la même forme que sur le site existant avec moins de lignes de code et surtout, plus de tableaux casse-pied. Par ailleurs, ça me permet aussi d'économiser pas mal de lignes de spec sur ma page CSS et donc de moins me demander dans quelle classe je dois ranger les éléments constitutifs de ma page. Pour des sites à composante graphique importante, c'est bien. Et surtout, IE, FF et Opéra affichent sensiblement la même chose. Pour Safari, je n'ai pas encore vérifié.

Dès que j'ai du temps, je m'y remets pour mettre tout ça en ligne.

Définitivement, j'ai bien fait de recommander ce forum et openweb sur mon site.

A +

[captain_torche]

D'après ce que j'ai pu constater (de manière générale), le rendu Safari est sensiblement identique à celui d'Opera.

[marcelman]

Y a-t-il moyen de télécharger Safari pour PC ? Que je puisse tester mes pages dessus également ?

[marcelman]

Oups ! , erreur dans le code CSS : colonne2 a une propriété de positionnement left à 0 et non à 154 comme indiqué.

Ne sachant pas comment modifier mon message déjà posté, voici la correction.

[Dudu]

D'après ce que j'ai pu constater (de manière générale), le rendu Safari est sensiblement identique à celui d'Opera.

J'ai fait le même constat également. C'est d'ailleurs pour ça que, lorsque je croise un ami sur PC qui a IE, j'ai plus tendance à lui installer Opera que le très médiatique Firefox.

Y a-t-il moyen de télécharger Safari pour PC ? Que je puisse tester mes pages dessus également ?

Non: Safari est un pur produit Apple qui n'existe que sur Mac OS; il n'a pas été porté sur Windows comme l'ont été iTunes ou QuickTime.

Pour tester, tu peux néanmoins utiliser un site de capture écran comme BrowserShots, ou Snugtech devenu BrowsrCamp (et devenu payant aussi )

PS: Les messages ne sont modifiables que dans un certain laps de temps après écriture. Rien d'étonnant à ce que tu ne puisses plus modifier ton premier message