0
내 .css 파일에서 오류가 발견되지 않아 내 JavaScript가 페이지 중앙에 표시되므로 (왼쪽 끝에 표시됨) 사진 아래에 주소와 연락처가 있어야합니다. 나는 javascript 과정을 수강 중이므로이 시점에서만 다른 프로그램이 아닌 그것을 사용할 수 있습니다.CSS 및 JavaScript 디스플레이
.css 또는 .js의 오류입니까?
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/armchair.css" rel="stylesheet">
</head>
<body>
<!-- wrapper section starts -->
<div id="wrapper">
<!-- header section starts -->
<div id="header">
<img src="images/header.jpg" alt="Armchair Logo" width="975" height="230" class="floatcenter">
</div>
<!-- header section ends -->
<!-- menu section starts -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="newrelease.html">New Releases</a></li>
<li><a href="placeholder.html" >Special Selection</a></li>
<li><a href="contact.html" id="current" class="first">Contact</a></li>
<li><a href="placeholder.html">On Sale</a></li>
</ul>
</div>
<!-- menu section ends -->
<!-- text section starts -->
<div id="content"></div>
<img src="images/viewcart.jpg" alt="" width="130" height="59" class="floatright" />
<br><br>
<img src="images/store.jpg" alt="Armchair Store" width="520" height="347" class="floatcenterb">
<br><br>
<div id="contact_details"></div>
<script type="text/javascript" src="js/contact.js"></script>
<br/>
</div>
<!-- footer section starts -->
<div id="footer">
<p class="bottom">Copyright © 2012 JC Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p>
</div>
<!-- foot section ends -->
<!-- wrapper section starts -->
</body>
</html>
내 .css 파일 :
/*--------------Body-----------------*/
html {background-color: #e2e2e2}
body {
color: #000; background: #fff;
font-family: "Helvetica Neue",helvetica,arial, sans-serif;
font-size: 90%;
text-align: left;
width: 975px;
margin-left: auto;
margin-right: auto;
}
p {
margin-left: 25px;
margin-right: 5px;
text-align: left;
font-size: 110%;
}
/*--------------Links formatting------------------*/
a:link {
background: #fff; color: #7d890d;
}
a:visited {
color: #034769;
}
a:hover {
color: #034769;
text-decoration: none;
}
a:active{
background: #63add0; color: #fff;
}
/*Bottom link formatting*/
p.bottom a:link {
background: #2d1d06; color: #f9b41f;
}
p.bottom a:visited {
color: #fff;
}
p.bottom a:hover {
color: #7d890d;
text-decoration: none;
}
p.bottom a:active{
background: #8742d6; color: #fff;
}
/*--------------------Page wrapper----------------*/
#wrapper {
margin: 0 auto;
width: 975px;
text-align: left;
}
/*Banner styles*/
#header {
width: 975px;
padding-left: 0px;
padding-bottom: 10px;
padding-top: 0px;
}
#footer {
clear: both;
background: #2d1d06; color: #fff;
font-family: "Helvetica Neue",helvetica, arial, sans-serif;
font-size: 90%;
font-weight: normal;
width: 975px;
padding-bottom: 3px;
padding-top: 3px;
}
#footer p {
text-align: center;
}
#content
{
margin-left: 15px;
}
/*---------------Navigation styles-------------------*/
#menu {
float: left;
margin:0;
padding-top: 0px;
width: 100%;
background: #7d890d; color: #fff;
}
#menu ul {
margin: 0px;
position: relative
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
padding: 5px 16px;
margin-right: 0px;
background: #7d890d; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
#menu ul li a:hover {
color: #fff; background: #f9b41f;
text-decoration: underline;
}
#menu li a#current {
background: #ba1212; color: #fff;
}
/*-------------Image area--------------*/
img
{
border: 0px 0px ;
padding-top: 30px;
padding-bottom: 25px;
border-radius: 0px;
}
.floatcenter {
float: left;
margin: 0px;
padding: 0px;
border: none;
}
.floatcenterb {
margin: 0px 228px;
padding: 1px;
border: none;
}
.floatright
{
display: block;
float: right;
margin: 20px;
padding: 1px;
border: none;
}
.floatright2
{
float: right;
margin: 20px;
padding: 1px;
border: none;
}
/*---------------Headings----------------*/
hr{
position: relative;
width: 90%;
margin-left: 25px;
margin-right: 25px;
color: #3ca0d0;
border: 1px;
border-style: dotted;
}
h1{
color: #2d1d06;
font-size: 140%;
font-weight: normal;
margin-left: 25px;
}
h2{
color: #2d1d06;
font-weight: normal;
font-size: 130% ;
text-align: center;
text-decoration: underline;
margin-left: 0px;
}
h3{
font-size: 120%;
color: #2d1d06;
font-weight: bold;
text-align: left;
}
h4{
font-size: 120%;
color: #2d1d06;
font-weight: normal;
text-align: center;
}
h5{
font-size: 110%;
color: #7d890d;
width: 70px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: bold;
text-align: left;
}
/* Table styling */
table {
border: 1px;
border-collapse:collapse;
width: 90%;
margin-left: 25px;
margin-right: 25px;
font-size: 90%;
}
th {
background-color: #000;
color: #FFF;
}
td {
padding: 2px 4px;
padding-top: 25px;
text-align: left;
border-bottom: 0px;
}
/*contact page*/
fieldset
{
margin: 10px 25px;
padding: 5px 10px;
border: 1px solid #3697B5;
background:#fff;
text-align: center;
}
legend
{
font-size: 80%;
color: #000; background: #fff;
font-weight:bold;
margin-left: 25px;
}
label
{
float: left; /* labels and input fields line up horizontally */
width: 200px;
margin-left: 25px;
text-align: center;
}
textarea
{
margin-left: 25px;
}
내 .js 파일 :
//contact.js - this will dipaly all contact detials on the home page and contact us page//
var Addre = new Array("7945", "Town Plaza", "Vancouver", "E5T 4J9","Canada");
var phoneNo = new Array("1-604-568-4938", "Toll free: 1-888-987-4738");
var eMail = new Array("[email protected]");
// get the HTML div element
var elem = document.getElementById("contact_details");
// display Address
elem.innerHTML ="Address: <br />";
for (var i = 0; i < Addre.length; i++)
{
if (i > 0)
elem.innerHTML += ", ";
elem.innerHTML += Addre[i];
}
// display Phone no
elem.innerHTML += "<br /><br />Contact No:<br /> ";
for (var i = 0; i < phoneNo.length; i++)
{
if (i > 0)
elem.innerHTML += " or ";
elem.innerHTML += phoneNo[i];
}
// display Email
elem.innerHTML += "<br /><br />Email:<br /> ";
for (var i = 0; i < eMail.length; i++)
{
if (i > 0)
elem.innerHTML += ", ";
elem.innerHTML += eMail[i];
}
왜 Javascript없이 프로토 타입을 만들지 않습니까? –
[JsFiddle] (http://JsFiddle.net) – Lior
페이지의 중앙에 무엇을 표시하고 싶습니까? 그렇습니다. @ user1718294에서 말한 것처럼 Fiddle! –