Structure DIV

Question

Remay

3 Sep 2008 à 16:52

Bonjour à Tous,
J'ai encore besoin de vos lumière pour coder Smiley smile

Donc voila la situation actuel :

upload/17028-actuel.jpg

Et voila ce à quoi j'aimerai arriver :

Code HTML et CSS actuel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Season Before Spring</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div id="header">
        <div id="menu">
             <div id="about_the_film"><a href="about_the_film.html"><img src="images/about.png" onmouseover="this.src='images/about_hover.png'" onmouseout="this.src='images/about.png'"/></a>
             </div>
             <div id="cast_and_crew"><a href="cast_and_crew.html"><img src="images/about.png" onmouseover="this.src='images/about_hover.png'" onmouseout="this.src='images/about.png'"/></a>
             </div>  
        </div>
    </div>
 
    <div id="content">
        <div id="top"></div>
        <div id="corps">
            <div id="slide1dv" style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00,duration=2,enabled=false);"><img src="parade2.png" /><script src="slide1fade.js" type="text/javascript"></script>
            </div>
        </div>
        <div id="down"></div>
    </div> 
       
    <div id="footer">FOOTER</div>    
          
</body>

</html>

@charset "utf-8";
body {
	text-decoration: none;
	background-image: url(images/wood_bg.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}
img {
    border: none;
}
#header {
	height: 130px;
	border: 1px dotted #000099;
}

#menu{
	width: 942px;
	margin-right: auto;
	margin-left: auto;
	top: 50px;
	position: relative;
}
#about_the_film {
	display: inline;
}
#cast_and_crew {
	display: inline;
}

#content{
	width: 942px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}
#top {
	background-image: url(images/top.png);
	height: 30px;
	width: 942px;
}
#corps {
	width: 942px;
	text-decoration: none;
	background-image: url(images/side.png);
	background-repeat: repeat-y;
	padding-right: 15px;
	padding-left: 15px;
}
#slide1dv {
	position:relative;
	width:650px;
	height:420px;
}
#down {
	background-image: url(images/down.png);
	height: 30px;
	width: 942px;
}
#footer {
	height: 100px;
	text-align: center;
	color: #999999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	border: 1px dotted #00FF00;
}

Donc en fait je me pose beaucoup de question sur la structure des div à mettre en place pour pouvoir obtenir le rendu de la deuxième photo.

Merci d'avance pour votre aide. site visible ici : http://mismouc.free.fr
Modifié par Remay (03 Sep 2008 - 16:55)

fvsch

3 Sep 2008 à 17:28

Bonjour,

Tu peux éventuellement placer des marges négatives sur sur div#slide1dv, en plaçant bien du padding de 1px en haut et en bas de div#corps pour éviter la fusion des marges.

Ce qui peut donner:

#corps {
	padding: 1px 15px;
}
#slide1dv {
	margin: -15px 0;
}

À tester avec les différents navigateurs, par contre...

PS: Ça serait bien de prévenir avant d'envoyer les gens sur une page de 2,5 Mo! Et, plus globalement, ça serait pas mal de ne pas faire de page de 2,5 Mo, du moins pas en page d'accueil. Si tu veux placer un slideshow, permets au moins aux visiteurs de le déclencher eux-même, et arrange-toi pour que les images ne se chargent pas toutes automatiquement!

Heyoan

3 Sep 2008 à 17:39

Re-salut,

Hem... au risque d'être lourd et comme je te le disais il n'y a pas si longtemps : l'élément DIV n'est pas le seul qui existe et il a la particularité d'être complètement neutre en ce qui concerne la structuration d'un document. Je comprends bien que faire des bords arrondis te motive plus que de lire les tutoriaux que je t'ai indiqué mais les bases, comme leur nom l'indique, sont essentielles. Smiley murf

Remay

3 Sep 2008 à 18:01

Toutes mes excuses pour la page de 2,5 Mo.

Je suis bien conscient que les bases sont essentielles, cependant j'aime beaucoup le forum car je peu poser des questions, et obtenir des suggestions et des conseils très intéressants. Je trouve que j'apprends mieux de cette manière. Ceci dit, je reconnais qu'il va falloir que je me plonge un peu plus sur les choses de bases.

Je me souviens avoir lus quelque part que les marges négatives ne sont pas très recommandées ?

Merci pour votre aide.
Modifié par Remay (03 Sep 2008 - 18:06)

fvsch

3 Sep 2008 à 19:18

Remay a écrit :
Je me souviens avoir lus quelque part que les marges négatives ne sont pas très recommandées ?

C'était peut-être le cas il y a quelques années. Elles sont plutôt bien supportées par les navigateurs actuels.

Remay

4 Sep 2008 à 01:03

Voilà donc je me suis un peu plongé dans les tutos de bases et j'ai appris quelques tips, notamment à faire des menus grâce aux listes à puces. J'ai donc repris de zéro mon menu et re-codé, de la bonne manière je l'espère.
Cependant il y a un espace entre les deux "About The Film", je n'arrive vraiment pas à savoir pourquoi ?

Pour la partie slideshow, je l'avoue j'ai peu être pas fait ce qu'il fallait. Pour arriver au résultat actuel (à peu près celui que je voulais obtenir) j'ai suivis la technique de Florent V. La couleur de la bordure grise au dessous du slideshow change Firefox, je ne sais pas pourquoi ? (sur Safari c'est ok)

Je suis conscient d'avoir peu être fait n'importe quoi pour la partie slideshow, soyez indulgent SVP, je ne demande qu'a respecter les normes mais c'est assez balaises quand on débute.

http://mismouc.free.fr j'ai changer les images du slideshow, qui étaient en .png donc assez lourdes (d'où les précédents 2,5 Mo Smiley confus

). Elles sont en .gif et la page fait dans les 1,5 Mo.

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Season Before Spring</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div id="header">
        <div id="menu">
		    <ul>
                <li><a href="about_the_film.html"><img src="images/about.png" onmouseover="this.src='images/about_hover.png'" onmouseout="this.src='images/about.png'" alt="About The Film"/></a></li>
                <li><a href="cast_and_crew.html"><img src="images/about.png" onmouseover="this.src='images/about_hover.png'" onmouseout="this.src='images/about.png'" alt="Cast and Crew"/></a></li>
            </ul>				
        </div>
    </div>
 
    <div id="content">
        <div id="top"></div>
        <div id="corps">
            <div id="content1">
                <div id="top1"></div>
                <div id="corps1">
                    <div id="slide1dv" style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00,duration=2,enabled=false);"><img src="parade2.gif" /><script src="slide1fade.js" type="text/javascript"></script>
                </div>
                </div>
            <div id="down1"></div>
            </div>
        </div>
        <div id="down"></div>
    </div> 
       
    <div id="footer">FOOTER</div>    
          
</body>

</html>

Code CSS :

@charset "utf-8";
body {
	text-decoration: none;
	background-image: url(images/wood_bg.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}
img {
    border: none;
}
#header {
	height: 130px;
}
#menu{
	width: 942px;
	margin-right: auto;
	margin-left: auto;
	top: 75px;
	position: relative;
}
#menu ul { 
    list-style-type: none;
	padding: 0px;
	margin: 0px;
}
#menu li {
    display: inline;
}
#content{
	width: 942px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}
#top {
	background-image: url(images/top.png);
	height: 30px;
	width: 942px;
}
#corps {
	width: 942px;
	text-decoration: none;
	background-image: url(images/side.png);
	background-repeat: repeat-y;
	padding: 1px 15px;
}
#content1 {
	width: 665px;
	overflow: hidden;
	margin: -15px 0;
}
#top1 {
	background-image: url(images/top1.png);
	height: 15px;
	width: 665px;
}
#corps1 {
	width: 657px;
	text-decoration: none;
	background-image: url(images/side1.png);
	background-repeat: repeat-y;
	padding: 1px 8px;
}
#slide1dv {
	position:relative;
	width:650px;
	height:420px;
	margin: -9px 0;
}
#down1 {
	background-image: url(images/down1.png);
	height: 15px;
	width: 665px;
}
#down {
	background-image: url(images/down.png);
	height: 30px;
	width: 942px;
}
#footer {
	height: 100px;
	text-align: center;
	color: #999999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	border: 1px dotted #00FF00;
}

Modifié par Remay (04 Sep 2008 - 01:11)

Remay

5 Sep 2008 à 12:39

Personne n'a de solution pour la bordure inférieure qui change de couleur sous firefox ?

Sujet clos

CSS et mise en forme, CSS3

Structure DIV