Forum d'entraide PHPFrance

Bonjour j ai toujour utilisé les tableaux pour la mise en page là on me dit que je ne suis plus d actualité je suis ok ! Mais sa fait plus 1mois que je me suis penché sur le CSS je ni comprend rien a la base je suis developpeur web non webdesigneur ya - t'il une àme charitable pour me faire un cour sur le css.
Merci d'avance

bon je vais te dir ele peu que je sais

ton code CSS tu le mais dans les banniere <style></style>
la par exemple dans le bout de code que j'ai mi
a { } prendra tous les lien de ton site et les mettera dans la couleur demandé et en underline
après si tu veux cible seleument quelque lien tu rajoute class dans <a>
ça donne <a href="" class="aze">

ça marche aussi avec tr td ......

Code : Tout sélectionner

		<style>
		a {
    color:#FFFFFF;
    text-decoration: underline;
			}
		a.aze{
		color:#000000; 
		}			

		</style>

en css il y a plein d'argument je les connais pas tous

tu peux trouver des sites avec des resumé comme http://www.siteduzero.com/tuto-3-6-0-ap ... tml#part_8[/code]

je vai vous présenter ma page j ai fait la mise en page mai là ou il ya le conteneur dé que je m'ai du text il s'élargi je voudrai qu'il reste fixe

Code : Tout sélectionner

#nav a:hover{color:#009999;
background-color:#FF6666;
}
#nav a{padding:0.2em;
color:red;
font-weight:bolder;
text-decoration:none;
}
#nav {background-color:#FFCC00;
padding:0.2em;
margin-top:1em;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align:center;
}
#tout{
width:50%;
border:2px solid #000000;
background-color:#FFFCAC;
padding:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.Style1 {
	font-size: 24px;
	font-style: italic;
	font-weight: bold;}

et pour la page index

Code : Tout sélectionner

<!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=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="1.CSS"  />
</head>
<body>
<div id="tout">
<div id="titre"><center>
  <span class="Style1">Bienvenu sur mon site </span>
</center></div>
<div id="nav">
<a href="index.html">Accueil</a> | <a href="#">telechargement</a></div>
<div id="contenu">
  <p align="left">blabla</p>
  </div>
<div id="footer">
  <div align="center">&copy;2006 ism-infomaster.com </div>
</div></div>
</body>
</html>

Sois donc précis et clair dans tes question, des containers, tu en as plein ton code...

Alors d'abord, si tu fais une mise en page en CSS, commence par virer tous les éléments HTML de mise en forme : balise <center> ou attribut align="center" : sinon, ça ne sert pas à grand chose.

Ensuite, tu définis la largeur générale en pourcentage : celui qui va regarder ta page en 800/600 va souffrir un peu. Fixe une largeur en pixels si tu tiens àbsolument à bloquer la largeur et tant qu'à faire, centre le, ce sera plus esthétique. Allez, proposition de corrigé de ton style CSS:

Code : Tout sélectionner

#tout{
    position: absolute;
    top: 0;
    left: 50%;
    width:780px;
    margin-left: -390px;
    border:2px solid #000000;
    background-color:#FFFCAC;
    padding:1em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
#titre, #footer, #nav {
    text-align: center;
}
#nav {
    background-color:#FFCC00;
    padding:0.2em;
    border: 1px solid #000;
}
#contenu {
    text-align: left;
}
#nav a{
    padding: 0.2em;
    color: red;
    font-weight: bold;
    text-decoration: none;
}
#nav a:hover{
    color:#009999;
    background-color:#FF6666;
}
h1 {
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
}

Et dans la foulée proposition de corrigé du HTML:

Code : Tout sélectionner

<!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=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="1.CSS"  />
</head>
<body>
<div id="tout">
  <h1 id="titre">Bienvenu sur mon site </h1>
  <div id="nav">
    <a href="index.html">Accueil</a> | <a href="#">telechargement</a>
  </div>
  <div id="contenu">
    <p>blabla</p>
  </div>
  <div id="footer">
    ©2006 ism-infomaster.com
  </div>
</div>
</body>
</html>

Observe que j'ai également viré un div autour du titreet remplacé par une balise de titre h1 : l'idée générale de la mise en page en CSS, c'est aussi de remettre chaque chose à sa place : on respecte la sémantique du html et pour un titre, on utilise une balise faite pour ça. Le align="center" à dégagé et se retrouve dans les propriétés CSS du bloc #contenu. Etc... je te laisse découvrir et expérimenter.

Merci !! Pour les modification apporté mais il ya une chose que je comprend pas quand je m ai du texte le text ne revient pas a la ligne il pousse le conteneur je voudrai qu'il reste fixe

Code : Tout sélectionner

<div id="contenu"> 
    <p>blabla</p> 
  </div>

Si ton texte ne comporte pas d'espace entre les lettres ni même entre les mots, c'est normal, met un texte normal et les dimensions devraient rester normales selon la définition de la feuille de style.

Donc vue que je travaille en php il ya aurra aucun risque que sa sorte du conteneur car c est des tableau dynamiques

Si ça fonctionne en HTML/CSS, le PHP ne faisant que reproduire ce que tu auras programmé selon le schéma HTML/CSS, tout sera normal. Fais un test, tu verras bien.

Merci je vai faire un test dessuite et pour un menu de chaque coté comment puis je faire car j ai testé aussi et sa part les 1 en dessou des autres c est bizzar

