PDA

View Full Version : Having issues with wide spacing in css/html doc.



mikep11420
Mar 24th, 2010, 03:28 AM
Hello world, I need help for a project im working on for school. Can someone review this document and see why at the end of this document (MY INDEX.HTML)i have a wide space in between the end of the document. here is the code. I would apperciate!

[CODE]
<html>
<!--my stuff -->
<head>
<title>My World</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container-page">
<div id="container-content">
<div id="content-main">
<div id="photo-main" class="photo-main"></div>
<div id="logo" class="logo"></div>
<div id="nav-container" class="nav">
<br />
<br />
<span class="link-nav"><a class="link-nav" href="#">Home</a></span><br /> <br />
<img src="images/nav-line.gif" width="147" height="1" /><br /><br />
<span class="link-nav"><a class="link-nav" href="#">About Me </a></span><br /><br />
<img src="images/nav-line.gif" width="147" height="1" /><br /><br />
<span class="link-nav"><a class="link-nav" href="#">Projects </a></span><br /><br />
<img src="images/nav-line.gif" width="147" height="1" /><br /><br />
<span class="link-nav"><a class="link-nav" href="#">Links</a></span><br /><br />
<img src="images/nav-line.gif" width="147" height="1" /><br /><br />
<span class="link-nav"><a class="link-nav" href="mailto:[email protected]">Email Me </a></span><br /><br />
<img src="images/nav-line.gif" width="147" height="1" />
</div>
<div id="intro">
<center><blockquote>Welcome to my world.</blockquote> Here we have a selections of different countries that i prefer to travel to. In order to make a website in ever different language all over the world. </center>
</div>

<div id="content">
<table border="" cellingspacing="0" cellpadding="4" width="500" align="center">
<caption align="top"><b>THE AMERICAS</b></caption>
<tr>

