Some More Help With Html

dtuhy

Mar 17 2007, 04:39 AM

Ok so yet again i need some help i have this so far:

CODE

<html>

<head>

</head>

<BODY BGCOLOR="black" TEXT="white" LINK=#XXXXXX VLINK=#XXXXXX>

<body>

<center><h1> Pearl Harbor</h1></center>
<hr>


<a href="http://photobucket.com" target="_blank"><img src="http://i173.photobucket.com/albums/w59/tuhyd/pearlharbor.jpg" border="0" align=right alt="USS Arizona "></a></right>
<a href="http://photobucket.com" target="_blank"><img src="http://i173.photobucket.com/albums/w59/tuhyd/pic2.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"align=right></a>
 
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-7285800014530937819&hl=en" flashvars="" align=left> </embed>
 
<hr>

</body>

</html>

i have two images on the right and a video on the left but i dont know how to put two more pictures right underneath the ones on the right without something moving and also i used the <hr> to make a break underneath the video and i had to use to move it down and i know you can use but i am pretty sure there is another way that i can do it without using those so if anyone can give me any kind of help that would be awsome.

jlhaslip

Mar 17 2007, 09:20 AM

First, a quick explanation of what is involved here.
The outer "wrapper" of the page is given a width and centred. Look in the code for the div named "wrap".
This div contains a full width "header" div, and a full width "footer" div.
Between them, there are two narrow div's, the left hand one (content1)contains the video and the right-hand div (content2) has the pictures.
These div's are "floated" into their position against each other, and that's it. Sort of. Add come background colours to spice it up, and perhaps change the titles, etc.
The css is in the Head of the document.
Have fun.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>
            Pearl Harbour
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="jlhaslip" />
        <meta name="description" content="" />
<style type="text/css">
/*<![CDATA[*/
* html {
 margin: 0;
 padding: 0; 
 } 
 
body{
background:#ffffff;
font: 8pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#666666;
}

a:link{ color:#999999; text-decoration:none; }
a:visited{ color:#999999; text-decoration:none; }
a:hover{ color:#6C8EFF; text-decoration:underline; }
a:active{ color:#999999; text-decoration:none; }

#wrap{
 width: 850px;
 margin: 0 auto;
 text-align: centre;

}


#container{
}

#content1{
width: 420px;
float:left;
padding: 2em;

}

#content2{
width: 320px;
margin-left: 470px;
padding: 2em;
}

h2{
margin: 0 auto;
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
color:#6C8EFF;
font-size:18pt;
font-weight:bold;
}

h3{
margin: 0 auto;
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
color:#6C8EFF;
font-size:16pt;
font-weight:bold;
}

img { margin-top: 20px; }
#title{
border-bottom:#CCCCCC 1px solid;
}

#footer{
text-align:center;
margin: 0 auto;
height:30px;
padding-top:10px;
border-top:#CCCCCC 1px solid;
clear:both;

}

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
 embed.c1 {width:400px; height:326px;}
/*]]>*/
</style>

    </head>
    <body>
        <div id="wrap">
            <div id="container">
                <div id="title">
                    <h2>
                        Welcome!
                    </h2>
                    <h3>

                        Pearl Harbor
                    </h3>
                </div>
                <div id="content1">
                    <h3>
                        Video
                    </h3><embed class="c1" id="VideoPlayback" type="application/x-shockwave-flash" src=
                    "http://video.google.com/googleplayer.swf?docId=-7285800014530937819&amp;hl=en" flashvars="" />
                </div>
                <div id="content2">
                    <h3>

                        Pictures
                    </h3><img src="http://i173.photobucket.com/albums/w59/tuhyd/pearlharbor.jpg" width="120" border="0" alt="USS Arizona " /> <img src=
                    "http://i173.photobucket.com/albums/w59/tuhyd/pic2.jpg" border="0" width="120" alt="Photo Sharing and Video Hosting at Photobucket" /> <img src=
                    "http://i173.photobucket.com/albums/w59/tuhyd/pearlharbor.jpg" width="120" border="0" alt="USS Arizona " /> <img src=
                    "http://i173.photobucket.com/albums/w59/tuhyd/pic2.jpg" width="120" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />
                </div>
                <div id="footer">
                    <!-- Footer -->
                    ~~ Footer Information Here ~~
                </div><!-- end footer -->
            </div><!-- end container -->

        </div><!-- end wrap -->
    </body>
</html>

noriv

Mar 26 2007, 06:04 PM

Never use uppercase letters, because in XHTML they will not be allowed so I recommind not to have it.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE