Image placement on screen

@WebJoelMay 20.2006 — #I empathise, -I was Best Man and assistant photographer for a wedding in New York state just over three weeks ago. And I too have been thinking about doing a quickie web-site for the images I took at the wedding.

Ray's suggestion of "holygrail" is an excellent link, -you can learn much from that site and that author. It's a good read.

Here is a quick template I created for you to experiment with, free to use if it suits your needs.

[CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 
 <style>
 body, html	{margin:0; padding:0; border:0;}/* stops IE from doing stupid things */
 #wrapper	{padding-bottom:20px;}
 #content	{width:85%; height:auto; border:1px dotted gray; padding-top:10px; padding-bottom:20px; margin:8px auto 5px auto;}
 #content p	{padding:10px 15px 0 20px;}
 #navigation	{position:relative; top:-10px; width:130px; border:1px dashed green; margin-right:10px; float:left;}
 #navigation ul	{margin-top:20px;}
 #navigation ul li	{list-style-type: none; margin-top:10px}
 img					{margin:5px 15px 10px 15px;}
 #header	{width:85%; height:auto; border:1px dashed purple; background-color:#ececec; padding-top:10px; padding-bottom:10px; margin:35px auto 0 auto;}
 #footer				{width:85%; height:auto; background-color:#ececec; border:1px dashed red; padding-top:10px; padding-bottom:10px; margin:0 auto 20px auto;}
 #footer p	{padding:5px 15px 5px 15px; line-height:1.2em;}
 </style>
 
 </head>
 
 <body>
 <div id="wrapper">
 <div id="header">Your HEADER text can go here.</div>
 
 <div id="content">
 <div id="navigation">
 
 <ul>
 <span style="font-size:25px; color:cecece;">Links</span>
 <li><a href="#">Home</a></li>
 <li><a href="#">Image 1</a></li>
 <li><a href="#">Image 2</a></li>
 <li><a href="#">Image 3</a></li>
 <li><a href="#">Image 4</a></li>
 <li><a href="#">Image 4</a></li>
 </ul>
 </div>
 <!-- begin CONTENT here -->
 
 <img src="#" width="140" alt="image float left" style="width:px height:px; border:1px solid blue; float:left;" />
 <img src="#" width="140" alt="image float right" style="width:px height:px; border:1px solid blue; float:right;" />
 
 <h1 style="position:relative; top:10px;">Your text here.</h1>
 
 <p> You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.
 Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.
 </p>
 
 <p> You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.
 </p>
 
 <img src="#" width="140" alt="image float left" style="width:px height:px; border:1px solid blue; float:left;" />
 
 <p> You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.  Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.
 </p>
 
 <img src="#" width="140" alt="image float left" style="width:px height:px; border:1px solid blue; float:right;" />
 
 <p> You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site.  You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This is for the content part of the page to go. This has your text, your words, describing the contents of this site. This has your text, your words, describing the contents of this site.  You can enter all your text and descriptive information in the paragraphs here. This has your text, your words, describing the contents of this site.  You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This has your text, your words, describing the contents of this site.  You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about. This has your text, your words, describing the contents of this site.  You can enter all your text and descriptive information in the paragraphs here. Tell everyone about what this page is about.
 </p>
 
 </div><!-- end CONTENT -->
 <div id="footer"><p>A place for whatever. Let's call it the "footer".</p></div><!-- footer only -->
 
 </div><!-- end WRAPPER. Curently not used. -->
 </body>
 </html>[/CODE]

Good luck! ?

-Joel

Image placement on screen

3 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Image placement on screen

3 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #HTML _↴