> Tous les forums > Forum des Webmasters
 Problème de mise en page avec Div!
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
ch3ch3
  Posté le 26/03/2010 @ 00:50 
Aller en bas de la page 
Petit astucien

Bonjour à tous! Voilà je me met à la création de site web, je suis débutant et j'ai un problème j'arrive pas à ordonner mes <div> dans le bon sens. J'essaye des les organiser avec l'attribut float :s!

Voilà le design que je voudrais sans passer par les tableaux <table> que par les <div>

voilà le code de mon css

[code=on]

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url(*images/fond.png);
}

#en_tete
{
width: 760 px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 2px solid black
}

#pub1 /* ce qui correspond au bloc1 sur l'img*/
{
float: left;
border: 2px solid black;
width:120px;
height: 700px;
padding:0px;
margin:0px;
}

#pub2 /* ce qui correspond au bloc3 sur l'img */
{
float: right;
border: 2px solid black;
margin-left:640px;
height: 700px;
widht: 120px;
}

#menu /* ce qui correpond au bloc 2 sur l'img */
{
float: top;
width: 520px;
margin-left: 120px;
height: 100px;
margin-bottom: 0px;
border: 2px solid black;
}


#corps /* ce qui correspond au bloc 4 sur l'img */
{
margin-left: 120px;
width: 520px;
height:600px;
}

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

border: 2px solid black;

/*margin-bottom: 20px*/
}

