Floating img next to javascript div...

**jerdy** · 02-11-2010, 01:10 AM

Problem located at bottom of page: www.yogamoves.net/test.html

Trying to get the 2 black images to float next to the drop-down menu. One on the left, one on the right...there's probably a way to do this?

EDIT: What if I wanted to put a link next to the menu instead, one on the right one on the left.

example:
back [drop-down menu] next

**simcomedia** · 02-11-2010, 01:21 AM

You mean like:

image menu image

?

To do this you should confine all three into a specified width div then place them into that div with their own specific parameters for width and float: left; which will make them stack next to each other.

#divname {
width: 800px;
margin-left: 40px;
}

.image1 {
width: 150px;
float: left;
text-align: left;
}

.menu {
width: 500px;
float: left;
}

.image2 {
width: 150px;
float: left;
text-align: right;
}

HTML:

<div id="divname">
<div class="image1"></div>
<div class="menu"></div>
<div class="image2"></div>
</div>

**stringcugu** · 02-11-2010, 05:15 AM

put align='right'
put align='left' in <MG
<img src="img/knees2chest_right.jpg" width="10" height="90" border="0" align='right'/>
<img src="img/knees2chest_left.jpg" width="10" height="90" border="0" align='left'/>

**simcomedia** · 02-11-2010, 09:23 PM

That code won't align the 3 items horizontally properly.

**stringcugu** · 02-12-2010, 01:00 AM

copy this
<p class="center">~Laureen
<p style="padding-top:2em"><img src="mg/knees2chest_right.jpg" width="60" height="30" border="0" align='right'/>
<img src="mg/knees2chest_left.jpg" width="60" height="30" border="0" align='left'/>
<center><div id="sample_attach_menu_parent" class="sample_attach">More Thoughts</div></center>
</p>
<h2><img src="mg/Warrior-2-left.jpg" alt="Warrior Left" hspace="30" />Yoga Talk<img src="mg/Warrior-2-right.jpg" alt="Warrior Right" hspace="30"/></h2>

**jerdy** · 02-15-2010, 09:21 PM

What if I wanted to put a link next to the menu instead, one on the right one on the left.

example:
back [drop-down menu] next

