28234 sujets

CSS et mise en forme, CSS3

Passer d'un site avec tableaux à un site avec CSS

Pages :
Comme je debute dans le developpement web, j'avais fais le site de ma mere avec des tableaux Smiley bawling oui je l'avoue et je le regrette, il faut dire que je connaissais pas encore les CSS et je ne voulais pas m'embeter....
Donc ma question c'est est ce que je peux attacher ma feuille de style au site tableaux ou je dois tout recommencer de A à Z?
Ceci dit, ca ne me derange pas de tout refaire, j'aime bien ca Smiley biggrin !!!
Administrateur
Si ça ne te dérange pas de tout refaire, et si tu veux prendre le temps pour apprendre les choses correctement, il serait effectivement mieux de tout supprimer.

Attention : rien ne t'empêche de commencer tranquilement en gardant un peu de tableaux (le moins) possible, puis au fur et à mesure, verser dans le tout CSS.

Fais un tour dans nos salons Ressources ou sur le lien "Tutoriels CSS", tu trouveras amplement ton bonheur Smiley cligne
Aujourd'hui j'ai fait la plupart des tutos d'alsa!!
Les CSS c'est tout nouveau pour moi, j'ai commencé a m'interesser à ca il y a peine une semaine mais grace à un tuto d'alsa (celui ou on fait un site complexe sans tableaux) ca s'eclaircit de plus en plus dans ma petite tete!! Smiley smile
Modifié le 31 Oct 2004 - 19:09
Je crois que je suis atteint de la "divite chronique"
Mon seul symptome, je crois que c'est celui la "Chouette, je vire les tableaux et je remplace par des divs". Smiley nuts !!!!
C'est pas possible je comprends pas pourquoi IE 5.2mac n'affiche pas mon image de fond d'ecran et que Mozilla, Safari et Camino eux le font!!!
Il semble que internet exploder n'aime pas ton css!

background-image: url('Font_page.jpg');


Essaye : 

background-image: url(Font_page.jpg);


Smiley cool
Modifié le 31 Oct 2004 - 22:51
Osiris1426 a écrit :

Et enfaite comment je peux faire pour mettre mon texte a coté de mon menu verticale?


Ah! Ça c'est facile!
Tu ajoutes un float: left; à ton <ul>


ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}


Ton menu ne fonctionne pas bien dans IE sur PC, mais il est ok dans Firefox.

À vérifier... Smiley smile

Pour l'instant, je crois que le menu serait plus clair comme ceci, mais évidemment, c'est une question de goût personnel...


<ul>
 <li><a href="file:///">Accueil</a></li>
 <li><a href="#">SPECTACLES</a>
  <ul>
   <li><a href="#">Danse</a></li>
   <li><a href="#">theâtre</a></li>
   <li><a href="#">Concerts</a></li>
   <li><a href="#">Soirées Atmosphères</a></li>
   <li><a href="#">Autres</a></li>
  </ul>
 </li>
 <li><a href="#">ARTS</a>
  <ul>
   <li><a href="#">Annick Le Maux</a></li>
   <li><a href="#">Bernard Montagnana</a></li>
   <li><a href="#">Expo Gravure</a></li>
   <li><a href="#">Céline Raynal</a></li>
   <li><a href="#">Conférence Diaporam</a></li>
  </ul>
 </li>
 <li><a href="#">RANDOS</a></li>
 <li><a href="#">RESTOS</a></li>
 <li><a href="#">BIEN-ETRE</a>
  <ul>
   <li><a href="#">Salon Bio et Nature Marjolaine</a></li>
   <li><a href="#">Massage</a></li>
  </ul>
 </li>
 <li><a href="#">TCHACHT'ART</a></li>
 <li><a href="#">FORUM</a></li>
</ul>


