html - 页眉与正文不在一条直线上

Question

我正在尝试建立一个包含 html 网页的网站，但我无法让页眉和正文匹配，我不擅长使用 css，所以我正在努力寻找解决方案。这是我的网站这里.. http://vectortoontown.com/GraphicFiresale/如您所见，两者之间存在很大差异。

这是 html:

    <div class="header"><img src="http://vectortoontown.com/GraphicFiresale/images/header.jpg" width="1210" height="981"  alt=""/></div>
<div class="wrapper">
  <div class="moduleboxmid">
    <div class="pad30 sptext"> <strong>From the desk of: </strong>GRAPHIX MASTER "X"
      <p>Dear Internet Marketer,</p>
      <p><span class="dropcap" style="width: 45px; font-weight: bold; font-size: 50px; padding-right: 5px; line-height: 43px;">W</span>hether  you're new to internet marketing or you're making five figures a month, there's  one thing you can not... and must not... overlook. </p>

这是 CSS:

@charset "utf-8";
/* CSS Document */
body { margin: 0px; background: #000; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; }
img { border:0px; border-color:#FFF }

.countdown { width: 100%; height: 55px; position: fixed; top: 0px; z-index: 555; background-color: rgba(0, 0, 0, 0.8); position: -webkit-sticky; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #363636; ; filter:alpha(opacity=80); /* For IE8 and earlier */ line-height:55px; }
.order_btn{ color:#1D305C; margin-top:10px; background: #fead00; text-transform:capitalize; text-decoration:none; border:1px solid #f7a005; border-radius:5px; padding:4px 12px; -webkit-box-shadow:inset 0px 1px 0px rgba(255, 210, 53, 1), 0px 3px 0px rgba(194, 100, 8, 1); -moz-box-shadow:inset    0px 1px 0px rgba(255, 210, 53, 1), 0px 3px 0px rgba(194, 100, 8, 1); box-shadow:inset         0px 1px 0px rgba(255, 210, 53, 1), 0px 3px 0px rgba(194, 100, 8, 1); /* Old browsers */ background: -moz-linear-gradient(top,  #fead00 0%, #fe9100 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fead00), color-stop(100%,#fe9100)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #fead00 0%,#fe9100 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #fead00 0%,#fe9100 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #fead00 0%,#fe9100 100%); /* IE10+ */ background: linear-gradient(to bottom,  #fead00 0%,#fe9100 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fead00', endColorstr='#fe9100',GradientType=0 ); /* IE6-9 */
font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; line-height:1.5em; font-style: italic; }
.order_btn:hover{background: #fead00; /* Old browsers */
background: -moz-linear-gradient(top,  #fead00 0%, #fe6c00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fead00), color-stop(100%,#fe6c00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fead00 0%,#fe6c00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fead00 0%,#fe6c00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fead00 0%,#fe6c00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fead00 0%,#fe6c00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fead00', endColorstr='#fe6c00',GradientType=0 ); /* IE6-9 */
} 
/*.order_btn:active{-webkit-box-shadow:inset 0px 1px 0px rgba(255, 210, 53, 1), 0px 0px 0px rgba(194, 100, 8, 1);
-moz-box-shadow:inset    0px 1px 0px rgba(255, 210, 53, 1), 0px 0px 0px rgba(194, 100, 8, 1);
box-shadow:inset         0px 1px 0px rgba(255, 210, 53, 1), 0px 0px 0px rgba(194, 100, 8, 1);  margin-top:13px;} */
.toporderbut {
border:1px solid #ffc826;-webkit-box-shadow: #FFF563 0px 1px 0px inset;-moz-box-shadow: #FFF563 0px 1px 0px inset; box-shadow: #FFF563 0px 1px 0px inset; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 7px 14px 7px 14px; text-decoration:none; display:inline-block;text-shadow: 0px 1px 0 rgba(255,255,255,0.44);font-weight:bold; font-size:13px; font-style:italic; color: #1D276E;
 background-color: #FFD65E; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFD65E), to(#FEBF04));
 background-image: -webkit-linear-gradient(top, #FFD65E, #FEBF04);
 background-image: -moz-linear-gradient(top, #FFD65E, #FEBF04);
 background-image: -ms-linear-gradient(top, #FFD65E, #FEBF04);
 background-image: -o-linear-gradient(top, #FFD65E, #FEBF04);
 background-image: linear-gradient(to bottom, #FFD65E, #FEBF04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFD65E, endColorstr=#FEBF04); line-height:1em; margin-top:10px;
}




.wrapper { width: 960px; margin: 250px auto; }
.dropcap { float:left; margin-top:2px; color:#333333; }
.header { height: 981px; width: 1210px; margin-top:0px; background-image: url(images/header.jpg); background-repeat: no-repeat; background-position: left; margin-right: auto; margin-left: auto; clear: both; }
.margin_mid{margin:auto;}
h2{font-size:22px; margin-bottom:15px;}
.mar_bot30{ margin-bottom:30px;}
.mar_top30{ margin-top:30px;}
p{margin:18px 0px; line-height:22px;}
.lf { float: left; }
.rf { float: right; }
.cb { clear: both; }
.pad30 { padding-top: 40px; padding-right: 50px; padding-bottom: 40px; padding-left: 50px; }
.sptext { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; color: #303030; }
.moduleboxtop{ background: url(images/module_box_border_top.jpg) no-repeat left top; height:8px; width: 960px;}
.modulebox {width:960px;  font:38px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-top:30px; height:auto;}
.moduleboxmid { min-height:100px; background: url(images/module_box_border_mid.jpg) repeat-y left top; width: 960px; margin:auto}
.moduleboxbot { background: url(images/module_box_border_bot.jpg) no-repeat left top;height: 40px; width: 960px; }
.moduletitle { height: 78px; width: 944px; background-color: #b51212; margin-left: 8px; float: left; clear: both; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.modulenumber { float: left; width: 190px; color: #FFF; padding-top: 10px; padding-left: 20px; background-color: #000; height: 68px; line-height:56px; }
.modulename { width: 530px; float: left; height: 68px; padding-top: 10px; padding-left: 30px; height: 68px; color: #FFF; background-image: url(images/mod_box_sep.gif); background-repeat: no-repeat;line-height:56px; }
.modulename .rights { font-size: 16px; line-height: 67px; font-weight: normal; font-style: italic; }
.modulevalue { clear: right; float: right; width: 165px; font-size: 22px; color: #FFF; padding-top:28px; }
.moduledetails { background: url(images/moduledetails_top.jpg) no-repeat center -25px; width:880px; clear: both; margin-left: 8px;
margin-right: 8px; float: left; padding-top: 32px; padding-right: 32px; padding-bottom: 5px; padding-left: 32px; min-height:200px;}
.cb { clear:both }
.modulescreens { width:auto; position:relative; }
.moduletext
{ z-index:100; position:absolute; color:white; font:17px "Trebuchet MS", Arial, Helvetica, sans-serif;color: #333; left:555px;
 top:0px; margin-top:65px;/* background:url(images/txt_bg.png) no-repeat center top;*/ width:325px;  min-height:315px; 
 text-align:left; }
.moduletext p{ padding:0px 0px 12px 0px; margin:0px;}
.modulescreens-plain { width:871px; min-height:400px; height:auto;}
.moduletext-plain { font:19px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; text-align:left; }
.modscreen_shot{height:auto; display:block; padding-top:30px;}
.red_title{ font:32px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; text-align:center; color:#b20000; 
padding:30px 0px}
.module_listings{ text-align:left; margin:auto; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 15px; color: #666; list-style-type: none; width: 600px; border: 1px solid #CCC; padding:0px; }
.module_listings li { margin: 0px; padding: 10px; }
.listingtext { float: left; color: #333; width: 450px; margin-left: 10px; }
.alt { background-color: #F0F0F0; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #E1E1E1; border-bottom-color: #E1E1E1; }
.headtop { border-top:none; font-size:22px; background-color: #333!important; color: #FFF!important; }
.numb { color:#b21d1d; font-weight: bold; }

.order_btn{ display:inline-block;}
.faq{ padding:0px 45px 35px 45px;}
.faq ul{ list-style:none; margin:0px; padding:0px;}
.faq ul li{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #ccc;}
.faq ul li h3{font:17px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left; color:#000000; margin-bottom:8px; padding-bottom:0px;}
.faq ul li p{font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left; color:#454545; margin:0px 0px 5px 0px;}
.sap{background:url(images/seprator.png) no-repeat center top; min-height:46px; margin:auto;}
.sofdisclaimer { font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #999; line-height: normal; }
.sofdisclaimer a { font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #999; line-height: normal; font-weight: normal; text-decoration: none; }
.sofdisclaimer a:hover { color: #999; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #999; }
.highlighter{background:url(images/hightlighter.png) no-repeat center top; min-height:36px; 
font:19px/36px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000;}
.highlighter span {color:#b51213}
.handerror { background-image: url(images/hand_error.png); background-repeat: no-repeat; background-position: left 6px; color: #b51213; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 22px; line-height: 36px; text-indent: 35px; }
.impactfnt { font-weight: normal; font-style: normal; font-family: Impact, Georgia, "Times New Roman", Times, serif; color: #C60000; }
.impactfnt span { font-family: Tahoma, Geneva, sans-serif; text-decoration: none; font-size: 30px; }
#timercontainer { margin-top: 10px; float:left; margin-left: 25px; }
.timer { clear: both; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 28px; font-weight: bold; font-style: italic; color: #E8E8E8; line-height: 30px; }
.timer1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; color: #333; }
.timer span { font-size: 16px; color: #939393; font-weight: normal; font-style: normal; }

我很确定这会很简单，但我的大脑重载了..

感谢您花时间查看，如果我做错了(发布)，那么我希望版主可以为我修复它。谢谢 Rhonda

Answer 1

这个

<img src="http://vectortoontown.com/GraphicFiresale/images/header.jpg" width="1210" height="981" alt="">

需要进去

<div class="wrapper"> PUT ME HERE </div>

然后您需要通过给它一个 id 在 CSS 中定位您的图像。

<img id="header-image" src="http://vectortoontown.com/GraphicFiresale/images/header.jpg" width="1210" height="981" alt="">

CSS:

#header-image {
margin: 0 0 0 -127px;
}