Partage
  • Partager sur Facebook
  • Partager sur Twitter

Plusieurs bugs ...

Sujet résolu
Anonyme
27 décembre 2005 à 20:37:08

Bonsoir ,

J'ai plusieurs bugs pour la programmation de mon design tout d'abord un lien :
http://s140718937.onlinehome.fr/d%e9coupes/leyo

Alors voici les bugs :
-Le "News" est mal centré ! quand j'essaye de taper le code dans le css sa déplace tout le bloc du titre_contenu
-les barres autour du design sont trop grandes ! j'ai essayé de modifié la taille mais sa ne fait rien ou elle deviennent trop petites !
-le texte dépasse du bloc contenu !
-J'aimerais changer la couleur de l'extérieur des barres seulement sa bug un peu et sa se réparti sur un bout de la page

Voila ! ^^

Maintenant mes codes :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Nightmares</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <link rel="stylesheet" media="screen" type="text/css" title="Design Nightmares" href="style.css" />
   </head>
   <body>
   <div id="global">
   <div id="header"></div>
   
   <div id="menu"></div>
   <div id="texte_menu">
   <a href="#">Home -</a>
   <a href="#">Nightmares -</a>
   <a href="#">Pactes -</a>
   <a href="#">Guerres -</a>
   <a href="#">Membres -</a>
   <a href="#">Recrutement -</a>
   <a href="#">Contact</a>
   
   <div id="titre_contenu"><p><b>News</b></p></div>
   <div id="contenu"></div>
   <div id="texte_contenu"><p>Bienvenue sur mon site !</p>
   <p> bla bla bla </p></div>
   
   <div id="footer"></div>
   <div id="footer2"><span class="texte_footer">
   <a href="#">Admin -</a>
   <a href="#">Liens -</a>
   <a href="#">A Propos</a>
   </div>
   <div id="footer3"></div>
   <div class="texte_footer"></div>
   <div id="barre"></div>
   <div id="barre2"></div>
   </div>
   </body>
   </html>



body
{
width: 650px;
background-image: url("images/fond.gif");
background-repeat: repeat;
color: #000000;
}

#global
{

width: 650px;
}

#barre
{

width: 13px;
height : 850px;
background-image: url("images/barre.gif");
background-repeat: repeat;
right:15px;
position: absolute;
top: 1px;
margin-right: 130px;
float: right;

}

#barre2
{

width: 13px;
height : 850px;
background-image: url("images/barre.gif");
background-repeat: repeat;
top: 1px;
left: 150px;
float: left;
position: absolute;
}

#header
{

width: 502px;
height: 114px;
background-image: url("images/header.gif");
background-repeat: no-repeat;
margin-left : 242px;
}

#menu
{

width: 505px;
height: 37px;
background-image: url("images/header2.gif");
background-repeat: no-repeat;
text-align: center;
margin-left : 241px;
font-size: small;
}

#titre_contenu
{

width: 502px;
height: 20px;
background: url("images/titre_contenu.gif");
background-repeat: no-repeat;
margin-top: 55px;
font-size: small;
text-align: left;
padding-left: 46px;
margin-left: 3px;
}

#contenu
{

width:503px;
height:177px;
background-image: url("images/fond_contenu.gif");
background-repeat: repeat-y;
margin-left: 3px;
}

#texte_contenu
{

width: 503px;
height:177px;
font-family: "Tahoma", Arial, serif;
font-size: small;
margin-top: -160px;
text-align: left;
}

#footer
{

width: 504px;
height: 9px;
background-image: url("images/footer1.gif");
background-repeat: no-repeat;
padding-left: 25px;
margin-top: 40px;
}

#footer2
{

width: 505px;
height: 11px;
background-image: url("images/footer2.gif");
background-repeat: no-repeat;
}

#footer3
{

width: 506px;
height: 48px;
background-image: url("images/footer3.gif");
background-repeat: no-repeat;
}

