Html+Css pour un design le probleme!

24 juin 2006 à 1:24:44

Bien le bonjour j'ai vraiment un gros probleme! Voila j'ai decoupé mon design, adapté en css,ect...
Mais voila, je ne sais pas comment utiliser mon travail: comment mettre les liens ect..
Je connais bien le Html et le css ce n'est pas ca la question
J'ai vraiment besoin d'aide, merci d'avance!
Cela fais 3 jours que je suis dessus et je suis vraiment bloqué :euh:

Merci encore!

Voila le script html et le css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Shambala alchemist" href="index.css" />
<title>Bienvenue sur Shamabala Alchemist !</title>
</head>

<body>

<div id="Header_haut">

</div>

<div id="Header_gauche">
<div id="Titre">
<div id="Header_droite">

</div>
</div>
<div id="Header_centre">
</div>
</div>

<div id="Centre_haut_gauche">
<div id="bouton1">
<div id="bouton2">
<div id="bouton3">
<div id="bouton4">
<div id="Centre_haut_droite">

</div>
</div>
</div>
</div>

<div id="Centre_haut">
</div>
</div>

</div>

<div id="Centre_gauche">
<div id="Menu">
<div id="Centre_milieu">

<div id="Content">
<div id="Centre_droite">

</div>

</div>
</div>

</div>
<div id="Copyright_gauche">
<div id="Copyright_droite">
</div>
</div>
</div>

</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #E3E3E3;
}

#Header_haut
{
width: 780px;
height: 28px;
background-image: url(Images/Header_haut.jpg);
background-repeat: no-repeat;
}

#Header_gauche
{

width:209px;
height:250px;
background-image: url(Images/Header_gauche.jpg);
background-repeat: no-repeat;
}

#Titre
{
margin-left:209px;
width:334px;
height:46px;
background-image: url(Images/Titre.jpg);
background-repeat: no-repeat;

}

#Header_centre

{
margin-left:209px;
width:334px;
height:204px;
background-image: url(Images/Header_centre.jpg);
background-repeat: no-repeat;

}

#Header_droite
{
margin-left: 334px;
width:237px;
height:250px;
background-image: url(Images/Header_droite.jpg);
background-repeat: no-repeat;
}

#Centre_haut_gauche
{
width:173px;
height:39px;
background-image: url(Images/Centre_haut_gauche.jpg) ;
background-repeat: no-repeat;

}

#Centre_haut_droite
{
margin-left: 119px;
width:159px;
height:39px;
background-image: url(Images/Centre_haut_droite.jpg);
background-repeat: no-repeat;
}

#bouton1
{
margin-left: 173px;
width:102px;
height:32px;
background-image: url(Images/bouton1.jpg);
background-repeat: no-repeat;
}

#bouton2
{
margin-left: 102px;
width:108px;
height:32px;
background-image: url(Images/Bouton2.jpg);
background-repeat: no-repeat;
}

#bouton3
{
margin-left: 108px;
width:119px;
height:32px;
background-image: url(Images/Bouton3.jpg);
background-repeat: no-repeat;
}
#bouton4
{
margin-left: 119px;
width:119px;
height:32px;
background-image: url(Images/Bouton4.jpg);
background-repeat: no-repeat;
}

#Centre_haut
{
width:448px;
height:7px;
background-image: url(Images/Centre_haut.jpg);
background-repeat: no-repeat;
}

#Menu
{
margin-left: 41px;
width:148px;
height:439px;
background-image: url(Images/Menu.jpg);
background-repeat: repeat-x;
}

#Centre_milieu

{
margin-left:148px;
width:59px;
height:463px;
background-image: url(Images/Centre_milieu.jpg);
background-repeat: no-repeat;
}

#Centre_gauche
{
width:41px;
height:463px;
background-image: url(Images/Centre_gauche.jpg);
background-repeat: no-repeat;
}

#Centre_droite
{
margin-left: 501px;
width:31px;
height:463px;
background-image: url(Images/Centre_droite.jpg);
background-repeat: no-repeat;
}

#Copyright_gauche

{
margin-left:41px;
width:148px;
height:24px;
background-image: url(Images/Copyright_gauche.jpg);
background-repeat: no-repeat;
}

#Copyright_droite

{
margin-left:207px;
width:501px;
height:24px;
background-image: url(Images/Copyright_droite.jpg);
background-repeat: no-repeat;
}

#Content
{
margin-left:59px;
width: 501px;
height: 439px;
background-image:url(Images/Content.jpg);
background-repeat: repeat-x;

}

Hawks

24 juin 2006 à 1:27:40

Lut

Je ne comprend pas bien ta question....

Sadart

24 juin 2006 à 1:29:56

Je ne sais pas ou coder dans le html par exemple pour remplir mon menu...
Il y a plein de balise <div> et quand j'ecris un lien il ne marche pas
Vous pouriez m'expliquer comment remplir par exemple le menu s'il vous plais.

cat121

24 juin 2006 à 1:32:48

Je veux pas dire mais tu ferais bien d'appuyer sur la touche "tabulation" pour avoir un code plus clair

ça te permetrait peut etre de t'y retrouver plus !
Ah, aussi, tu ne crois pas que tu devrais utiliser des "floats" si tu veux avoir un truc à gauche et un truc à droite ?

Sadart

24 juin 2006 à 1:36:31

Citation : cat121

