1

我正在寻求您的帮助以更正此网页。如果您查看下面发布的 html 和 css，您会发现以下意外行为：1) galnavigation 位于内容之上。我真正想要的是：（如果我认为该框是我的网页）

|-----------------------------------------|
|<h2>My Gallery</h2>                      |
|Here is some collection of.....          |
|<gal_navigation>                         |
|                                         |
|href Garchumuk    href Falta             |
|  img src           img src              |
|    of                 of                |
|  Garchumuk           Falta              |
|           and so on                     |
|-----------------------------------------|

2) 同样，如图所示，href 应该出现在 img 的顶部，而不是旁边。

如果这可以独立于浏览器的方式完成，那将是最好的。（目前，href出现在firefox中img的顶部，但在gnome的顿悟中没有出现）

据我所知的代码：html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
<html>
  <head>
    <title>MySite</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style type="text/css" media="all">


    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div id="container">
      <div id="header">
    <h1>
      My Site
    </h1>
      </div>
      <div id="navigation">
    <ul>
      <li>
      <a href="aboutme.html">About Me</a>
      </li>
    </ul>
      </div>
      <div id="gal_content">
    <!--<p>-->
    <!--<img src="images/gallery.jpg" alt="MyPic">-->
    <!--</p>-->
    <h2>
      My Gallery 
    </h2>
    Here is some collection of pictures I have taken during several trips. These galleries are hosted in Picasa and Flickr web album.
    <div id="galnavigation">
      <table style="width:94px;margin:0.5em 0 0em 0;" border="0px">
        <tbody>
          <tr>
        <td valign="top" align="center">
          <a href="https://picasaweb.google.com/bnrj.rudra/Garchumuk?feat=embedwebsite" target="_blank"> <font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Garchumuk</i></font><img src="https://lh4.googleusercontent.com/-7eOvmJb2ASM/R4D-sw0h7YE/AAAAAAAABqw/mR4XSrT2VNM/s160-c/Garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"></a>
        </td>
        <td valign="top" align="center">
          <a href="https://picasaweb.google.com/bnrj.rudra/FaltaTrip?feat=embedwebsite" target="_blank"><font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Falta</i></font><img src="https://lh5.googleusercontent.com/-3zQd1oQRUA0/TRgv6Z4AJ8E/AAAAAAAAD-s/Uq2lqhTw_Zo/s160-c/FaltaTrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"></a>
        </td>
          </tr>
          <tr>
        <td align="center" valign="top">
          <a href="https://picasaweb.google.com/106471678921553351367/TakiTrip?authuser=0&feat=embedwebsite" target="_blank"><font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Taki Trip</i></font><img src="https://lh3.googleusercontent.com/-EKTODai7XAs/SXtHhvE6v9E/AAAAAAAAEz8/PCCXLZKBLM4/s160-c/TakiTrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"></a>
        </td>
          </tr>
        </tbody>
      </table>
    </div>
      </div>
      <div id="footermainPan">
      </div>
    </div> 
  </body>
</html>

CSS：

body {
    font : 100% "Times New Roman", Times, serif;
    color : #0a8bf8;
    background : #184470;
    margin : 0;
      }
h1 {
    position : absolute;
    height : 0;
    overflow : hidden;
      }
.accessaid2, h1 {
    position : absolute;
    height : 0;
    overflow : hidden;
      }
.accessaid, h1 {
    position : absolute;
    height : 0;
    overflow : hidden;
      }
#header {
    background : #184470 url(images/banner2.png) no-repeat;
    height : 60px;
    margin : 0 auto;
    border-left : 214px solid #184470;
      }
#navigation {
    position : absolute;
    top : 60px;
    left : 1%;
    width : 15%;
    color : #e4ecef;
    font-size : 110%;
      }
#navigation ul {
    margin : 0 0 2em 0;
    padding : 0;
    list-style : none;
    color : #e4ecef;
      }
#navigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 2em 1px 1em;
    color : #e4ecef;
    box-shadow :0 10px 10px #000;
      }
#navigation a:visited {
    color : #e4ecef;
      }
#navigation a:hover {
    background : #5096f0;
      }
#content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        border-radius: 15px 15px 15px 15px;
        --moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
        border : 0px;
        background : #e0e9f8;
      }
#gal_content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        border-radius: 15px 15px 15px 15px;
        --moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
        border : 0px;
        /*background : #e0e9f8;*/
      }
#galnavigation {
    position : absolute;
    top : 0px;
    left : 23%;
    width : 17%;
    color : #000;
    font-size : 100%;
      }
#galnavigation a:hover {
    background : #5096f0;
      }
#galnavigation ul {
    margin : 100% 0 1em 0;
    padding : 0;
    list-style : none;
    color : #000;
      }
#galnavigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 1em 1px 1em;
    color : #e4ecef;
    box-shadow : 0 10px 10px #000;
      }

h2 {
        font-size : 200%;
        color : #184470;
      }
h3 {
        font-size : 125%;
        color : #184470;
      }
#container {
/*position : relative;
width : 100%;
border : solid #036;
border-width : 0 0px;
margin : auto;*/
}
#content img {
        height : 200px;
        padding : 0;
        border : 0 solid #333;
        float : right;
        margin : .5em 0em 2em 2em;
      }
#content img.icon {
    height : 120px;
        width :120px;
    padding : 0;
    border : 0 solid #333;
    float : right;
      }
#content img.poems {
    height : 1200px;
    padding : 0;
    border : 0 solid #333;
    float : right;
      }
#footermainPan {
    height : 10%;
    color : #2f5958;
    margin : 0 auto;
    clear : both;
    padding : 6px 0 0;
      }
#playlist tbody tr.even td {
      background-color : #00cc66;
}
#playlist tbody tr.odd  td {
      background-color: #000;
    }
#footerPan {
    width : 100%;
    position : relative;
    margin : 0 auto;
      }
#footerPan ul {
    width :50%;
    height : 0px;
    position : relative;
    margin : 0 auto;
    color : #e0f6f0; 
    text-shadow : 2px 2px 7px #111;  
    text-align : left;
    border : none; 
    font-size : 1.5em; 
    font-weight : bold;
    list-style-type: none;
      }
#footerPan li {
    float: left;
}
#footerPan ul li a {
    padding : 0 10px 0;
    color : #fff;
    background : #184470;
    text-decoration : none;
    font-size : 13px;
}
#footerPan ul li a:hover {
        text-decoration : underline;
}
#footerPan p.copyright {
    width : 250px;
    margin : 10px 0 0 2px;
    position : relative;
    left : 40%;
    color : #fff;
}

我不是一个普通的 html/css 编写者，我试图使代码最小化。请帮助。

4

2 回答 2

2

我必须从零开始构建它，因为不仅有许多 css 样式，而且 html 本身也有样式。这就是我所做的。

首先，替换有关您的画廊的表格信息。我建议使用列表类型。

<h2>
  My Gallery 
</h2>
<p id="gallery_expl">Here is some collection of pictures I have taken during several trips. These galleries are hosted in Picasa and Flickr web album.</p>
<div id="galnavigation">
  <ul>
    <li><a href="https://picasaweb.google.com/bnrj.rudra/Garchumuk?feat=embedwebsite" target="_blank"> <font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  margin-left: 25px; border:none;"><i>Garchumuk</i></font><br /><img src="https://lh4.googleusercontent.com/-7eOvmJb2ASM/R4D-sw0h7YE/AAAAAAAABqw/mR4XSrT2VNM/s160-c/Garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"></a>
    </li>
    <li>
      <a href="https://picasaweb.google.com/bnrj.rudra/FaltaTrip?feat=embedwebsite" target="_blank"><font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Falta</i></font><br /><img src="https://lh5.googleusercontent.com/-3zQd1oQRUA0/TRgv6Z4AJ8E/AAAAAAAAD-s/Uq2lqhTw_Zo/s160-c/FaltaTrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"></a>
    </li>
    <li>
      <a href="https://picasaweb.google.com/106471678921553351367/TakiTrip?authuser=0&feat=embedwebsite" target="_blank"><font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Taki Trip</i></font><br /><img src="https://lh3.googleusercontent.com/-EKTODai7XAs/SXtHhvE6v9E/AAAAAAAAEz8/PCCXLZKBLM4/s160-c/TakiTrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"></a>
    </li>
  </ul>
