由于某种原因,我的图像没有排列链接

时间:2014-02-07 15:47:53

标签: html css position

我可能会错过一些编码,但这就是我的意思:

Messed up one

Perfectly fine one

基本上,在混乱的网页上,我的链接不像其他页面那样对齐。我对 MESSED UP ONE 的编码是:

<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
  <p><a href="index.html" id="firstlink"><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" /></a>
  <a href="whatis.html" id="rollover"><img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" /></a>
  <a href="why.html" id="rollover"><img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" /></a>
  <a href="resources.html" id="rollover"><img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" /></a>
  </p>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>

<div id="footer"><p><form action="" method="post" id="form-radio">
  <p>
    <label>
      <input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_0" />
      Yes</label>
    <br />
    <label>
      <input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_1" />
      No</label>
    <br />
  </p>
</form></p><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>

PERFECTLY FINE 页面的编码是:

<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
  <p><a href="index.html" id="firstlink"><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" /></a>
  <a href="whatis.html" id="rollover"><img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" /></a>
  <a href="why.html" id="rollover"><img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" /></a>
  <a href="resources.html" id="rollover"><img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" /></a>
  </p>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>

<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>


最后, BOTH 页面的 CSS STYLE SHEET 是:

@charset "utf-8";
/* CSS Document */

.header
{
    height: 150px;
    width: 100%;
    margin-left: 25px;
    margin-right: 50px;
    position:relative;
    left:0px;
    top:0px;
}

html
{
    width: 1000px;
    height: 650px;
    background-color:#D7D7FF;
    margin:0px;
    padding:0px;
}


    #rollover
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
}

#firstlink
{
    display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}

a img
{
    border:none;
}

#image
{
    height:230px; 
    width:300px; 
    float:left; 
    border: 3px solid #B5B5B5; 
    margin-left:150px; 
    margin-top:10px;
    border-radius:25px;
    box-shadow:10px 10px 6px #A3A3A3;

}


#main
{
    height:250px; 
    width:450px; 
    border:3px solid #B5B5B5; 
    margin-left:500px; 
    margin-top:15px;
    border-radius:25px;
    box-shadow:10px 10px 6px #A3A3A3;
    padding-left:10px;
    padding-top: 6px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:400;
    background-color:#FFF;
}

#footer
{
    height:100px;
    bottom:0px;
    text-align:center;
    width:100%;
    padding-top:100px;
    padding-left:25px;
}

#pfoot
{
    margin-left:50px;
}

#form-radio
{
    float:left;
}


任何帮助都会很多赞赏,谢谢

0 个答案:

没有答案