28220 sujets

CSS et mise en forme, CSS3

Probleme positionnement CSS

Bonjour a Tous,
Sous IE marche Impec mais sous firefox petit bug du menu
.menu-titre{
background-image: url(images/menu-titre.jpg);
height: 30px;
width: 200px;
margin-bottom: 10px;
float: left;

}

.contenu-titre{
background-image: url(images/contenu-titre.jpg);
height: 30px;
width: 565px;
float: right;
margin-bottom: 10px;


}

.contenu{
background: white;
border: 1px #888888 solid;
width: 565px;
float: right;

}


.menu{
background: white;
border: 1px #888888 solid;
width: 200px;
float: left;
clear:both;

}


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='style.css' type='text/css'>

<title>Document sans nom</title>
</head>

<body>
<div class="header"></div>

<center><div class="pub"></div>

<div id="conteneur">
 

<div class="menu-titre"></div>
 <div class="menu"></div>   
 
  <div class="contenu-titre"></div>
  <div class="contenu">gfdsfdsdss</div></div>

      <div class="haut"></div>
<div class="milieu">Ici le texte du Footer</div>
<div class="bas"></div>
</body>
</html>


Voila Merci de Votre aide
Modifié par warman (22 Aug 2012 - 03:30)
Modérateur
Ton menu n'est que le background d'une div donc comment comptais-tu procéder ? Smiley sweatdrop

Il devrait au moins apparaître dans le code html.
koala64 a écrit :
Ton menu n'est que le background d'une div donc comment comptais-tu procéder ? Smiley sweatdrop

Il devrait au moins apparaître dans le code html.


Tu voulais dire "il doit ABSOLUMENT apparaître dans le code html", je crois Smiley lol
Modérateur
A mais non ! Tu n'as fait que rajouter du texte dans tes divs... Smiley lol

Bon, déjà, un premier soucis, c'est que tu fermes deux fois ta div ici :

<div class="contenu">gfdsfdsdss</div></div>

C'est gênant. Une fois suffit.

Dans le même ordre idée, tu ouvres une balise et tu ne la fermes pas:

<center><div class="pub"></div>

A noter que la balise center est dépréciée et qu'il vaut mieux la remplacer par un équivalent en CSS ( text-align:center; ou margin:auto; suivant les besoins)

Vu que tes conteneurs sont censés être uniques, il vaut mieux remplacer tes class par des id, plus adaptés à cet emploi.

Le doctype... Il n'y est pas non plus... Tu dois l'ajouter dans un soucis de validité. Vu que tu sembles débuter, on prend le plus simple, le doctype xhtml 1.0 Strict. En gros, tu remplaces ta balise d'ouverture html par ceci :

<!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" lang="fr">
...


Les balises meta et link sont des balises uniques et ne comportent pas de balise de fermeture... Tu dois donc les écrire ainsi:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />

Tu noteras que j'ai changé:
- les apostrophes en guillemets dans la balise link... En fait tous les attributs doivent être inclus dans des guillemets, c'est obligatoire.
- et la fermeture des deux balises. (toutes les balises doivent fermées et correctement imbriquées en xhtml)
Par ailleurs, j'ai ajouté media="screen" dans la balise link puisque ta feuille de style est normalement destiné aux écrans d'ordinateur.

mmh... bon déjà, il va falloir que tu consultes ce sujet:
Quand utiliser une div
Ces remarques te concernent aussi vu que tu commences par mettre des div partout. Smiley cligne

En fait, je te conseille déjà de consulter tous ces articles :
Bases et indispensables
parce qu'avant de penser mise en page, il faut passer par là sinon tu va toujours avoir des bugs... Smiley smile
Modifié par koala64 (15 Aug 2006 - 12:55)
Modérateur
Tiens, je viens de retomber là dessus, çà peut peut-être t'aider à faire les bonnes démarches aussi Smiley cligne
méthodologie
Modifié par koala64 (15 Aug 2006 - 13:00)
Modérateur
non non... euh lis tout ce que je viens te donner parce qu'il y a plein de problèmes... Je vais avoir beaucoup de mal à t'expliquer si tu ne fais pas tout çà... Smiley cligne

Pour ton menu, l'image du haut, celle où il y a marqué "Accueil, la société, etc...", çà ne peut pas fonctionner. Si l'utilisateur ne dispose pas des images, il ne voit rien et même s'il la voit, ce n'est pas cliquable. tu dois donc écrire tout çà dans ton code html pour que tout le monde puisse le voir.

Je te laisse consulter tous ces liens. Smiley smile
oui pour le menu du haut va je c'est comment je vais faire mais moi c'est juste sous firefox les block au millieu regarde celui de gauche est plus en au que l'autre je n'arrive pas a faire pour que se soit pareil
Merci
Modérateur
S'il te plait, lis ce que je viens te donner, en particulier la méthodologie, sinon j'arrête. Smiley fache
j'ai lu, meme si je ne comprend pas tout, mais c'est ce que j'ai fait! j'ai mi float left pour le menu et float right pour le contenu mais je ne sais pas comment faire pour enlever le decalage
Bonjour warman,

Ce que koala64 tente de te faire comprendre, c'est que tu procède à l'envers en créant ainsi ta CSS sur du code HTML "bidon" Smiley cligne .

Il faut dans ton HTML un minimum de code "réel" qui corresponde à ta page finale. Pour ton menu, cela veut dire d'abord des liens <a href="...>.

Avant de reposter dans ce forum, merci de modifier le code HTML de ton projet, pour y inclure les véritables éléments reflétant son contenu. Dans tous les cas, aucune réponse ne pourra être donnée à ta question sur CSS avant cela.
Modérateur
Pour t'en rendre compte, supprime ta feuille de style et regarde ce qui apparaît dans ton navigateur. Tu devrais tout voir... le titre, le menu, le texte et ce n'est pas le cas. Comme vient te le dire Laurent, on ne peut pas faire de la mise en page correcte sur ton code actuel.
HS: Vous ne savez pas mettre plusieur lien sur un image car on m'a dit qu'avec dreamwever on pouvait selectionner ce que l'on voulait et y metre un lien
Merci
Modérateur
Si tu te sers de dreamweaver, mets-toi en mode texte et prend une doc html pour savoir comment faire un lien sinon, ton code, ce sera la catastrophe et je te précise tout de suite que construire une mise en page sur un code html invalide n'est pas fiable.

Ce n'est pas une bonne chose de commencer à coder en mode visuel. Tu dois connaître le html si tu veux faire quelquechose de bien. Par la suite, si tu souhaites revenir en visuel, tu pourras le faire mais sache que la plupart des personnes qui se trouvent ici codent à la main.

Par ailleurs, ne t'occupe pas de la mise en page pour l'instant. Concentre-toi sur la structure html de ta page.

Ton premier objectif, c'est de rendre ta page valide.
Modifié par koala64 (15 Aug 2006 - 14:19)
Bon alors voila,
J'ai Indentée le Code Mit des Commantaire J'espere que c'est Bon :


<!-- Début DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Fin DOCTYPE -->