Je veux pas dire mais tu ferais bien d'appuyer sur la touche "tabulation" pour avoir un code plus clair ça te permetrait peut etre de t'y retrouver plus !

Ce n'est pas le probleme, c'est plutot que je ne vois pas ou coder dans une section vu que j'ai du imbriquer les div les unes deans les autres pour que mon design soit complet...

Hawks

24 juin 2006 à 1:37:23

C'est que comme ça, c'est un peu de s'y retrouver...
Je veux dire, tu nous montre du code, mais on sait pas ce que représente #Centre_haut par exemple....

SI tu aura une image de ton design, je me ferais un plaisir de t'aider.... (le mieux serait une image avec les noms des <div> dessus

)

cat121

24 juin 2006 à 1:38:34

Ben si tu veux faire ton menu met le code entre les balises <div id="menu"></div> etc...

Sadart

24 juin 2006 à 1:53:21

Voila le design enregistré en Low ou j'ai indiqué en rouge les differente parties avec leurs noms

http://virgile.df.free.fr/voila.jpg
Voila,

Citation

Ben si tu veux faire ton menu met le code entre les balises <div id="menu"></div> etc...

oui mais ou? Je veux parler dans la page html! Faire un menu normal avec des liens ect pour exemple!
Merci d'avance

Et ou ca se mettrais, car les imbrications de div m'on fait perdre la tete!

Ps: pour le design en meilleur qualité: http://virgile.df.free.fr/Design-ShambalaAlchemist.jpg

Hawks

24 juin 2006 à 2:17:16

Bon, déjà il y a certaines parties qui sont inutiles....

La façon dont tu code me fait penser à quelqu'un qui code en tableau (et qui donc prévoit chaque cellule)

Pour moi, ton design (tel que tu l'as codé) est trés compliqué (j'ai d'ailleurs du te demandé une image pour comprendre)

A ta place, je ferais plutot

Un entete (avec ta bannière)
Le menu horizontal, dans une liste <ul>
Le menu de gauche, en float et avec une largeur défini
Le corps de la page avec un margin-left égale à la largeur du menu (plus l'écart entre les deux)
Le pied de page

Au pire, pour faire les bordures à gauche et à droite du document, tu inclu le tout dans un <div> (enfin deux pour toi car tu as deux bordures différentes)

Comme ça tu aura une architecture plus simple pour ta page... Dans le genre,

<body>
<div id="conteneur1">
<div id="conteneur2">
<div id="entete">
Blablabla de l'entete, s'il y a
</div>
<div id="menu_h">
<ul>
<li><a href="#">Choix 1</a></li>
<li><a href="#">Choix 2</a></li>
</ul>
</div>
<div id="menu">
Blablabla menu (liste possible aussi)
</div>
<div id="corps">
Blabla du cosp de la page
</div>
<div id="pied">
Copyright
</div>
</div>
</div>
</body>

Avec le CSS qui va avec pour par exemple mettre les liens du menu horizontal en ligne....

Sadart

24 juin 2006 à 2:33:33

Cela doit il dire que je doit recommencer ma decoupe?
Je suis assez perdu car ici tu presente peu de parties alors que j'ai beaucoup d'images...
De plus mon menu est imbriqué dans une autre div alors ou mettre tout ces codes?
Quels sont les modifications a apporter!?? :-°

Merci d'avance

ps: dans la banniere je souhaite que le Titre soit un lien vers l'index donc j'ai besoin de le decouper non?

Hawks

24 juin 2006 à 13:04:55

Dans la version que je te propose, je découpe moins les images que toi....

En faite, j'utilise déjà deux <div> pour faire les bandes sur le coté.... (tu n'a qu'à mettre la couleur de fond sur le dernier)

Ensuite, il y a <div id="entete">, dans lequel tu pourra mettre un lien de retour à l'accueil, avec par exemple comme texte "Shambala Alchemist" (et l'écriture de ton choix). Tu n'aura qu'à mettre ce <div> assez grand pour contenir toute ta bannière (avec les marges)

Ensuite il a le menu horizontal..... Tu n'a qu'a changer l'écriture, lui dire que la liste est horizontal

Puis, le menu de gauche, la change la couleur de fond, et tu lui dit de mettre une bordure double et blanche....

Idem pour le corps.... En jouant sur les tailles, ça devrait coller avec ton aperçu

Et le pied de page, une couleur de fond, une petite bordure et voila

Bon, par contre, les incovéniants sont que les internautes doivent télécharger et installer des font si tu veux la même écriture que dans ton aperçu.... Et les écritures n'auront pas d'effet (je pense au titre dans la bannière surtout)
Par contre, gros avantage, tu pourra facillement changer de design si tu en as envis.... (en rajouter aussi

)

Edit
Dans ma version, tu n'as besoin comme image, que du plus petit bout des cadres sur les cotés (qui servira de motif, donc ils doivent pouvoir se répété sans soucis) et de ta bannière sans le texte

Sadart

24 juin 2006 à 20:58:22

Oui je vois bien

Mais je veut absolument garder le header tel qu'il est...
N'y a t'il pas moyen de coder sur ce que j'ai fait? SI oui comment?
Car je voudrais absolument garder le design tel qu'il est...

Desolé de vous embeter
Merci d'avance

galadorn

25 juin 2006 à 17:49:06

(message vide) à supprimer mais bon on peut pas alors il reste là come spam....