Site perso - pb layout div

**n1n0x** · 10/06/2012, 11h03

Bonjour.

J'ai besoin de vous pour y voir plus clair sur les soucis de mon site web, qui est très difficile à maintenir et faire évoluer à ma guise. J'avoue utiliser CSS façon "google, copy/paste", donc forcément ca n'aide pas au final.

M'enfin voilà, si vous pouviez m'indiquer pourquoi c'est moche :

http://opb-photography.com/HomeB.php?page=1

Alors que ça devrait afficher les miniatures en horizontal, l'une après l'autre, dans la zone de contenu central de mon site, puis la photo en grand en dessous, centré également.

Pour commencer, voici ma page HomeB.php , du moins, son ossature, ainsi que le fichier default.css qui va avec :

HomeB.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
<head> 
...
</head>
<body>
 
<div id="contentWrapper">
 
              <div id="leftSidebar" class="medium">
                   // MENU DU SITE, commençant par le titre "OPB Photography"
              </div>
 
 
             <div id="mainContent">
             <div id="rightSidebar" align="justify">
                  // contenu affiché sur la marge de droite
             </div>
                  // contenu central du site (séries photos)
             </div>
 
</div>

default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
#contentWrapper{
	position:relative;
	top:30px;
	left:50px;
}
#leftSidebar {
	position:absolute;
	width:200px;
}
#mainContent {
	position:absolute;
	width:800px;
	left: 250px;
	top:60px;
 
}
#mainContent img {
	height:inherit;
}
#rightSidebar {
	position:absolute;
	width:200px;
	right: 100px;
}

Et le css pour la galerie de photo avec miniatures qui posent problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
div#galerie
{
  width: 410px ;
  background: none ;
  border: none ;
  padding: 15px ;
  margin: 15px 30px ;
  text-align: center ;
  font: 0.9em Georgia, serif ;
}
 
ul#galerie_mini
{
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;
}
 
ul#galerie_mini li
{
  float: left ;
}
 
ul#galerie_mini li a img
{
  margin: 2px 1px ;
  border: 1px solid #dcb ;
}
 
dl#photo
{
  clear: both ;
  margin: 0 auto ;
}
 
dl#photo dt
{
  font: italic 2.5em/1.5em Georgia, serif ;
  color: #dcb ;
}
 
dl#photo dd
{
  margin: 0 ;
}
 
dl#photo img
{
  border: 1px solid #dcb ;
}

Je pense que mon problème vient de mes contraintes définies dans le default.css, notamment les width et height;
En fait dans l'idée pour mon site web, je voulais que personne ne soit discriminé par la taille d'un petit écran (étant moi-même sur macbook 15", c'est pas énorme), et en même temps, que le design du site ne varie pas lorsque l'on étirait ou diminuait la page du navigateur.

D'où les tailles fixes. Mais c'est sans doute une bêtise...

Je précise même qu'au tout début, l'idée était de positionner les images en défilement horizontal et non vertical, avec le "calque" de visualisation de l'image qui passerait en dessous des marges (et donc du fond blanc de celles-ci) de part et d'autre du contenu central, cad de leftSidebar , et de rightSidebar.

http://opb-photography.com/Home.php?page=1

Malheureusement là encore, les images se sont mises l'une sous l'autre, alors que dans le html je les mets bien en fil indienne, sans saut de ligne: <img />   <img /> ....

Merci pour votre aide !

**n1n0x** · 10/06/2012, 19h39

Bon, je vois que mon premier message est trop dense pour que quelqu'un ne me vienne en aide.

Alors étape par étape, j'aimerais savoir, dans mon cas, comment vous feriez pour agencer les photos vignettes - arborescence html/css suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="galerie">
  <ul id="galerie_mini">
    <li>  <IMG>

pour que cette liste de vignettes soit agencée horizontalement, l'une à la suite de l'autre, jusqu'à ce que la ligne soit complète, puis passage en dessous pour la suite...

Sachant que le code ci-dessus, est lui-même englobé dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="mainContent">    
                       // ...( ici quoi )
</div>

défini dans mon fichier default.css , comme tel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#mainContent {
	position:absolute;
	width:800px;
	left: 250px;
	top:60px;
 
}

MERCI !!

**n1n0x** · 10/06/2012, 20h35

SVP un peu d'aide par ici ....

J'en suis là :

http://opb-photography.com/HomeB.php?page=3

Le positionnement des photos miniatures en verticale peut me convenir finalement, si l'on m'explique par la suite comment faire des boutons sympas (des flèches haut / bas) pour faire défiler le bandeau.

