• imprimer
  • aide

Forum de discussions « Webdesign »

Retrouvez les publications relatives à ces discussions dans notre rubrique web design et flash.

Problème de placement des objets dans une page html

liste des forums liste des discussions Participer à la discussion

Photo de etnies13 Message publié le mardi 24 janvier 2012 - 21h12 par etnies13.
Bonjour,
Je suis entrain de créer un site web pour mon club athlétique et j'ai un problème avec la mise en page.
Je voudrai pouvoir créer un site ou il y a une entête , un footer , une place a droite pour le sous-menu et une place a gauche pour les sponsors , je voudrais que ces élément sois fixe dans les extérieures pour que je n'ai plus qu'a modifier le contente.
Mais je ne parvient pas à le faire.
Pourriez-vous m'aider ?
Photo de jules Message publié le mardi 24 janvier 2012 - 21h33 par jules. modérateur
Salut etnies13,

Nous pouvons peut-être t'aider mais nous ne pouvons pas faire le travail à ta place.
Si tu as une page ou du code à nous montrer, on pourra te dire ce qui ne va pas mais dans le cas contraire on ne pourra rien faire.

Le site alsacréations te propose des gabarits simples pour commencer : http://www.alsacreations.com/static/gabarits/liste.html
Un des gabarits 9, 10 ou 11 correspondra peut être à tes attentes ; sinon, je t'invite à faire des recherches sur google avec les termes "exemple gabarits html" ou "exemple template html".
Photo de etnies13 Message publié le mercredi 25 janvier 2012 - 18h30 par etnies13.
Merci pour ta réponse, je vais essayer avec ces informations et je te redis.
Et il est évident que je ferai moi-même le travail ne t'inquiète pas :)
Photo de etnies13 Message publié le mercredi 25 janvier 2012 - 20h00 par etnies13.
Voilà, j'ai essayé avec ce que tu m'a dit et sa a fonctionné ... enfin presque, il reste une petite chose que je comprend pas, mes bordures de chaque coté s’arrêtent à un moment dans la page, et j'aimerais qu'elle continue jusqu'à la fin de l'article( contenu de la page , <article>). Donc voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html class="Prio" xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Club Atlétique de Sierre </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="CA Sierre, FVA, Athlétisme Valais, Club Athlétisme" />
<meta name="Description" content="Club athlétique de la ville de Sierre" />
<link type="text/css" rel="stylesheet" href="Athletisme.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js "></script>
<![endif]-->
</head>
<body class="Basic">
<div class="Bloc_page">
<header><!-- En-tête de page -->
<div class="PhotoEnTete"><a href="/" target="_top"><img src="imgHome.jpg" width="100%" height="452" border="0" alt="CA SIERRE" /></a>
</div>
<table class="Menu" border='2' >
<tr>
<td class="lien"><a href="Home.html">Acceuil</a></td>
<td class="lien"><a href="présentation.html">Contacts</td>
<td class="lien"><a href="/scripting/">Entraînements</a></td>
<td class="lien"><a href="Inscription.html">Résultat</a></td>
<td class="lien"><a href="JCJ.html">Photos</a></td>
<td class="lien"><a href="Cataclysm.html">Records</a></td>
</tr>
</table><br />
<hr></hr>
</header>
<div class="content">
<div class="MenuSecondaire" >
<a class="LienSousMenu" href="index.html">Sous-menu1</a><br />
<a class="LienSousMenu" href="index.html">Sous-menu2</a><br />
<a class="LienSousMenu" href="index.html">Sous-menu3</a><br />
<a class="LienSousMenu" href="index.html">Sous-menu4</a><br />
<a class="LienSousMenu" href="forum.html">Sous-menu5</a><br />
<a class="LienSousMenu" href="contact.html">Sous-menu6</a>
</div>
<div class="EspacePub" >
<center><table border='2'>
<tr>
<td class="lien"><a href=" http://www.google.com"><img src="pub1.jpg" alt="Pub1" /></a><br />
<a href=" http://www.microsoft.com"><img src="pub-tf1.jpg" alt="Pub TF1" /></a><br />
<a href=" http://www.ricardo.ch"><img src="pub2.jpg" alt="Pub2" /></a><br />
<a href=" http://www.facebook.com"><img src="pub4.jpg" alt="Pub4" /></a><br />
<a href=" http://www.twitter.com"><img src="PUB.png" alt="PUB" /></a><br />
</tr>
</table></center>
</div>
<article class="article"><!-- Contenu central de la page -->
<TD height="700">
<DIV align=center>
<hr align="center" size=5 color="#008080" style="MARGIN-BOTTOM: 0px">
</DIV>

