Conversion HTML to CSS [Fermé]

Signaler
Messages postés
338
Date d'inscription
mercredi 21 mars 2007
Statut
Membre
Dernière intervention
11 mai 2014
-
bg62
Messages postés
23345
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
22 janvier 2020
-
Bonjour,

Aprés avoir créé l'index de la première page de mon site voici le code :

<!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>
<title>2PiR-Tech</title>
<link rel="stylesheet" href="/templates/veniyard1.7/css/tdefaut.css" type="text/css" media="all" />
<script type="text/javascript" src="/templates/veniyard1.7/js/jquery.js"></script>
<script type="text/javascript" src="/templates/veniyard1.7/js/slideshow.js"></script>
<link rel="icon" type="image/gif" href="/templates/veniyard1.7/favicon.gif" />
<link href="feuilledestyle.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="keywords" content="RESIDENCE, PICARDE, CONSTRUCTION MAISON, CONSTRUCTION PAVILLION, CONSTRUCTION MAISON OSSATURE BOIS, CONSTRUCTION TRADITIONNELLE, CONSTRUCTION CONTEMPORAINE, CONSTRUCTION TOITURE PLATE, CONSTRUCTION PAVILLON OSSATURE BOIS, CONSTRUCTION CONTEMPORAIN, DEPOT DE PERMIS, DECLARATION DE TRAVERSE, SOMME, PICARDIE, 80, AMIENS, DURY, RENOVATION MAISON, RENOVATION PAVILLON, AGRANDISSEMENT MAISON, AGRANDISSEMENT PAVILLON, ETUDE FINANCIERE, MAISON PAS CHERE, BBC, PAVILLON BBC? CONSTRUCTION BBC " />
</head>
<body>
<table width="984" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><span class="bodyline"><a href="index.htlm"><img src="http://img79.xooimage.com/files/4/7/7/banniere-35710bd.jpg" alt="2PiR-tech" /></a></span></td>
</tr>
<tr>
<td height="1000" align="center" valign="top" style="background-image:url('http://img83.xooimage.com/files/4/3/f/fond-3570a13.jpg');background-repeat:repeat;";>

<div id="global">
<div id="entete">
<a name="top"></a>
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline"><div style="text-align:center">
<br />
<br />
</tr>
</div>
</br>
              
<a href="http://www.facebook.com/pirtech"><img src="http://www.xooimage.com/pics/facebook_32.png"/><a href="http://www.facebook.com/pirtech"><img src="http://www.xooimage.com/pics/twitter_32.png"/>             
      
<div id="dolphincontainer">
	<div id="dolphinnav">
		<ul>
			<li><a href="" title="" class="current" ><span>Accueil</span></a></li>
			<li><a href="" title=""><span>Services Informatique</span></a></li>
			<li><a href="" title=""><span>Services Mobiles</span></a></li>
			<li><a href="" title=""><span>La boutique</span></a></li>
			<li><a href="" title=""><span>Nous contacter</span></a></li>
		</ul>
	</div>      
</br />
<img src="http://img84.xooimage.com/files/3/0/e/presentation-35724d7.jpg"/>
<br><br>
<img src="http://img80.xooimage.com/files/e/9/6/foot-357295e.jpg"/>

</br></br></br>
<b><left>2PiR-Tech est une société créee pour répondre à votre besoin de dépannage informatique, d'assistance ou de formation informatique et de réparation de téléphone mobile. 
</br></br>
<li>Pour un dépannage informatique ou une assistance informatique, nous intervenons quelque soit la nature de votre problème informatique(sur toutes les communes déservies par notre société). Problème de démarrage, blocage de votre ordinateur mac, pc ou simple besoin d'assistance, nos techniciens sont à votre disposition pour réagir dans les meilleurs délais à votre domicile.
</br></br>
<li>Pour une réparation mobile, ou assistance, nous intervenons sur toute problémes détéctés par l'utilisateurs, sur toutes les casses réparables de differentes marques de téléphones</b>
</br></br>
<div id="footer">           
<img src="http://img80.xooimage.com/files/e/9/6/foot-357295e.jpg"/>
</br>
2012 Tous droits réservés | 2PiR-Tech | SOCIETE INDIVIDUELLE </span></strong><br>
</div>
</td>
</tr>
</table>



J'ai voulu installer une boutique, j'ai alors fait appel a OSCOMMERCE. Mais leurs code sont en CSS que voici :

/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

.ui-widget {
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
  font-size: 11px;
}

body{background-image:url(http://img83.xooimage.com/files/4/3/f/fond-3570a13.jpg);background-attachment:fixed;background-repeat:no-repeat;background-position:top;background-color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8px;color:#333;margin:0;padding:0}
}

#bodyWrapper {
}

#bodyContent {
}