**stringcugu** · 02-16-2010, 05:34 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yogamoves ~ Yoga to help you move through Life</title>
<link href="http://www.yogamoves.net/css/yoga_moves.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.yogamoves.net/js/smooth_scroll.js"></script>
<script type="text/javascript" src="http://www.yogamoves.net/js/dropdown.js"></script>
<style type="text/css">
body { font-size: 0.7em; }
h3{ font-size: 1.6em; margin: 0px; }
a.sample_attach, a.sample_attach:visited, div.sample_attach
{display: block;
width:175px;
border:1px dotted black;
padding: 2px 5px;
background: #92278F;
text-decoration: none;
font-family: "Courier New", Courier, monospace;
font-weight: 300;
font-size: 1.2em;
color: #FFF;}
a.sample_attach, a.sample_attach:visited { border-bottom: none; }
div#sample_attach_menu_child{ border-bottom: 1px dotted black; }
form.sample_attach
{position: absolute;
visibility: hidden;
border:1px solid black;
padding: 0px 5px 2px 5px;
background: #FFFFFF;}
form.sample_attach b
{font-family: Verdana, Sans-Sherif;
font-weight: 900;
font-size: 1.1em;}
input.sample_attach { margin: 1px 0px; width: 170px; }
</style>
</head>
<body>
<center>

<div id="header"><a name="top"></a> </div>
<div id="container">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="eye_pillows.html">Eye Pillows</a></li>
<li><a href="blog.html" class="selected"><font color="#2829A6">Yoga Talk</font></a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="content">
<h2><img src="http://www.yogamoves.net/img/Warrior-2-left.jpg" alt="Warrior Left" hspace="30" />Yoga Talk<img src="http://www.yogamoves.net/img/Warrior-2-right.jpg" alt="Warrior Right" hspace="30"/></h2>
<span class="title">Welcome!</span>
<p style="padding-right:2em;">Yoga Talk is a place for me to write about things that are on my mind, as they come up, and for people to comment if they want to.
<p>You can reach me by email at <a href="mailto:laureen@yogamoves.net">laureen@yogamoves.net</a> if you have comments.
<p class="title" style="padding-top:2em">Trying something new</p>
<p class="sub_title" style="margin-top:-10px">~ January 2010 ~</p>
<p class="center">I read a lot. It is one of my favorite things to do. There is a great spot in the corner of the couch where I can stretch out and cover up with my blue mohair lap blanket while I read.In the yoga room I often snuggle up in the blue chair near the woodstove, book in hand, coffee nearby. But I really love to read in bed. We have a joke that I usually last 10 minutes, but that is at night. On cold winter days I like to get into bed in the middle of the day and read. It�s a guilty pleasure.</p>
<p class="center">A few years ago I started keeping track of the books I read in a book journal because sometimes I could not remember the author or the title when I wanted to recommend something. Once I finished a book I would write the title, the author and a few words about the book in my journal to help me remember it.

<p class="center">This year I am adding another layer to my book journaling. It is not really a new year�s resolution thing, it is just something I decided to do because I thought it would be fun.
<p class="center">From now on when I read a book and enter it into my book journal, I will include interesting facts that I want to remember.
<p class="center">Sometimes these facts seem to be louder in my head than the other text when I am reading them. Sometimes they do not really have anything to do with the story because they are Universal truths. Sometimes when I read I will suddenly see words in bold, even though they are not really any different than the other words on the page. Something is telling me to remember this bit of information, so I write it on a post it note so I can go back later and see if it still resonates. If it still speaks to me I will add it to my journal.
<p class="center">I just finished reading <em>Dewey</em>. It is a book about a small town library cat from Spencer, Iowa. Dewey Readmore Books (the name they gave him) was left in the book chute one night, and soon becomes a resident at the library. He touches so many people and becomes so famous that people from all over come to see him. It was a sweet book and I laughed and shed a few tears when I read it.
<p class="center">What did I learn that I did not expect to?
<p class="center">Page 129
<br />Late July is the best time of year in Spencer. The corn is ten feet high, golden and green. It�s so high, the farmers are required by state law to cut it to half height every mile, where the roads meet at right angles. Rural Iowa has too many intersections and not enough stop
signs. The short corn helps, because at least you can see cars coming, and it doesn�t hurt the farmers. Corn ears grow in the center of the stalk, not the top.
<p class="center">Page 148
<br />I know at least a dozen libraries in Iowa with extensive cake pan collections. The librarians hang them on the walls. If you want to bake a special cake, for instance, a Winnie the Pooh cake for a child�s birthday party, you go to the library. Now those are librarians who serve their communities.
<p class="center">Not sure where I am going with this, but I thought it would be fun.
<p class="center">~Laureen
<p style="padding-top:2em">
<div id="divMenu">
<img src="IMG_0162.gif" width="10" height="95" border="0" align='right'/>
<img src="IMG_0162.gif" width="10" height="99" border="0" align='left'/>

<TABLE border=1 cellSpacing=0 borderColorLight=#ccff00 borderColorDark=#ccffcc align='left' cellPadding=1 noshade><TR>
<TD><FONT size=1 face=arial><B>
<img src="http://www.yogamoves.net/img/knees2chest_right.jpg" width="60" height="30" border="0" align='right'/><A onclick=moveMenu() href="javascript://" target=haupt>G�steb�cher 1-3</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Passwort 1-4</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Suchen 1-5</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Z�hler 1-22</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Grafik 1-14</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Foren 1-6</A><BR>
</FONT></TD></TR></TABLE>
<TABLE border=1 cellSpacing=0 borderColorLight=#333333 borderColorDark=#333333 cellPadding=1 noshade align='right'><TR>
<TD><FONT size=1 face=arial><B>

<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='left'/><A onclick=moveMenu() href="javascript://" target=haupt>G�steb�cher 1-3</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Passwort 1-4</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Suchen 1-5</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Z�hler 1-22</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Grafik 1-14</A><BR>
<A onclick=moveMenu() href="javascript://" target=haupt>Foren 1-6</A><BR>
</FONT></TD></TR></TABLE>
<center><div id="sample_attach_menu_parent" class="sample_attach"align='center'>More Thoughts</div></center>
<div id="sample_attach_menu_child">
<a class="sample_attach" href="entry1_habits.html">1 ~ Habits</a>

<a class="sample_attach" href="entry2_limitations.html">2 ~ Limitations</a>
<a class="sample_attach" href="entry3_light.html">3 ~ Let there be Light</a>
<a class="sample_attach" href="entry4_something_new.html">4 ~ Trying Something New</a>
</div>
<script type="text/javascript">
at_attach("sample_attach_menu_parent", "sample_attach_menu_child", "hover", "y", "pointer");
</script>
</div>
<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='left'/>
<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='right'/>
<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='right'/>
<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='left'/>
<A href="javascript://"onclick="moveMenu()">
<img src="IMG_0162.gif" width="410" height="10" border="0"align='left:left'/></A>
<img src="http://www.yogamoves.net/img/knees2chest_right.jpg" width="60" height="30" border="0" align='left'/>

<img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='right'/></div>

<div id="footer">Website designed by <a href="http://www.metzhere.com">Amber Metz</a> ~ Background Image Provided by <a href="http://casperium.deviantart.com/">casperium</a></div></div>
<div id="tagline"><div><h1>Yoga to help you move through Life</h1></div></div>
<script type="text/javascript">
/*<![CDATA[*/
MARQUEE({
id:'tagline',
Duration:20000, // (optional) the time to travel one cycle in milli seconds. (digits, default = 5000)
Direction:'right', // (optional) the direction of travel 'left' or 'right'. (string, default = 'right')
Loop:false // (optional) the number of loops. (digits, default = infinate)
});
/*]]>*/
</script>
</body>
</html>

Thread: Floating img next to javascript div...

Thread Tools

Search Thread

Floating img next to javascript div...

Bookmarks

Bookmarks

Posting Permissions