28172 sujets

CSS et mise en forme, CSS3

Design web + css

Bonjour tout le monde,
J’espère trouver une solution à mon problème,
Je me lance :
J’ai fais le design de mon site sous Photoshop, j’ai tout incorporé dans dreamweaver. D’habitude je génère la page web à partir de Photoshop et je modifie en html classique sous dreamweaver.
Pour une fois j’ai décidé d’essayer les styles css. J’ai donc créé toute ma page web en css avec les balises div ainsi que les balise ul, li, mes liens, les blocs, ect….J’ai bien entendu une feuille externe css que j’ai renommé « styles » et donc ma première page web « index ».
J’ai parfaitement achevé ma première page ainsi que ma feuille css, tout fonctionne , mais j’ai une petite question sur mon fameux problème :
J’ai donc un lien évident entre ma page « index » et ma page css « style », ce que je ne comprends pas :
Comment créer mes autres pages web ? contact, ect…Ma page css styles est attachée à mon index. Ma page index est différente de ma page contact. Si je modifie ma page, ma feuille css se modifie.
Faut’il créer une feuille css pas page ? Comment puis-je faire ?

Merci d’avance de m’éclairer sur la bonne marche à suivre, j’espère trouver la solution car je débute à peine en css et c’est assez fastidieux !

Merci à vous !
Smiley smile
Qu'il s'agisse d'un site statique ou d'un site dynamique, une seule feuille de styles pour l'ensemble du site est dans la plupart des cas suffisant. Smiley smile
Ok, merci pour vos réponses Smiley smile . Je viens de voir les liens. Comment je peux faire pour mon fichier css? Je peux le modifier? Comment le modifier dans dreamweaver? J'ai un peu de mal a comprendre ou reprendre le css en fait...Comment garder ce que j'ai déjà fait le modifier afin d'apporter mes autres pages tout en gardant le fichier css et ne pas perdre ce que j'ai déjà fait... Smiley ohwell

Voici ma un début de code pour ma page index ainsi que le début du fichier css :

#page {
padding: 0px;
width: 800px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#bando {
height: 198px;
width: 800px;
}
#bando2 {
margin: 0px;
padding: 0px;
height: 57px;
width: 210px;
float: left;
}
#menu1 {
margin: 0px;
padding: 0px;
height: 57px;
width: 404px;
background-image: url(images/menu1.gif);
float: left;
}
#menu2 {
margin: 0px;
padding: 0px;
height: 57px;
width: 186px;
background-image: url(images/menu2.gif);
float: right;
}
#barre {
margin: 0px;
padding: 0px;
height: 40px;
width: 800px;
background-image: url(images/barre.gif);
clear: both;
}
#menuG {
margin: 0px;
padding: 0px;
height: 426px;
width: 210px;
background-image: url(images/menuG.gif);
float: left;
}



<!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>bati-prokoca batiment general maconnerie</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
<!--debut bando -->
<div id="bando"><img src="images/bando.gif" alt="bando" width="800" height="198" /></div>
<!--fin bando -->
<!--debut bando2 -->
<div id="bando2"><img src="images/bando2.gif" alt="bando2" width="210" height="57" /></div>
<!--fin bando2 -->
<!--debut menu1 -->
<div id="menu1"></div>
<!--fin menu1 -->
<!--debut menu2 -->
<div id="menu2"></div>
<!--fin menu2 -->
<!--debut barre -->
<div id="barre"></div>
<!--fin barre -->
<!--debut menuG -->
<div id="menuG">
<ul>
<li> <a href="#">Accueil</a></li>
<li>
<a href="#">Services</a></li>
<li>
<a href="#">Chantiers</a></li>
<li>
<a href="#">Partenaires</a></li>
<li>
<a href="#">Contact</a></li>
<li></li>
</ul>
</div>
<!--fin menuG -->
<!--debut menuC -->
<div id="menuC">
Modifié par nemeton (20 May 2008 - 08:43)
Une piste aussi, serait de fermer la balise html, body, ainsi que deux div's ! Smiley murf 

