18073 sujets

Questions générales et questions de débutants

Question de débutant sur CSS

Bonjour, bon je débute complètement en CSS, avant je faisais mes sites avec des tables ce qui est facile mais pas top top à l'heure actuelle Smiley smile

Là je bosse sur un site dont la structure devra être :

http://images.pounyet.info/plansite.gif

Le cadre noir défini la taille de l'écran en 1280*1024 et en gros le reste passe dans du 1024. Tout étant fixe en hauteur sauf le div contenu qui va s'agrandir suivant le texte qu'il contient.

Mes premières questions :

* est-ce possible de réaliser ça en CSS ?

* je n'arrive pas à faire un div qui corresponde à la zone rouge, le div fait toute la largeur de la page (pointillés rouges) ... comment faire alors ?
Modifié par Pounyet (08 May 2006 - 13:19)
C'est 100% réalisable en html/css.

Un conseil pour bien commencer, vas faire un tour du côté des tutoriels Alsacréations :

http://css.alsacreations.com/

Tu y trouvera tout ce qu'il te faut.

Bon courage,
Aymeric
Modifié par AymericJ (08 May 2006 - 14:57)
Voilà un premiet jet rapido :

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		
		<title>Mise en page</title>
				
		<style type="text/css">
		body
		{
			text-align: center;
			font: 12px "Trebuchet MS", helvetica, sans-serif;
		}
		
		div#conteneur
		{
			margin: 0 auto;
			width: 65%;
			text-align: left;
		}
		
		div#header
		{
			height: 200px;
			border: 5px solid #f00;
		}
		
		div#nav { border: 5px solid #00f; }
		div#nav ul { margin: 0; padding: 0; text-align: center; }
		div#nav ul li { display: inline; }
		
		div#menu
		{
			float: left;
			width: 180px;
			border: 5px solid #0f0;
		}
		
		div#contenu
		{
			margin-left: 200px;
			border: 5px solid #f50;
		}
		
		div#pied
		{
			clear: both;
			border: 5px solid #f0f;
		}
		
		</style>
	</head>
	
	<body>
	<div id="conteneur">
		<div id="header">
			<h1>Entete</h1>
		</div> <!-- #header -->
		
		<div id="nav">
		<ul>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
			<li>item</li>
		</ul>
		</div> <!-- #nav -->
		
		<div id="menu">
		<h2>Menu gauche</h2>
		
		</div> <!-- #menu -->
		
		<div id="contenu">
		<h2>contenu du site</h2>
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		</div> <!-- #contenu -->
		
		<div id="pied">
		<p>pied de page</p>
		</div> <!-- #pied -->
	</div> <!-- #conteneur -->
	</body>
</html>


Pour la partie entête qui se chevauche avec le reste, ça peut se faire de différentes façon, tout dépend du résultat voulu au final, là c'est pas évident de voir ce que tu veux.

A priori (si je comprend ce que tu veux faire), un background sur le body reglera le problème.
Bon après une bonne après midi de galère, j'ai reussi à faire ce que je voulais !

Me reste un seul soucis :

J'ai besoin de mettre une variable php dans mon fichier style, mais des que je met cette variable ça me fonctionne plus ... pour l'instant mes style sont encore dans le fichier php mais il ne faut pas que ça y reste.

Mon code actuel :

<?php
echo "
#conteneur2 {
     width: 950px;
     margin-left: auto;
     margin-right: auto;
	background-image: url([b]$image[/b]);
	background-repeat: no-repeat;
	height: 720px;
     }
";
?>


Quoi mettre pour que dans le fichier css ça marche ?
Il faut envoyer le bon type mime (text/css) via un header (header();)

Sépare cette partie de ta feuille de style dans une feuille à part pour garder la mise en cache du reste et ne garder que cette partie de dynamique.
Sujet clos
Aller à