non, le css était entre les <head> et </head> J'ai essayé de les déplacer dans le body... ca ne change rien...
Je met le code de la page au cas ou ca puisse aider, ca me rend fou que ca marche chez tout le monde sauf moi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalys Newsletter</title>
</head>
<body>
<style type="text/css">
/* general styling */
* {
margin: 0;
padding: 0;
}
html,body {
}
#theBody {
height: auto;
background: #FFF;
color: #1a3804;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* the hyperlinks */
a {
color: #458023;
text-decoration: underline;
}
a:hover {
color: #265b00;
}
/* site specific styling */
/* the container centers the page */
#container {
width: 740px;
height: auto;
margin: 0 auto 0 auto;
}
/* the topbar that contains the most upper links */
#topbar {
width: 740px;
height: 24px;
line-height: 24px;
vertical-align: middle;
text-align: right;
}
/* the links in the topbar are an unordered list, formatted here */
#topbar ul {
float: right;
}
#topbar li {
list-style: none;
display: block;
width: auto;
float: left;
}
#topbar a {
text-decoration: none;
display: block;
padding: 0 10px 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
#topbar a:hover {
background: #458023;
color: #FFF;
}
/* the header that contains the big image */
#header {
width: 740px;
height: 180px;
background: #458023 url(http://www.monServer.com/newsletter/images/header.jpg) top left no-repeat;
position: relative;
}
/* the big title text in the header */
#header h1 {
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 30px;
font-weight: 100;
letter-spacing: -1px;
color: #FFF;
position: absolute;
top: 60px;
left: 20px;
}
/* the navigationbar in the header */
#navbar {
position: absolute;
bottom: 11px;
right: 6px;
}
/* the links in the navigationbar are an unordered list */
#navbar ul {
}
#navbar li {
list-style: none;
display: block;
width: auto;
float: left;
}
#navbar a {
text-decoration: none;
display: block;
padding: 4px 10px 4px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
#navbar a:hover {
background: #458023;
color: #FFF;
}
/* the core contains all the site contents */
#core {
width: 740px;
height: auto;
margin-top: 5px;
background: #FFF url(http://www.monServer.com/newsletter/images/coreback.gif) top left repeat-y;
}
/* the coreleft contains the left part of the core */
#coreleft {
width: 140px;
height: auto;
background: #deebd2;
float: left;
}
/* the links in coreleft are another unordered list */
#coreleft ul {
}
#coreleft li {
display: block;
height: auto;
width: 136px;
margin: 2px;
}
#coreleft a {
display: block;
height: auto;
padding: 4px;
width: 128px;
color: #325d19;
background: url(http://www.monServer.com/newsletter/images/readmore_arrow.gif) 97% center no-repeat;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 0;
}
#coreleft a:hover {
background: #458023 url(http://www.monServer.com/newsletter/images/readmore_over.gif) 97% center no-repeat;
color: #FFF;
}
#coreleft h3 {
padding: 20px 4px 0 4px;
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 18px;
margin: 0;
}
#coreleft p {
padding: 5px;
margin-top: 0px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
/* the corecenter contains the center part of the core */
#corecenter {
width: 590px;
height: auto;
float: left;
}
#corecenter h2 {
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 20px;
color: #3e6717;
padding: 10px 0 0 10px;
}
#corecenter p {
line-height: 20px;
padding: 0 10px 10px 10px;
color: #888;
}
#corecenter ul {
padding: 20px;
width: auto;
}
#corecenter li {
list-style: none;
line-height: 20px;
border-bottom: 1px solid #DDD;
}
#corecenter li a {
text-decoration: none;
color: #a6c384;
display: block;
height: auto;
padding: 4px;
}
#corecenter li a:hover {
background: #a6c384;
color: #000;
}
/* the footer contains all copyright info etcetera */
#footer {
clear: both;
width: 740px;
height: 30px;
background: #458023;
line-height: 30px;
vertical-align: middle;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footer p {
color: #FFF;
padding-right: 20px;
}
#footer a {
color: #FFF;
}
</style>
<div id="theBody">
<div id="container">
<div id="header">
<h1>Kalys - Du naturel pour l'industrie</h1>
<div id="navbar">
<ul>
<li><a href="index.html" title="a title for the link">Homepage</a></li>
<li><a href="index.html" title="a title for the link">Products</a></li>
<li><a href="index.html" title="a title for the link">Clients</a></li>
<li><a href="index.html" title="a title for the link">Login</a></li>
</ul>
</div>
</div>
<div id="core">
<div id="coreleft">
<h3>Latest News</h3>
<ul>
<li><a href="index.html" title="a title for the link">New Productline launched</a></li>
<li><a href="index.html" title="a title for the link">Site hosted on a new server</a></li>
<li><a href="index.html" title="a title for the link">Clientsdatabase increased with 8% in 2005</a></li>
<li><a href="index.html" title="a title for the link">Our fact and figures for 2005</a></li>
</ul>
<h3>Other contents</h3>
<p>Some more contents could fit here if you'd like that.
You can put testimonials, latest forumposts or perhaps statistics in this place? It's all up to you!
</p>
<h3>Linkpartners</h3>
<ul>
<li><a href="index.html" title="your partnertitle">partnersite</a></li>
<li><a href="index.html" title="your partnertitle">partnersite</a></li>
<li><a href="index.html" title="your partnertitle">partnersite</a></li>
<li><a href="index.html" title="your partnertitle">partnersite</a></li>
<li><a href="index.html" title="your partnertitle">partnersite</a></li>
</ul>
</div>
<div id="corecenter">
<h2>Lorem Ipsum everybody!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce quis erat sed nisi congue dapibus. Nullam arcu nibh,
vulputate ac, porta ac, vehicula eu, dolor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Duis sed enim nec magna imperdiet laoreet. Maecenas
nec mauris. Suspendisse congue adipiscing turpis. Nullam dolor
dui, tristique a, gravida eu, porta eu, est. <a href="index.html">Nulla diam</a>. Nullam in dolor.
Sed tortor sem, commodo sed, congue hendrerit, lobortis sed, mauris.</p>
<p>
<img src="http://www.monServer.com/newsletter/images/leaf.jpg" alt="leaf" width="180" height="135" style="float: left; padding: 4px 4px 0 0;" />
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec nec odio. Phasellus vel felis at arcu lacinia
faucibus. Praesent sagittis urna vel diam. Ut porta leo eu lectus tincidunt
convallis. Etiam ut metus nec eros ornare auctor. Etiam pulvinar nisl quis velit.
<a href="index.html">Donec in</a> quam a tortor facilisis viverra. Mauris accumsan, dolor eu convallis
blandit, mi quam pretium metus, ornare commodo sem mauris et justo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel quam.
Pellentesque mi. Ut nonummy orci a eros. Donec lectus. Nam tempor imperdiet ligula.</p>
<h2>Lorem Ipsum everybody!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce quis erat sed nisi congue dapibus. Nullam arcu nibh,
vulputate ac, porta ac, vehicula eu, dolor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Duis sed enim nec magna imperdiet laoreet. Maecenas
nec mauris. Suspendisse congue adipiscing turpis. Nullam dolor
dui, tristique a, gravida eu, porta eu, est. <a href="index.html">Nulla diam</a>. Nullam in dolor.
Sed tortor sem, commodo sed, congue hendrerit, lobortis sed, mauris.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec nec odio. Phasellus vel felis at arcu lacinia
faucibus. Praesent sagittis <a href="index.html">urna vel diam</a>. Ut porta leo eu lectus tincidunt
convallis. Etiam ut metus nec eros ornare auctor. Etiam pulvinar nisl quis velit.
Donec in quam a tortor facilisis viverra. Mauris accumsan, dolor eu convallis
blandit, mi quam pretium metus, ornare commodo sem mauris et justo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel quam.
Pellentesque mi. Ut nonummy orci a eros. Donec lectus. Nam tempor imperdiet ligula.</p>
<p>
<img src="http://www.monServer.com/newsletter/images/eye.jpg" alt="eye" width="150" height="150" style="float: right; padding: 4px 0 0 4px;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce quis erat sed nisi congue dapibus. Nullam arcu nibh,
vulputate ac, porta ac, vehicula eu, dolor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Duis sed enim nec magna imperdiet laoreet. Maecenas
nec mauris. Suspendisse congue adipiscing turpis. Nullam dolor
dui, tristique a, gravida eu, porta eu, est. <a href="index.html">Nulla diam</a>. Nullam in dolor.
Sed tortor sem, commodo sed, congue hendrerit, lobortis sed, mauris.</p>
<ul>
<li><a href="index.html" title="some list">some listitem</a></li>
<li><a href="index.html" title="some list">some listitem</a></li>
<li><a href="index.html" title="some list">some listitem</a></li>
<li><a href="index.html" title="some list">some listitem</a></li>
<li><a href="index.html" title="some list">some listitem</a></li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec nec odio. Phasellus vel felis at arcu lacinia
faucibus. Praesent sagittis urna vel diam. Ut porta leo eu lectus tincidunt
convallis. Etiam ut metus nec eros ornare auctor. Etiam pulvinar nisl quis velit.
<a href="index.html">Donec in</a> quam a tortor facilisis viverra. Mauris accumsan, dolor eu convallis
blandit, mi quam pretium metus, ornare commodo sem mauris et justo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel quam.
Pellentesque mi. Ut nonummy orci a eros. Donec lectus. Nam tempor imperdiet ligula.</p>
</div>
<div id="footer">
<p>Design by <a href="http://jmstudio.nl">JMstudio.nl Webdesign</a> | © 2003 - 2006 yourname.com |
<a href="http://validator.w3.org/check/referer">xHTML</a><br />
Courtesy <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a><a href="http://www.dubaiapartments.biz" target="_blank"><img src="http://www.monServer.com/newsletter/spacer.gif" width="5" height="5" border="0"/></a>Thanks to <a href="http://www.webhostingbluebook.com" target="_blank">web hosting bluebook</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Modifié par zmove (05 Dec 2006 - 13:12)
Un coup de bol : hier un internaute a posé aussi une question sur les mails en CSS et je me suis souvenu de l'article sur pompage (dont j'étais déjà fan à l'époque et dont je guettais les nouveaux articles avec avidité).
