Presentation "tableless" avec CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Presentation "tableless" avec CSS

Joel F

Real men use unique_ptr

Voila j'ai lu les divers techniques et articles sur ce sujets mais j'ai un peu de mal.

basiquement, mon site se presente ainsi :

1 banniére titre de 800x200
3 colonnes de contenu : 1 menu à droite, 1 news list au milieu, 1 menua gauche.
1 banniére 800*50 au fond de la page.

J'arrive à possitioner le <div> qui contient la 1e banniére avec un position:absolute ... mais pour le reste j'ai un probleme.

Chaque element des menus de droite et gauche sont générés par une fonction PHP qui va lire dans ma bdd mySQL le titre du menu et le nom du ficheir à inclure au sein du menu.

Comment determiner proprement la taille de ce menu et donc la position du <div> du menu suivant ??? Dois je utiliser position:float ??

Désolé de reposer cette question si elle fut aborder auparavant.
merci d'avance.

Publicité

Hermes le Messager

Breton Quiétiste

Le plus simple c'est ça :

Code :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>test</title>
<link href="css/test.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="global">
<div class="menu-gauche">tata</div>
<div class="contenu">
toto<br />
toto<br />
toto<br />
toto<br />
toto<br />
toto<br />
toto<br />
toto<br />
toto
</div>
<div class="menu-droite">tata</div>
</div>
</body>
</html>

et pour les css :

Code :

html,body {
margin : 0px;
padding : 0px;
text-align : center;
}
.global {
margin : 0px auto 0px auto;
width : 760px;
background-color : Olive;
text-align : left;
}
.menu-gauche {
position : absolute;
margin : 0px 0px 0px 0px;
background-color : Lime;
width : 100px;
}
.contenu {
position : absolute;
margin : 0px 0px 0px 100px;
background-color : Aqua;
width : 560px;
}
.menu-droite {
position : absolute;
margin : 0px 0px 0px 660px;
background-color : Lime;
width : 100px;
}

Message édité par Hermes le Messager le 28-10-2003 à 23:20:55

gm_superstar

Appelez-moi Super

http://www.glish.com/css/7.asp

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Joel F

Real men use unique_ptr

:jap: merci à tous c'est nickel

question subsidiaire :
y a t il des contr-indications à utiliser des <div> imbriqués ?

Message édité par Joel F le 29-10-2003 à 08:12:50

meerthyl

Seulement si tu en rajoutes inutilement.
Après, les puristes peuvent râler pour la sémantique, mais tant que tu n'en abuses pas, il n'y a pas de problème.

Ah oui, sinon, évite simplement les <div> quand une autre balise a plus sa place : j'ai déjà vu quelqu'un mettre des <div>Titre</div> au lieu de <h2>Titre</h2> et tout styler comme une brute.

impulse

Citation :

Ah oui, sinon, évite simplement les <div> quand une autre balise a plus sa place : j'ai déjà vu quelqu'un mettre des <div>Titre</div> au lieu de <h2>Titre</h2> et tout styler comme une brute.

Faut pas?
Faudrait peut etre que je fasse le menage dans mes DIV alors moi...

Joel F

Real men use unique_ptr

Meerthyl a écrit :

Seulement si tu en rajoutes inutilement.
Après, les puristes peuvent râler pour la sémantique, mais tant que tu n'en abuses pas, il n'y a pas de problème.

En fait je pensais avoir un div pour la partie centrale de mon layout et géénré des div dans celui ci via PHP, chaque div contenant une news.

Code :

<div class="contents>
<div class="news">News 1</div>
<div class="news">News 2</div>
<div class="news">News 3</div>
</div>

meerthyl

@impule : nan faut pas !

@Joel : Bin ça dépend de ce que tu as comme news : le <div> n'est pas gênant si par exemple il te sert à regrouper plusieurs balises composant la news.

Par exemple :

Code :

<div class="news">
<h3>titre de la news</h3>
<p>Bla bla bla bla bla</p>
<a href="...">Un lien à la fin</a>
</div>

C'est surtout une question de sémantique : le <div> n'en a pas, il sert à regrouper "logiquement".
Enfin c'est comme ça que je le vois.

Joel F

Real men use unique_ptr

Meerthyl a écrit :

@Joel : Bin ça dépend de ce que tu as comme news : le <div> n'est pas gênant si par exemple il te sert à regrouper plusieurs balises composant la news.

c'est ce que je comptais faire, avec un style pour le h3 et le paragraphe

Code :

<div class="news">
<h3 class="newstitle">titre de la news</h3>
<p class="newscontent">Bla bla bla bla bla</p>
<a href="...">Un lien à la fin</a>
</div>

meerthyl

Ca va aller tout seul alors.

Publicité

Joel F

Real men use unique_ptr

et oui ca amrche nickel
des que le site est uplaodez je vous montre ca

FORUM HardWare.fr

Programmation

HTML/CSS

Presentation "tableless" avec CSS

Sujets relatifs
CSS pas backward compatible de IE5 à IE6 ??	[CSS] faire un hover dans une balise style... [ - Job's Done - ]
[CSS] Heritage ou un truc dans le genre... :D	[HTML/CSS] width="100%" sous IE et Mozilla...
désactiver la modification du code HTML et CSS avec ASP.NET	[HTML/CSS] petit probleme de transparence...
[HTML/CSS] Besoin d'avis technique sur mon site presque fini	[CSS] Centrer un tableau ?!
[CSS] definir ses propres couleurs ....	CSS : je ne trouve pas la commande italic
Plus de sujets relatifs à : Presentation "tableless" avec CSS

Page générée en 0.137 secondes