6
Nie mogę dodać górnego marginesu do stopki, która używa polecenia clear: both. Użycie wyściółki wydaje się rozwiązać problem. Ale niszczy górną, solidną granicę stopki.Nie można dodać górnego marginesu do stopki, która używa polecenia clear: zarówno
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;
}
Nie jestem pewien, co masz na myśli mówiąc o przezroczystościach. Jeśli dodaję wyczyszczenia do lewej kolumny i prawej kolumny, zawartość zostanie zrujnowana. Jeśli usuniemy pływaki, zawartość również zostanie zniszczona. – alexchenco
Pływaki nie mają żadnej wysokości, więc twój blok #container div nie rozciąga się aż do samego dołu. Zobacz stronę http://www.quirksmode.org/css/clearing.html dla dobrego wyjaśnienia. Użyj #container {width: 800px; margin: 0px auto; przepełnienie: ukryte;} aby pojemnik był "czysty". – Emily
Dzięki! Zadziałało. Owinąłem obie kolumny innym elementem div i zastosowałem do niego przelew. – alexchenco