<!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>bati-prokoca batiment general maconnerie</title>
<link href="1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
 <div id="bando"><img src="images/bando.gif" alt="bando" width="800" height="198" /></div>
 <div id="bando2"><img src="images/bando2.gif" alt="bando2" width="210" height="57" /></div>
 <div id="menu1"></div>
 <div id="menu2"></div>
 <div id="barre"></div>
 <div id="menuG">
    <ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Chantiers</a></li>
	<li><a href="#">Partenaires</a></li>
	<li><a href="#">Contact</a></li>
   </ul>
  </div>
  </div>

  <div id="menuC"></div>
 </body>
</html>


Pour ce qui est de DMX, la modification du css de fait par la palette traditionnelle accessible via: > Fenêtre > style css ou raccourci clavier SHIFT + F11 (mac )

Mis à part cela, tu peux aller directement dans ton css modifier le code à la main.
Tu peux aussi ouvrir ton css dans un éditeur de texte . Smiley langue
Modifié par FranZz (20 May 2008 - 10:15)
Bon ça y'est, j'ai pû modifier ma page html et css ! En fait il suffit juste d'enregistrer sa première page, de renomer son id et de recréer un style différent ! Smiley biggrin
Merci au site microcrodile qui assure vraiment ! Merci a ceux qui m'ont répondus aussi !

J'ai d'autres questions néanmoins Smiley lol

Je vais attaquer le formulaire de contact, d'habitude je le fais en php mais est ce qu'il y la possibilité de le faire qu'en css ?

Merci d'avance Smiley smile
nemeton a écrit :
Je vais attaquer le formulaire de contact, d'habitude je le fais en php mais est ce qu'il y la possibilité de le faire qu'en css ?

PHP peut produire un code HTML, traiter des informations reçues depuis un formulaire, envoyer un e-mail, stocker des informations en base de données, récupérer des informations en base de données, les traiter et les afficher, etc.
CSS peut mettre en forme du code HTML.

Donc non, on ne remplace pas PHP par CSS. D'ailleurs le premier (PHP) est interprété par le serveur, tandis que le deuxième (CSS) est interprété par le navigateur (idem pour HTML).

Gare aux confusions.

En passant: si tu es graphiste, il faut bien réaliser que l'intégration web est un domaine à part entière. Pour certains (les intégrateurs web), c'est leur activité principale. C'est un domaine qui est facilement accessible car on peut bidouiller du HTML et du CSS très vite, mais pour faire les choses correctement et avec une qualité professionnelle cela demande un minimum de formation. Récemment, j'ai croisé sur ce forum une information pour une école qui forme au rôle d'intégrateur (certes avec pas mal de compétences annexes) en deux ans. On peut aussi se former avec les documents, cours et tutoriels disponibles en ligne, mais là aussi ça prend du temps (il faut compter en semaines).

Donc si tu veux réaliser des intégrations professionnelles, il faut attaquer ce domaine par le début et avec méthode: d'abord les bases de HTML/XHTML, puis les bases de CSS, puis des perfectionnement avec ces deux langages.

Si par contre il s'agit juste de réaliser un site perso... eh bien, ça laisse plus de latitude pour bricoler, mais arriver à un résultat de qualité par soi-même demandera là encore un gros investissement. Ou bien il faut trouver un copain qui a des compétences en intégration web. Smiley cligne
Merci pour les explications ! Je vais de suite attaquer la lecture des articles ! Smiley biggrin

J'ai remarqué une chose sur me site, de firefox ou d'internet explorer l'affichage n'est pas le même...les blocs ne se placent pas de la même façon et le texte n'est pas en caractère gras d'un navigateur à l'autre...Pour les blocs c'est peut-être l'histoire de absolute, relatif ect....Je n'ai pas finis lol

Merci de m'avoir éclairer, j'ai trouvé la solution au décalement ! Smiley biggrin
Modifié par nemeton (21 May 2008 - 16:15)
Sujet clos
Aller à