#texte_menu
{

width: 503px;
margin-left: 240px;
margin-top: -29px;
text-align: center;
font-family: "Tahoma", Arial, Verdana, serif;
font-size: x-small;
}

.texte_footer
{
width: 505px;
height: 74px;
font-family: "Tahoma", Arial, Verdana, serif;
font-size: x-small;
color: black;
margin-bottom: 30px;
margin-top:30%;
text-align: center;
}

a
{
text-decoration: none;
color: black;
margin-left: 6px;
}


Merci d'avance !










  • Partager sur Facebook
  • Partager sur Twitter
27 décembre 2005 à 21:41:38

Pour le texte dépassant dans le contenu :

#texte_contenu
{

[...]
padding-left: 20px; /* On définie une marge intérieure à gauche */
}


Pour les barres, rien de plus simple que de réduire leur hauteur :

#barre
{

[...]
height : 750px;
[...]
}

#barre2
{

[...]
height : 750px;
[...]
}


Pour le titre News, réduis sa largeur et sa marge intérieure gauche :

#titre_contenu
{

width: 452px;
[...]
padding-left: 50px;
}


Et ça, je ne vois pas à quoi ça sert :

.texte_footer
{
width: 505px;
height: 74px;
font-family: "Tahoma", Arial, Verdana, serif;
font-size: x-small;
color: black;
margin-bottom: 30px;
margin-top:30%;
text-align: center;
}
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
27 décembre 2005 à 21:55:49

Merci !

Pour le contenu qui dépasse => OK
Pour les barres : non , http://s140718937.onlinehome.fr/d%e9coupes/leyo/
Les barres ne vont pas jusqu'au bout. J'aimerais qu'elles s'arretent juste un peu après le footer
Pour le "news" ba sa la déplacer un peu sur la droite mais je voudrais juste un tout petit peu sur le bas
Et pour le code qui sert à rien c'est rectifier :)
Voila !

Merci encore !
  • Partager sur Facebook
  • Partager sur Twitter
27 décembre 2005 à 22:52:43

Pour le titre de news :
#titre_contenu p
{
padding-top: 3px;
}


Pour les barres une hauteur de height : 555px; c'est bon ;) Ce qui fait le scroll vertical après, c'est ça :
.texte_footer
{
width: 505px;
height: 74px;
font-family: "Tahoma", Arial, Verdana, serif;
font-size: x-small;
color: black;
margin-bottom: 30px;
margin-top:30%;
text-align: center;
}


En le supprimant, rien ne devrait changer ;)
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
27 décembre 2005 à 23:01:12

Super !
Tout est nikel
Merci ! ! !
PS = pour les barres j'ai mis 578 et c'est pile poil !

Mais sinon pour la couleur du fond pour l'extérieur des barres tu c'est comment faire ?
  • Partager sur Facebook
  • Partager sur Twitter
27 décembre 2005 à 23:05:04

bonjour,

en reprenant ton code en enlevant et ajoutant des balises (toutefois, je suis rester sur ton idée de base sans tout reprendre).
On arrive alors a faire descendre tes barres jusqu'en bas (technique des cadres arrondis en simplifié)en appliquant une hauteur de 100% minimale a la page .
en tentant de redecouper le html plutot par zone , ex ..un conteneur pour la news que l'on centre, etc...
ajout d'une couleur de fond a certains conteneurs et placement de l'image en bas , de façon a obtenir des boites extensibles...

