28173 sujets

CSS et mise en forme, CSS3

Pleins de questions sur le CSS (newbie)

Topic basé sur le topic original qui est à cette adresse :
http://forum.hardware.fr/hardwarefr/Programmation/Pleins-questions-CSS-newbie-sujet-84849-1.htm

Je m'adresse à vous car comme vous pouvez le voir personnes n'arrivent à répondres à mes questions ! Je viens donc vous questioner vous Pro du CSS !

a écrit :
Hello à tous ! je reviens demander de l'aide sur le forum qui m'a jadis aider à faire le CSS de mon site (fonction rechercher)

Donc j'ai plusieurs questions , on va commencer par la plus simple

mon site c'est http://www.warcraft-net.new.fr/

Smiley strike --->Premiere question à propos du background (qui bug quand la page est trop longue)[/strike]

mon code actuel c'est 

body {
	background-color: #000000;
	background-image: url(images/fond%20copie.jpg);
}


Mon idée c'est de refaire mon image de fond ,et qu'apres la fin du dégradé sois géré par background-color , mais comment faire pour faire une image qui se répete en largeur (donc une image d'1 px de large) mais qui ne se répete pas en hauteur ?

(PS je suis ouvert à toutes propositions sur comment rendre mon background plus "beau")

--->Deuxième queston à propos des barre bleu qui entours les menus

Que dois je faire pour que mes barre sois en dégradé (je le ferai sous photoshop pour l'image) comme sur mes barre en dessous du header ?

Mon code actuel c'est

http://www.warcraft-net.new.fr/warcraftnet5b.css

et ces barres sont généré par une seul couleur en CSS , et vu que je suis un gros newbie je vois pas ou est la partie de mon code qui gere ça Smiley langue , si vous pouviez me dire ou c'est et par quoi remplacer (y a du background:url(images/barre_menus.jpg) repeat-y ...; dans l'air non ?)


--->Troisieme question (la plus dur)

J'ai pour projet de rajouter un menus droite pour mon site qui sera consacré aux membres (un menus qui affiche toutes les info du membre enregistré sur le forum et identifié)

Moi en grand newbie je me suis dit "tkt ça doit pas être trop compliqué , je vais copier coller et changer l'allignement et augmenter la taille de la page"

et voila ce que ça donne pour l'instant :

http://www.warcraft-net.new.fr/indext.php

avec pour CSS

http://www.warcraft-net.new.fr/warcraftnet5c.css

entre nous j'ai un peu honte du résultay :sweat:

Si vous pouviez m'aider ça serai vraiment sympa ! (note je ne suis pas si newbie que ça , je sais au moins qu'il faudrai que je me refasse un header plus grand Smiley langue t1cable: )


Ca serai super si on pouvait m'aider !

PS j'aurai d'autre question une fois que celle si seront finit Smiley cligne

Merci d'avance
Modifié par G@NON (16 Feb 2006 - 13:04)
#menu{  
    width:200px;  
    border-right:1px solid black;  
    border-collapse: collapse;  
    float:left;  
    background-color : #A4B3D2;  
    text-align: center;  
    _height:100%;  
	display: table-row;
    vertical-align: top; // alignement vertical du contenu en haut de la cellule 
    background:url(images/fond_menu.jpg) repeat-y left;  
}
#menu2{  
    width:200px;  
    border-right:1px solid black;  
    border-collapse: collapse;  
    float:right;  
    background-color : #A4B3D2;  
    text-align: center;  
    _height:100%;  
	display: table-row;
    vertical-align: top; // alignement vertical du contenu en haut de la cellule 
    background:url(images/fond_menu.jpg) repeat-y right;  
}


pour le menus 2 je viens de mettre background:url(images/fond_menu.jpg) repeat-y right; à la place de left et ça change rien Smiley decu

Je comprend pas ce que tu entend par refaire mon image :s

Enfin merci comme meme à toi pour ton aide ^^
En fait ta colonne de gauche ne descend pas réellement jusqu'en bas. Par contre on a l'impression que oui car dans ton container tu as cette fameuse image:

#container{ 
    _height: 100%; 
    _display: table; 
    position:relative; 
    background:#fff url(images/fond_menu.jpg) repeat-y left;
}

qui contient en fait un motif permettant de donner l'illusion qu'on a une colonne à gauche. Il faut donc que tu agrandisses cette image à la largeur de ton design et que tu appliques le même motif sur la droite.
Je comprend pas pk il faut refaire l'image ?

et on peut pas faire un truc du genre

background:#fff url(images/fond_menu.jpg) repeat-y left and right;

?

Si il existe un moyen plus simple pour conserver l'apparance je suis pret à prendre car dans l'état actuel des chose je suis obliger sur des page comme ça : http://romain.giovanetti.free.fr/index.php?page=membres

de faire pleins de <br> pour que le menus se retrouve pas bougger par le footer.
Modifié par G@NON (16 Feb 2006 - 19:45)
Tu peux toujours rajouter un div qui englobe ton #container en lui indiquant

#container2 {
    background: #FFF url(images/fond_menu.jpg) repeat-y left;  
}


et changé ton bg dans ton #container

#container {
    background: url(images/fond_menu.jpg) repeat-y right;
}
ça marche pour les colones ! suelement y a un léger bug ça débord légerement sur les coté

pour résoudre ça j'ai changé


http://www.warcraft-net.new.fr/indext.php
#header, #sousheader, #container, #footer, #footer2, #quicknav{
width:100%;

100% au lieu de 1080px.

Je pense que je vais refaire toutes les tailles en % c'est pas mieux ?


en parlant de ça ,j'ai un petit trou de mémoire (dsl je suis en vac) comment on fait pour calculer un chiffre représente tant de % d'un autre ?
On fait un produit en croix ^^

Si 100% valent 1080px
alors 23% valent 23*1080/100

Si j'avais pensé donner des cours de math par ici Smiley lol
En fait en regardant bien j'ai pas trouvé d'autre chose à convertir en % car faut pas que les menus sois réduit sinon c'est plus lisible lol

J'ai corrigé le bleme du fondmenu.jpg qui se répetait or menus en rajoutant #container2,

à la ligne 

#header, #sousheader, #container, #container2, #footer, #footer2, #quicknav{
	width:85%;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: left;
	margin:0 auto;


En réduisant au passage le site à 85 % pour que mon background dégradé soit toujours visible suelement y a comme un bleme et je sais pas d'ou , surement des tailles mais je vraiement pas ou :s

ça se passe toujours la http://www.warcraft-net.new.fr/indext.php

et le CSS est la : http://www.warcraft-net.new.fr/warcraftnet5c.css

Merci de m'éclairer !
Sujet clos
Aller à