La Communauté TitaXium > Decoupe Design

Version complète : Decoupe Design

La Communauté TitaXium > Service Communication > Espace Developpement

flow

21 Dec 2007, 00:05

bonjour,

je me suis creé un design mais maintenant j'aimerais bien le codé en xhtml et css mais je suis difficulté et niveau de mon menu je n'arrive pas a le positioner la ou il devrait etre.
la position du menu ce fait t-elle avec le css ou le xhtml ?

http://www.debarros-karateclub.fr/flo/acceuil%20copie.jpg

voici mon design

je suis allez faire des recherches de tuto mais je n'est pas trouvé mon bonheur tout les sites aprennent à coder un site basic avec un menu a gauche un header et un footer se qui ne correspond pas du tout a se que j'ai fait

merci

Méthylbro

21 Dec 2007, 16:38

C'est le genre de design EXTREMEMENT facile à découper.

As tu essayer de le faire toi même ?

flow

21 Dec 2007, 18:30

Citation (méthylbro @ vendredi 21 décembre 2007 à 16h38)

C'est le genre de design EXTREMEMENT facile à découper.

As tu essayer de le faire toi même ?

c'est ce que j'essaye de faire de le decoupé moi meme mais vu que je debute dans le css et le xhtml je demande comment je doit mit prendre sinon j'aurais poster dans "comande" voila

je ne vois pas comment je peut faire donc si on peut m'eguiller se serai bien

flow

23 Dec 2007, 15:42

j'ai commencer ma decoupe apres avoir lu le tuto du siteduzer0

mais j'ai une petit question je n'arrive pas a placé mon menu comme sur mon design (livre d'or a coté de acceuil, biographie a coter de partenaire ect...)

comment je doit procédé merci

voici mon code xhtml :

Code

<!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>Bienvenue sur mon Portfolio !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
   </head>
   <body>
    <div id="menu">
            <ul>
                <li><a href="page4.html">lien4</li>
                <li><a href="page5.html">lien5</li>
                <li><a href="page6.html">lien6</li>
                <li><a href="page1.html">lien1</li>
                <li><a href="page2.html">lien2</li>
                <li><a href="page3.html">lien3</li>
            </ul>
    </div>
    <div id="header">
        <div class="logo">

        </div>
        <div class="web">

        </div>
        <div class="dessin">

        </div>
        <div class="flyer">

        </div>
        <div class="autre">

        </div>
       </div>

    <div id="footer">
        <p>Copyright © 2007 Florian CERDA. Tous droits réservés</p>
    </div>

   </body>
</html>

et voici le css :

Code

body
{
width: 776px;
height: 382px;
margin: auto;
background-color: #262626;
color
}
/* mon menu 1*/
#menu
{
width: 186px;
height: 119px;
position: absolute;
left: 97px;
top: 22px;
font-family: MoolBoran, Calibri;
font-size: 24px;
}
#menu a
{
text-decoration: none;
color: #7f8080;
font-style: bold;
}

#menu a:hover
{
color: #4bcee6;
}

#menu ul
{
list-style-image: url("images/plus.png");
}

flow

27 Dec 2007, 02:39

salut a tous deja bonne fete a tous

les fete de noel fini je me suis remit a mon site voila papa noel ne ma maleuresement pas amener une grand connaissance du xhtml lol

donc j'ai 2 soucis le premier :

je n'arrive pas a placé mais 3 boutons qui sont completement à droite

2 eme probleme mon copyrigth :

qui ce met en lien je ne sais pour quelle raison lol donc soligner en bleu et tout le tralala

rendu :

Code:

XHTML:

Code

<!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>Bienvenue sur mon Portfolio !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
   </head>
   <body>
    <div id="menu">
        <div class="menu_gauche">
            <ul>
                <li><a href="page1.html">Accueil</li>
                <li><a href="page2.html">Biographie</li>
                <li><a href="page3.html">Portfolio</li>
            </ul>
        </div>
        <div class="menu_droite">
            <ul>
                <li><a href="page1.html">Livre d'or</li>
                <li><a href="page2.html">Partenaire</li>
                <li><a href="page3.html">Contact</li>
            </ul>
        </div>
        <div class="bouton_home">
        </div>

        <div class="bouton_livre">
        </div>

        <div class="bouton_contact">
        </div>
    </div>

    <div id="header">
        <div class="logo">
        </div>

        <div class="web">
        </div>

        <div class="dessin">
        </div>

        <div class="flyer">
        </div>

        <div class="autre">
        </div>
    </div>
    <div id="footer">
        <p>Copyright © 2007 Florian CERDA. Tous droits réservés</p>
    </div>
   </body>
</html>

CCS:

Code

body
{
background-color: #262626;
}
/* mon menu 1*/
#menu
{
position: absolute;
left: 100px;
top: 43px;
}

#menu a
{
text-decoration: none;
color: #7f8080;
font-style: bold;
font-family: MoolBoran, Calibri;
font-size: 24px;
}

#menu a:hover
{
color: #4bcee6;
}

#menu ul
{
list-style-image: url("images/plus.png");
}

.menu_gauche
{
position: absolute;
left: 0px;
top: 0px;
}

.menu_droite
{
position: absolute;
left: 108px;
top: 0px;
}

.bouton_home
{
width: 59px;
height: 59px;
position: absolute;
left: 373px;
top: 65px;
background-image: url("images/home.jpg");
}

.bouton_livre
{
width: 59px;
height: 59px;
position: absolute;
left: 447px;
top: 65px;
background-image: url("images/livre.jpg");
}

.bouton_livre
{
width: 59px;
height: 59px;
position: absolute;
left: 514px;
top: 65px;
background-image: url("images/contact.jpg");
}

/*header*/

#header
{
position: absolute;
top: 168px;
left: 0px;
}

.logo
{
width: 387px;
height: 166px;
background-image: url("images/logo.jpg");
}

.web
{
width: 187px;
height: 79px;
background-image: url("images/web.jpg");
position: absolute;
top: 0px;
left: 394px;
}

.dessin
{
width: 187px;
height: 79px;
background-image: url("images/dessin.jpg");
position: absolute;
top: 0px;
left: 590px;
}

.flyer
{
width: 186px;
height: 78px;
background-image: url("images/flyer.jpg");
position: absolute;
top: 88px;
left: 394px;
}

.autre
{
width: 187px;
height: 78px;
background-image: url("images/autres.jpg");
position: absolute;
top: 88px;
left: 590px;
}

/*footer*/

#footer
{
position: absolute;
top: 325px;
left: 110px;
}

#footer p
{
text-decoration: none;
color: #7f8080;
font-style: bold;
font-family: MoolBoran, Calibri;
font-size: 18px;
}

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.