Aussi sa fait pareil quand je ve mettre dans le menu du haut un moteur de recherche , le moteur de recherche va a la ligne il ne reste pas sur la meme les lignes que les liens comprend pas!

Faire du style un menu a gauche avec des liens et un moteur de recherche , avec un login pass pour se connecter et un menu a gauche pour les partenaires les news en soi c est classique mais je pensse quand css c est autre histoire mais je pensse ya allé lentement mais surement

vas-y élément par élément, et si tu as une page test en ligne, ce sera plus facile de t'aider, on pourra tester.

Voiçi le CSS

Code : Tout sélectionner

#tout{ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width:780px; 
    margin-left: -390px; 
    border:2px solid #000000; 
    background-color:#FFFCAC; 
    padding:1em; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 
#titre, #footer, #nav { 
    text-align: center; 
} 
#nav { 
    background-color:#FFCC66; 
    padding:0.2em; 
    border: 1px solid #000; 
} 
#contenu { 
    text-align: left; 
} 
#nav a{ 
    padding: 0.2em; 
    color: #0066CC; 
    font-weight: bold; 
    text-decoration: none; 
} 
#nav a:hover{ 
    color:#FFCC33; 
    background-color:#FF6600; 
} 
h1 { 
    font-size: 24px; 
    font-style: italic; 
    font-weight: bold; 
}
#titre{
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	background-image:url(images/php1.jpg);
	height: 100px;
	background-repeat: no-repeat;
}
body {
	background-image: url(images/php.jpg);
}

je commence a comprendre un petit peut mieux le CSS c est génial mais je peut dire k'avec un petit peut de pratique et de bonne volonté pour ya arriver avec bc d'aide

Merci Cyrano

Voici pour l'index

Code : Tout sélectionner

<!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=iso-8859-1" /> 
<title><===Php Visual===></title> 
<link rel="stylesheet" type="text/css" href="1.CSS"  /> 
</head> 
<body> 
<div id="tout"> 
  <h1 id="titre">&nbsp;</h1>
    <div id="nav">
      <form id="form1" name="form1" method="post" action="">
    <label><a href="index.html">Accueil</a>|<a href="#">Video cours</a>|<a href="#">Articles</a>|<a href="#">Contacts</a>| <span class="Style2">Rechercher</span>
      <input type="text" name="textfield" />
      </label>
      <input type="submit" name="Submit" value="Envoyer" />
      </form>
  </div> 
  <div id="contenu"> 
    <p>&nbsp;</p> 
  </div> 
  <div id="footer"> 
    ©2006 ism-infomaster.com 
  </div> 
</div> 
</div>
</body> 
</html>

j ai réussi a rajouter le moteur de recherche

Bien, tu avances, quelques corrections cependant :

Dans ta feuille de style, essaye d'avancer de l'élément le plus haut vers les détails :

Code : Tout sélectionner

body {
   background-image: url(images/php.jpg);
}
#tout{
    position: absolute;
    top: 0;
    left: 50%;
    width:780px;
    margin-left: -390px;
    border:2px solid #000000;
    background-color:#FFFCAC;
    padding:1em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
#titre, #footer, #nav {
    text-align: center;
}
#nav {
    background-color:#FFCC66;
    padding:0.2em;
    border: 1px solid #000;
}
#contenu {
    text-align: left;
}
#nav a{
    padding: 0.2em;
    color: #0066CC;
    font-weight: bold;
    text-decoration: none;
}
#nav a:hover{
    color:#FFCC33;
    background-color:#FF6600;
}
h1 {
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
}
#titre{
   border-style:solid;
   border-width:1px;
   border-color:#000000;
   background-image:url(images/php1.jpg);
   height: 100px;
   background-repeat: no-repeat;
}
#form1, #form1 p {
    display: inline;
}

Petites corrections coté HTML aussi : en XHTML, l'attribut name n'existe plus pour la balise <form>, donc, on vire, la balise label n'a pas besoin d'encadrer tout le menu et en fait, le menu n'a pas besoin d'être dans le formulaire. Pour garder la mise en forme des deux sur une même ligne, regarde ce que j'ai ajouté sur le style CSS. Ensuite, les éléments dans le formulaire doivent être dans un élément de bloc, d'où une balise <p> supplémentaire. Ton code HTML:

Code : Tout sélectionner

<!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=iso-8859-1" />
<title><===Php Visual===></title>
<link rel="stylesheet" type="text/css" href="1.CSS"  />
</head>
<body>
<div id="tout">
  <h1 id="titre">&nbsp;</h1>
    <div id="nav">
        <a href="index.html">Accueil</a>|<a href="#">Video cours</a>|<a href="#">Articles</a>|<a href="#">Contacts</a>| 
      <form id="form1" method="post" action="">
        <p><label><span class="Style2">Rechercher</span> <input type="text" name="textfield" /></label>
        <input type="submit" name="Submit" value="Envoyer" /></p>
      </form>
  </div>
  <div id="contenu">
    <p>&nbsp;</p>
  </div>
  <div id="footer">
    ©2006 ism-infomaster.com
  </div>
</div>
</div>
</body>
</html>

Forum d'entraide PHPFrance

besoin d'aide pour comprendre la mise en page en css

besoin d'aide pour comprendre la mise en page en css

oui mais !!!

merci

donc!!

Merci

pareil

je pensse

ok

merci