0
J'ai créé une mise en page où tout est centré (avec la technique "margin =" 0 auto ".) Je voulais aussi que l'en-tête et le pied de page soient noirs et étendus des deux côtés lorsque le navigateur agrandit les côtés. La seule solution que j'ai trouvée était d'appliquer le style d'arrière-plan à l'en-tête et au pied de page et d'utiliser une classe à l'intérieur (.container) pour centrer le contenu (je pense que Stack Overflow utilise cette technique). avec le pied de page) Il est agréable, mais je voudrais savoir s'il y a une meilleure façon plutôt que d'ajouter divs supplémentairesdilemme de mise en page: en-tête, contenu et pied de page qui étend horizontalement leur couleur d'arrière-plan (mais qui a en même temps un contenu centré)?
MON HTML.?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
</head>
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><a href="index.php"><span>home</span></a></li>
<li class="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li>
<li class="about"><a href="about.php"><span>about</span></a></li>
<li class="contact"><a href="contact.php"><span>contact</span></a></li>
</ul>
</div>
</div>
<!-- content -->
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Our Work</h2>
<!-- slideshow -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
Content for slide 1 goes here
</div>
<div class="slide">
Content for slide 2 goes here
</div>
<div class="slide">
Content for slide 3 goes here
</div>
<div class="slide">
Content for slide 4 goes here
</div>
</div>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
MON CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: #2D2D2D url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #418EE4;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
/* header */
#header {
background-color: #2D2D2D;
padding-top: 10px;
}
/* navigation */
ul#navigation {
height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
float: left;
}
ul#navigation li a {
background: url(../images/tab.png);
color: #C0C0C0;
display: block;
height: 20px;
outline: none;
padding-left: 10px;
text-decoration: none;
}
ul#navigation li a:hover {
color: #418EE4;
}
#home li.home a, #portfolio li.portfolio a, #about li.about a, #contact li.contact a {
background-position: 0 -32px;
color: #757575;
}
ul#navigation span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 20px;
padding-right: 20px;
}
#home li.home span, #portfolio li.portfolio span, #about li.about span, #contact li.contact span {
background-position: 100% -32px;
}
/* content */
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 2px dashed #F0F0F0;
border-bottom: 2px dashed #F0F0F0;
padding: 5px 0 5px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column {
float: left;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
/* footer */
#footer {
clear: both;
background-color: #2D2D2D;
height: 200px;
}