Aide pour l'application d'une présentation de site.

[Hankroyd]

Bonjour à tous.

Je débute dans la conception de site web et je rencontre quelques difficultés.

La première concerne la présentation du site que je veux faire :

900 pixels de larges.
En haut du site, une bannière (900 pixels de large sur 75 pixels de haut)

Ensuite, sous la bannière, le site est séparé en deux moitiés indépendantes : A gauche, le menu (150 pixels de large) et à droite les pages du site en elles même.(750 pixels, donc)

Enfin en bas, je voudrais à nouveau une zone unique où serait ecrites les infos légales du site.


J'ai essayer avec des balises div en utilisant des float: left; et float: right; dans une feuille de style, j'ai aussi essayer avec des frames, mais sans succès pour le moment.

Si quelqu'un pouvait m'aider, je lui en serait fort gré.

D'avance merci pour vos réponses

 

[Bacteries]

As tu fais ce genre de tutoriaux?
http://css.alsacreations.com/Faire-une- ... design-css

La base je pense.

 

[Hankroyd]

Oui, ceci, je savais déjà le faire.

En gros, mon problème est que je souhaiterais que le menu ne se trouve pas au dessus du texte, mais à sa gauche.

Il n'y as pas de soucis majeur pour mettre le menu à gauche (Je retire le 'float: left;').

Et donc, au niveau du menu, c'est bon mais en dessous, le texte reprend alors toute la largeur de la feuille, chose que je ne veux pas.

Je vais voir en jouant sur le padding si cela peut m'aider (je viens de voir cela sur le lien) et je te remercie pour l'adresse, je vais y jeter un bon oeil.

 

[Bacteries]

Difficile de donner des indications sans les extraits de code. Mais un width:750px; ne suffit pas?

 

[padawan2]

Bienvenue sur WRI

Pour rester sur alsacréation, je ne peux que te conseiller leur bibliothèque de mises en page:
http://www.alsacreations.com/gabarits/liste.html

Très bien pour débuter avec une structure propre.

Bon courage !

 

[Marie-Aude]

Cherche Google pour la mise en page de type "faux column"

 

[Hankroyd]

Merci pour vos réponses :

J'ai réussi à obtenir ce que je veux avec des balises div et deux classes : gauche (avec un float left) et droite.

Ce n'est pas très harmonieux, mais cela à le merite de donner à peu près ce que je veux.

@Bacterie : Oui, en effet, j'avais pris 900px arbitrairement (par rapport à la résolution de mon écran en fait) mais je vais le mettre en 750px .

@padawan2 et Marie-Aude : merci pour vos liens, je vais jeter un coup d'oeil voir si je peux améliorer un peux ce que j'ai fait.

 

[Hankroyd]

J'arrive désormais à faire à peu près ce que je veux au niveau présentation : le site alsacreation est vraiment superbe.

Je suis en train de faire ma propre feuille de syle (pas de meilleur moyen pour comprendre) et j'ai un soucis :

Ma page passe sans problème sous firefox, mais par contre sous IE7 ... c'est la cata.

Je me permet ici ma page style.css :

html {
	font-size: 100%;
}

body {
	margin: 0;
	padding: 10px 20px;
	font-family: VERDANA, ARIAL, SANS-SERIFF;
	font-size: .8em;
	line-height: 1.25;
	color: #F0E39E;
	background: #2C2F22; /*couleur de fond*/
	padding: 10px 5px;
	width: 750px;
	margin: 0 auto;
}

div#conteneur {
	background: #181A12;
	width: 100%;
	overflow: hidden;
}

div#header {
	width: 750px;
	height: 50px;
	background: url('images/bandeau.jpg') no-repeat top left;
}

div#choix {
	width: 180px;
	float: left;
}

div#choix ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}

div#choix ul li a {
	display: block;
	background: white;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

div#affichage {
	color: #363B29;
	background: #cbd888;
	margin-left: 200px;
	padding: 10px 20px;
	
}
div#affichage > :first-child {
	margin-top: 10px;
}
div#affichage p {
	line-height: 1.5;
}

Le pb vient de la ligne "height: 1%;" qui se trouve dans "div#choix ul li a" (présente pour corriger un bug de IE6 apparement.)

Lorsqu'il est présent, le menu s'affiche comme je veux ... mais le texte de la page s'affiche en double : une a coté du menu et l'autre en dessous.
Et, sans cette ligne, le teste de la page s'affiche correctement mais les items de mon menu ne sont plus aligné.

Voici la page html :

<!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"
lang="fr">

<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Titre de la page</title>
</head>

<body>
	<div id="conteneur">
		<div id="header"></div>
		<div id="choix">
			<ul>
				<li><a href="index.php" title="Accueil du site">Accueil<a></li>
				<li><a href="index.php?cat=news" title="Les news du site">News<a></li>
				<li><a href="index.php?cat=textes" title="Les textes du site">Texte<a></li>
				<li><a href="index.php?cat=contacts" title="Ecrivez nous">Contacts<a></li>
				<li><a href="index.php?cat=faq" title="Lien inutile">FAQ<a></li>
			</ul>
		</div>
		<div id="affichage">
			<p>blablabla. blablabla.</p>

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

Si quelqu'un à une idée de comment résoudre cela (autre que d'interdire IE6 ), je suis preneur.

D'avance merci.