誰かが助けてくれることを願っています。サイトを検索しましたが、同様の質問への回答がありますが、まだ少し混乱しています. 私は過去に HTML の経験があったため、新しい Web サイトの構築を仕事として任されました。CSS を使用してサイトを適切に構築する方法を理解するのに最適な方法だと思いましたが、少し慣れてきたと思います。混乱した/混同した. ホームページでは機能していましたが、このページにはコンテンツ div のテキストが多く、フッターが邪魔になりません。position:absolute や clear: both; などのタグについて読みました。1 つもありますが、私の人生では、それらがどこにあるべきかを理解することはできません。
ありがとう。
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>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Max - The leading name in digitisation</title>
<style type="text/css">
<!--
a:link { color: #000000; text-decoration: none}
a:visited { color: #000000; text-decoration: none}
a:hover { color: #000000; text-decoration: underline}
a:active { color: #000000; text-decoration: none}
-->
</style>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Max Communications" />
<style type="text/css" media="all">@import "css/about.css";</style> <style type="text/css" media="all">@import "css/about.css";</style>
</head>
<body>
<div id="page-container">
<div id="header">
<a href="index.html"><img src="images/logotype-max.png"></a>
<div id="subheader">
<h2>The leading name in digitisation</h2>
</div>
</div>
<div id="nav">
<b><a href="about.html">About</a></b><br>
<a href="services.html">Services</a><br>
<a href="clients.html">Clients</a><br>
<a href="cases.html">Case studies</a><br>
<a href="contact.html">Contact</a><br><br>
<a href="blog.html">David's blog</a><br><br>
<a href="http://www.twitter.com" target=_blank>Twitter</a><br>
<a href="http://www.facebook.com" target=_blank>Facebook</a><br>
<a href="http://www.youtube.com" target=_blank>YouTube</a><br>
</div>
<div id="content_l">
<p>Max Communications is the company of choice for
the digitisation of images, audio and video. We
have established ourselves as the leading provider
of digital solutions to large institutions, blue-chip
companies, galleries, museums and media organisations.
Quality products and professional service have enabled
us to attract and maintain a formidable <a href="clients">client list</a>.</p>
<p>Specialising in high quality, high volume digitisation
<a href="services">services</a>, we place an overriding emphasis on developing
friendly and long-term relationships with all our clients.</p>
<p>Our association over many years with both the heritage sector
and large media organisations has given us a sound understanding
of digital production workflow and quality management.</p>
<p>This puts us in a unique position to provide advice to clients
on utilisation of best practices and adherence to the latest
archive and industry standards. As a result, our clients are
able to leverage the greatest possible return from their
digital assets, in commercial, preservation and accessibility
terms.</p>
<p>We have a formidable array of high-end digitisation equipment.
We back this up with strong quality control and, for larger
projects, adherence to strict project management procedures
to ensure that deadlines are met - within budget.</p>
We are uniquely placed to assist with your digitisation requirements.
</ br></ br>
We are based in south-east London, serving both UK and international clients.</ br></ br>
</div>
<div id="content_r">
<img src="images/qb-max.jpg"
</div>
<br><br><br>
<hr style="color:#000000;background-color:#000000;height:1px;border:none;width:1400px;" /> </ br>
<div id="footer">
<div id="section1">
<div id="column1">
Max Communications</br>
*********</br>
**********</br>
T ************</br>
<a href="**************</a>
</div>
<div id="column2">
<b><a href="about.html">About</b></a></br>
<b><a href="index.html">Services</b></a></br>
<a href="index.html">Photographic, Microfilm and Glass plate</a> </br>
<a href="index.html">Manuscript scanning/photography</a></br>
<a href="index.html">Audio digitisation</a></br>
<a href="index.html">Video & moving image</a></br>
<a href="index.html">Digital printing and fulfilment</a></br>
<a href="index.html">OCR and eBook creation</a></br>
<a href="index.html">Print and picture framing</a></br>
<a href="index.html">Photographic conservation</a></br>
</div>
</div>
<div id="section2">
<div id="column3">
<b><a href="clients.html">Clients</b></a></br>
<b><a href="index.html">Case studies</b></a></br>
<a href="index.html">Bexley Heritage Trust</a></br>
<a href="index.html">Henry Moore Foundation</a></br>
<a href="index.html">Tate Gallery</a></br>
<a href="index.html">Country Life Picture Gallery</a></br>
<a href="index.html">Natural History Museum</a></br>
<a href="index.html">News International</a></br>
<a href="index.html">Victoria and Albert Museum</a></br>
<b><a href="contact.html">Contact</b></a>
</div>
<div id="column4">
<b><a href="index.html">David’s blog</b></a></br></br>
<b>Follow us</b></br>
<a href="http://www.twitter.com" target="_blank">Twitter</a></br>
<a href="http://www.facebook.com" target="_blank">Facebook</a></br>
<a href="http://www.vimeo.com" target="_blank">Vimeo</a></br></br>
<b>Legal</b><br>
<a href="index.html">Terms & Conditions</a><br>
<a href="index.html">Privacy Policy</a><br>
</div>
</div>
CSS コード:
html, body {
background: #ff5000;
margin: 0;
padding: 0;
font-family:georgia;
}
.hidden {
display: none;
}
#page-container {
width: 1000px;
margin: auto;
padding: 60px;
}
#main-nav {
height: 50px;
}
#header {
clear: both;
height: 100px;
font-family: Georgia;
font-size: 10px;
margin: auto;
color: #000000;
line-height: 12px;
}
#subheader {
width: 400px;
float: right;
text-align: right;
font-size: 12px;
padding: 25px 5px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
float: right;
margin: 0;
padding: 0;
font-weight: normal;
}
#nav {
float: left;
width: 200px;
height: 300px;
font-family: Georgia;
font-size: 15px;
line-height: 1.4em;
word-spacing: 0.2em;ß
}
#content_l {
float: left;
width: 400px;
height: 300p;
font-family: Georgia;
font-size: 15px;
line-height: 1.4em;
word-spacing: 0.2em;
}
#content_r {
float: left;
width: 400px;
height: 100%;
font-family: Georgia;
font-size: 10px;
line-height: 1.4em;
word-spacing: 0.2em;
}
#footer, #column1, #column2, #column3, #column4{
}
#section1 {
float: left; /* Sets this section to the left */
background: none;
width: 650px;
}
#column1 {
float: left; /* Sets this column to the left inside its section */
background: none;
font-size: 14px;
width: 350px;
}
#column2 {
float: right; /* Sets this column to the right inside its section*/
background: none;
font-size: 14px;
width: 300px;
}
#section2 {
float: right; /*Sets this sectionto the right */
background: none;
width: 350px;s
}
#column3 {
float: left; /* Sets this column to the left inside its section */
background: none;
font-size: 14px;
width: 250px;
}
#column4 {
float: right; /* Sets this column to the right inside its section*/
background: none;
font-size: 14px;
width: 100px;
}
}