将导航放在内容div中
我正在寻求您的帮助以更正此网页。 如果你查看下面发布的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编写器，我试图使代码最小化。 请帮助。
2 个答案:
答案 0 :(得分：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;
}
结果为
答案 1 :(得分：1)
检查以下Js小提琴
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;
}
我希望这是你想要的方式
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？