2015-09-29 67 views
0

我正在使用Dreamweaver为类创建任务。我保存了我的CSS文件,回到我的主页,我的页面的主要内容被拉下来了,但是我的页脚留下了“内容”div空白,无法使用。可能是一个基本问题,但我不确定我的错误在哪里。为什么我的内容在页面上向下移动?

@charset "utf-8"; 
 
body { 
 
\t background-color: #D3D3D3; 
 
\t margin: 0px; 
 
\t padding: 0px; \t 
 
} 
 

 
a { 
 
\t \t text-decoration: none; 
 
} 
 

 
a:link { 
 
\t \t color:#39c; 
 
\t \t outline: none; 
 
} 
 
a:visited { 
 
\t \t color:#39c; 
 
\t \t outline: none; 
 
} 
 
a:hover { 
 
\t \t color: #000080; 
 
\t \t outline: none; 
 
} 
 
a:active { 
 
\t \t outline: none; 
 
\t \t -moz-user-focus: none; 
 
} 
 

 
h1 { 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t \t font-size:28px; 
 
\t \t font-weight:700; 
 
\t \t color: #333; 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; \t \t 
 
} 
 

 
p { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t text-align: left; 
 
} 
 

 
ul { 
 
\t list-style-type: none; \t 
 
} 
 

 
.wrapper { 
 
\t width: 1020px; 
 
\t min-height: 800px; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t background-image: url(images/bg_wrapper.jpg); 
 
\t background-repeat: repeat-x; 
 
\t background-color: #fbf3f3; 
 
} 
 

 
#header { 
 
\t width: 1020px; 
 
\t height: 241px; 
 
\t background-image:url(images/logo.png); 
 
\t background-repeat:no-repeat; 
 
\t align: center; 
 
} 
 

 
#nav { 
 
\t font-family: "Arial Black", Gadget, sans-serif; 
 
\t width: 1020px; 
 
\t height: 75px; 
 
\t background-color: #B8110B; 
 
\t display: inline-block; 
 
\t text-align: center; 
 
\t margin: auto; 
 
} 
 
#nav li { 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
} 
 
#nav ul { 
 
\t padding: 10px; 
 
} 
 
#nav ul li a { 
 
\t font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; 
 
\t color: #F4E9E9; 
 
\t text-decoration: none; 
 
\t background-color: #B8110B; 
 
\t padding-top: 3px; 
 
\t padding-right: 5px; 
 
\t padding-bottom: 3px; 
 
\t padding-left: 5px; 
 
\t display: inline-block; 
 
\t font-weight: bold; 
 
} 
 

 
#nav ul li a:hover { 
 
\t display: block; 
 
\t height: 30px; 
 
\t background-color: #c6403b; 
 
\t border: medium solid #87031B; 
 
} 
 

 

 
#container { 
 
\t width: 1020px; 
 
\t height: 800px; 
 
\t align: center; 
 
} 
 

 
#footer { 
 
\t width: 1020px; 
 
\t min-height: 100px; 
 
\t background-color: #0b3162; 
 
} 
 

 
#sidebar { 
 
\t float: left; 
 
\t margin-right: 10px; 
 
\t margin-top: 20px; 
 
\t width: 250px; 
 
\t height: 405px; 
 
\t \t 
 
} 
 
#sidebar1 { 
 
\t float: right; 
 
\t margin-right: 10px; 
 
\t margin-top: 20px; 
 
\t width: 250px; 
 
\t height: 405px; 
 
\t \t 
 
} 
 
#middle { 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
} 
 

 
#content { 
 
\t margin-left: 10px; 
 
\t background-color: white; 
 
\t width: 1020px; 
 
\t height: 800px; 
 
\t align: center; 
 
} 
 

 
.sidebartextleft { 
 
\t font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t font-size: 20px; 
 
\t font-weight: 700; 
 
\t color: ##000000; 
 
\t line-height: 2em; 
 
} 
 

 
.navtext { 
 
\t text-align: center; 
 
\t font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t text-align: center; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 50px; 
 
\t font-size: 15px; 
 
\t font-weight: 700; 
 
\t color: #600; 
 
\t line-height: 1em; 
 
} 
 
