Votre question

site en html et design css

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
3 Février 2006 11:26:04

Bonjour tout le monde :-D
Voila je suis en train de creer un site, j'ai fait une premiere page html et pour le design, jai fait une feuille de css a coter...

Jusque la ca va ;-) j'ai ecrit mon contenu dans la page html et j'ai fait des bloc avec mon css, une en tete des menus ect ...Mais je n'arrive pas a centrer ma banniere avec le css...

je vous met mon code ca sera plus clair..

#en_tete
{
width: 760px;
height: 100px;
background-image: url("ban.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto;
}


voila, jai rajouter l'atribut margin: auto; mais je ca na rien donner... voila parmis mes probleme, jajoute que mon imae est generer par mon css et pas par mon texte html.. :-D

voila merci a tous ...

Autres pages sur : site html design css

3 Février 2006 11:55:05

Dans ton code essye cette ligne:
background-position : center top;

Voila tien nous au courant

a+
3 Février 2006 12:07:18

Salut, tu peux pour simplifier rassembler les balises background.


background: url('ban.jpg') center top no-repeat;

:-)
Contenus similaires
3 Février 2006 13:58:03

girolt avec ton code, ma banniere a completement disparu .... j'essai le tint snip
3 Février 2006 14:00:40

non ca ne marche pas non plus, j'ai peut etre une idée , c'est de centrer ma balise div pour mon bloc d'entete je vais essayer !! merci
3 Février 2006 14:02:55

Enleve le top et laisse le center pour voir ca va peu etre marcher
3 Février 2006 14:06:13

JE pense que ca marche pas a cause des '

remplace par des "

url("ban.jpg") :-D
3 Février 2006 14:35:01

Il faudrait voir la construction de ta page pour pouvoir te répondre au mieux.

Ton bloc en-tête est-il contenu dans un autre bloc ?

760px* 100px, ce sont les dimensions de ton image ou est-elle plus petite que le bloc en-tête ?
4 Février 2006 00:12:44

bonjour,
Je m y connais un minimum en css mais moi je pense qu'il faut que tu redimensionner ton en-tête de façon à ce qu'elle face la même taille que ton image ...
ensuite tu centre ton en-tête par rapport a ta page...
voila (je ne suis pas sure de moi mais j'essaye de t'aider, ça ne coûte rien d'essayer)
bonne chance... ;-)
5 Février 2006 05:45:08

je vous met les deux, mon code source et mon code css... jai trop de probleme, je n'arrive pas a faire des module de menus a mon gout, pas a centrer mon image, mon fond est ridicul( ca c'est ma faute ..) bref tout va de travers...
bref si quelqun peut m'aider pour les bases..J'ai lut tout le tuto sur le site du zero ca ma deja fait beaucoup avancer mais ca ne me plai toujours pas...


code source css:

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("fondsite.jpg");
}

#en_tete
{

width: 760px;
height: 100px;
background-image: url("ban.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto

}

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #cccccc;
background-image: url("fondmenu.jpg");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}




.element_menu h3
{
color: #cccccc;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;

color: #ffffff;
background-color: #cccccc;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}

#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}



code source html :

<!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" >
<head>
<title>immat.skyblog.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design immat" href="index.css" />

</head>
<body>

<div id="en_tete">

</div>

<div id="menu">
<div class="element_menu">
<h3>rap francais</h3>
<ul>
<li><a href="page1.html">album rap francais</a></li>
<li><a href="page2.html">lyrics</a></li>
<li><a href="page3.html">city life rap</a></li>
</ul>
</div>

<div class="element_menu">
<h3>divers</h3>
<ul>
<li><a href="page4.html"></a></li>
<li><a href="page5.html"></a></li>
<li><a href="page6.html"></a></li>
</ul>
</div>
</div>



<div id="corps">
<H1>immat.sky</H1>

</div>

<div id="pied_de_page">
copiright by immat
</div>

</body>
</html>

et le resultat des deux (tres laid) mon site tout laid!!
merci a tous de vos reponses! :-D
5 Février 2006 05:52:43

Essaye ca :

html{
margin:0;
padding:0;
min-height:100%;
height:100%;
}


#en_tete{
position: absolute;
left: 50%;
top: 0;
width: 760px;
height: 100px;
margin-left: -355px; //(la moitié du width en fait)
background-image: url("ban.jpg");
background-repeat: no-repeat;
}

