18041 sujets
Questions générales et questions de débutants
Modifié par HAML (26 Mar 2011 - 09:58)Merci à vous deux pour vos réponses.
J'ai finalement réussi à arranger mon problème, de cette façon :
Et :
Il fallait que je rajoute des colspan, parce que la première cellule du centre prenait toute la place.
Hum, comment dois-je faire pour la mise en page si ce n'est pas avec des tableaux, en div? Et pourquoi ce n'est pas bien?
Sachant que je dois optimiser le tout pour IE.
J'ai finalement réussi à arranger mon problème, de cette façon :
<!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>Poke Store : Site d'achats des produits Pokemon</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/icones/favicon.png" type="image/x-icon" />
</head>
<body>
<table width="1050" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" class="header"> </td>
</tr>
<tr>
<td colspan="3" class="navbar"> </td>
</tr>
<tr>
<td align="left" valign="top" class="menu-g"><div class="liens-menu-g">
<p>IMAGE [EN COURS]
<br />
<br /><a href="/">
Accueil</a><br />
<a href="/">
Equipe</a><br />
<a href="/">
Forum</a><br />
<a href="/">
FAQ</a><br />
<a href="/">
Livre d'Or</a><br />
<a href="/">
Nous Contacter?</a><br />
<br />
IMAGE [EN COURS] <br />
<br /><a href="/">
Jeux Videos</a><br />
<a href="/">
Figurines</a><br />
<a href="/">
Peluches</a><br />
<a href="/">
Cartes à Jouer</a><br />
<a href="/">
DVD</a><br />
<br />
IMAGE [EN COURS]<br />
<br /><a href="/">
Concept</a><br />
<a href="/">
Historique</a><br />
<a href="/">
Marketing</a><br />
<a href="/">
Impact Culturel</a></p></td>
<td valign="top" class="centre"><div class="texte-centre">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet odio ac quam lobortis eget feugiat tellus luctus. Quisque blandit placerat faucibus. Sed dignissim mi id magna euismod non luctus turpis blandit. Duis tincidunt est ut risus congue consectetur venenatis eros iaculis. Pellentesque tempus arcu sed turpis mollis non semper lectus suscipit. Suspendisse lectus felis, rutrum ut imperdiet et, scelerisque et justo. Donec vitae orci enim, at vestibulum lorem. Aenean ornare, tellus sed eleifend ornare, tellus metus dapibus lectus, quis lobortis erat ante eu odio. Phasellus vehicula scelerisque velit, et fermentum mi euismod sed. Donec eu leo ac tellus rutrum auctor accumsan feugiat tortor. Morbi dui dolor, suscipit et imperdiet dignissim, congue in massa.
<p>
Suspendisse eu erat nibh, eu commodo libero. Aenean ut ligula elit, ac rhoncus nulla. Ut purus massa, posuere at lobortis non, suscipit vitae odio. Donec vitae lacus suscipit augue dignissim tincidunt. Etiam commodo, dolor et rhoncus congue, augue quam posuere nisl, sit amet pulvinar erat sapien a nisi. Suspendisse magna nisi, faucibus quis congue eget, consequat ac justo. Integer at hendrerit dui. Ut a enim nec leo lacinia tristique. Vestibulum placerat placerat metus, sed imperdiet purus gravida vitae. Nulla quis sapien urna, condimentum gravida nisi. Aenean ultrices lobortis pulvinar. Mauris ut risus purus, id iaculis justo. Nunc pharetra pharetra scelerisque. Etiam pulvinar orci in metus ullamcorper eu luctus elit aliquet. Duis eleifend lorem pretium ante sodales in iaculis erat interdum. In nunc purus, posuere ut elementum at, porta sit amet est. Curabitur facilisis gravida nunc eget vulputate. Pellentesque vel nibh vitae dui aliquet faucibus.
<p>
Nulla at sollicitudin est. Ut ullamcorper arcu id felis rhoncus ut bibendum dui pharetra. Praesent interdum tempus felis sed placerat. Morbi turpis turpis, tempus tincidunt ultrices sed, vulputate a lectus. Cras dapibus vestibulum quam, at ultricies metus convallis eu. Praesent sed lorem ut leo tincidunt feugiat. Praesent at lacus eget justo sagittis feugiat vel ac lacus. Quisque facilisis luctus porttitor. Maecenas euismod nunc mollis tortor sodales commodo. Praesent pellentesque suscipit consequat. Fusce urna nisl, egestas id laoreet in, pretium in velit.
<p>
Quisque felis leo, vulputate in tempor id, porta at quam. Nam vestibulum adipiscing sodales. Integer luctus interdum volutpat. Donec ut turpis at orci sodales eleifend. Praesent dictum dui in sem cursus a porta arcu ornare. Pellentesque at nisl non eros gravida blandit sed quis turpis. Aliquam lobortis pharetra fermentum. Maecenas pretium tincidunt feugiat. Curabitur purus massa, interdum ut molestie sed, ullamcorper vel orci. Praesent sapien justo, imperdiet vel auctor sit amet, facilisis ac lacus. Nam vitae tortor quam. Cras auctor rhoncus metus. Sed sodales bibendum aliquam. Phasellus at imperdiet ante. In tellus sem, fermentum non volutpat sed, mollis sed mauris. Integer at nunc eget nisl vestibulum vestibulum eget a mauris. Proin molestie ultrices consectetur. Aliquam tincidunt condimentum urna, quis feugiat odio varius et.
<p>
Integer tempus ultrices commodo. Sed et commodo augue. Duis porttitor nisl quis dolor feugiat ultricies. Fusce faucibus ligula eget sapien sagittis sodales. Aliquam ultricies velit eu mauris fermentum ac volutpat est vehicula. Etiam non mauris eget ligula dapibus aliquam at a turpis. Nunc nec nisl sed nunc molestie mattis sagittis eget neque. Quisque vehicula volutpat diam, id tempor eros cursus at. Quisque tristique orci at leo vulputate elementum. Nulla mattis ipsum sed nunc faucibus porttitor. Aliquam vel nisi dolor, nec laoreet tellus. Mauris convallis felis ac magna congue semper. Nulla accumsan elementum diam, sit amet lobortis purus suscipit ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce porttitor ullamcorper eros sit amet rhoncus. Mauris sapien urna, varius nec pellentesque ut, mattis quis erat. Nam euismod scelerisque risus, et malesuada elit semper quis. </td>
<td align="left" valign="top" class="menu-d"> </td>
</tr>
<tr>
<td colspan="3" align="right" valign="top" class="footer"></td>
</tr>
</table>
</body>
</html>Et :
@charset "utf-8";
/* CSS Document */
/* //////////////////
Paramètres
//////////////////*/
body {
background: url('images/design/background.jpg') center fixed;
width: 1020px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
a {
text-decoration:none;
color:#0FAFCF;
}
a:hover {
color:#FFFFFF;
}
/* //////////////////
Structure
//////////////////*/
.header {
background-image:url('images/design/header.png');
background-repeat:no-repeat;
width:1018px;
height:418px;
}
.navbar {
background-image:url('images/design/navbar.png');
background-repeat:no-repeat;
width:1018px;
height:227px;
}
.footer {
background-image:url('images/design/footer.png');
background-repeat:no-repeat;
width:1018px;
height:312px;
}
.menu-g {
background:url('images/design/menu-g.png') repeat-y;
width:213px;
}
.centre {
background-image:url('images/design/fond-haut-page.png');
background-repeat:no-repeat;
background-color:#FFFFFF;
width:732px;
padding-top:60px;
}
.menu-d {
background:url('images/design/menu-d.png') repeat-y;
width:72px;
padding-left:33px;
}
/* //////////////////
Structure des textes
//////////////////*/
.liens-menu-g {
padding-left:40px;
padding-top:20px;
}
.texte-centre {
padding-left:40px;
padding-right:40px;
}Il fallait que je rajoute des colspan, parce que la première cellule du centre prenait toute la place.
Hum, comment dois-je faire pour la mise en page si ce n'est pas avec des tableaux, en div? Et pourquoi ce n'est pas bien?
Sachant que je dois optimiser le tout pour IE.
Bonjour,
Un peu de lecture afin de répondre à la question.
Construire un site sans tableaux
PaJe1005 a écrit :
Hum, comment dois-je faire pour la mise en page si ce n'est pas avec des tableaux, en div? Et pourquoi ce n'est pas bien?
Sachant que je dois optimiser le tout pour IE.
Un peu de lecture afin de répondre à la question.
Construire un site sans tableaux