.txtmain { 
 
\t \t text-align: justify; 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t \t font-size: 14px; 
 
\t \t color: #333; 
 
\t \t line-height: 1.5em; 
 
\t \t padding-right: 30px; 
 
\t \t padding-top: 20px; 
 
} 
 

 
.txtsub { 
 
\t \t text-align: center; 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t \t font-size: 10px; 
 
\t \t color: #CCC; 
 
\t \t padding-top: 10px; 
 
} 
 

 
.clear { 
 
\t \t clear: both; \t 
 
} 
 
.wrapper #header .imgleft { 
 
\t text-align: right; 
 

 
} 
 
.h1header { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 24px; 
 
\t font-style: normal; 
 
\t font-weight: bold; 
 
\t color: #03C; 
 
\t margin-top: 5px; 
 
\t text-align: center; 
 
} 
 
.h1sidebar { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 18px; 
 
\t font-style: normal; 
 
\t font-weight: bold; 
 
\t color: #af1216; 
 
\t margin-top: 5px; 
 
\t margin-left: 5px; 
 
\t text-align: left; 
 
} 
 
.h1sidebarleft { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 18px; 
 
\t font-style: normal; 
 
\t font-weight: bold; 
 
\t color: #a9a9a9; 
 
\t margin-top: 5px; 
 
\t margin-left: 15px; 
 
\t text-align: left; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>TAKE IN LONDON</title> 
 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 

 
<div class="wrapper"> 
 
    <div id="header"> 
 
    <p><img name="Londonlogo" src="images/Londonlogo.jpg" width="1020" height="241" alt="TAKE IN LONDON logo"></p> 
 
    </div> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="activites.html">Things To Do </a></li> 
 
     <li><a href="contactus.html">Contact Us</a></li> 
 
    </ul></div> 
 
    <div id="container"> 
 
     <div id="content"> 
 
     <p class="txtmain"><img name="LondonNight" src="images/LondonSkyline.jpg" width="995" height="300" alt="London Skyline At Night"></p> 
 
     <div class="h1header"> Welcome to TAKE IN LONDON Travel Agency</div> 
 
     .  </div> 
 
      <div id="sidebar"> 
 
     \t <ul> 
 
      \t <li class="navlinks"><a href="index.html">HOME</a></li> 
 
       <li class="navlinks"><a href="location.html">LOCATION</a></li> 
 
       <li class="navlinks"><a href="contact.html">CONTACT</a></li> 
 
      </ul> 
 
      <div id="middle"></div> 
 
    
 
    <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
     <p>&nbsp;</p> 
 
    <p class="txtmain">Founded in </p> 
 
    </div> 
 
     </div> 
 
     </div> 
 
      
 
      <div id="footer"> 
 
<p class="txtsub"> Copyright &copy; 2015, TAKE IN LONDON Travel | All rights reserved.</p> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

请帮我

+0

请在您的问题中发布您的代码。 – j08691

+0

创建你的演示[here](http://www.jsfiddle.net)。 – divy3993

+0

据我在这里可以看到:http://jsfiddle.net/9ste8yog/,它是你的页眉图像,推下页面。 –

回答

0

请请不要使用Dreamweaver。它将div元素放置在它们不应该放置的位置,并影响网页的布局。

您需要重构代码的布局来解决问题。

几个指针:

1)您是否知道文本“它创办”是写在你的侧边栏的内容,而不是你的主要内容股利。

2)你到你的#container DIV(1020px)给一个固定的宽度,然后在其中创建两个新的div元素,#content#sidebar。这很好,只不过你给内部#content div的宽度为1020px。这意味着#sidebar div将始终放在#content之下,而不是旁边。

若要更正此问题,请减小#content宽度,使其宽度加上#sidebar(加上任何CSS边距)的宽度小于1020像素。

但是,我已经创建了一个纠正了这些问题的示例,但您会发现仍然存在与div结构有关的潜在问题。我已经给了#content div的粉红色背景和#sidebar绿色的背景,所以你可以看到他们的布局简单:

http://jsfiddle.net/kvsL0wwg/

如果你使用Dreamweaver,使用代码视图并手动重新排列结构纠正布局。

我的建议是保持它的简单,所有的HTML是是一堆嵌套元素(headbodydivp等)的。刚开始编写一个真正基本的HTML页面并添加到它/缓慢的样式。

相关问题