<p align="center" class="Style39">PROCHAINEMENT</p>
LA il ya le contenu
LA il ya le contenu
LA il ya le contenu
LA il ya le contenu
LA il ya le contenuLA il ya le contenuLA il ya le contenuLA
il ya le contenuLA il ya le contenuLA
il ya le contenuLA il ya le contenuLA
il ya le contenuLA il ya le contenuLA il ya le contenu
.
.
.
</article>
</div>
<center><footer>
<table class="Footer" border='1'>
<tr>
<!-- Pied de page -->
<!-- CopyRight-->
<center><td><span class="copyright">&#169; Copyright 2011 - 2012 Kilian Savioz &nbsp;</span></td></center>
</tr>
</table>
</footer></center>
</div>
</body>
</html>
// CSS
.Prio
{
height: 100%;
}
.Basic
{
font-family:"Arial" ;
background-color: #ADD8E6;
height: 100%;
}
.Bloc_page
{
width: 900px ;
margin: auto ;
}
.Menu
{
width : 100% ;
text-align:center ;
}
.LienSousMenu
{
display: block;
padding: 2px 5px 2px 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
.MenuSecondaire
{
background: #181A12;
float: left;
text-align : left ;
height: 100% ;
width: 140px;
margin: 0;
padding: 10px 0px 100% 10px;
list-style: none;
}

.EspacePub
{
background: #181A12;
float: right;
width: 200px;
padding: 12px 1px 100%;
}
.article
{
margin-left: 150px;
margin-right: 220px;
padding: 10px 20px;
}
.content
{

text-align:center ;
font-weight:bolt ;
}
.contentArea
{
color : pink ;

}
.imgcolor
{
width: 50px ;
height:10px ;
text-align: left;
}
.lien
{
text-align:center ;
}
.leftMenuBlock
{
text-align:left;
}
.cse-search-box
{
text-align:right;
}
.Presentation
{
text-align:center;
color :blue ;
}
.heure
{
font-weight: bold ;
}
.Footer
{
margin: 0;
padding: 15px 130px 10px 200px;
font-size: .85em;
}
.copyright
{
text-align:center;
}
Voilà, merci de ton aide ,ça m'a bien aidé :)
Photo de nours312 Message publié le mercredi 01 février 2012 - 21h05 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
Salut ::


Bon, pour faire ce que tu semble vouloir faire, tu as 2/3 solutions :
- les tables => pas trés élégant dans le code, mais efficace (surtout avec les vieux IE)
- le Javascript, plus ergonomique, souple et rapide à mettre en place qd on connait, mais il faut apprendre ce langage de programmation,
- Les CSS : rapide, évolutif, mais incompatible avec les vieux navigateurs !...


dans ton code, c'est un peu fouilli, alors si ça ne te genes pas, je te redonne une base avec les tables :


<style>
li.menu {display:inline-block;padding: 2px 0;}
ul.menu {text-align: center;}
</style>
<table cellpadding="0" cellspacing="0" boder="0" style="height:100%;margin: 0 auto; width: 800px;">
<tr style="height:100px;">
<td colspan="3" style="background-color:blueviolet">
<!-- ici ce trouve mon header -->
<nav id="monMenuHaut">
<ul class="menu">
<li class="menu"><a href="maPage1.html">monlien 1</a></li>
<li class="menu"><a href="maPage2.html">monlien 2</a></li>
<li class="menu"><a href="maPage3.html">monlien 3</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="background-color:purple;vertical-align: top;">
<!-- ici ce trouve ma colonne gauche -->
menu de gauche
</td>
<td style="background-color:yellowgreen;width: 60%;vertical-align: top;">
<!-- ici ce trouve ma colonne centrale-->
<div style="padding:10px;">
<h3>Titre</h3>
<article>
<p>Mon Super article</p>
<p>Mon Super article</p>
<p>Mon Super article</p>
<p>Mon Super article</p>
</article>
</div>
</td>
<td style="background-color:rosybrown;vertical-align: top;">
<!-- ici ce trouve ma colonne droite -->
menu de droite
</td>
</tr>
<tr style="height:100px;">
<td colspan="3" style="background-color:blueviolet">
<!-- ici ce trouve mon footer -->
CopyRight
</td>
</tr>
</table>


Il faut commencer par une bonne base, et ensuite tu agrémentes.
tu vois facilement dans cet exemple qu'il ne faut pas grand chose pour avoir un environnement simple et stable.

pour la zone centrale, il est preferable de de la faire dans des fichiers séparés que tu inclus au fur et a mesure, pour ne pas te refaire toutes les pages à chaque modifications de l'environnement.

@+&BonCode
Photo de etnies13 Message publié le mercredi 08 février 2012 - 20h51 par etnies13.
Salut merci de ta réponse, j'ai fait les modifications en fonction et sa fonctionne :)
Merci bien

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Mot de passe perdu

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Créer un compte

Les 5 dernières discussions