en bref, pour coder un design, il est preferables de le decouper d'abord par zone,
eventuellement un conteneur globale , l'entete, le menu (qui peut etre integre a l'entete si il est horizontale), les differents contenus, (menus lateraux, news,ou autre cadres de textes, ).
En appliquant des largeurs et hauteurs et fond de couleurs a ces differentes zones (<div>), on commence par s'appliquer a les positionner.
ensuite vient seulement les textes et liens a inclure et les fonds ou images, c'est la qu'intervient le plus gros travail sur le css.
Pour l'extensibilite on enleve les valeurs de hauteurs...qui ne servent a rien.
(sous ie certain elements n'ont pas la valeurs css donné, cela peut-etre regle selon les cas par un :"overflow:hidden;" ou un line-height:la hauteur voulu;.

Voici ta page rebricole (sous IE, je n'ai pas pu tester sous un autre navigateur):
<!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">
<head>
       <title>Nightmares</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <style type="text/css">
html, body, #global, #global2 {height:auto!important;height:100%;min-height:100%;}
body
{
width: 650px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/fond.gif&quot;);
background-repeat: repeat;
color: #000000;
margin:auto;
}

#global
{
width: 650px;
margin:0 auto;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/barre.gif&quot;);
background-repeat: repeat-y;
}
#global2
{
width: 630px;
margin:0 0 0 20px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/barre.gif&quot;);
background-repeat: repeat-y;
background-position:right;
}



#header
{
width: 502px;
height: 114px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/header.gif&quot;);
background-repeat: no-repeat;
margin:auto;
}

#menu
{
width: 505px;
height: 37px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/header2.gif&quot;);
background-repeat: no-repeat;
text-align: center;
margin:auto;
font-size: small;
margin:auto;
line-height:30px;
}

.titre_contenu
{
width: 456px;
height: 20px;
line-height:22px;
background: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/titre_contenu.gif&quot;);
background-repeat: no-repeat;
margin:0 auto;
margin-top: 25px;
font-size: small;
text-align:left;
padding-left:46px;
font-weight:bold;
}

.contenu
{
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/fond_contenu.gif&quot;);
background-repeat: no-repeat;
background-position:bottom;
background-color:#7b7b7b;
margin:auto;
width: 493px;
font-family: "Tahoma", Arial, serif;
font-size: small;
text-align: left;
padding:0 5px 15px 5px;
}

.boitepied
{
width: 504px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer1.gif&quot;);
background-repeat: no-repeat;
margin:0 auto;
margin-top:20px;
padding-top:9px;
}



#footer3
{
height: 48px;
line-height:48px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer3.gif&quot;);
background-repeat: no-repeat;
}



.texte_footer
{
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer2.gif&quot;);
background-repeat: no-repeat;
width: 504px;
font-family: "Tahoma", Arial, Verdana, serif;
font-size: x-small;
color: black;
text-align: center;
background-color:#7b7b7b;
margin:0;
}

a
{
text-decoration: none;
color: black;
margin-left: 6px;
}
a:hover
{
color: #fff;

}

p {margin:0;}

</style/>
   </head>
   <body>
   <div id="global">
   <div id="global2">
   <div id="header"></div>
   
   <div id="menu"> 
   <a href="#">Home -</a>
   <a href="#">Nightmares -</a>
   <a href="#">Pactes -</a>
   <a href="#">Guerres -</a>
   <a href="#">Membres -</a>
   <a href="#">Recrutement -</a>
   <a href="#">Contact</a>
 </div>

<h3 class="titre_contenu">News</h3>
<div class="contenu">
<p>Bienvenue sur mon site !</p>
<p> bla bla bla </p>
</div>

<h3 class="titre_contenu">Des class</h3>
<div class="contenu">
<p>c'est mieux!</p>
<p>Reutilisable, on peut s'en servir comme base et ainsi la reproduire autant de fois que voulu, comme cette boite de news

:).</p>
</div>   
   <div class="boitepied">
   <div  class="texte_footer">
   <a href="#">Admin -</a>
   <a href="#">Liens -</a>
   <a href="#">A Propos</a>
 
   <div id="footer3"></div>
   </div> 
</div>
   </div></div>
   </body>
   </html>
   
   
 


a plus et bon dev
  • Partager sur Facebook
  • Partager sur Twitter
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
Anonyme
27 décembre 2005 à 23:29:40

Oui ... au moins je ferais comme sa pour la prochaine fois !
Mais une petite question pourquoi 2 global ?