</div>
<div class="clearfix"></div>

然后用css

body {
    font : 100% "Times New Roman", Times, serif;
    color : #0a8bf8;
    background : #184470;
    margin: 0 auto;
    width: 900px;
}
div#header h1 {
text-align: center;
}
/* remove bullets and indent of list */
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
/* ensure that multiple h1 navigations are left of each other */
div#container li a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 2em 1px 1em;
    color : #e4ecef;
    box-shadow :0 10px 10px #000;
}

#gal_content {
    background : #e4ecef;
    /*padding : 0.0em 2.5em; */
    border-radius: 15px 15px 15px 15px;
    --moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    width : 98%;
    /*float : right;
    /*margin-right : 17%;
    /*margin-left : 30%;*/
    border : 0px;
    /*background : #e0e9f8;*/
    padding-bottom: 3em;
}

div#gal_content h2 {
    padding-top: 0.5em;
    text-align: center;
}

p#gallery_expl {
text-align: center;
}
div#galnavigation {
  clear: both;
  width: 50em;
 margin-left: 2.5em;
}
div#galnavigation li {
float:left;
    width: 15em;
}
div#galnavigation li * {
    text-align: center;
}

.clearfix {
    clear: both;
}
div#galnavigation li a {
    padding: 0.5em;
}

结果如下此处显示

PS：哦上传花了很长时间才注意到上面的回复（我也没有收到通知......哦，好吧......）

于 2013-07-22T09:57:24.430 回答
1

检查以下 Js fiddle

http://jsfiddle.net/arunberti/D5sjR/

html

  <body>
    <div id="container">
      <div id="header">
    <h1>
      My Site
    </h1>
      </div>
      <div id="navigation">
    <ul>
      <li>
      <a href="aboutme.html">About Me</a>
      </li>
    </ul>
      </div>
      <div id="gal_content">
    <!--<p>-->
    <!--<img src="images/gallery.jpg" alt="MyPic">-->
    <!--</p>-->
    <h2>
      My Gallery 
    </h2>
    Here is some collection of pictures I have taken during several trips. These galleries are hosted in Picasa and Flickr web album.
    <div id="galnavigation">
      <table style="width:94px;margin:0.5em 0 0em 0;" border="0px">
        <tbody>
          <tr>
        <td valign="top" align="center">
          <a href="https://picasaweb.google.com/bnrj.rudra/Garchumuk?feat=embedwebsite" target="_blank"> <font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Garchumuk</i></font>
<br>
<img src="https://lh4.googleusercontent.com/-7eOvmJb2ASM/R4D-sw0h7YE/AAAAAAAABqw/mR4XSrT2VNM/s160-c/Garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"></a>

        </td>
        <td valign="top" align="center">
          <a href="https://picasaweb.google.com/bnrj.rudra/FaltaTrip?feat=embedwebsite" target="_blank"><font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Falta</i></font>
<br>
<img src="https://lh5.googleusercontent.com/-3zQd1oQRUA0/TRgv6Z4AJ8E/AAAAAAAAD-s/Uq2lqhTw_Zo/s160-c/FaltaTrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"></a>
        </td>
          </tr>
          <tr>
        <td align="center" valign="top">
          <a href="https://picasaweb.google.com/106471678921553351367/TakiTrip?authuser=0&feat=embedwebsite" target="_blank"><font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"><i>Taki Trip</i></font>
<br>
<img src="https://lh3.googleusercontent.com/-EKTODai7XAs/SXtHhvE6v9E/AAAAAAAAEz8/PCCXLZKBLM4/s160-c/TakiTrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"></a>
        </td>
          </tr>
        </tbody>
      </table>
    </div>
      </div>
      <div id="footermainPan">
      </div>
    </div>

CSS：

body {
    font : 100% "Times New Roman", Times, serif;
    color : #0a8bf8;
    background : #184470;
    margin : 0;
      }
h1 {

    height : 0;
    overflow : hidden;
      }
.accessaid2, h1 {

    height : 0;
    overflow : hidden;
      }
.accessaid, h1 {

    height : 0;
    overflow : hidden;
      }
#header {
    background : #184470 url(images/banner2.png) no-repeat;
    height : 60px;
    margin : 0 auto;
    border-left : 214px solid #184470;
      }
#navigation {

    top : 60px;
    left : 1%;
    width : 15%;
    color : #e4ecef;
    font-size : 110%;
      }
#navigation ul {
    margin : 0 0 2em 0;
    padding : 0;
    list-style : none;
    color : #e4ecef;
      }
#navigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 2em 1px 1em;
    color : #e4ecef;
    box-shadow :0 10px 10px #000;
      }
#navigation a:visited {
    color : #e4ecef;
      }
#navigation a:hover {
    background : #5096f0;
      }
#content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        border-radius: 15px 15px 15px 15px;
        --moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
        border : 0px;
        background : #e0e9f8;
      }
#gal_content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        border-radius: 15px 15px 15px 15px;
        --moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
        border : 0px;
        /*background : #e0e9f8;*/
      }
#galnavigation {

    top : 0px;
    left : 23%;
    width : 17%;
    color : #000;
    font-size : 100%;
      }
#galnavigation a:hover {
    background : #5096f0;
      }
#galnavigation ul {
    margin : 100% 0 1em 0;
    padding : 0;
    list-style : none;
    color : #000;
      }
#galnavigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 1em 1px 1em;
    color : #e4ecef;
    box-shadow : 0 10px 10px #000;
      }

h2 {
        font-size : 200%;
        color : #184470;
      }
h3 {
        font-size : 125%;
        color : #184470;
      }
#container {
/*position : relative;
width : 100%;
border : solid #036;
border-width : 0 0px;
margin : auto;*/
}
#content img {
        height : 200px;
        padding : 0;
        border : 0 solid #333;
        float : right;
        margin : .5em 0em 2em 2em;
      }
#content img.icon {
    height : 120px;
        width :120px;
    padding : 0;
    border : 0 solid #333;
    float : right;
      }
#content img.poems {
    height : 1200px;
    padding : 0;
    border : 0 solid #333;
    float : right;
      }
#footermainPan {
    height : 10%;
    color : #2f5958;
    margin : 0 auto;
    clear : both;
    padding : 6px 0 0;
      }
#playlist tbody tr.even td {
      background-color : #00cc66;
}
#playlist tbody tr.odd  td {
      background-color: #000;
    }
#footerPan {
    width : 100%;
    position : relative;
    margin : 0 auto;
      }
#footerPan ul {
    width :50%;
    height : 0px;
    position : relative;
    margin : 0 auto;
    color : #e0f6f0; 
    text-shadow : 2px 2px 7px #111;  
    text-align : left;
    border : none; 
    font-size : 1.5em; 
    font-weight : bold;
    list-style-type: none;
      }
#footerPan li {
    float: left;
}
#footerPan ul li a {
    padding : 0 10px 0;
    color : #fff;
    background : #184470;
    text-decoration : none;
    font-size : 13px;
}
#footerPan ul li a:hover {
        text-decoration : underline;
}
#footerPan p.copyright {
    width : 250px;
    margin : 10px 0 0 2px;
    position : relative;
    left : 40%;
    color : #fff;
}

我希望这是你想要的方式

于 2013-07-22T09:13:25.083 回答