La Ferme du web - Les forums
Venez baraguiner avec la communauté !
Vous n'êtes pas identifié.
Pages: 1
- Index
- » Mise en forme web: HTML, CSS ...
- » Soucis mise en page, pour site un peu particulier.
#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 
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
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:
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
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
Pages: 1
- Index
- » Mise en forme web: HTML, CSS ...
- » Soucis mise en page, pour site un peu particulier.