Bonjour,
J'ai un problème pour passer une design en taille fixe à une version qui fait 100% de la page (largeur).
Voici les fichiers:
le HTML:
et le CSS:
Malgré mes recherches, je n'arrive pas à convertir cela de manière à garder les colonnes à droite en taille fixe et les colonnes à gauche relatives aussi bien dans le header que dans le content.
Merci pour votre aide.
Salutations.
Modifié par peio72 (08 Oct 2007 - 11:19)
J'ai un problème pour passer une design en taille fixe à une version qui fait 100% de la page (largeur).
Voici les fichiers:
le HTML:
<!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>Something in blue - Web design by Giant Systems</title>
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div>
<div class="top">
<div class="header">
<div class="left"> Something in blue </div>
<div class="right">
<div>
Valid XHTML 1.1 Transitional, Valid CSS 2.</div>
</div>
</div>
</div>
<div class="container">
<div class="navigation"><a href="#" title="Home">HOME</a><a href="#" title="Downloads">SOMETHING</a><a href="#" title="Documentation">FAIRGROUND</a><a href="#" title="FAQs">BLUE PAGE</a><a href="#" title="Contact Us">CONTACT US</a>
<div class="clearer"><span></span></div>
</div>
<div class="main">
<div class="content">
<h1><img class="imgright" src="img/_DSC7372.jpg" alt="Forest Thistle" />Simple easy to adapt design</h1> <p>This page is a tableless layout which uses valid XHTML transitional and valid CSS 2.</p>
<p>This design has been provided by Giant Systems Ltd. Giant Systems also provide a free content management system which allows you to edit templates such as this in a using a WYSIWYG editor</p><p>This system can be viewed downloaded and tested at <a href="http://www.flexcms.co.uk">http://www.flexcms.co.uk</a></p>
<p>As it would be a helpful way of supporting my work on open source templates I would be grateful if you could leave the lint at the bottom of the page (the one that says "Design by Giant Systems Ltd" in the footer). However the decision is yours, you may remove this if you wish.</p>
<h2>Some place holder text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> </p>
<p></p>
<p> </p>
</div>
<div class="sidenav">
<h2>FlexCMS</h2>
<ul>
<li><a href="#" title="Home">Home </a></li><li><a href="#" title="Downloads">Forest Green </a></li>
<li><a href="http://www.flexcms.co.uk/FlexCMS_Documentation.aspx" title="Documentation">Trees </a></li>
<li><a href="#" title="FAQs">About Us </a></li>
<li><a href="http://www.flexcms.co.uk/FlexCMS_ContactUs.aspx" title="Contact Us">Contact Us </a></li>
</ul>
<h2>Membership</h2>
<ul>
<li><a href="#">Login / Register</a></li>
<li><a href="#">Forgot password?</a></li>
</ul>
<h2>FlexCMS Bespoke versions </h2>
<ul>
<li><a href="http://www.giant-systems.co.uk/">FlexCMS </a></li>
<li><a href="http://www.giant-systems.co.uk/Ecommerce.aspx">FlexEcommerce</a></li>
<li><a href="http://www.giant-systems.co.uk/casestudies.aspx">FlexCMS portal server </a></li>
<li><a href="http://www.giant-systems.co.uk/casestudies.aspx">FlexCMS Intranet </a></li>
</ul>
<br />
<br />
</div>
<div class="clearer"><span></span></div>
</div>
<div class="footer">© Your name here - Design by <a href="http://www.giant-systems.co.uk" title="Giant Systems Web design">Giant Systems Ltd</a>
</div>
</div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
Design downloaded from <a href="http://www.freewebtemplates.com/">Free Templates</a> - your source for free web templates
</div>
</body>
</html>et le CSS:
html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #D8D3DC url(img/background2.jpg) repeat-x left bottom;
color: #333;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
background-color: #fff;
font-size: 1.2em;
height: 105px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 105px;
}
.header .left {
background: transparent url(img/top.jpg) top left repeat-x;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 105px;
width: 567px;
text-align: left;
}
.header .right {
overflow: auto;
width: 207px;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(img/bgmain.jpg) repeat-y;
}
.sidenav {
float: right;
width: 205px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
Malgré mes recherches, je n'arrive pas à convertir cela de manière à garder les colonnes à droite en taille fixe et les colonnes à gauche relatives aussi bien dans le header que dans le content.
Merci pour votre aide.
Salutations.
Modifié par peio72 (08 Oct 2007 - 11:19)
