Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding right side images

    I'm building a site from a template : http://www.sushihanaus.com/index3.html

    I want to add more sushi images going down the right side below the menu links.

    What is the best way to add css/html to a <div> for this?

    Also: how to add another column to the right of the locations?

    Thanks

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
    <meta name="Description" content="..." />
    <meta name="Keywords" content="..." />
    <meta name="robots" content="all,follow" />
    <meta name="author" content="Dave Kaplan" />
    <meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- CSS -->
    <link rel="stylesheet" href="index3_files/style.css" type="text/css" media="screen, projection, tv" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen, projection, tv" /><![endif]-->
    <link rel="stylesheet" href="index3_files/style-print.css" type="text/css" media="print" />
    <link rel="shortcut icon" href="http://www.sushihanaus.com/favicon.ico" type="image/x-icon" />
    <title>SUSHI HANA :: NORTHWEST</title>
    <style type="text/css"/>
    #newbox1 {
    background:#06F;
    width:27%;
    height:200px;
    float:right;
    }
    #newbox2 {
    background: #0C6;
    width:27%;
    height:200px;
    float:right;
    }
    </style>
    </head>
    <body>
    <div id="main">
      <!-- Header -->
      <div id="header"> <br />
        <!-- Your website name  -->
        <form class="searching" action="">
        </form>
        <div style="text-align: center;"><img src="index3_files/sushibanner.htm" /><img style="width: 400px; height: 111px;" alt="banner" src="index3_files/sushibanner2.jpg" /></div>
      </div>
    </div>
    <div style="text-align: center;">
      <!-- Search form end -->
    </div>
    <!-- Header end -->
    <!-- Menu -->
    <div id="menu-box" class="cleaning-box"> <a href="#skip-menu" class="hidden">Skip menu</a>
      <ul id="menu">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">My work</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact me</a></li>
      </ul>
    </div>
    <!-- Menu end -->
    <hr class="noscreen" />
    <div id="skip-menu"></div>
    <div id="content">
      <div id="content-box">
        <!-- Left column -->
        <div id="content-box-in-left">
          <div id="content-box-in-left-in">
            <h3>WELCOME TO SUSHI HANA</h3>
            <div class="block">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. 
                Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, 
                odio enim viverra libero, a <a href="#">volutpat nisl</a> dui sed quam. Proin venenatis gravida nunc. Aliquam justo felis,
                consequat nec, ultricies vel, sollicitudin eleifend, dolor. Nullam nec
                eros. Etiam semper mi et erat. Curabitur vel leo. Suspendisse potenti.
                Maecenas aliquet fermentum tellus. Curabitur purus dolor, congue eu,
                pulvinar eleifend, ultricies dictum, nisi. Aliquam erat volutpat. Donec
                pulvinar est vel leo.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. 
                Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, 
                odio enim viverra libero, a volutpat nisl dui sed quam. Proin venenatis gravida nunc.<br />
              </p>
              <p><br />
                <img style="width: 400px; height: 300px;" alt="sushi bar" src="index3_files/bar.jpg" /><br />
              </p>
            </div>
            <h3>LOCATIONS</h3>
            <p><strong>TIGARD - WASHINGTON SQUARE</strong><br />
              9009 SW Hall Blvd. #142<br />
              Tigard, OR 97223<span style="color: white;"></span><br />
              503-598-8083<br />
            </p>
            <p>HOURS: Mon. - Sun. 11:00 am - 9:00 pm<br />
              Happy Hours: Mondays 5:00 - 9:00 pm </p>
            <p> <strong>TIGARD</strong> <br />
              11705 SW Pacific Hwy.<br />
              Tigard, OR 97223<br />
              503-352-7600<br />
            </p>
            <p>HOURS: Mon. - Sun. 11:00 am - 9:00 pm<br />
              Happy Hours: Mondays 5:00 - 9:00 pm </p>
            <p><strong>VANCOUVER</strong><br />
              13503 SE Mill Plain Blvd<br />
              Vancouver, WA 98684<br />
              360-944-9659<br />
            </p>
            <p>HOURS: Mon. - Sat. 11:00 am - 9:00 pm <br />
              Sun. 11:30 am - 8:00 pm<br />
              Happy Hours: Mondays 5:00 - 9:00 pm </p>
          </div>
        </div>
        <!-- Left column end -->
        <hr class="noscreen" />
        <!-- Right column -->
        <div id="content-box-in-right">
          <div id="content-box-in-right-in">
            <h3>MENUS</h3>
            <ul>
              <li><a href="http://www.sushihanaus.com/sushimenu.jpg">MAIN MENU<br />
                </a></li>
              <li><a href="#">CHECKLIST MENU<br />
                </a></li>
            </ul>
            <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /></div>
        </div>
        <div id="newbox1">
          <p>One new box</p>
        </div>
        <div id="newbox2">
          <p>Two new box</p>
        </div>
        <div class="cleaner">&nbsp;</div>
        <!-- Right column end -->
      </div>
    </div>
    <hr class="noscreen" />
    <!-- Footer -->
    <div id="footer">
      <p class="footer-left">© <span style="text-decoration: underline;"><span style="font-weight: bold;">Sushi Hana</span></span>&nbsp; 2009</p>
      <p class="footer-right"><a href="http://www.mantisatemplates.com/">Free web templates</a> by <a href="http://www.mantisa.cz/">Mantis-a</a></p>
    </div>
    <!-- Footer end -->
    </body>
    </html>
    change your file paths back.

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you

  • #4
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If I want to add another box of text to the right of the addresses can I use this style:

    #newbox1 {
    background:#06F;
    width:27%;
    height:200px;
    float:right;
    }

    How would I adjust it to be placed to the right of the addresses?

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Not exactly sure what you mean. If you mean an extra box directly beside the addresses, try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
    <meta name="Description" content="..." />
    <meta name="Keywords" content="..." />
    <meta name="robots" content="all,follow" />
    <meta name="author" content="Dave Kaplan" />
    <meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- CSS -->
    <link rel="stylesheet" href="index3_files/style.css" type="text/css" media="screen, projection, tv" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen, projection, tv" /><![endif]-->
    <link rel="stylesheet" href="index3_files/style-print.css" type="text/css" media="print" />
    <link rel="shortcut icon" href="http://www.sushihanaus.com/favicon.ico" type="image/x-icon" />
    <title>SUSHI HANA :: NORTHWEST</title>
    <style type="text/css"/>
    #newbox1 {
    background:#06F;
    width:27%;
    height:200px;
    float:right;
    }
    #newbox2 {
    background: #0C6;
    width:27%;
    height:200px;
    float:right;
    }
    #newenclosure {
    width:300px;
    float:left;
    }
    #extrabox {
    width:300px;
    float:left;
    height:500px;
    background:#999;
    }
    </style>
    </head>
    <body>
    <div id="main">
      <!-- Header -->
      <div id="header"> <br />
        <!-- Your website name  -->
        <form class="searching" action="">
        </form>
        <div style="text-align: center;"><img src="index3_files/sushibanner.htm" /><img style="width: 400px; height: 111px;" alt="banner" src="index3_files/sushibanner2.jpg" /></div>
      </div>
    </div>
    <div style="text-align: center;">
      <!-- Search form end -->
    </div>
    <!-- Header end -->
    <!-- Menu -->
    <div id="menu-box" class="cleaning-box"> <a href="#skip-menu" class="hidden">Skip menu</a>
      <ul id="menu">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">My work</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact me</a></li>
      </ul>
    </div>
    <!-- Menu end -->
    <hr class="noscreen" />
    <div id="skip-menu"></div>
    <div id="content">
      <div id="content-box">
        <!-- Left column -->
        <div id="content-box-in-left">
          <div id="content-box-in-left-in">
            <h3>WELCOME TO SUSHI HANA</h3>
            <div class="block">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. 
                Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, 
                odio enim viverra libero, a <a href="#">volutpat nisl</a> dui sed quam. Proin venenatis gravida nunc. Aliquam justo felis,
                consequat nec, ultricies vel, sollicitudin eleifend, dolor. Nullam nec
                eros. Etiam semper mi et erat. Curabitur vel leo. Suspendisse potenti.
                Maecenas aliquet fermentum tellus. Curabitur purus dolor, congue eu,
                pulvinar eleifend, ultricies dictum, nisi. Aliquam erat volutpat. Donec
                pulvinar est vel leo.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. 
                Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, 
                odio enim viverra libero, a volutpat nisl dui sed quam. Proin venenatis gravida nunc.<br />
              </p>
              <p><br />
                <img style="width: 400px; height: 300px;" alt="sushi bar" src="index3_files/bar.jpg" /><br />
              </p>
            </div>
            <div id="newenclosure">
              <h3>LOCATIONS</h3>
              <p><strong>TIGARD - WASHINGTON SQUARE</strong><br />
                9009 SW Hall Blvd. #142<br />
                Tigard, OR 97223<span style="color: white;"></span><br />
                503-598-8083<br />
              </p>
              <p>HOURS: Mon. - Sun. 11:00 am - 9:00 pm<br />
                Happy Hours: Mondays 5:00 - 9:00 pm </p>
              <p> <strong>TIGARD</strong> <br />
                11705 SW Pacific Hwy.<br />
                Tigard, OR 97223<br />
                503-352-7600<br />
              </p>
              <p>HOURS: Mon. - Sun. 11:00 am - 9:00 pm<br />
                Happy Hours: Mondays 5:00 - 9:00 pm </p>
              <p><strong>VANCOUVER</strong><br />
                13503 SE Mill Plain Blvd<br />
                Vancouver, WA 98684<br />
                360-944-9659<br />
              </p>
              <p>HOURS: Mon. - Sat. 11:00 am - 9:00 pm <br />
                Sun. 11:30 am - 8:00 pm<br />
                Happy Hours: Mondays 5:00 - 9:00 pm </p>
            </div>
            <div id="extrabox">
              <p>This is another box</p>
            </div>
          </div>
        </div>
        <!-- Left column end -->
        <hr class="noscreen" />
        <!-- Right column -->
        <div id="content-box-in-right">
          <div id="content-box-in-right-in">
            <h3>MENUS</h3>
            <ul>
              <li><a href="http://www.sushihanaus.com/sushimenu.jpg">MAIN MENU<br />
                </a></li>
              <li><a href="#">CHECKLIST MENU<br />
                </a></li>
            </ul>
            <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> <img src="index3_files/sushi4.jpeg" alt="sushi " width="135" height="101" /> </div>
        </div>
        <div id="newbox1">
          <p>One new box</p>
        </div>
        <div id="newbox2">
          <p>Two new box</p>
        </div>
        <div class="cleaner">&nbsp;</div>
        <!-- Right column end -->
      </div>
    </div>
    <hr class="noscreen" />
    <!-- Footer -->
    <div id="footer">
      <p class="footer-left">© <span style="text-decoration: underline;"><span style="font-weight: bold;">Sushi Hana</span></span>&nbsp; 2009</p>
      <p class="footer-right"><a href="http://www.mantisatemplates.com/">Free web templates</a> by <a href="http://www.mantisa.cz/">Mantis-a</a></p>
    </div>
    <!-- Footer end -->
    </body>
    </html>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello vinoman,
    Have you tried putting anything over there yet?
    This might work for you -
    Code:
    <!-- Right column -->
    			<div id="content-box-in-right">
    				<div id="content-box-in-right-in">
    					<h3>MENUS</h3>
    					<ul>
    						<li><a href="sushimenu.jpg" target="_blank">MAIN MENU<br>
    </a></li>
    						<li><a href="#">CHECKLIST MENU<br>
    </a></li>
    		
    					</ul>
    					
    <img src="img/sushi4.jpeg" alt="sushi " width="135" height="101" />
    <img src="img/sushi5.jpeg" alt="sushi " width="135" height="101" />
    <img src="img/sushi6.jpeg" alt="sushi " width="135" height="101" />
    
    <div id="newbox">new stuff here</div>						
    			</div>
    			
    			</div>
    			<div class="cleaner">&nbsp;</div>
    			<!-- Right column end -->
    CSS -
    Code:
    #newbox {
    width: 135px;
    height: 250px;
    margin: 200px 0 0 0; /*move #newbox down with this*/
    background: #fc6;
    }

    You should have a look at the links about validation in my sig below.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, this is what I have so far...
    http://www.sushihanaus.com/index5.html

    I just need to put a box of text to the right of the list of addresses so I can use that space. I have a tough time looking at code for too long so I have to go slowly...

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by vinoman2 View Post
    Thanks, this is what I have so far...
    http://www.sushihanaus.com/index5.html

    I just need to put a box of text to the right of the list of addresses so I can use that space. I have a tough time looking at code for too long so I have to go slowly...
    Probably easiest just to float a box over there. Like this -
    CSS -
    Code:
    #in-right {
    width: 300px;
    float: right;
    background: #fc6;
    }
    markup -
    Code:
    Please stop by for lunch or dinner and see for yourself.</p></div>
              
              
    <p><br>
    <img src="img/bar.jpg" alt="sushi bar" border="0" width="400" height="300"><br>
              </p>
    
            </div>
    <div id="in-right">stuff here</div>
            <h3>LOCATIONS</h3>
            <p><strong>TIGARD - WASHINGTON SQUARE</strong>&nbsp;&nbsp; <a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=9009+SW+Hall+Blvd,+Portland,+OR+97223&amp;sll=37.0625,-95.677068&amp;sspn=49.176833,79.101563&amp;ie=UTF8&amp;z=16&amp;iwloc=addr" target="_blank">map</a><br>
              9009 SW Hall Blvd. #142<br>
              Tigard, OR 97223<span style="color: white;"></span><br>
              503-598-8083<br>
            </p>
    That will expand in height to contain however much text you put in it. You can move it around a bit with margins or specify a height...up to you. The color is there for testing only.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Probably easiest just to float a box over there. Like this -
    CSS -
    Code:
    #in-right {
    width: 300px;
    float: right;
    background: #fc6;
    }
    markup -
    Code:
    Please stop by for lunch or dinner and see for yourself.</p></div>
              
              
    <p><br>
    <img src="img/bar.jpg" alt="sushi bar" border="0" width="400" height="300"><br>
              </p>
    
            </div>
    <div id="in-right">stuff here</div>
            <h3>LOCATIONS</h3>
            <p><strong>TIGARD - WASHINGTON SQUARE</strong>&nbsp;&nbsp; <a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=9009+SW+Hall+Blvd,+Portland,+OR+97223&amp;sll=37.0625,-95.677068&amp;sspn=49.176833,79.101563&amp;ie=UTF8&amp;z=16&amp;iwloc=addr" target="_blank">map</a><br>
              9009 SW Hall Blvd. #142<br>
              Tigard, OR 97223<span style="color: white;"></span><br>
              503-598-8083<br>
            </p>
    That will expand in height to contain however much text you put in it. You can move it around a bit with margins or specify a height...up to you. The color is there for testing only.
    Great. This works fine. But what determines how far to the left or right the box is postioned? I see that 300px is the box width, but how would you adjust moving the box left or right? margins or padding?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by vinoman2 View Post
    Great. This works fine. But what determines how far to the left or right the box is postioned? I see that 300px is the box width, but how would you adjust moving the box left or right? margins or padding?
    Margins would adjust it. It's over to the right because it's float:right;
    You could add margin: 50px 5px 0 0; to move it down 50px and over 5px to the left.


    Edit: Did you look at Fisher's solution? He got here first (if you're going to thank anyone) and I'm sure his approach will work fine as well.
    Last edited by Excavator; 03-07-2009 at 08:19 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, the more I use CSS the more it slowly sinks in.
    Last edited by vinoman2; 03-07-2009 at 10:46 PM.


  •  

    Posting Permissions

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