<!-- Début HTML -->
<html>

  <!-- Début Head -->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" media="screen" href="style.css" type="text/css" />
    <title>Document sans nom</title>
  </head>
  <!-- Fin Head -->
  
  <!-- Début Body -->
  <body>
  
    <!-- Début Menu Du Haut --> 
    <div id="menuduhaut">
    <a href="index.php" class="menuduhaut">Accueil</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">La Société</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">Produits</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">Transit IP</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">Colocation</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">Infrastructure</a>&nbsp;&nbsp;
    <a href="#" class="menuduhaut">Contact</a>
    </div> 
    <!-- Fin Menu Du Haut -->
    
    <div id="header"></div> <!-- Header -->

    <div id="pub"></div><!-- Pub -->

    
    <!-- Debut Conteneur -->
    <div id="conteneur">
    
      <div id="menu-titre">Menu</div><!-- Titre Du Menu -->
      
      <!-- Debut Menu -->
      <div id="menu">
      <a href="index.php">Accueil</a><br>
      <a href="#">Lien n°1</a><br>
      <a href="#">Lien n°2</a><br>
      </div>   
      <!-- Fin Menu -->
 
      <div id="contenu-titre">Bienvenue</div><!-- Titre Du Contenu -->
  
      <!-- Début Contenu -->  
      <div id="contenu">Bienvenue sur le site officiel de Transit-IP
      </div>
      <!-- Fin Contenu -->
      
      
    </div>
    <!-- Fin Conteneur -->

    <!-- Début Footer -->
    <div id="haut"></div>
    <div id="milieu">&copy; 2006 - Transit-IP.com</div>
    <div id="bas"></div>
    <!-- Fin Footer -->
    
    
  </body>
  <!-- Fin Body -->
  
</html>
<!-- Fin Html -->




#header{
background-image: url(images/header.jpg);
width: 998px;
height: 132px;
}

#haut{
margin-top: 10px;
background-image: url(images/haut.jpg);
height: 27px;
width: 800px;
clear: both;
margin: auto auto auto auto;
}

#milieu{
background-image: url(images/milieu.jpg);
height: 30px;
width: 800px;
text-align: center;
margin: auto auto auto auto;
}
#pub{
background-image: url(images/pub.jpg);
width: 571px;
height: 114px;
margin: auto auto 10px auto;
}

#bas{
background-image: url(images/bas.jpg);
width: 800px;
height: 30px;
margin: auto auto 10px auto;

}

#menu-titre{
background-image: url(images/menu-titre.jpg);
height: 30px;
width: 200px;
margin-bottom: 10px;
float: left;

}

#contenu-titre{
background-image: url(images/contenu-titre.jpg);
height: 30px;
width: 565px;
float: right;
margin-bottom: 10px;


}

#contenu{
background: white;
border: 1px #888888 solid;
width: 565px;
float: right;
margin-bottom: 10px;
}


#menu{
background: white;
border: 1px #888888 solid;
width: 200px;
float: left;
clear:both;
margin-bottom: 10px;
}


#conteneur
{
width: 950px;
margin: auto auto 10px auto;
}

#menuduhaut{
position: absolute;
margin-top: 60px;
margin-left: 280px;
}

a.menuduhaut{
font-weight: bold;
color: #b8b8b8;
font-size: 20px;
text-decoration: none;
}

Modifié par warman (15 Aug 2006 - 14:46)
Modérateur
Il y a du mieux mais, pour ta structure html, ce n'est pas encore tout à fait çà; tu n'es plus très loin. Smiley cligne

Maintenant, comme tu m'as dit avoir lu les liens que je t'ai donné, tu es en mesure de savoir comment coder tes menus, où les placer, comment bien te servir des classes et des id, quelles sont les divs inutiles et comment corriger tes erreurs... Si ce n'est pas le cas, c'est que tu considères que ces articles peuvent être survolés voire optionnels pour être en mesure de faire ton site et qu'on a donc tous mis une heure pour y arriver. Au risque de te décevoir, certains ont mis plusieurs semaines.

J'attire seulement ton attention sur le temps que nous consacrons à te répondre. Parfois, çà peut durer plusieurs heures pour une seule et même personne, ce qui n'est pas de tout repos. Si on voit que tu ne fais pas de réels efforts, qu'il faut te tenir la main à chaque avancée voire qu'il faut insister lourdement pour te convaincre d'étudier, on se lasse et on abandonne... Les liens que je t'ai donné sont adaptés aux débutants et produits avec des mots simples. Il n'y a rien de bien difficile si tant est que tu passes un peu de temps à les comprendre. Je te laisse donc bosser et je retourne à mes occupations.

Bon courage à toi. Smiley smile
Sujet clos
Aller à