Positioning my page

liunx

Guest
I am having trouble getting everything aligned correctly on my page. The way I want it to show up is the large image left, followed by the thumbs just to the right of that large image. And finally the lists in two columns with the discs aligned. Thanks


<!-- m --><a class="postlink" href="http://www.webpages.ttu.edu/smcguinn/rayford/facilities.htmThis">http://www.webpages.ttu.edu/smcguinn/ra ... es.htmThis</a><!-- m --> is far from perfect but maybe it will give you some ideas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<script language="javascript" type="text/javascript">
<!--
{
img1on = new Image();
img1on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actglow.jpg";

img1off = new Image();
img1off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actlink.jpg";

img2on = new Image();
img2on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklayglow.jpg";

img2off = new Image();
img2off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklaylink.jpg";

img3on = new Image();
img3on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-resglow.jpg";

img3off = new Image();
img3off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-reslink.jpg";

img4on = new Image();
img4on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintglow.jpg";

img4off = new Image();
img4off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintlink.jpg";

img5on = new Image();
img5on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-ratesglow.jpg";

img5off = new Image();
img5off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-rateslink.jpg";

img6on = new Image();
img6on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directglow.jpg";

img6off = new Image();
img6off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directlink.jpg";

img7on = new Image();
img7on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactglow.jpg";

img7off = new Image();
img7off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactlink.jpg";

img8on = new Image();
img8on.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homeglow.jpg";

img8off = new Image();
img8off.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homelink.jpg";
}

// Function to 'activate' images.
function imgOn(imgName) {
if (document.images) {
document[imgName].src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/eval(imgName">http://www.webdeveloper.com/forum/archi ... al(imgName</a><!-- m --> + "on.src");
}
}
// Function to 'deactivate' images.
function imgOff(imgName) {
if (document.images) {
document[imgName].src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/eval(imgName">http://www.webdeveloper.com/forum/archi ... al(imgName</a><!-- m --> + "off.src");
}
}
// -->
</script>

<style>
div#slideshow {
float:left;
margin-left: 10px;
}
div#slideshow img {float:left;}
div#thumbs img {float:none;}

div#lists {
float: left;
margin-left: 25px;
}

body {
text-align: center;
background-image:url('http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rcbkgrnd.jpg');
}

#wrap {
width:766px;
position:relative;
margin:auto;
}

ul, li {
text-align:left;
}

#navlist {
height:30px;
margin:0;
padding:0;
}

img {
display:block;
border:0;
margin:0;
padding:0;
}

#navlist li {
float:right;
margin:0;
padding:0;
}

</style>
</head>

<body>
<div id="wrap">
<div id="header">
<img style="float:left" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-interiorleft.jpg">
<img style="float:right" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-head.jpg">
</div>
<ul id="navlist">
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm" onmouseover="imgOn('img8')"onmouseout="imgOff('img8')"><img alt="Home" name="img8" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-homelink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="imgOn('img7')"onmouseout="imgOff('img7')"><img alt="Contact Us" name="img7" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-all-contactlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"directions.htm" onmouseover="imgOn('img6')"onmouseout="imgOff('img6')"><img alt="Directions" name="img6" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-directlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"reservations.htm" onmouseover="imgOn('img5')"onmouseout="imgOff('img5')"><img alt="Rates" name="img5" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-rateslink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"local.htm" onmouseover="imgOn('img4')"onmouseout="imgOff('img4')"><img alt="Local Interests" name="img4" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-locintlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"reservations.htm" onmouseover="imgOn('img3')"onmouseout="imgOff('img3')"><img alt="Reservations" name="img3" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-reslink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"parklay.htm" onmouseover="imgOn('img2')"onmouseout="imgOff('img2')"><img alt="Park Layout" name="img2" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-parklaylink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"activities.htm" onmouseover="imgOn('img1')"onmouseout="imgOff('img1')"><img alt="Activities" name="img1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-int-fac-actlink.jpg"></A></li>
</ul>
<div id="content">
<div id="slideshow">
<img style="text-align=right" src='http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/slide_1.jpg' width=304 height=232 name='fullsize'>
<div id="thumbs">
<a href='http://www.webdeveloper.com/forum/archive/index.php/javascript:showFullSize(2);'><img name='slide2' width=76 height=58 border=0 hspace=0 vspace=0 alt='Click to view Fullsize Image' src='http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/thumb_2.jpg'></a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/javascript:showFullSize(3);'><img name='slide3' width=76 height=58 border=0 hspace=0 vspace=0 alt='Click to view Fullsize Image' src='http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/thumb_3.jpg'></a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/javascript:showFullSize(1);'><img name='slide1' width=76 height=58 border=0 hspace=0 vspace=0 alt='Click to view Fullsize Image' src='http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/thumb_1.jpg'></a>
</div>
</div>
<div id="lists">
<h3 style="font-size: 12.0pt; font-family: Times New Roman; font-weight: 700;">Luxury Amenities</h3>
<ul>
<li>115 Luxury Sites</li>
<li>Pet Friendly</li>
<li>Beautiful Bath Houses</li>
<li>Heated Pool</li>
<li>Spa</li>
<li>Stocked Ponds</li>
<li>Concrete Streets and Site</li>
</ul>
<ul>
<li>Clubhouse Exercise Facilities</li>
<li>Library</li>
<li>Game Room</li>
<li>Rally Room</li>
<li>Wi-Fi</li>
<li>Walking Trails</li>
</ul>
</div>
</div>
</div>
</body>
</html>
 
Back
Top