#header {
  height: 60px;
}

#storeLogo {
  float: left;
  margin-top: 5px;
}

#headerShortcuts {
  float: right;
  margin-top: 15px;
}

#columnLeft {
  padding-top: 5px;
}

#columnRight {
  padding-top: 5px;
}

.infoBoxContainer { }

.infoBoxHeading {
  padding: 2px;
  font-size: 11px;
}

.infoBoxContents {
  padding: 5px;
  font-size: 11px;
  line-height: 1.5;
}

.contentContainer {
  padding-bottom: 10px;
}

.contentContainer h2 {
  font-size: 16px;
  text-decoration: underline;
  font-weight: normal;
  margin-bottom: 0;
  padding-bottom: 5px;
}

.contentText, .contentText table {
  padding: 5px 0 5px 0;
  font-size: 11px;
  line-height: 1.5;
}

.productListTable {
  padding: 5px;
  font-size: 11px;
  line-height: 1.5;
}

.productListTable tr.alt td {
  background-color: #ecf6fc;
}

.fieldKey {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  width: 150px;
}

.fieldValue {
  font-size: 11px;
  line-height: 1.5;
}

h1 {
  font-size: 20px;
  margin-bottom: 0;
  padding-bottom: 5px;
}

img {
  border: 0;
}

table, p {
  font-size: 11px;
  line-height: 1.5;
}

#piGal ul {
  list-style-type: none;
}

#piGal img {
  -webkit-box-shadow: 0px 0px 1px #000;
  -moz-box-shadow: 0px 0px 1px #000;
}

#piGal .outer {
  margin-left: -30px;
}

.buttonSet {
  clear: both;
}

.buttonAction {
  float: right;
}

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  text-decoration: underline;
}

FORM {
	display: inline;
}

TR.header {
  background: #ffffff;
}

TR.headerNavigation {
  background: #bbc3d3;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight : bold;
}

A.headerNavigation { 
  color: #FFFFFF; 
}

A.headerNavigation:hover {
  color: #ffffff;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #bbc3d3;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight: bold;
}

.infoBox {
  background: #b6b7cb;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #f8f8f9;
}

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #b6b7cb;
  border-spacing: 1px;
}

.productListingHeader {
  table-layout: fixed;
  color: #FFFFFF;
  font-weight: bold;
}

.productListingHeader A:hover {
  color: #FFFFFF;
}

.productListingData {
  table-layout: fixed;
}

A.pageResults {
  color: #0000FF;
}

A.pageResults:hover {
  color: #0000FF;
  background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #9a9a9a;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #7b9ebd;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

/* buttons */

.tdbLink a { }

.tdbLink button { }

/* account link list */

.accountLinkList {
  list-style-type: none;
  margin: 2px 2px 2px 10px;
  padding: 5px;
}

.accountLinkListEntry {
  float: left;
  margin-right: 5px;
}


J'aurais voulu le meme theme..

Comment faire

2 réponses

Messages postés
23345
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
22 janvier 2020
1 926
et après une telle " tartine " la question réelle est ... ?
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 82263 internautes nous ont dit merci ce mois-ci

Vous avez tout faux, CSS et une couche supplémentaire à HTML(et indispensable).
Ce n'est pas très compliqué à apprendre.
Après si vous voulez le même thème il vous suffit de recoiper le css et d'utiliser les class et id dans les attributs de balise.

Sans vouloir entamer un cours de CSS: Cascading Stylesheet(feuille de style en cascade) cela permet de donner des propriétés à des balises HTML. Couleur , taille, positionnement, image de fond, bordure, liens, etc...

C'est donc indispensable , HTML n'étant que peut évolué graphiquement.
En CSS vous créez des styles que vous pouvez appliquer à une ou plusieurs balises ce qui du coup facilite les tâches répétitives. Si l'on veut qu'une liste de container de texte aient une bordure arrondi, un fond de couleur et un texte dans telle police avec une marge à gauche de 20px(et oui c'est possible tout ça en css) il suffit de créer le style une seule fois et d'indiquer les balises auxquelles le style s'applique.

Par exemple dans le CSS que vous voulez reprendre:
h1 {
  font-size: 20px;
  margin-bottom: 0;
  padding-bottom: 5px;
}


Indique que toutes vos balises H1 du document ont une taille de police de 20 pixels(font-size),
une marge interne inférieure de 0 et une marge externe en bas de 5px(donc un espace de 5px au moins avec les autres éléments).


Il est bien sûr possible de spécifier une 'règle' css pour qu'elle ne s'applique pas à toutes les balises d'un document mais à certaines désignées par des class et id.

Il faut bien sûr indiquer dans le HTML que vous indiquiez ce fichier CSS, je vous laisse chercher Google : cours CSS, apprendre css, feuille de style débutant etc...