<th>North America</th>
<th>South America</td>
</tr>
<tr>
<td><center><a href="#">Canada</a></center></td>
<td><center><a href="#">Brazil</a></center></td>
</tr>
<tr>
<td><center><a href="#">U.S.A.</a></center></a></td>
<td><center><a href="#">Argentina</a></center></td>
</table>
<br />
<HR align="center" /><center><h3>Click a state on the map.</h3></center>
<center>
<a href="final.htm"><img src="brazil.GIF" width="548" height="450"
alt="Home Page" title="Click on State to see my latest work." usemap="#brazil"></a>
<map name="brazil">
<area shape="rect" coords="300,364,402,384"
href="#" alt=&ldquo;SantaCatarina&rdquo; title="SantaCatarina"><area shape="rect" coords="242,385,294,427"
href="#.htm" alt=&ldquo;RioSul&rdquo; title="Rio Sul">
<area Shape="rect" Coords="460,166,543,187"
Href="#" alt=&ldquo;Perambuco&rdquo; title="Perambuco"><area Shape="rect" Coords="430,90,483,113"
Href="#" alt=&ldquo;Ceara&rdquo; title="Ceara">
<area Shape="rect" Coords="282,242,335,265"
Href="#" alt=&ldquo;Goias&rdquo; title="Goias"><area Shape="rect" Coords="219,270,273,315"
Href="#" alt=&ldquo;matoGrossoSul&rdquo; title="Mato Grosso do Sul"><area Shape="rect" Coords="326,271,422,293"
Href="#" alt=&ldquo;MinasGerias&rdquo; title="Minas Gerias"><area Shape="rect" Coords="293,302,346,325"
Href="#" alt=&ldquo;SaoPaulo&rdquo; title="SãoPaulo"><area Shape="rect" Coords="476,192,529,215"
Href="members.htm" alt=&ldquo;Sergipe&rdquo; title="Sergipe">
<area shape="rect" coords="491,140,544,163"
href="#" alt=&ldquo;Paraiba&rdquo; title="Paraiba">
<area shape="rect" coords="421,291,522,308"
href="#" alt=&ldquo;EspritoSanto&rdquo; title="EspritoSanto">
<area shape="rect" coords="490,95,546,138"
href="#" alt=&ldquo;RioNorte&rdquo; title="Rio Grande Norte">
<area shape="rect" coords="392,320,494,340"
href="#" alt=&ldquo;RioDeJaneiro&rdquo; title="Rio De Janeiro">
<area shape="rect" coords="485,235,538,266"
href="#" alt=&ldquo;D.F.&rdquo; title="Distrito Federal">
<area shape="rect" coords="384,141,437,164"
href="#" alt=&ldquo;Piaui&rdquo; title="Piaui">
<area shape="rect" coords="335,105,409,126"
href="#" alt=&ldquo;Maranhão&rdquo; title="Maranhão">
<area shape="rect" coords="396,199,449,222"
href="#" alt=&ldquo;Bahia&rdquo; title="Bahia">
<area shape="rect" coords="305,169,368,189"
href="members.htm" alt=&ldquo;members&rdquo; title="View our member options">
<area shape="rect" coords="259,334,312,357"
href="#" alt=&ldquo;Parana&rdquo; title="Parana">
<area shape="rect" coords="284,24,344,46"
href="#" alt=&ldquo;Amapa&rdquo; title="Amapa">
<area shape="rect" coords="160,16,222,32"
href="#" alt=&ldquo;Roraima&rdquo; title="Roraima">
<area shape="rect" coords="2,419,73,447"
href="#" alt=&ldquo;Sul&rdquo; title="Sul">
<area shape="rect" coords="2,385,98,413"
href="#" alt=&ldquo;Sudeste&rdquo; title="Sudeste">
<area shape="rect" coords="429,90,482,113"
href="members.htm" alt=&ldquo;members&rdquo; title="View our member options">
<area shape="rect" coords="94,179,166,197"
href="#" alt=&ldquo;Ronodina&rdquo; title="Ronidina">
<area shape="rect" coords="2,289,80,313"
href="#" alt=&ldquo;Norte&rdquo; title="Norte">
<area shape="rect" coords="4,321,101,349"
href="#" alt=&ldquo;Nordeste&rdquo; title="Nordeste">
<area shape="rect" coords="5,353,130,378"
href="#" alt=&ldquo;Centro-Deste&rdquo; title="Centro-Deste">
<area shape="rect" coords="254,95,296,119"
href="#" alt=&ldquo;Para&rdquo; title="Para">
<area shape="rect" coords="199,206,298,228"
href="#" alt=“MatoGrosso” title="MatoGrosso">
<area shape="rect" coords="85,103,170,117"
href="#" alt=“Amazonas” title="Amazonas">
</map></center> <HR align="center" /><br />
</div>
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/BTcLSz1aJr0&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BTcLSz1aJr0&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
<center> <address>P.O. BOX 111 SOUTH STREET FLORIDA 11420 </address></center>
</body>
</html>
[CODE]
***********THIS IS THE CSS CODE************
/*-------------------
Style Template
-------------------*/


/*-------------------
HTML Styles
-------------------*/

body {text-align: center; margin: 0px; background-color:#00FF00;}

p {font-family:Arial, Helvetica, sans-serif;font-size: 1em; line-height: 1.3em;}

/*-------------------
Structural Styles
-------------------*/


#content-container {position:relative; top:-17em; width:100%;}
#content {
position:relative;
left:20em;
top:-33em;
width:38em;
}

#intro {
position:relative;
left:20em;
top: -34em;
width:38em;
height:8.8em;
white-space:normal;
}
#logo {
position:relative;
left:20em;
top:-19em;
width:40em;
height:11em;
}
.logo {background-image:url(4.jpg);background-repeat:no-repeat;}

#photo-main {position:relative; left:1em; top:1em; width:16em; height:20em;}

.photo-main {
background-image:url(new2.jpg);
background-repeat:no-repeat;
}

/*-------------------
Side Navigation Styles
-------------------*/

#nav-container {
position:relative;
left:1.3em;
top:-12em;
width:20em;
height:19em;
}

.nav {font-family:Arial, Helvetica, sans-serif;font-size: .8em; line-height: 1em;}

.link-nav a {color: #000; text-decoration: none;}

.link-nav a:visited {color: #000; text-decoration: none;}

.link-nav a:hover {color: #F60; text-decoration: underline;}

Excavator
Mar 24th, 2010, 04:28 AM
Hello mikep11420,
I'm not sure how detailed to answer since this is homework but don't they teach you about floats (http://css.maxdesign.com.au/floatutorial/)?

What happens when you get rid of all those negative margins?
What happens when you position your object with the same kind of negative margins you build the rest of your site with?

When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.