SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I get image to line up

    How do I the image on the right to look balanced or at least even with text?

    http://www.stoutstandards.com/Introduction.html

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    How do I the image on the right to look balanced or at least even with text?
    Remove the table shown below and put the image into the first <p>. Add a float right rule to your CSS. You will need to play with the margins to suit your needs.

    -------- remove this ----------
    <table class="image" align="right">
    <tr>
    <td><p><img src="images/Poster.jpg" height="550" width="390" border="2"></td>
    </tr>
    </table>

    ---------- modify this ---------------------
    <p><img class="rtF" src="images/Poster.jpg" height="550" width="390" border="2">I have been involved in the treasure hunting/metal detecting pastime for over 35 years now, and have authored three books, written hundreds of articles, and
    worked in the industry itself. As a result I receive lots of emails and letters from detectorists like you, asking me for advice, asking what I think of a particular ........ etc

    ------ add this to CSS -------------------
    img .rtF { float:right; margin:0px 0px 20px 20px; }

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Maybe I missed something...that makes it even worse.

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Maybe I missed something...that makes it even worse.
    I don't know why it is not working for you. In the code below I have removed the table and moved the image as discussed previously. I have also moved your font styles into your style sheet. The image is now aligned with the top of the adjacent text and floated to the right as you wanted. You may want to substitute this code for that in your Home page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Coinhunting, Dick Stout, Metal Detecting, FMDAC, Treasure Hunting" />
    <title>Introduction</title>
    <style type="text/css">
     a:hover { color: blue; text-decoration: none;  font-weight: normal;  }
     body{ font-family: Arial, Verdana; background-color: #F0EFD0; color:#000; margin:0px 100px; }      
     p:first-letter {font-size: large; color: #000; }  
     ul { list-style-type: none; text-align: center; line-height: 1.5em; }
    #navbar { margin: 0; padding: 0; height: 1em;   }   
    #navbar li { list-style: none; float: left;  }   
    #navbar li a { padding: 3px 8px; background-color: #F0EFD0; color: #8A360F; text-decoration: none; font-weight:bold; font-size:16px;  }   
    #navbar li ul  { display:none; width: 15em; font-size:14px; height:auto;   }   
    #navbar li:hover ul { display:block; position: absolute; margin: -1px 0px; padding: 0px; }  
    #navbar li:hover li { float: none; background-color: #F5DEB3;  }   
    #navbar li:hover li a { background-color: #F5DEB3; color: #000;   }
    #navbar li a:hover {  background-color: #8db3FF;  color:#F00;   }   
    #txtL { font-weight:bold; color:#000; margin-bottom:100px; } 
    #txtL p { margin-top:0px; margin-bottom:10px;  }  
    #wrap { height:70px; } 
    #welc{ margin:30px; }
    .cntr{ text-align:center !important; font-size:26px; }
    .firstL{ font-size: large; color: #000; }
    .rtF { float:right; margin: 5px 0px 20px 20px; border:1px solid #000;  }
     </style>
    </head>
    
    <body>
    
    <div id="wrap">
      <ul id="navbar">
        <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
        <li><a href="index.html">Home</a></li>
        <li><a href="Introduction.html">Introduction</a></li>
        <li><a href="Aboutme.html">About Me</a></li>
        <li><a href="#">Articles</a>
        <ul>
          <li><a href="goodole.html">The Goodole days</a></li>
          <li><a href="TreasureTips.html">Treasure Tips</a></li>
          <li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
          <li><a href="Bill.html">Cousin Bill</a></li>
          <li><a href="BasicRules.html">Coin Hunting Rules</a></li>
          <li><a href="Winter.html">Winter Treasure Hunting</a></li>
          <li><a href="Productive.html">Finding Productive Sites</a></li>
          <li><a href="Dan.html">Detector Dan</a></li>
          <li><a href="Writing.html">Sharing Your Experiences</a></li>
          <li><a href="Future.html">What the Future Holds</a></li>
          <li><a href="Bolts.html">Nuts &amp; Bolts of a Metal Detector</a></li>
          <li><a href="cliff.html">Cliff Steffens Bio</a></li>
          <li><a href="Mark.html">Mark Schuessler Bio</a></li>
          <li><a href="Eleanor.html">Eleanor Hube Bio</a></li>
          <li><a href="Packrat.html">Larry Bateham Bio</a></li>
          <li><a href="UMOS.html">Unidentified Metal Objects</a></li>
        </ul>
        </li>
        <li><a href="Photos.html">Photos</a>
        <ul>
          <li><a href="Photos.html">Photos Set 1</a></li>
          <li><a href="Photos2.html">Photos Set 2</a></li>
          <li><a href="Photos3.html">Photos Set 3</a></li>
          <li><a href="Photos4.html">Photos Set 4</a></li>
          <li><a href="Photos5.html">Photos Set 5</a></li>
          <li><a href="Photos6.html">Photos Set 6</a></li>
          <li><a href="Photos7.html">Photos Set 7</a></li>
          <li><a href="Photos8.html">Photos Set 8</a></li>
          <li><a href="Photos9.html">Photos Set 9</a></li>
          <li><a href="Photos10.html">Photos Set 10</a></li>
          <li><a href="Photos11.html">Photos Set 11</a></li>
          <li><a href="Photos12.html">Photos Set 12</a></li>
          <li><a href="Photos13.html">Photos Set 13</a></li>
          <li><a href="Photos14.html">Photos Set 14</a></li>
          <li><a href="Photos15.html">Photos Set 15</a></li>
          <li><a href="Photos16.html">Photos Set 16</a></li>
          <li><a href="Photos17.html">Photos Set 17</a></li>
          <li><a href="Photos18.html">Photos Set 18</a></li>
        </ul>
        </li>
        <li><a href="Research.html">Research</a></li>
        <li><a href="equipment.html">Equipment</a></li>
        <li><a href="Coinhunting.html">Coinhunting</a></li>
        <li><a href="clubs.html">Clubs</a></li>
        <li><a href="Malamute.html">Malamute Saloon</a></li>
        <li><a href="Latest.html">LATEST NEWS</a></li>
        <li><a href="Recipes.html">Poor Gourmand</a></li>
        <li><a href="Link.html">Links</a></li>
        <li><a href="Books.html">Reading</a></li>
        <li><a href="Positive.html">Who We Are</a></li>
        <li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
      </ul>
    </div>
    <div id="txtL">
      <div id="welc" class="cntr">
        Welcome!!</div>
      <p>
      <img class="rtF" src="images/Poster.jpg" height="550" width="390" border="0" /><span class="firstL">I</span> 
      have been involved in the treasure hunting/metal detecting pastime for over 35 
      years now, and have authored three books, written hundreds of articles, and worked 
      in the industry itself. As a result I receive lots of emails and letters from 
      detectorists like you, asking me for advice, asking what I think of a particular 
      metal detector, inviting me to visit your town or city to hunt or to speak at 
      your club meeting. On the whole I try to respond positively, but more often than 
      not I cannot offer the information you seek, nor can I afford the travel costs 
      involved. Why? Because I too am just a hobbyist, and no more an expert than you.</p>
      <p>As of now I pretty much consider myself a part-time treasure hunter. I hope 
      that through this website I might be able to offer you a tip or two learned over 
      the years, but promise nothing earthshattering. Most of whatever success I've 
      had occurred because I entered into the pastime at an ideal time, and because 
      I spent an inordinate amount of time researching sites. Add to that a lot of in-the-field 
      trial and error, and a helluva lot of luck! </p>
      <p>You will not find a lot of technical babble here, and you may call a lot of 
      what I have to say, basic. That's fine. That's me. I still believe that research 
      is the most important part of this pastime!</p>
      <p>Next, getting along in years, this website offers me a place, and a reason 
      to look back and put things in perspective. While my metal detecting experience 
      is very much like yours, it took me on a somewhat different journey that changed 
      a great many things in my life. Some good, some not so good, but all worthy of 
      a look back.</p>
      <p>Lastly, I am new to the task of putting together a website, and working on 
      this one was not only fun, but a real learning experience. Please do let me know 
      if you have trouble viewing it so that I can make changes where needed.</p>
      <p>I hope you will always remember that, as detectorists, as amateur treasure 
      hunters, we are bound by a common thread, and it is this friendship, this comradery, 
      this sharing, that is so much more important than any treasure we can ever hope 
      to find.</p>
      <p>My goal is to keep this website updated regularly, and make it one you will 
      want to revisit from time to time. If you have any suggestions or comments please 
      email me at: <a href="mailto:Disc440@tx.rr.com">Disc440@tx.rr.com</a> If you have 
      any complaints email me at <a href="mailto:@$)!*@HaHa.com">UpYours!@HaHa.com</a></p>
      <div class="cntr">
        Dick Stout</div>
    </div>
    <script type="text/javascript">
      var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-19821548-1']);  _gaq.push(['_trackPageview']);  (function(){
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;        
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
      
    </script>
    </body>
    
    </html>

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Please excuse me for butting in to say that I have been playing with Github's "https://gist.github.com/" and "http://bl.ocks.org/"

    Gists can create simple index.html pages without having a Github account.

    Step 1: Open following page for editing -
    https://gist.github.com/

    Step 2: add "Gist description" and "name the file..." to index.html

    Step 3: copy and paste the html content into the textbox

    Step 4: save either as "Create Public Gist" or "Create Anonymous Gist"

    Step 5: Copy the generated URL
    https://gist.github.com/anonymous/eb253ceaff2a9c467b15

    To view: generated page: replace https://gist.github.com/ with http://bl.ocks.org/

    Save modified URL and view contents:
    http://bl.ocks.org/anonymous/eb253ceaff2a9c467b15

    To view: generated page and source code insert "raw/":
    http://bl.ocks.org/anonymous/raw/eb253ceaff2a9c467b15/
    Last edited by John_Betong; May 6, 2014 at 22:48. Reason: inserted missing link
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  6. #6
    Non-Member sophiaking's Avatar
    Join Date
    May 2014
    Location
    South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is my suggestion

    <div id="left">put all stuff on the left in this container</div>
    <img src="" title="" alt="" id="rightimg"/>

    css looks like this

    div#left {width:40%; height:200px; float:left;}
    img#rightimg {width:39%; height:200px; float:right}

    this is just an example so try it

    you might need to remove some of the content in your menu and put it in a sidebar as it seems they are overlapping
    you can also try to fix this by reducing the size of the text in the menu or the padding and margins between the menu items


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •