...

View Full Version : Adding right side images



vinoman2
03-05-2009, 07:51 PM
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

Fisher
03-05-2009, 09:04 PM
Try this:

<!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.

vinoman2
03-05-2009, 11:24 PM
Thank you :)

vinoman2
03-07-2009, 03:23 PM
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?

Fisher
03-07-2009, 04:55 PM
Not exactly sure what you mean. If you mean an extra box directly beside the addresses, try this:

<!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>

Excavator
03-07-2009, 05:06 PM
Hello vinoman,
Have you tried putting anything over there yet?
This might work for you -
<!-- 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 -

#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.


...

vinoman2
03-07-2009, 06:19 PM
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...

Excavator
03-07-2009, 06:48 PM
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 -

#in-right {
width: 300px;
float: right;
background: #fc6;
}
markup -
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.

vinoman2
03-07-2009, 08:12 PM
Probably easiest just to float a box over there. Like this -
CSS -

#in-right {
width: 300px;
float: right;
background: #fc6;
}
markup -
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?

Excavator
03-07-2009, 08:16 PM
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.


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.

vinoman2
03-07-2009, 10:44 PM
Thanks, the more I use CSS the more it slowly sinks in. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum