La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 01/03/2010 16:47:46

VivreMallemort
Membre
Date d'inscription: 01/03/2010
Messages: 5

Soucis mise en page, pour site un peu particulier.

Salut tout le monde,

Dans le cadre de mon boulot, je suis en train de réaliser un site web.
J'ai réalisé la partie graphique, mais je patoge vraiment pour la mise en page en CSS...
J'ai beau suivre votre tuto, je ne sais pas comment faire.

Alors voilà ce que je veux :
La page d'accueil :
http://img14.imageshack.us/img14/1433/testsitecopy.jpg
Une fois que l'on clique sur une rubrique autre qu'ACCUEIL, je veux sa :
http://img163.imageshack.us/img163/4097 … atione.jpg

Il faut qu'avec Dreamweaver je puisses enlever où rajouter des rubriques.

Pour l'instant j'ai reussis à faire sa, mais impossible de placer les textes et les bloc...
Attention on rigole pas lol
http://img9.imageshack.us/img9/9342/95577193.jpg

Y'a plusieurs bloc, car je veux que logo VIVRE MALLEMORT soit cliquable, et le header avec le titre aussi.

Voilà mon code html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >    
<head>        
<title>Festival de l'Eau - Mallemort en Provence</title>       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
<link rel="stylesheet" media="screen" type="text/css" href="main.css" />   
</head>    
<body>
<div id="conteneur"> 
<div id="header"></div>
<div id="haut"></div>
<div id="menu"><a href='site/index.html'>Accueil</a></div>    
<div id="corps">BLABLABLABLABLA BLABLABLABLABLA</div>
<div id="footer">Flotographie Copyright - VIVRE MALLEMORT - Tous droits réservés © 2010-2011 </div>
<div id="bas"></div>
<div id="basgauche"></div>
<div id="basdroit"></div>
<div id="VM"></div>
</body> 
</html>

CSS:

Code:

/* CSS Document */
body {
background-image: url(images/background.jpg);
repeat
}
#conteneur 
{    
margin: auto;    
width: 950px; 
height: 713px
}
#header 
{   
background-image: url(images/header.jpg); 
width: 429px;   
height: 93px;
margin-left: 0px; 
} 
#haut 
{   
background-image: url(images/haut.jpg); 
width: 519px;   
height: 93px; 
margin-left: 429px;
margin-top: -93px

} 
#menu 
{   
background-image: url(images/menu.jpg); 
width: 948px;   
height: 91px;
text-align: left;
font-size: 18px; 
padding-top: 40px; 
margin-top: 0px

} 
#corps 
{   
background-image: url(images/corps.jpg); 
width: 948px;   
height: 449px;
text-align: left; 
font-size: 12px; 
margin-top: 0px

} 

#bas 
{   
background-image: url(images/bas.jpg); 
width: 105px;   
height: 106px;
margin-left: 324px; 
} 
#basgauche
{   
background-image: url(images/basgauche.jpg); 
width: 84px;   
height: 81px;
margin-left: Opx; 
} 
#basdroit 
{   
background-image: url(images/basdroit.jpg); 
width: 519px;   
height: 57px; 
margin-left: 429px;
margin-top: 70px

} 
#footer 
{   
background-image: url(images/footer.jpg); 
width: 519px;   
height: 24px;
text-align: center; 
font-size: 11px;
margin-left: 429px;
margin-top: -100px

} 
#VM 
{   
background-image: url(images/VM.jpg); 
width: 240px;   
height: 81px;
margin-left: 84px; 

}

Merci beaucoup.

Florian

Dernière modification par VivreMallemort (01/03/2010 16:51:22)

Hors ligne

 

01/03/2010 16:47:46

Botte De Foin Publicitaire


#2 02/03/2010 06:43:29

DJo
Administrateur
Date d'inscription: 31/07/2008
Messages: 569
Site web

Re: Soucis mise en page, pour site un peu particulier.

Hello,

Alors dans un premier temps, n'utilise que Dreamweaver en mode code, ne regarde jamais le mode visuel qui ne marche pas comme il faut. Teste le rendu avec firefox.

Ensuite, je te conseille la chose suivante pour ton HTML:

Code:

<div id='conteneur'>
  <div id='col_gauche'>

  </div>
  <div id='col_droite'>
   
  </div>
</div>

Et en CSS, tu mets col_droite en float: right; et col_gauche en float: left. Tu leur donne à chacune un width: 400px; si la largeur de #conteneur fait 800px; par exemple (attention aux marges). Et rajoute un overflow: hidden; à #conteneur.

Cette méthode te permettra d'avoir les colonnes de droite et gauche correctement positionnées et qui pousse le conteneur.

Hors ligne

 

#3 02/03/2010 11:49:31

VivreMallemort
Membre
Date d'inscription: 01/03/2010
Messages: 5

Re: Soucis mise en page, pour site un peu particulier.

Salut,

Merci pour ta réponse !

C'est bon?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >    
<head>        
<title>Festival de l'Eau - Mallemort en Provence</title>       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
<link rel="stylesheet" media="screen" type="text/css" href="main.css" />   
</head>    
<body>
<div id="conteneur"> 
<div id='col_gauche'>
</div>
<div id='col_droite'>
</div>
<div id="header"></div>
<div id="haut"></div>
<div id="menu"><a href='site/index.html'>Accueil</a></div>    
<div id="corps">BLABLABLABLABLA BLABLABLABLABLA</div>
<div id="footer">Flotographie Copyright - VIVRE MALLEMORT - Tous droits réservés © 2010-2011 </div>
<div id="bas"></div>
<div id="basgauche"></div>
<div id="basdroit"></div>
<div id="VM"></div>
</div>
</body> 
</html>

Code:

/* CSS Document */
body {
background-image: url(images/background.jpg);
repeat
}
#conteneur 
{    
margin: auto;    
width: 950px; 
height: 713px;
}
#col_droite
{ 
float : right;
width: 400px;
}
#col_gauche
{
float : left;
width: 400px;
}
#header 
{   
background-image: url(images/header.jpg); 
width: 429px;   
height: 93px;
margin-left: 0px; 
} 
#haut 
{   
background-image: url(images/haut.jpg); 
width: 519px;   
height: 93px; 
margin-left: 429px;
margin-top: -93px

} 
#menu 
{   
background-image: url(images/menu.jpg); 
width: 948px;   
height: 91px;
text-align: left;
font-size: 18px; 
padding-top: 40px; 
margin-top: 0px

} 
#corps 
{   
background-image: url(images/corps.jpg); 
width: 948px;   
height: 449px;
text-align: left; 
font-size: 12px; 
margin-top: 0px
margin-left: 10px;

} 

#bas 
{   
background-image: url(images/bas.jpg); 
width: 105px;   
height: 106px;
margin-left: 324px; 
} 
#basgauche
{   
background-image: url(images/basgauche.jpg); 
width: 84px;   
height: 81px;
margin-left: Opx; 
} 
#basdroit 
{   
background-image: url(images/basdroit.jpg); 
width: 519px;   
height: 57px; 
margin-left: 429px;
margin-top: 70px

} 
#footer 
{   
background-image: url(images/footer.jpg); 
width: 519px;   
height: 24px;
text-align: center; 
font-size: 11px;
margin-left: 429px;
margin-top: -100px

} 
#VM 
{   
background-image: url(images/VM.jpg); 
width: 240px;   
height: 81px;
margin-left: 84px; 

}

Sinon hier soir, j'avais mis le site sur mon ftp perso... Voilà le lien :
http://flotographie.free.fr/FestivalEau

Désolé si j'ai un peu de mal, c'est la 1ère fois que je me tente au codage d'un site.

Merci pour ton aide !

Hors ligne

 

#4 02/03/2010 16:14:45

anarta
Membre
Lieu: Entre Orléans et Chateaudun
Date d'inscription: 05/03/2009
Messages: 45

Re: Soucis mise en page, pour site un peu particulier.

Je pense que tu te complique un peu les choses, pense à utiliser des images avec transparence.

J'aurais plutôt fais comme ça:

http://unalia.fr/minituto/bloc.jpg

En rouge:
Une div avec comme fond la bulle d'eau,

En vert:
Une div, avec fond blanc et transparence, + un float

Code:

background-color:#FFFFFF;
    height: ->selon ce que tu veux ;
    width: ->selon ce que tu veux ;
    float: left ;
    filter:alpha(opacity=75);/*IE*/
    -moz-opacity:0.75; /*autres nav*/
    opacity: 0.75;

Dans le bloc vert tu as 2 bloc gris, ce sont juste tes images que tu enregistras avec une transparence donc en png ou gif

En bleue:
idem que le bloc vert mais avec le float a droite + tu rajoute ton image soit comme fond d'une div soit directement avec <img src=""/>

Hors ligne

 

#5 03/03/2010 15:31:45

VivreMallemort
Membre
Date d'inscription: 01/03/2010
Messages: 5

Re: Soucis mise en page, pour site un peu particulier.

Oki merci je vais essayer.

Hors ligne

 

#6 03/03/2010 16:42:58

VivreMallemort
Membre
Date d'inscription: 01/03/2010
Messages: 5

Re: Soucis mise en page, pour site un peu particulier.

Je dois faire une erreur quelque part, j'arrive pas à gérer la transparence pour que sa rende comme sur mes JPG.

L'affiche, je veux pas qu'elle soit en transparence. Le Gros logo VIVRE MALLEMORT, je veux le centrer sur la page en hauteurs et largeurs.

Voilà les codes :

HTML :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >    
<head>        
<title>Festival de l'Eau - Mallemort en Provence</title>       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
<link rel="stylesheet" media="screen" type="text/css" href="main.css" />   
</head>    
<body>
<div id="conteneur"> 
<div id="background"></div>
<div id="fondblanc"><div align="right"><img src="images/Affiche.jpg"/></div></div>    
<div id="Header"></div>
<div id="logocentre"></div>
<div id="Menu"></div>
<div id="VM"></div>
</div>
</body> 
</html>

CSS:

Code:

body {
background-image: url(images/background.jpg);
repeat
}
#conteneur 
{    
margin: auto;    
width: 950px; 
height: 713px;
}
#Header
{ 
margin: left; 
background-image: url(images/Header.gif); 
background-repeat: no-repeat;
width: 424px; 
height: 93px;
}
#fondblanc 
{
background-image: url(images/fondblanc.gif);
height: 713px ;
width: 950px ;
float: left ;
filter:alpha(opacity=75);/*IE*/
-moz-opacity:0.75; /*autres nav*/
opacity: 0.75;
}
#logocentre
{ 
margin: auto; 
background-image: url(images/logocentre.gif); 
background-repeat: no-repeat;
width: 925px; 
height: 311px;
}
#VM
{ 
margin: left; 
background-image: url(images/VM.gif); 
background-repeat: no-repeat;
width: 426px; 
height: 83px;
margin-top: 425px;
}
#Menu
{ 
margin: left; 
background-image: url(images/menu.jpg); 
background-repeat: no-repeat;
width: 426px; 
height: 108px;
margin-top: -318px;
}

J'ai mis sur un serveurs orange :
http://pagesperso-orange.fr/festivalmallemort/

Merci

Dernière modification par VivreMallemort (03/03/2010 17:35:29)

Hors ligne

 

#7 05/03/2010 16:00:12

VivreMallemort
Membre
Date d'inscription: 01/03/2010
Messages: 5

Re: Soucis mise en page, pour site un peu particulier.

Enfin une bonne chose de faite, Merci !!
http://pagesperso-orange.fr/festivalmallemort/

Mes codes:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >    
<head>        
<title>Festival de l'Eau - Mallemort en Provence</title>       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
<link rel="stylesheet" media="screen" type="text/css" href="main.css" />   
</head>    
<body>
<div id="conteneur"> 
<div id="background"></div> 
<div id="Affiche"></div>  
<div id="corps"></div>  
<div id="header"></div>
<div id="menu"></div>
<div id="VM"></div>
</div>
</body> 
</html>

CSS:

Code:

body {
background-image: url(images/background.jpg);
repeat
}
#conteneur 
{    
margin: auto;    
width: 950px; 
height: 713px;
}
#header
{ 
margin: left; 
background-image: url(images/header.jpg); 
width: 428px; 
height: 95px;
background-repeat: no-repeat;
margin-top: -635px;
}
#menu
{ 
margin: left; 
background-image: url(images/menu.jpg); 
width: 428px; 
height: 100px;
background-repeat: no-repeat;
}
#corps
{ 
margin: left; 
background-image: url(images/corps.jpg); 
width: 428px; 
height: 440px;
background-repeat: no-repeat;
margin-top: -519px;
}
#VM
{ 
margin: left; 
background-image: url(images/VM.jpg); 
width: 428px; 
height: 79px;
background-repeat: no-repeat;
margin-top: 440px;
}
#Affiche
{ 
margin: right; 
background-image: url(images/Affiche.jpg); 
width: 523px; 
height: 714px;
background-repeat: no-repeat;
margin-left: 426px;
}

Donc maintenant on va passer au plus marrant  lol
LES TEXTES !
Comment faut il faire, pour délimiter des zones de texte?

Merci

Dernière modification par VivreMallemort (05/03/2010 16:00:33)

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net