28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai fait un design avec des block ( <div></div> ) qui marche très bien. Le problème vient quand j'ajoute le code ci-dessous pour utiliser les sessions phpbb sur mon site.

Voici le design avant : http://www.grafikcreation.com/test.php
Voici le design arpès : http://www.grafikcreation.com

Il y a quand même un gros problème Smiley decu

Voici le code que j'ai inséré et qui fait tout buger :

<?php

define('IN_PHPBB', true);
$phpbb_root_path = './forum/';
include($phpbb_root_path . 'extension.inc');
include($phpbb_root_path . 'common.'.$phpEx);

$redirect_login = "login.$phpEx";
$redirect_logout = "login.$phpEx";

//
// Start session management
//
$userdata = session_pagestart($user_ip, PAGE_SITE);
init_userprefs($userdata);
//
// End session management
//
?>


Voici le code du design (simplifié, en enlevant ce que contient le menu et la page) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Accueil - Grafikcreation.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="StyleSheet" type="text/css" href="./templates/gcv2/css/general.css" />
<link rel="StyleSheet" type="text/css" href="./templates/gcv2/css/design.css" />
</head>
<body>
<div id="design">
<div id="header">

</div>
<div id="menuh">

</div>
<div id="menu">
<div class="menu_titre"><p>Menu</p></div>
<div class="menu_int2">
</div>
<div class="menu_titre"><p>Shoutbox</p></div>
<div class="menu_int"></div>
<div class="menu_titre"><p>Partenaires</p></div>
<div class="menu_int"></div>
<div id="menu_bas"></div>
<div id="contenu">
//contenu de la page
</div>
<div id="footer">
</div>
</div>

</body>
</html>


et voici le CSS qui correspond :

#design {
	border: 0px;
	width: 970px;
	background-image: url('http://www.grafikcreation.com/images/background.gif');
}

#header {
	width: 930px;
	height: 150px;
	margin: 0 20px 0 20px;
	background-image: url('http://www.grafikcreation.com/images/header.gif');
}

#menuh {
	width: 930px;
	height: 35px;
	margin: 0 20px 0 20px;
	text-align: center;
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 0px;
	border: 0px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/menuh.gif');
}

#menu {
	float: left;
	width: 175px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 20px;
	background-image: url('http://www.grafikcreation.com/images/menu_back.gif');
}

#contenu {
	width: 725px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 190px;
	margin-right: 15px;
	vertical-align: super;
}

#footer {
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
	border: 0px;
	padding-top: 9px;
	width: 930px;
	height: 30px;
	vertical-align: bottom;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/bas.gif');
}

.menu_int {
	text-align: center;
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_int2 {
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_titre {
	width: 175px;
	height: 20px;
	margin-bottom: 15px;
	padding-top: 2px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/menu_titre.gif');
}

.menu_titre p {
	vertical-align: middle;
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
}

#menu_bas {
	width: 175px;
	height: 1px;
	background-image: url('http://www.grafikcreation.com/images/menu_bas.gif');
}
Salut

Désolé je ne vois pas de différence entre les deux page
Mais le contenu est mal placé ( trop bas )

Par contre il y a une énorme différence entre FF et IE


A+
Oui, désolé j'ai modifié la page donc la différence ne se voit plus.

Par contre je voudrais que le block "contenu" soit au même niveau que le menu mais je n'y arrive pas.
Pouvez-vous m'aider ?

Merci Smiley biggrin
Salut

il faut remettre le float: left dans le id menu


et faire Attention au largeur des bloc et de leur marges

A+
Merci de bien vouloir m'aider, c'est sympa.
Mais j'ai déjà mis float: left; et la largeur des bloc est bonne aussi.
J'ai mis une bordure aux bloc pour bien voir ou ils se trouvent

Il n'y a pas un autre moyen de faire passer ce bloc a droite ?
Oui, Je vient de règler le problème Smiley biggrin

Je vous met le nouveau CSS si quelqu'un a le même problème, on ne sais jamais Smiley cligne

Merci encore pour votre aide

#design {
	border: 1px solid black;
	border: 0px;
	width: 970px;
	background-image: url('http://www.grafikcreation.com/images/background.gif');
}

#header {
	width: 930px;
	height: 150px;
	margin: 0 20px 0 20px;
	background-image: url('http://www.grafikcreation.com/images/header.gif');
}

#menuh {
	width: 930px;
	height: 35px;
	margin: 0 20px 0 20px;
	text-align: center;
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 0px;
	border: 0px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/menuh.gif');
}

#menu {
	float: left;
	width: 175px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 20px;
	background-image: url('http://www.grafikcreation.com/images/menu_back.gif');
}

#contenu {
	display: inline;
	width: 725px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	margin-right: 15px;
	vertical-align: super;
}

#footer {
	clear: both;
	float: bottom;
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
	border: 0px;
	padding-top: 9px;
	width: 930px;
	height: 30px;
	vertical-align: bottom;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/bas.gif');
}

.menu_int {
	text-align: center;
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_int2 {
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_titre {
	width: 175px;
	height: 20px;
	margin-bottom: 15px;
	padding-top: 2px;
	background-repeat:no-repeat;
	background-image: url('http://www.grafikcreation.com/images/menu_titre.gif');
}

.menu_titre p {
	vertical-align: middle;
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
}

#menu_bas {
	width: 175px;
	height: 1px;
	background-image: url('http://www.grafikcreation.com/images/menu_bas.gif');
}

Modifié par cobix25 (29 Apr 2006 - 18:31)
cobix25 a écrit :
J'ai fait un design avec des block ( <div></div> )

[...]

<div class="menu_titre"><p>Menu</p></div>
<div class="menu_int2">…</div>
<div class="menu_titre"><p>Shoutbox</p></div>
<div class="menu_int">…</div>
<div class="menu_titre"><p>Partenaires</p></div>
<div class="menu_int">…</div>


Faire un design « avec des blocs », c'est déjà un problème en soi. Pas super génant, mais on pourrait faire mieux.

Déjà, il faut s'avoir qu'une div n'est qu'un élément de type bloc "neutre". Pourquoi neutre ? Juste parce qu'il n'a pas de mise en forme particulière, et pas de signification sémantique particulière mis à part celle de regrouper des éléments entre eux.

Mais utiliser des div là où on pourrait (et devrait !) utiliser d'autres éléments de type en-ligne, c'est dommage.

Par exemple, le code suivant n'a aucun sens :
<div class="menu_titre"><p>Menu</p></div>

Soit il s'agit d'un paragraphe, et dans ce cas on se contentera de :
<p class="menu_titre"Menu</p>

Soit il s'agit d'un titre de section, et dans ce cas là on pourra faire, par exemple :
<h2 class="menu_titre"Menu</h2>


Alsacréations a écrit :
L'ère des mises en page avec tableaux imbriqués est révolue, ce n'est pas un secret ni un scoop.

L'utilisation des "calques" <div> associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents.

Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions et de mauvaises utilisations. Pour résumer, les gens se disent : "chouette, je vire les tableaux et je remplace par des divs". Ensuite ils se retrouvent avec autant de divs qu'ils avaient de cellules de tableaux et se disent : les "calques" / CSS c'est nul, ça sert à rien !


À méditer.


PS: rien de bien méchant sur le site de cobix25, mais j'ai pensé que ce petit rappel pourrait être utile.
Modifié par mpop (29 Apr 2006 - 21:46)
Justement, j'avais fait mon design avec les tableaux et puis j'ai voulu le valider avec le validateur de W3C. Or il m'était impossible de corriger toutes les erreurs en laissant mon design en tableaux. Je l'ai donc fait avec des block Smiley biggrin