28172 sujets

CSS et mise en forme, CSS3

Problème de mis en page

Bonjour à tous, je suis nouveau, je m'apel françois et je vis a marseille.
alors j'ai un petit problème j'ai coder mon site internet, et j'en ai realiser le design moi même mais je n'arrive pas a afficher correctement ma page.
je vous serai reconnaissant de m'aider s'il vous plait, ça fais 3semaines que je parcour le net a la recherche de tuto, ou d'aide. voilà.
je tient a dir que mon site a étais réalisé a partir de tuto que j'ai copier par fois (flemme de tout réécrire) et en adaptant les tuto a mon site. J'en ai realisé le design de A à Z tout seul, sur photoshop a l'aide d'image trouver sur interet. ( notament l'image de mon serveur minecrat et les bouton de connexion et d'inscription, le fond et l'image du logo)
voilà je début totalement en webdesign, jusqu'a maintenant j'utilisais des template deja tout fais. mais je maitrise le html mais j'ai juste les bases en css.
voici mon code ainsi qu'un image recapitulant ce que ça donne a l'écran. si vous voulez le dossier complet avec toutes les images découpé je mettrais un lien a la fin de ce topic.
voilà je vous remerci d'avance. ( pour ceux qui corrigerons mes erreurs, si vous pouviez me les expliquez ce serai pas mal merci )

voici ce que ça devrai donner au final :

http://img15.hostingpics.net/pics/594111Designsiteworldcraft.jpg

et voici ce que ça donne actuellement :

http://img15.hostingpics.net/pics/576859Sanstitre.png

et le bas :

http://img15.hostingpics.net/pics/962584Sanstitre2.png

et maintenant voici la page html : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>World Craft Website</title>
    </head>

    <body>
    
    <!-- ************ DEBUT HEADER ************  -->
	    <div id="header">
	            <!-- division qui contient mon formulaire de connexion -->
	            <div class="contentTop">
	                <!-- debut du formulaire -->
	                <form class="loginForm" action="" method="post" name="loginForm">
	                    <p class="formInput">
	                      <input type="text" name="username" class="loginInput" value="username"/>
	                    </p>
	 
	                    <p class="formInput">
                        <input type="text" name="password" class="loginInput" value="******"/>
	                    </p>
	                    <p class="formInput">
	                        <input type="submit" name="submit" class="loginSubmit" value=""/>
	                    </p>
	                    <p class="formInput">
	                        <input type="button" name="register" class="loginRegister" value="" />
	                    </p>
	                </form>
	                <!-- fin du formulaire -->
	            </div>
	            <!-- fin de la division du formulaire de connexion -->
	 
	    </div>
	    <!-- FIN DE LA DIVISION HEADER -->
        
        <!-- Debut de la division bannière-->
                
        <div id="bannier">
        <div id="logo">
        </div>
        <div id="parrametre">
        </div>
        <div id="bannier_centre">
        </div>
        </div>
           <nav>
               
              <a href="#1">Menu 1</a>

<ul class="menuderoulant">

<li><a href="#2">sous menu </a></li>

<li><a href="#3">encore un sous menu !</a></li>

<li><a href="#4">bah ! allez un autre !</a></li>

</ul>

</li>

<li>

<a href="#5">Menu 2</a>

<ul class="menuderoulant">

<li><a href="#6">sous menu </a></li>

<li><a href="#7">et un autre</a></li>

<li><a href="#8">encore un</a></li>

<li><a href="#9">un autre</a></li>

<li><a href="#10">le même</a></li>

</ul>

</li>

<li>

<a href="#21">Menu 3</a>

<ul class="menuderoulant">

<li><a href="#11">et bin v'la un autre sous menu</a></li>

<li><a href="#12">et un autre</a></li>

<li><a href="#13">puis un autre</a></li>

<li><a href="#14">taratata</a></li>

<li><a href="#15">fait beau hein !</a></li>

<li><a href="#16">oui mais froid</a></li>

<li><a href="#17">jamais content celui-là</a></li>

<li><a href="#18">c'est sur</a></li>

<li><a href="#19">en même temps</a></li>

<li><a href="#20">c'est vrai</a></li>

</ul>

</li>

<li>

<a href="#22">Menu 4</a>

<ul class="menuderoulant">

<li><a href="#23">sous catégorie</a></li>

<li><a href="#24">ça change de sous menu</a></li>

<li><a href="#25">mettez-y ce qu'il vous plait</a></li>

<li><a href="#26">allez encore un</a></li>

<li><a href="#27">puis un autre</a></li>

<li><a href="#28">et puis un autre</a></li>

<li><a href="#29">c'est rudement joli hein !</a></li>

<li><a href="#30">moi ça me plait bien</a></li>

<li><a href="#31">pourait etre mieux </a></li>

<li><a href="#32">oui mais c'est plus cher !</a></li>

</ul>

              </nav>
               
               
               
               <div id="article récent">
               <h2>News</h2>
               <br />
               <p>Bonjour à tous et a toutes, vienvenu sur le site web du serveur world craft.<br />
               ce serveur est un serveur RP, de minecraft, le staff travail dessus depuis septembre 2011,<br />
               et de beau projet sont en perspective, la capital est quasiment finnit, et 2 autres villes existe deja.
               </p>
               </div>
                              
    </body>
</html>


et voici le css : 

/*Design site World craft by François*/


/* DEBUT HEADER */
#header{
height:50px;
background:url(images/fond_connexion.jpg) repeat-x top left;
	}
	