De bonnes qualités pour un développeur web sont la curiosité et la persévérance. J'utilise souvent la méthode expérimentale (par essais et erreurs).
Modifié le 01 Nov 2004 - 05:44
Lol je n'ai pas pu me connecter aujourd'hui sur le forum mais le code que tu me donne, eh ben je crois que c'est le meme que celui que j'ai fait aujourd'hui!!!
J'ai reussi a mettre le texte a la hauteur du menu des liens en faisant je sais plus trop quelle manip.
J'ai du effacer mon menu deroulant ( J'ai compris la plupart du tuto en anglais de alistapart.com) mais j'ai bougé un calques et tout a bougé donc recommencer a zero... Et le javascript on doit le placer ou? entre les balises <head> </head>?
Je commence a m'ameliorer Smiley smile ....
Allez encore deux petites questions et puis je vais L'assomoir de Zola (<--- on s'enfous)
1.Avec le tuto du menu deroulant sur alistapart.com, j'ai fais mon truc ( là c'est pas terminer, j'ai pas encore mis le code css) et apres le tuto dit qu'on doit mettre du java pour que IE mac et IE Pc puissent derouler le menu, mais le java , je le met dans le code html? si oui entre les balises <head>...</head>?

2. Pour mon texte qui est au milieu, j'ai ajouter une bordure au .centre donc ca a marchait et enfaite j'aimerais que .centre soit un peu plus bas car là il est completement collé a l'image du haut... Pour ca je dois utiliser "top"?

Style css--> http://www.bonsplansamis.freegaia.net/style.css
Page html--> http://www.bonsplansamis.freegaia.net/index2
@Osiris1426
Voici quelques suggestions :

Premièrement, j'oublirais le javascript pour le moment, surtout qu'il y a tellement de beaux menus à faire avec CSS!

<title>Document sans titre</title> n'est pas vraiment un bon titre pour une page web.
<title>Bons Plans Amis</title> serait mieux.

<center><img src="image-2.png"/></center> est le logo de "Bons Plans Amis" mais aussi l'en-tête de la page alors je le placerais dans un vrai "header" (h1). Autant spécifier la largeur et la hauteur de l'image, ainsi qu'un texte alternatif au cas où l'image ne serait pas affichée.
<h1><img src="image-2.png" width="459" height="66" alt="Bons Plans Amis" /></h1>

Ensuite on va faire plus simple avec tes divisions.

Remplacer :

.gauche { 
   position: fixed; 
   left: 0; 
   width: 80px; 
   height: 337px; 
}

.centre { 
   margin-left: 300px; 
   width: 586px; 
   height: 337px; 
   border: dotted black 1pt; 
}


Par : 

.gauche { 
   float: left; 
   width: 33%; 
}

.centre { 
   margin-left: 33%; 
}


On traitera de la bordure plus tard...

<div align="center"></div> est inutile, tu peux le supprimer.

Finalement, ici on va fixer la marge à 18px.


body { 
   margin: 18px; 
   font-family: Arial, Helvetica, sans-serif ; 
   font-size: 14px; 
   background-image: url(Font_page.jpg); 
   font-style: italic; 
   font-weight: bold; 
}


Essais ça et dis-moi si c'est beau dans tous les navigateurs sur ton mac!

Sur un PC, ce design a été testé avec succès sur les navigateurs suivants :

opera 7.51
netscape 7.1
firefox 1.0
internet explorer 6.0

Beau travail, continu!!! Smiley cool
Alors sur Safari 1.2.3, Opera 7.54, Mozilla 1.7, IE 5.2 mac.

Juste Camino à un ptit probleme, c'est que les liens se mettent sur l'image mais des qu'on agrandit ou retrecit la page, tout redevient normal.

Le texte est un peu trop decalé vers la droite, le menu ne sera pas comme ca, je vais mettre un menu deroulant donc apres je pourrais decalé le texte.

Enfaite maintenant ca, ca me sers plus a grand chose? nan?

.head {
width: 770px;
height: 80px;
background-image: url ('image-2.png');
background-position:center;
}


Merci Smiley biggrin
Modifié le 02 Nov 2004 - 09:23
Osiris1426 a écrit :

Enfaite maintenant ca, ca me sers plus a grand chose? nan?

.head {
width: 770px;
height: 80px;
background-image: url ('image-2.png');
background-position:center;
}



En effet! Smiley cligne
Ça il faut le supprimer...

.gauche {
position: fixed;
left:0;
width: 80px;
height: 337px;
}


Et il manque un ; pour l'attribut font-size

h1 {
font-size: 200%
text-align: center;
font-family: Arial, Helvetica, sans-serif ;
font-style: italic ;
font-weight : bold ;
}
Pages :
Sujet clos
Aller à