Ensuite, je veux que lorsque le visiteur clique sur une des photos, celle-ci s'affiche en version plus grande dans le vide du milieu de la page, en alignement avec la bordure haute du bandeau des vignettes pour le coin supérieur.

Ici une SCREENSHOT de l'état actuellement sous Firefox, avec par-dessus dessiné ce que je souhaiterais :

http://tinyurl.com/d996rkq

--------------

Voici le code CSS pour les vignettes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
div#galerie
{
  position: 0% 0%;
 
  background: none ;
  border: none ;
  padding: 0 ;
  margin: 0 ;
  text-align: center ;
  font: 0.9em Georgia, serif ;
}
 
ul#galerie_mini
{
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;
  position: 0% 0%;
}
 
ul#galerie_mini li
{
  float: none;
}
 
ul#galerie_mini li a img
{
  margin: 0;
  border: 1px solid black ;
}
 
dl#photo
{
  clear: both ;
  padding-top: 5px;
  margin: 0 auto ;
}
 
dl#photo dt
{
  font: italic 2.5em/1.5em Georgia, serif ;
  color: #dcb ;
}
 
dl#photo dd
{
  margin: 0 ;
}
 
dl#photo img
{
  border: none ;
}

Et default.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#contentWrapper{
	position:relative;
	top:30px;
	left:50px;
}
#leftSidebar {
	position:absolute;
	width:200px;
}
#mainContent {
	position:absolute;
	width:1000px;
	left: 250px;
	top:60px;
}
#mainContent img {
	height:inherit;
}
#rightSidebar {
	position:absolute;
	width:200px;
	right: 100px;
}

**n1n0x** · 11/06/2012, 18h08

Personne ?

**Torgar** · 11/06/2012, 18h56

Salut,

Si si y a du monde

Si tu veux placer tes vignettes sur une ligne, tu leur mets un float: left; le tout contenu dans un div avec un width fixe. Et tu rajoutes un clear: both pour te remettre dans le bon flux.

Pour l'affichage de ton image "dans le vide au centre", tu ajoutes un évènement de type onclick sur chaque vignette comme par exemple :

Dans le <head></head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<script type="text/javascript">
function display_picture(img) {
    document.getElementById('div_vide').innerHTML = '<img src="repertoire/' + img + '.jpg" alt="" />';
</script>
}

A adapter en fonction de ta structure de page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="float: left; width: 800px;" id="div_vide">Ta div vide au centre</div>
 
<div style="float: left;">
    <img src="repertoire/image_miniature01.jpg" alt="" onclick="display_picture('image_01')" />
    <img src="repertoire/image_miniature02.jpg" alt="" onclick="display_picture('image_02')" />
</div>

**n1n0x** · 11/06/2012, 23h18

OK merci.

Ca fonctionne,

sauf que c'est très moche --- j'ai sans doute mal placé le <div id="big_central"> </div> , et il reste à lui indiquer des paramètres de taille max....

Tu voudrais bien tester et m'indiquer ce qui est à modifier dans mon code ?

Actuellement:

http://opb-photography.com/HomeB.php?page=3 (clique sur une photo...)

Ce que je veux :

http://opb-photography.com/opb-screen.jpg

---
Rappel de l'arborescence de ma page html (merci Firebug):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div id="contentWrapper">
     <div id="leftSidebar" class="medium">
     <div id="mainContent">
            <div id="rightSidebar" align="justify">
            <div id="galerie">
                   <div id="big_central" style="float: left; width: 800px;">
                   <ul id="galerie_mini">
                            <li>
                            <li>
                            <li>
                            <li>
                            <li>
                            <li>
                  </ul>
                  </div>
         </div>
</div>

Rappel de mon CSS (default.css) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#contentWrapper{
	position:relative;
	top:30px;
	left:50px;
}
#leftSidebar {
	position:absolute;
	width:200px;
}
#mainContent {
	position:absolute;
	width:1000px;
	left: 250px;
	top:60px;
}
#mainContent img {
	height:inherit;
}
#rightSidebar {
	position:absolute;
	width:200px;
	right: 100px;
}

**Muchos** · 12/06/2012, 01h18

Envoyé par n1n0x

Rappel de l'arborescence de ma page html (merci Firebug)

Encore plus technique : Clic droit > source de la page

**n1n0x** · 12/06/2012, 10h18

Envoyé par Muchos

Encore plus technique : Clic droit > source de la page

Je fais exprès de mentionner Firebug car c'est un formidable outil pour le débugging, pour visualiser l'ensemble (css, DOM, XML, html...). En tous les cas c'est fort utile pour les débutants CSS comme moi.

Maintenant j'aimerais bien aller plus vite, grâce à votre aide ici, pour remettre tout ça d'équerre.

**Torgar** · 12/06/2012, 11h15

Là comme ça en vitesse (à toi d'adapter les dimensions aux besoins)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="contentWrapper">
    <div id="leftSidebar" class="medium">
        <a name="page-up"></a>
        <font class="bodyTitle">OPB Photography</font>
        <p>
 
        <br>PORTFOLIO
        <br><font size="-2">//////////////////////////////////</font>
 
        <br><a href="http://opb-photography.com/HomeB.php?page=1">Sortie dominicale</a><br><a href="http://opb-photography.com/HomeB.php?page=2">Printemps</a><br><a href="http://opb-photography.com/HomeB.php?page=3">Le gang Burma</a><br><a href="http://opb-photography.com/HomeB.php?page=4">La route des vacances</a><br><a href="http://opb-photography.com/HomeB.php?page=5">NYC (1)</a><br><a href="http://opb-photography.com/HomeB.php?page=6">NYC (2)</a><br><a href="http://opb-photography.com/HomeB.php?page=8">Ganesha</a><br><a href="http://opb-photography.com/HomeB.php?page=7">Les oubliés</a><br><a href="http://opb-photography.com/HomeB.php?page=9">Spectacle moderne</a><br><a href="http://opb-photography.com/HomeB.php?page=11">Orgueil masculin</a><br><a href="http://opb-photography.com/HomeB.php?page=10">Home run</a><br><a href="http://opb-photography.com/HomeB.php?page=12">Nature morte</a><br><a href="http://opb-photography.com/HomeB.php?page=13">Ouvertement</a><br><a href="http://opb-photography.com/HomeB.php?page=14">Le placard à gâteaux </a><br><a href="http://opb-photography.com/HomeB.php?page=15">La vie manège</a>    
 
        </p><p>
        <br>THIS IS ME
        <br><a href="http://opb-photography.com/HomeB.php?page=about">About</a>
        <br><a href="http://opb-photography.com/HomeB.php?page=contact">Contact</a>
        </p>
    </div>
 
    <div id="mainContent">
        <div id="galerie">
            <div style="float: left; width: 500px;" id="big_central"></div>
            <ul id="galerie_mini" style="float: right; width: 210px; text-align: right;">
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img379.jpg" alt="garage" onclick="display_picture('HomeB.php_fichiers/img379.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img109.jpg" alt="domino-gang" onclick="display_picture('HomeB.php_fichiers/img109.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img029.jpg" alt="peugeot-car" onclick="display_picture('HomeB.php_fichiers/img029.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img235.jpg" alt="building-glauque" onclick="display_picture('HomeB.php_fichiers/img235.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img245.jpg" alt="bridge-glauque" onclick="display_picture('HomeB.php_fichiers/img245.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img031.jpg" alt="parking-gate" onclick="display_picture('HomeB.php_fichiers/img031.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img562.jpg" alt="black-mafioso" onclick="display_picture('HomeB.php_fichiers/img562.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img027.jpg" alt="white-car" onclick="display_picture('HomeB.php_fichiers/img027.jpg')" border="0" height="25%" width="25%"></a></li>
                <li><a href="#" title="Le gang Burma"><img src="HomeB.php_fichiers/img068.jpg" alt="broken-glass" onclick="display_picture('HomeB.php_fichiers/img068.jpg')" border="0" height="25%" width="25%"></a></li>
            </ul>
        </div>    
    </div>
 
    <div id="rightSidebar">
        <b>Le gang Burma.</b><br>They can make you talk. Always. Don't mess up with the wrong guys. Mind your own business. Keep out from Burma and the gang. One can never tell on which side they are. Another kidnapping? They would not mind. Easy money, some action with a new victim to beat the hell up. You better talk. Where is my cash? Knock-out. Silence. One question: " how much are you worth? "...
    </div>
 
    <div style="clear: both;"></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#contentWrapper{
    margin-top: 30px;
    margin-left: 50px;
}
#mainContent {
    width:800px;
    float: left;
    margin-top: 60px;
}
#leftSidebar {
    width:200px;
    float: left;
}
#mainContent img {
    height:inherit;
}
#rightSidebar {
    width:200px;
    float: left;
    margin-top: 60px;
}

Site perso - pb layout div

CSS

Discussions similaires

Partager

Partager