/* division contenant l'ensemble du contenu de header */
#header .contentTop{
/* on fixe ici une largeur */
width:100%;
/* on centre la division */
margin: 0 auto;
height:50px;
}

/* division contenant le formulaire d'inscription */
#header .contentTop .loginForm{
width:420px;
float:right;
}

/* style attribué pour chaque input : des marges extérieures */
#header .contentTop .loginForm input{
margin:9px 5px 0 0;
}

/* style attribué au formulaire de champs des inputs de connexion */
/* CREATION D'UN CHAMPS INPUT EN CSS */
#header .contentTop .loginForm .loginInput{
color:white;
height:30px;
width:104px;
background-color:#313131;
/* chaque input va être aligné */
float:left;
/* CSS3 : BORDURES ARRONDIES ... */
/* pour IE ...*/
border-radius: 10px 10px;
/* pour FIREFOX ...*/
-moz-border-radius : 10px 10px;
/* pour CHROME ET SAFARI ...*/
-webkit-border-radius : 10px 10px;
padding:0 10px
}

/* pour les champ de type bouton et submit : changement du style du curseur*/
#header .contentTop .loginForm input[type=submit], #header .contentTop .loginForm input[type=button]{
cursor:pointer
}

/* CREATION D'UN CHAMPS INPUT EN IMAGES */
/* bouton submit  */
#header .contentTop .loginForm .loginSubmit{
height:30px;
width:69px;
background:url(images/boutonSubmit.png) no-repeat top left;
float:left;
}

/* CREATION D'UN CHAMPS INPUT EN IMAGES */
/* bouton register */
#header .contentTop .loginForm .loginRegister{
height:30px;
width:79px;
background:url(images/boutonRegister.png) no-repeat top left;
float:left;
}
	 
/* FIN HEADER */

/*debut bannier*/

#bannier
{
	height:159px;
	width:100%;
}

#logo
{
	background:url(images/logo.jpg) no-repeat left;
	height:159px;
	width:678px;
}

#parrametre
{
	background:url(images/banniere_droite.jpg) no-repeat right;
	height:159px;
	width:267px;
}

#bannier_centre
{
	background:url(images/bannier_centre.jpg) repeat-x;
	height:159px;
	width:auto


/*image de fond*/ 
body
{
    background-image: url("images/fond.jpg");
    background-repeat: repeat;
}


voilà maintenant je vous met le lien de telechargement de mon dossier complet :

http://www.megaupload.com/?d=J4BW6173

ainsi que les sources des tutoriel utilisé :

http://www.webdesign-tutoriaux.com/

tout les tutoriels sont sur ce site.
voilà je vous remercie pour tout. j'attend vos commentaires, vos critiques, vos conseil et vos correction, merci.
Modifié par Felipe (11 Jan 2012 - 21:47)
Sujet clos
Aller à