28221 sujets

CSS et mise en forme, CSS3

Cherche aide pour une methode de mis een page

Bonjours

Smiley cligne Et oui encore moi mais cette fois-ci j'ai résolu mon probleme de header et de footer etc...

Bon cette fois-ci j'ai un 2 petit problème donc volilà le design que je fais l
et voici mes problèmes:

je voudrais savoir comment je peux faire pour que les mot encadré en rouge reste au meme endroit et ne depende pas d'un autre enfin c'est plus clair en regardant le design mais si je met "infos etc ect" cela va décaler mon mot "heure" ce qui est normal puisque j 'ai utilisé des span et je les ai mis en position relative ce qui ne doit pas être la bonne méthode mais en cherchant je n'en ai pas trouvé d'autre.


edit code:
voila le xhtml:
<body>

<div id="global">

 <div id="header01"></div>
 <div id="header02">
  <span class="infos">infos</span>
  <span class="heure">heure</span>
 </div>
 
 <div id="menu_gauche">
  <div class="menu_haut">
  </div>
  <h2>Good luck</h2>
   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>
  <div class="menu_bas">
  </div>
 
  <div class="menu_haut">
  </div>
  <h2>Good luck</h2>
   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>
  <div class="menu_bas">
  </div>
 </div>
 
 <div id="news">
  <div class="news_haut">
  <span class="titre">titre </span>
  <span class="commentaire">commentaire</span>
  </div>
  <div class="news_milieux">
   <h2>Bienvenue</h2>
    <p>Bonjour à vous , merci de bien vouloir m'aider ;o)
    </p>
  </div>
  <div class="news_bas">
   <span class="titre">auteur</span>
  </div>
 </div>
 
 <div id="menu_droit">
  <div class="menu_haut">
  </div>
  <h2>Good luck</h2>
   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>
  <div class="menu_bas">
  </div>
  
  <div class="menu_haut">
  </div>
  <h2>Good luck</h2>
   <ul>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
    <li><a href="#">lien</a></li>
   </ul>
  <div class="menu_bas">
  </div>
 </div>
 
 <div id="footer">
  <div class="footer_haut"></div>
  <p class="footer_milieux">&copy; Tous droits réservés.</p>  
  <div class="footer_bas"></div>
 </div>


</div>
</body>


et le css:

/*---------------Effet géneral sur la page-----------------------------*/
*
{
margin: 0;
padding: 0;
border: 0;
}

html, body
{
font-size: 1.0em;
font-family: times New Roman, verdana, Arial, Helvetica, sans-serif;
background-color:#0000FF;
}

#global
{
width: 780px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 10px;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------Effet de texte et contenu-------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

a:hover  
{
color:#CC0000;
}

a
{
color:#0000FF;
}

span {border: 2px red solid;}

/*---------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------Effet & position des blocs---------------------------------*/
/*---------------------------------------------------------------------------------------------------------------*/



/*----------En-tête---------------*/

#header01
{
width:780px;
height:136px;
background-image:url(images/header01.gif);
background-repeat: no-repeat;
}

#header02
{
width:780px;
height:100px;
background-image:url(images/header02.gif);
background-repeat: no-repeat;
}

.infos 
{
width: 500px;
position:relative;
left: 200px;
top: 20px;
}

.heure
{
width: 100px;
position:relative;
left: 600px;
top: 20px;
}

/*---------Menu gauche--------------------------*/

#menu_gauche 
{
width:130px;
text-align: center;
margin-bottom: 15px;
float:left;
}

#menu_gauche #menu_droit, li
{
list-style-type: none;
}

#menu_gauche, h2 li
{
background-image:url(images/menu_milieux.gif);
background-repeat: repeat-y;
}

.menu_haut 
{
height: 40px;
background-image:url(images/menu_haut.gif);
background-repeat: no-repeat;
}

.menu_bas
{
height: 26px;
background-image:url(images/menu_bas.gif);
background-repeat: no-repeat;
}

/*---------Menu droit--------------------------*/

#menu_droit
{
width: 130px;
text-align: center;
margin-bottom: 15px;
float: left;
}

#menu_droit, h2 li
{
background-image:url(images/menu_milieux.gif);
background-repeat: repeat-y;
list-style-type: none;
}

/*-------------module news----------------------*/

#news
{
width: 500px;
margin: 20px 10px;
float: left;
}

.news_haut
{
height:70px;
background-image:url(images/news_haut.gif);
background-repeat: no-repeat;
}

.news_milieux
{
background-image:url(images/news_milieux.gif);
background-repeat: repeat-y;
text-align: center;
padding: 10px 10px 30px 10px;
}

.news_bas
{
height: 50px;
background-image:url(images/news_bas.gif);
background-repeat: no-repeat;
}

.titre
{
width: 500px;
position:relative;
left: 100px;
top: 10px;
}

.commentaire 
{
width: 100px;
position:relative;
left: 360px;
top: 30px;
}

.auteur 
{
width: 100px;
position:relative;
left: 500px;
}

/*------------footer----------------------------*/

#footer
{
width:780px;
margin-top: 20px;
text-align:center;
clear: both;
}

.footer_haut
{
width:780px;
height:15px;
background-image:url(images/footer_haut.gif);
background-repeat: no-repeat;

}

.footer_milieux
{
background-image:url(images/footer_milieux.gif);
background-repeat: repeat-y;
margin-top: -3px;
}

.footer_bas
{
width:780px;
height:15px;
background-image:url(images/footer_bas.gif);
background-repeat: no-repeat;
}


édit par Igor: lien réparé
Modifié par LABvin13 (07 Dec 2005 - 19:02)
Sujet clos
Aller à