Question

我正在建立我的第一个网站。它的进展相当顺利，考虑到这是我的尝试，但我在页面右侧有大量的空格，我不知道如何纠正。

以下是一些HTML：

<head>

<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>:Music Hound Dundee:</title>
<meta name="description" content="This is the Music Hound Dundee website by Group 24.">
<meta name="keywords" content="music, gigs, dundee">

<meta http-equiv="cleartype" content="on">

<!-- Responsive and mobile friendly stuff -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/6cols.css" media="all">

<style type="text/css">


}

</style>
<style>
     /* Begin Navigation Bar Styling */
 #nav {
  width: 100%;
  height: 100%;
  display:inline-block;
   text-align: center;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 0px solid #ccc; 
  border-top: 0px solid #ccc; }
#nav li {
  display:inline-block; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
   font-family: sans-serif;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: FFFFFF;
  background-color: #FC359A; }

  #section1 {
width:500px;
display:inline-block;
padding:10px;        
}

  #section2 {
width:500px;
display:inline-block;
padding:0px;         
}
/* End navigation bar styling. */
</style>
<style>
p {
color: white;
font-size: 20px;
font-family; sans-serif;
background-color: rgba(0, 0, 0, 0.7);
}

hr {
margin-top: 4px;
margin-bottom: 1px;
}
</style>
</head>

<body padding:0; margin:0; bgcolor = "#051525", border = "0">

<div id="wrapper">
<div id="headcontainer">
    <header>
    <img src="BlueBanner.PNG" width="100%" height="100%" >
    </header>
</div>
<div id="maincontentcontainer">

    <div class="standardcontainer" id="example">
        </div>
<ul id="nav">
  <li><a href="file:///F:/University/www_Authoring/Group24_website/index.html">Home</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">Gig News</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Venues.html">Venues</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/FAQ.html">FAQ's</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Promotions.html">Band Promotion</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/About.html">About</a></li>
</ul>
    <br></br>
        <div class="image">
            <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html"><img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View"></a>

所有CSS：

/*  GRID OF SIX   ============================================================================= 

*/

.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image2 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 690px; 
   width: 100%;
}

.image3 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 100px; 
   width: 100%;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

h3 { 
   position: absolute;
   top: 174px; 
   left: 746px; 
   width: 100%; 
}

h3 span { 
   color: white; 
   font: bold 15px/35px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h3 span.spacer {
   padding:0 5px;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_6_of_6 {
        width: 100%; 
    }
    .span_5_of_6 {
        width: 100%; 
    }
    .span_4_of_6 {
        width: 100%; 
    }
    .span_3_of_6 {
        width: 100%; 
    }
    .span_2_of_6 {
        width: 100%; 
    }
    .span_1_of_6 {
        width: 100%; 
    }

   p {
       border-style: outset;
       border-width: thick;
       border-color: white;
       padding: 4px;
       text-align: left;
   }
    }

Answer 1

首先，我看到了很多复制粘贴代码的内容，试图获得所有代码：

<style> ... </style>

共同拥有更清洁的代码。

其次我做了一个小提琴：http://jsfiddle.net/6b3mpx53/试图复制你的错误，但我没有看到你告诉我们的空白区域。

请你再给我们一些信息。

另一件事：尝试关闭你的标签，如：

<img ... />

此致

Answer 2

很难用截断的HTML来判断，但看起来你放在<img>标签上的样式应该放在.image类（<div class="image">）上。的 Updated Demo

原件：

<div class="image"> <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html"> <img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View"> </a> </div>

更改：

<div class="image" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;"> <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html"> <img src="the-view.jpg" alt="The View"> </a> </div>

在网站右边的大白色空间

2 个答案: