Partage

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 !

JulFisher

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;
}

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 !

JulFisher

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

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 ?

gcyrillus

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");
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");
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");
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");
background-repeat: no-repeat;
margin:auto;
}

#menu
{
width: 505px;
height: 37px;
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/header2.gif");
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");
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");
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");
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");
background-repeat: no-repeat;
}

.texte_footer
{
background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer2.gif");
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

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

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 ?

gcyrillus

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

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Anonyme

27 décembre 2005 à 23:47:22

Heu non sa ne marche pas! regarde :
http://s140718937.onlinehome.fr/d%e9coupes/leyo/

gcyrillus

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

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

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

gcyrillus

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

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

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

gcyrillus

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

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

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.

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.

Plusieurs bugs ...

Plusieurs bugs ...

Supprimer

Modérer

Signaler le message aux modérateurs