28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaite créer ceci en css:
http://kaz.bitumas.com/splash.jpg

j'ai bien pensé à faire une liste et mettre les <li> en position:absolute mais cela ne marche pas...j'ai essayé plein de trucs...en vain.
Merci par avance de votre aide.
Modifié par hophop (21 Apr 2009 - 16:30)
Salut,

En fait la question c'est plutôt : souhaites-tu gérer le positionnement à la mano ou veux-tu un truc automatique. Dans les deux cas tu as un inconvénient. À toi d'évaluer.

POSITIONNEMENT MANUEL
Le problème est que tu dois fournir le left et le top de chaque image dans la CSS :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css" media="screen">
        div {
            width:200px;
            height:200px;
            position:absolute;
        }
        #a {background-color:red; left:10px ; top:10px;}
        #b {background-color:blue; left:20px; top:20px;}
        #c {background-color:green; left:30px; top:30px;}
        #d {background-color:pink; left:40px; top:40px;}
        #e {background-color:orange; left:50px; top:50px;}
        #f {background-color:yellow; left:60px; top:60px;}
        #g {background-color:brown; left:70px; top:70px;}
    </style>
</head>

<body>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>

</body>
  
</html>


POSITIONNEMENT AUTOMATIQUE
Le problème est que le HTML ne sera pas sémantique :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css" media="screen">
        div {
            width:200px;
            height:200px;
            position:absolute;
            left:10px;
            top:10px;
        }
        #a {background-color:red}
        #b {background-color:blue}
        #c {background-color:green}
        #d {background-color:pink}
        #e {background-color:orange}
        #f {background-color:yellow}
        #g {background-color:brown}
    </style>
</head>

<body>

<div id="a">
    <div id="b">
        <div id="c">
            <div id="d">
                <div id="e">
                    <div id="f">
                        <div id="g">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
  
</html>


PS : J'ai utilisé des div pour l'exemple. Évidemment ça marche avec les éléments que tu veux (li, img, p, etc.)
Modifié par marcv (21 Apr 2009 - 16:15)
Bien cool c'est parfait, c'est exactement ce que je recherchais...un grand merci pour cette solution qui était tellement simple que je ne la voyais pas!
(Bien entendu c'était pour un positionnement automatique des images avec du php.)
encore merci pour tout Smiley biggrin
Par curiosité, quelle utilité ? Une balise <img> ou un background-image avec ce "motif" n'aurait pas été envisageable ?
bonjour,

Je te réponds un peu tard...En fait c'est pour la création d'un système de menus/fiches. Mais c'est encore à perfectionner. Smiley langue