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
la communauté d'entraide francophone dédiée au PHP
besoin d'aide pour comprendre la mise en page en css
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 ......
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]
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]
Eléphant du PHP |
114 Messages
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 et pour la page index
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;}
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">©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:
Et dans la foulée proposition de corrigé du 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.
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;
}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>Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse 
Eléphant du PHP |
114 Messages
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.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
Eléphant du PHP |
114 Messages
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.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
Eléphant du PHP |
114 Messages
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
Eléphant du PHP |
114 Messages
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!
Eléphant du PHP |
114 Messages
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
Eléphant du PHP |
114 Messages
Voiçi le CSS
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
#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);
} Merci CyranoVoici 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"> </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> </p>
</div>
<div id="footer">
©2006 ism-infomaster.com
</div>
</div>
</div>
</body>
</html>
Eléphant du PHP |
114 Messages
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 :
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:
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;
}
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"> </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> </p>
</div>
<div id="footer">
©2006 ism-infomaster.com
</div>
</div>
</div>
</body>
</html>Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse