1

会社の Web サイト用に簡単な「会社概要」ページを作成しようとしていますが、CSS と HTML の配置に問題があります。基本的な考え方は次のとおりです。

--Pic-- --Text-

--Text-- --Pic-

--Pic-- --Text-

作成した HTML コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="baseStyle.css">
<link rel="stylesheet" type="text/css" href="aboutUsStyles.css">
</head>

<body>
<div id="wrap">
    <h1>who are we?</h1>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="ourProducts.html">Our Products</a></li>
<li><a href="FAQ.html">FAQs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<div id="content">

<div><p id="andypic">
    <img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>

<div><p id="evpic">
<img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>    

<div><p id="tannerpic">
    <img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>
</div>

</div>

</body>
</html>

2 つの CSS ファイルは次のとおりです。

最初のファイル:

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }

#nav li a:hover {
color: #c00;
background-color: #fff; }

body {
background-color: #555; 
font: small/1.3 Arial, Helvetica, sans-serif; }

#wrap {
width: 750px;
height: 900px;
margin: 0 auto;
background-color: #fff; }

h1 {
text-align: center;
font-size: 1.5em;
padding: 1em 8px;
color: #123;
background-color: #069;
margin: 0; }

#content {
padding: 0 30px 30px; }

#copyright { 
text-align: center;
font-size: .75em; }

2 番目のファイル:

#andypic{
float: left;
height: 240px;
width: 320px;
}

#evpic{
float: right;
height: 240px;
width: 320px;
}
#tannerpic{
float: left;
height: 240px;
width: 320px;
}

私が今持っているものはほとんど大丈夫ですが、行はすべて間違っており、テキストは適切に一致していません.

ここでこれが奇妙に見えることはわかっていますが、現在は次のようになっています。 ここに画像の説明を入力

4

3 に答える 3