Eh sinon pour changer la couleur de l'extérieur des barres quelqu'un sait ?
  • Partager sur Facebook
  • Partager sur Twitter
27 décembre 2005 à 23:41:59

bonsoir,
?? les 2 globales ???, et les barres elles son afficher comment ? :)
tu met une image de fond a body qui perd du coup de sa transparence et html la recupere...alors en ajoutant par exemple au code de la page que j'ai bricolé ceci
html {background-color:lightblue;}
tout la partie de la page qui ne sera plus sous body (qui fait 650px de large) affichera la couleur de fond de html.
a plus
  • Partager sur Facebook
  • Partager sur Twitter
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
27 décembre 2005 à 23:51:56

... je te parlais de la page que je t'avais bricolé, pour la tienne ça marche a moitié, car ton body n'est pas centré et que tu as positionné tes elemnts avec une marge gauche, ... voili voilou ou je voulais en venir avec l'idée de commencer sa page en la decoupant par zone et positionner chaque element/zone, avant de s'attaquer vraiment au design et au css
a plus
  • Partager sur Facebook
  • Partager sur Twitter
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
Anonyme
27 décembre 2005 à 23:54:06

Ah oui en effet :) je vais prendre ton code bricolet alors !
Ba merci

PS = je suis un vrai Zer0 moi ^^

a plus
  • Partager sur Facebook
  • Partager sur Twitter
27 décembre 2005 à 23:55:20

moi aussi !, mais avec le temps le zero se positive :)

a propos, dans ma bricole , j'ai repassé ta page en xhtml 1.0.
a plus
  • Partager sur Facebook
  • Partager sur Twitter
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
Anonyme
28 décembre 2005 à 0:52:26

J'en reviens à ce sujet mais là j'essaye de comprendre , j'ai pas envie de foutre le code comme sa sans rien piger ! donc j'aimerais bien savoir à quoi correspond ceci :
height:auto,important;

min-height:100%;

margin:0 0 0 20px;

line-height:30px;

font-weight: bold;

padding:0 5px 100px 5px;


Voila c'est ces valeurs que je ne comprends pas , j'aimerais bien qu'on m'explique :)

Merci
  • Partager sur Facebook
  • Partager sur Twitter
28 décembre 2005 à 1:08:09

height:auto!important;
c'est pour indique aux navigateurs autre que IE, que la hauteur de l'element doit etre adapter au contenu (car seul IE comprend height comme min-height la nous avions besoin de determiner une hauteur minimale) donc min-height: pour les navigateurs recent, height pour IE et le hack "important pour les navigateurs recent afin qu'il puissent aggrandir l'element concerné..

font-weight:bold;
sert a remplacer la balise <b></b> que tu avais dans ton code initial.caractere en gras.

line-height:30px;
est egale a la hauteur d'interligne, sert a recentree une simple ligne de texte par exemple (les liens de ton menu horizontal) ou a abliger IE afficher l'element concerne avec cette meme hauteur (par exemple une balise <a> avec un height:30px; ne fera pas forcement 30px de haut dans IE, avec le line-height en plus oui).

margin ce sont les marges exterieurs
padding les marges interieurs
aux choix: margin-top, margin-left:, etc
ou margin: 1ere valeur (haut et bas) 2eme valeur (droite et gauche) ou
margin : 1ere valeur (haute) 2eme valeur (droite et gauche) 3eme valeur (bas)
ou margin 1ere valeur(haut) 2eme valeur(droite) 3eme valeur (bas) 4eme valeur(gauche) idem pour padding.

a plus


  • Partager sur Facebook
  • Partager sur Twitter
| Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
Anonyme
28 décembre 2005 à 1:10:50

Ah ! ba voila c'est beaucoup plus clairs !
Au moins je sais comment procéder pour la prochaine fois.
A plus et merci encore.
  • Partager sur Facebook
  • Partager sur Twitter

Plusieurs bugs ...

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown