6
Non riesco ad aggiungere il margine superiore al piè di pagina che utilizza clear: both. L'uso del padding sembra risolvere il problema. Ma rovina il bordo solido superiore del piè di pagina.Impossibile aggiungere il margine superiore al piè di pagina che utilizza clear: both
index.php:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Study at Best</title>
<link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
<div id="logo">
<img class="imageCenter" src="images/logo.png" alt="Best School"/>
</div>
<div id="navigation">
<?php include("navigation.html"); ?>
</div>
<div id="header">
</div>
<div id="left-column">
<h2>left-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
</p>
</div>
<div id="main-column">
<h2>main-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<div id="right-column">
<h2>right-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<?php include("footer.html"); ?>
</div>
</body>
</html>
footer.html:
<div id="footer">
<a href="#">Home |</a>
<a href="#">About Us |</a>
<a href="#">Contact Us |</a>
<a href="#">Menu Item 4 |</a>
<a href="#">Menu Item 5 |</a>
</div>
style.css:
/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 {
font-style: normal;
font-size: 1.0em;
padding: 5px 10px;
margin-bottom: 10px;
color: #FFF;
background-color: #A53030;
}
/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }
/*Page*/
#container {
width: 800px;
margin: 0px auto;
}
#logo {
width: 170px;
height: 60px;
margin: 5px;
}
#header {
width: 800px;
height: 200px;
background-image: url('../images/best.jpg');
}
#navigation {
color: white;
width: 800px;
background-color: #000;
}
#left-column {
width: 150px;
padding: 10px;
float: left;
color: #FFF;
background-color: #A53030;
}
#main-column {
width:360px;
padding: 10px;
float: left;
}
#right-column {
width: 200px;
padding: 10px;
float: right;
}
#footer {
margin-top: 50px;
width: 800px;
border-color: #262626;
border-top-style: solid;
border-width: medium;
clear: both;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
padding: 5px;
width: auto;
color: #000;
font-weight: bold;
text-align: center;
text-decoration: none
}
#footer ul li a:hover {
color: #49A3FF;
}
Non sono sicuro di cosa intendi con sgombrare i galleggianti. Se aggiungo clear alla colonna sinistra e alla colonna destra il contenuto è rovinato. Se rimuovo i float anche il contenuto è rovinato. – alexchenco
I galleggianti non hanno un'altezza, quindi il div #container non si estende fino al fondo. Vedi questa pagina http://www.quirksmode.org/css/clearing.html per una buona spiegazione. Usa #container {width: 800px; margine: 0px auto; overflow: hidden;} per fare in modo che il contenitore div "cancelli" i float. – Emily
Grazie! Ha funzionato. Ho avvolto entrambe le colonne con un altro div e ho applicato l'overflow ad esso. – alexchenco