.element_menu h3 /* Tous les titres de menus */
{
color: #b3b3b3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
/* padding left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle là fera finalement 20 pixels */
/*padding: 0px; /* tous les côtés ont une marge intérieure de 0 pixels */
/*margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 ( margin-left, margin-right...) */
/* margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu li
{
display: inline;
}

.element_menu a /* tous les liens se trouvant dans un menu */
{
color: #b3b3b3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B;
color: black;
}



#pied_de_page
{
width: 760px;
}

[code=off]

Bref j'y comprends rien. Merci à ceux qui prendront un peu de temps pour me lire :)



Modifié par ch3ch3 le 26/03/2010 01:02
Publicité
kalinka
 Posté le 26/03/2010 à 08:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

voila le code rectifié (il y avait quelques erreurs dedans) et coloriser (comme je n'avais pas les images pour visualiser j'ai ajouter des couleurs de fond qu'il faudra enlever), ca ressemble néanmoins a ce que tu voulais

code html

<!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=utf-8" />
<title>tonsite</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="en_tete"> </div>
<div id="pub1"> </div>

<div id="pub2"> </div>
<div id="menu"> </div>
<div id="corps"> </div>

</body>

code css

body
{
width: 780px;
margin: auto;
margin-top: 20px;
background-image: #e1e1e1 url("images/fond.png");

}

#en_tete
{
width: 780 px;
height: 100px;
background-image: #000 url("images/banniere.png");
background-repeat: no-repeat;
background-color: #0919b8;
margin-bottom:10px;

}

#pub1 /* ce qui correspond au bloc1 sur l'img*/
{
float: left;

background-color: #7e7d7b;
width:120px;
height: 700px;
padding:0px;
}

#pub2 /* ce qui correspond au bloc3 sur l'img */
{
float: right;
width:120px;
background-color: #09b819;
height: 700px;

}

#menu /* ce qui correpond au bloc 2 sur l'img */
{
float: top;
width: 520px;
margin: auto;
height: 100px;
margin-bottom: 0px;
background-color: #b609b8;

}


#corps /* ce qui correspond au bloc 4 sur l'img */
{
margin: auto;
width: 520px;
height:600px;
background-color: #faa208;

}



Modifié par kalinka le 26/03/2010 08:25
ch3ch3
 Posté le 26/03/2010 à 14:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci beaucoup pour ton aide précieuse mais j'aimerais connaître mes erreurs au leiu de copier le code bêtement et puis pourquoi as tu mis 780 à la largeur du corps? alors que j'ai mis 760px moi??

kalinka
 Posté le 26/03/2010 à 15:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

ta principale erreur venait justement de la largeur car si tu comptes body 520 px + menu 120 + menu 120 = 760 pixels, comme tu as rajouté des margin pour séparer les élements, il te manquait forcement quelques pixels d'ou la nécessité d'agrandir le body a 780 pixels

en outre cela permets de supprimer les margin-left de tes #pub puisqu'il suffit alors de centrer le #menu avec un margin:auto; pour avoir les marges de 10 pixels de chaque coté du corps

en outre tu avais oublié un ; a la fin d'une ligne dans les css ce qui provoque des erreurs plus ou moins importantes



Modifié par kalinka le 26/03/2010 15:08
pcleder
 Posté le 26/03/2010 à 17:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Nouvel astucien

Bonjour,

Je me permets d'intervenir sur la discussion.

En terme de dimensionnement, je vois que tout est en pixels.

Attention aux différentes résolutions d'écran.

Quand je regarde les stats de mon site, les utilisateurs ont des résolutions très différentes et c'est pour cela que je travaille en % de façon à ce que

mes s'adaptent à chaque configuration.

Attention donc aux surprises. je vous propose de changer de paramétres d'affichage sur votre poste controler le rendu.

Bonne journée.

Dreamer
 Posté le 26/03/2010 à 17:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

pcleder a écrit :

Bonjour,

Je me permets d'intervenir sur la discussion.

En terme de dimensionnement, je vois que tout est en pixels.

Attention aux différentes résolutions d'écran.

Quand je regarde les stats de mon site, les utilisateurs ont des résolutions très différentes et c'est pour cela que je travaille en % de façon à ce que

mes s'adaptent à chaque configuration.

Attention donc aux surprises. je vous propose de changer de paramétres d'affichage sur votre poste controler le rendu.

Bonne journée.

On peut utiliser aussi des em en lieu et place des px , mais comme un site n'est pas toujours totalement extensible il est préférable quand même de donner des dimensions mini et maxi ( mini-width et maxi-width )

ch3ch3
 Posté le 26/03/2010 à 18:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Finalement j'ai toujours un problème en modifiant le code comme tu as fais j'ai pas la bande de droite sur le côté PUB2 :s

regardes:

et voilà le code du css modifié comme tu m'avais conseiller en laissant un peu à ma sauce aussi:

body
{
width: 780px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url(*images/fond.png);
}

#en_tete
{
width: 780 px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
background-color:#0919b8;
margin-bottom: 10px;
}

#pub1
{
background-color: #7e7d7b;
float: left;
width:120px;
height: 700px;
padding:0px;
}

#pub2
{

float: right;
height: 700px;
widht: 120px;
background-color: #09b819;
}

#menu
{
float: top;
width: 520px;
margin: auto;
height: 100px;
margin-bottom: 0px;
}

#corps
{
margin: auto;
width: 520px;
height:600px;
}

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


/*margin-bottom: 20px*/
}

.element_menu h3 /* Tous les titres de menus */
{
color: #b3b3b3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
/* padding left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle là fera finalement 20 pixels */
/*padding: 0px; /* tous les côtés ont une marge intérieure de 0 pixels */
/*margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 ( margin-left, margin-right...) */
/* margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu li
{
display: inline;
}

.element_menu a /* tous les liens se trouvant dans un menu */
{
color: #b3b3b3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B;
color: black;
}





#pied_de_page
{
width: 780px;
}



Modifié par ch3ch3 le 26/03/2010 18:25
kalinka
 Posté le 26/03/2010 à 18:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

bon comme je pense que tu as recopié sans te tromper le code css et qu'on ne voit pas la barre pub2, j'en déduis qu'elle est dessous donc a mon avis ( que je partage entièrement en accord avec moi-même ) je dirais que tu devrais regarder l'ordre des div dans ton code html. Si j'ai mis les div dans mon message ce n'est pas pour faire joli (quoique!) c'est simplement que tes div ont besoin de cet ordre pour se positionner les unes aux autres.

ch3ch3
 Posté le 26/03/2010 à 18:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

non elle est pas en dessous! elle est à droite et ça fait un gros trait quand je met une bordure noire :o. Mais je vais vérifier mon code html

edit: sur mon code html c'est le même ordre que le code css :o



Modifié par ch3ch3 le 26/03/2010 18:58
Publicité
Dreamer
 Posté le 26/03/2010 à 20:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je viens d'essayer et ça fonctionne . Les blocs sont bien séparés et positionnés !!

Il est possible que ce soit les textes qui décalent l'ensemble , il faut qu'ils soient "paramétrés" dans le css !!

ch3ch3
 Posté le 26/03/2010 à 20:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

les textes paramétrés dans le css? :o je comprends pas vu que les textes sont dans le #corps et que j'ai défini une taille de 520px pour le corps je vois pas en quoi les textes intéragient avec le pub2 ( le côté droit quoi )



Modifié par ch3ch3 le 26/03/2010 20:43
Dreamer
 Posté le 26/03/2010 à 21:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

ch3ch3 a écrit :

les textes paramétrés dans le css? :o je comprends pas vu que les textes sont dans le #corps et que j'ai défini une taille de 520px pour le corps je vois pas en quoi les textes intéragient avec le pub2 ( le côté droit quoi )

Tu peux nous montrer ton html ??

ch3ch3
 Posté le 26/03/2010 à 21:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Oui bien sur!

<!doctype html PUBLIC "-//3WC//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 site ! </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="en_tete">
<!-- Ici on mettra la bannière -->
</div>
<div id="pub1">
<!-- Ici on mettra la première bannière publicitaire -->
</div>
<div id="pub2">
<!-- Ici on mettra la deuxième bannière publicitaire -->
</div>
<div id="menu">

<!-- Ici on mettra le menu -->
<div class="element_menu">
<h3>Titre menu</h3> <!-- Titre du sous-menu -->
<ul>
<li><a href="">Accueil</a></li> <!-- Liste des liens du sous menu -->
<li><a href="">Vidéos</a></li>
<li><a href="">Divers</a></li>
<li><a href="">T'chat</a></li>
</ul>
</div>

</div>
<div id="corps">
<!-- Ici on mettra le contenu principal du site -->
<h1>Mon site the best</h1>

<p>
Bienvenue sur mon site magnifique ! <br />
Vous allez adorer ici, c'est un site magnifique qui va parler de euuuh je cherche encore quoi pour faire original.
</p>

<h2>A qui s'adresse cette oeuvre?</h2>

<p>
A tout le monde bien sur mais surtout euhhh... à tout le monde!
</p>

<h2>L'auteur</h2>
<p>
Bah l'auteur c'est moi JULIEN premier, premier de la connerie surtout j'espère que je vais pas lacher la création du site
, la volonté! et le seul maître mot!
</p>
</div>
<div id="pied_de_page"
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright etc... -->
<p>Copyright " Festo & FouFou compagnie corporation Entertainement" 2010, tous droits
réservés à CHS</p>
</div>
</body>
</html>

kalinka
 Posté le 26/03/2010 à 22:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

kalinka a écrit :

bon comme je pense que tu as recopié sans te tromper le code css

comme quoi !!! tu as mal recopié dans pub2

tu as écris widht au lieu de width, écris le normalement et ca devrait fonctionner



Modifié par kalinka le 26/03/2010 22:47
ch3ch3
 Posté le 26/03/2010 à 22:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

putain je suis pas rendu si je refais des erreurs comme ça je suis vraiment une bite!!! merci bien d'avoir trouver pour moi !!! tsssss ... vraiment désolé je tacherais de plus te déranger pour des bêtises pareils :s. edit: Merci ça marche! t'es balese quand même, faudrait que tu me montres tes créations de site, je suis curieux de voir à quoi ça ressemble!! :)



Modifié par ch3ch3 le 26/03/2010 22:56
kalinka
 Posté le 26/03/2010 à 23:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

c'est beaucoup moins compliqué que tu ne le crois, les erreurs que tu as commise (largeur trop faible, mauvaise écriture) sont des erreurs de débutant mais j'en ai fait des bien pires au début et bientôt, pour peu que tu continues, tu seras capable de te debrouiller tout seul et faire n'importe quel squelette de site .

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Les French Days chez Cdiscount
Valable jusqu'au 27 Septembre

Cdiscount participe aux French Days et fait des milliers de promotions imbattables. De plus vous pourrez obtenir 20 € de réduction à partir de 299 € d'achats avec le code promo 20EUROS.


> Voir l'offre
23,99 €Souris sans fil Microsoft Sculpt Comfort bluetooth à 23,99 €
Valable jusqu'au 27 Septembre

Amazon fait une promotion sur la souris sans fil Microsoft Sculpt Comfort bluetooth qui passe à 23,99 € au lieu de 34 €. Elégante, performante et ergonomique, cette souris sans fil Bluetooth vous offre la liberté dont vous avez besoin pour le travail et/ou le divertissement. Le ruban tactile latéral vous permettra d'accéder rapidement à vos fonctionnalités préférées de Windows (8 et 10).


> Voir l'offre
122,02 €Kit de 32 Go (2 x 16 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz à 122,02 €
Valable jusqu'au 27 Septembre

Amazon fait une promotion sur le kit de 32 Go (2x16 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz CL16 qui passe à 122,02 € livré gratuitement alors qu'on le trouve ailleurs à partir de 150 €.


> Voir l'offre

Sujets relatifs
probleme de mise en page avec front page
mise ne page css - probleme...
Problème de mise en page/rendu
problème mise en page
Mise en page générale avec des DIV pour page en PH
Mise en page avec flash
problème de mise en page
mise en page avec dreamweaver 8
Probleme de mise en page css
probléme de texte avec front page
Plus de sujets relatifs à Problème de mise en page avec Div!
 > Tous les forums > Forum Forum des Webmasters