Question

body
{
background-image:url("images/Wheat.jpg");
}
p 
{
    font-family: "Sans-serif";
    font-size: 20px;
	text-align: justify;
}

/* unvisited link */
a:link {
    color: #000000;
	text-decoration: none;
	font-size:150%;
}

/* visited link */
a:visited {
    color: #000000;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center; 
font-size: 200%;
}

h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;

<!DOCTYPE html> 


	<head>
		<meta charset="utf-8">
		<!-- specify link to external layout file -->
		<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>


</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>

<!--  HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!--  NAVIGATION BAR SECTION  -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6"><a href="Home.html">Home</a></b></td></tr>

<tr>
<!-- LEFT COLUMN (MENU)  -->
<td width="10%" valign="top" bgcolor="#DEB887">
<a href="CSS/Menu.html">Menu</a><br>
<br></br>
<a href="CSS/Delivery.html">Delivery</a><br>
<br></br>
<a href="CSS/Testimonials.html">Testimonials</a><br>
<br></br>
<a href="CSS/Contact.html">Contact information</a><br>

</td>

<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>

<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>

	
	<form action="#" method="post">
		<p>
			<label for="name">Name</label>
			<input name="name" id="name" type="text" required/>
		</p>
		<p>
			<label for="email">E-mail</label>
			<input name="email" id="email" type="email" required/>
		</p>
		<p>
			<label for="Contact">Contact Number</label>
			<input name="website" id="website" type="url"/>
		</p>
		<p>
			<label for="Inquiry">Inquiry</label>
			<textarea name="comment" id="comment" required></textarea>
		</p>
		<p> <input type="submit" value="Post comment"/></p>
	</form>

<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>

<tr><td colspan="2"  height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
 <body>
 <style>
      #map-canvas {
        width: 500px;
        height: 400px;
		background-color: #CCC;
        position: bottom; 
	  }
</style>
</body>
</table>
</body>

嘿，所以在我最终得到了一些东西后，我已经去了一个谷歌地图（尚未完全实现），只是试图获得正确的位置。似乎我无法将谷歌地图移动到我喜欢的页面底部？或者甚至如何让图像移动？它似乎已经超越了顶部的边界，这是非常糟糕的定位，我不得不把它移到底部。任何有关哪里出错的帮助将不胜感激！

Answer 1

使用以下内容：

        <tr><td><div id="map-canvas"></div></td></tr>

在页面的末尾，而不是：

        <div id="map-canvas"></div>

它会将您的地图放在页面底部，它位于顶部，因为您没有为其分配<tr>和<td>

好运编码！ ^^

编辑：http://jsfiddle.net/h261cgc9/这是一个小提琴，可以看到我在行动中所做的改变

但正如我在评论中所提到的，创建一个不使用表格的网站要好得多，只有在你真正想把东西放在一个表格时才使用表格，把整个表格放在桌子上是一个坏主意，请参阅：http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/

在小提琴中，我删除了包含样式的内容，因为不需要它，您可以将样式放在页面顶部的<head>和<body>之间

HTML CSS中的图像放置

1 个答案: