Sujet Précédent Sujet Suivant

Conversion HTML to CSS

Fermé
zouzou80157 Messages postés 337 Date d'inscription mercredi 21 mars 2007 Statut Membre Dernière intervention 11 mai 2014 - 21 juin 2012 à 20:00
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 22 juin 2012 à 18:19
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

A voir également:

2 réponses

Réponse 1 / 2
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
22 juin 2012 à 18:19
et après une telle " tartine " la question réelle est ... ?
2

Discussions similaires

Convertir HTML+CSS en PDF
Sandriine -
Sandriine -

6 réponses
Convertir tableau excel en html
Léali -
Claire -

5 réponses
Convertir liens musicaux .html en fichiers .wav, mp3 ou autres ?
gabarre56 -
Utilisateur anonyme -

2 réponses
conversion HTML en MP3
thrombocyte11 -
thrombocte11 -

2 réponses
Convertir un format HTML en AVI
xDarkLadyx -
jojalie -

13 réponses
convertir fichier html en pdf
filalibouh -
hclooney -

5 réponses