Aller au contenu

mise en page complexe (css)

rgwarrior

Par rgwarrior
dans (X)HTML et CSS

 Partager

Sujets conseillés

rgwarrior

rgwarrior

Posté
Posté (modifié)

Voila, j'ai un probleme: mon design superpose des blocs, et je ne sais pas très bien comment m'y prendre...

voila à quoi il ressemble => http://awasagaga.free.fr/awsg.jpg

je vois deux solution:

- soit je coupe les images, et je met les fragments dans des blocs (cest ennuyant, ça sera peut être trop imprecis, et ça m'oblige à prendre un design fixe)

- sinon, et je ne sais pas faire, c'est pour ça que je vous demande de l'aide, je voudrai utiliser FLOAT, et faire flotter mon menu legerement sur le corp, donc mettre une marge dans le corp afin que le menu ne soit pas sur le texte... le probleme, c'est que deja ça je maitrise pas trop, mais le plus dur, c'es que je voudrai faire un design en pourcentage, pour que ce soit optimum pour toutes les resolutions

vous pouvez m'aider svp??? parce que je n'arrive à rien !

voila à quoi ça ressemble pour l'instant: http://awasagaga.free.fr/asupprimer.html

pour l'instant, pour remplir ma page, j'utilise une page quelconque que voici:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

 <body>

 <!-- L'en-tete -->

 <div id="en_tete">

</div>

<!-- Les menus -->

<div id="menu">    
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
          <li><a href="page2.html">Lien</a></li>
          <li><a href="page3.html">Lien</a></li>
        </ul>
      </div>
    
      <div class="element_menu">
        <h3>Titre menu</h3>
        <ul>
          <li><a href="page4.html">Lien</a></li>
          <li><a href="page5.html">Lien</a></li>
          <li><a href="page6.html">Lien</a></li>
        </ul>
      </div>    
    </div>

    <!-- Le corps -->

    <div id="corps">
      <h1>Mon super site</h1>
    
      <p>
        Bienvenue sur mon super site !<br />
        Vous allez adorer ici, c'est un site genial qui va parler de... heu... Je cherche encore un peu le th?me de mon site :-D
      </p>
    
      <h2>A qui s'adresse ce site ?</h2>  
      <p>
        A tout le monde ! Si je commence a privilegier certaines personnes, on va m'accuser de discrimination;o)<br />
        Que vous soyez fans de fusils a pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
      </p>
      
      <h2>L'auteur</h2>  
      <p>
        L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
        Je vais essayer de faire le meilleur site du monde (ca doit pas etre bien complique). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros a mon site, puis de les mettre en mon pouvoir.<br />
        Je prendrai ensuite le controle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers a la recherche de nouveaux peuples a soumettre a ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
      </p>
    </div>

    <!-- Le pied de page -->

    <div id="pied_de_page">
      
    </div>

  </body>
</html>

et voici le css (c'est ce qui pose probleme)



body
{
    width:100%; 
  height:100%; 

    margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
    margin-bottom: 20px;    /* Idem pour le bas du navigateur */
    background-color: black; 
}

#en_tete
{
    width: 100%;
  height: 159px;
    background-image: url("image/banniere.jpg");
    background-repeat: no-repeat;
}

#menu
{
    margin-left: 5px;
  float: left; /* Le menu flottera à gauche */
    width: 20%; /* largeur du menu */
  background-color: black;
}

.element_menu
{
    background-color: black;
    background-image: url("image/motif.jpg"); /* element à repeter dans le menu */
    background-repeat: repeat-y;
          
    margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}




#corps
{
    margin-left: 18%; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    padding: 5%; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    
    color: black; /* du texte? */
    
    background-image: url("image/papyrus.jpg"); /* element à repeter dans le menu */
    background-repeat: repeat-y;
    
   
}


#pied_page
{
    width: 100%;
  height: 123px;
    background-image: url("image/piedpage.jpg");
    background-repeat: no-repeat;

donc voila, j'ai besoin d'aide svp

Modifié par Dudu
Lien vers le commentaire
Partager sur d’autres sites
dièse

dièse

Posté
Posté

La seule solution semble être le découpage sous photoshop et intégration en CSS sur les 3 colonnes.

Je crois comprendre ce que tu aimerais faire, et ça semble effectivement un peu trop complexe :blush:. Je ne peux t'aiguiller que sur un seul point : le mode flottant ne te servira à rien ;)

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut,

pareil que les autres, mais en plus tu pars avec une belle erreur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Mon super site</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

C'est invalide. Un doctype xhtml 1.1 oblige à un type MIME "application/xhtml+xml" ;)

PS: pour les longs morceaux de code à poster sur le forum, préfères les balises "codebox". J'ai édité ton message.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...