5 Février 2006 14:18:56

voila ce que ton code donne jun ... clik la , l'image est passer par dessus le premier bloc...
j'aimerai aussi savoir comment faire de beau menus a la place de ces bloc tout mal foutu qui sont laid, pour mon html je pense avoir fini, a part le contenu :)  mais tout le css est a revoir je pense...en fait le resulat que je voudrai obtenir c'est un bloc principal de contenu, un menu a gauche avec toute mes catégories, un menus sympa pas trop lourd mais joli a regarder...bref un beau design ...et je ne veux pas passer par un kit graphic, j'aimerai beaucoup le faire moi--meme, avez vous des lien vers des site ou des idée, en m'expliquant si possible que je comprenne ce que je fait .... merci beaucoup a vous .. :-D
5 Février 2006 21:21:18

Utilise ca comme css :

<!--
html{
margin:0;
padding:0;
}

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("fondsite.jpg");
}

#en_tete{
position: relative;
left: 50%;
top: 0;
width: 760px;
height: 100px;
margin-left: -355px; //(la moitié du width en fait)
background-image: url("ban.jpg");
background-repeat: no-repeat;
}

#menu
{
position:relative;
float: left;
width: 120px;
}

.element_menu
{
background-color: #cccccc;
background-image: url("fondmenu.jpg");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}

.element_menu h3
{
color: #cccccc;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

#corps
{
position: relative;
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
width: 660px;
color: #ffffff;
background-color: #cccccc;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}

#pied_de_page
{
position:relative;
width: 660px;
margin-left: 140px;
margin-bottom: 20px;
text-align: center;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
-->


Ca devrait plus ou moins marcher. J'ai un peu foutu n'importe quoi avec les dimensions des blocs, ré-adapte à tes besoins. Le truc qu'il manquait en fait c'etait des "position : relative", désolé dans mon premier model j'ai mis Absolute, par habitude uniquement.

Si tu veux faire quelque chose de beau, part du graphisme, dessine des croquis, passe à la réalisation dans ton logiciel de graphisme, seulement après tu touchera au code. Il faut bosser dans l'ordre. Ya pa de recette magique pour faire du beau, suffit de pratiquer.
5 Février 2006 21:30:01

Citation :

body{
width:799px;
margin:auto;
margin-top:0;
margin-bottom:0;
background-color:#CCCCCC;
color:#000000;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:10px;
border-spacing:0;
}

#header{
width:797px;
height:304px;
background-image:url("../images/header.png");
background-repeat:no-repeat;
border:1px solid black;
}

#menu_principal{
padding:5px;
margin-right:660px;
background-color:#FFFFFF;
border:1px solid black;
border-top:none;
border-right:none;
}

#menu_principal ul{
padding:0px;
padding-top:3px;
padding-left:30px;
margin:0px;
}

#menu_membres{
padding:5px;
margin-right:660px;
background-color:#FFFFFF;
border:1px solid black;
border-top:none;
border-right:none;
}

#menu_membres ul{
padding:0px;
padding-top:3px;
padding-left:30px;
margin:0px;
}

#conteneur_principal{
width:618px;
float:right;
padding:20px;
padding-top:5px;
background-color:#FFFFFF;
background-image:url("../images/fond_cadre_principal.gif");
background-repeat:no-repeat;
background-position:bottom;
border:1px solid black;
border-top:none;
}

#conteneur_principal h1{
text-align:center;
}

.conteneur_news{
width:75%;
margin:auto;
padding:5px;
border:1px dashed black;
}

.conteneur_news_auteur{
color:#CC00CC;
text-align:right;
}

.conteneur_news_auteur a{
color:black;
text-decoration:none;
}

.conteneur_news_auteur a:hover{
color:#CC00CC;
text-decoration:line-through;
}

.barre_titre{
background-image:url("../images/fond_titre.png");
background-repeat:repeat-x;
border:1px solid black;
text-align:center;
}

#footer{
clear:both;
width:797px;
font-size:9px;
padding-top:3px;
text-align:right;
line-height:110%;
}

a{
color:#CC00CC;
text-decoration:none;
}

a:hover{
color:#000000;
text-decoration:line-through;
}


Si ça peut t'aidé ^^ Si tu veux voir le résultat va sur OuT TeaM

Edit : C'est mon css ça, mais comme tu veux un truc centré bah tu zieutes mon css et t'adaptes au tien :p 
6 Février 2006 00:12:41

bonjour,

Ton hebergeur est un "probleme", dans le sens ou tu veut coder une page en xhtml, et qu'il ajoute malgre toi un javascript en debut de ta page web pour afficher sa banniere, ce javascript (ou n'importe quoi d'autre) avant le doctype va faire que "Internet explorer" va interpreter ta page comme du bon vieux html. ... et comme il ne comprend "margin:auto;" qu'a partir du doctype html 4.01, ta page ne pourra pas ce centré dans internet explorer.
En clair, a cause de ce javascript , ta page sera quelque soit le doctype utilisé, interpreter comme un html de base par IE. et du fait une partie des attribut et valeur css ne seront pas appliqué, et ton code en xhtml sera consideré comme un code truffés d'erreur ....
solution:
changer d'hebergeur (la meilleur soluce , si tu veut faire des pages dans les "dernieres" normes )
ou
coder ta page en html avec des tableau et des <center></center>, etc .... si tu veut qu'elle passe dans tout les navigateurs comme tu veut (surtout IE).

Tu peut essayer de demander aux internautes de desactiver le javascript ...

Enfin, j'espere que tu comprend que tu auras beau trifouiller ton css et tes doctype, IE basculera toujours en mode "quirks" c'est a dire dans une interpretation approximative de base du html.

bon courage
6 Février 2006 08:09:33

jaimerais tellement que tout le monde soit sur moozilla lol :-D bref maintenat j'hesite a faire ce que j'avais fait au debut, ne pas centrer avec mon css et faire le design seulement avec mon html ( centrer mettre en gras ect ...) et mettre du css juste pour les balise que je veux, en gros ne pa utiliser un css externe... :-x ca m'agace, je croyais avoir choisit un bon moyen mais je n'ai que des probleme....

bref je vais essayer tout ca et je vous tient au courant merci a tous!!!! :-D
6 Février 2006 10:04:01

Bon j'ai tout repris a zero, tout le site c'etait le mieux a faire je pense et je suis reparti avec un design par css externe, mais je ne sais pas trop comment personnaliser mon menu, que les liens change quand on les survole, enfin un joli menu si quelqun peu me montrer la direction pour ca... :-D

bref voila ca avance enfin quand meme dans le sens ou je veux ...voici mon site !! :-D
merci a vous tous
6 Février 2006 11:46:45

Je galere si quelqu'un peut m'aider pour mon menu, je voudrai un menu vertical ou honrieontal deroulant; qu'il se deroule quant la souris passe dessus...et qu'on m'explique pour le regler (subbrillance ect ...) :-D
6 Février 2006 15:48:39

*pas de pub merci*
6 Février 2006 17:26:56

Citation :

immat a écrit :
Je galere si quelqu'un peut m'aider pour mon menu, je voudrai un menu vertical ou honrieontal deroulant; qu'il se deroule quant la souris passe dessus...et qu'on m'explique pour le regler (subbrillance ect ...) :-D


tiens.
6 Février 2006 18:04:59

merci jarash, je me suis inspirer du code mais ca ma donner rien de vraiment bien enfin pas du tout ce que je voulais, je voudrai un menu en flash, je suis parti de la base que donne elsacreation mais pour la suite j'ai pas reussi a avancer
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS