Site perso - pb layout div
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:
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:
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:
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 !
