PDA

View Full Version : Putting text next to a picture?

Luzee12
02-15-2004, 03:05 PM
This must make me sound really stupid; but it's only my third day of trying to teach myself HTML and everything. So, here goes: How can I get my text to show up next to my image instead of underneath it? Or 2 images side by side?

I'm using a CSS layout made by Lissa, the one with a header, left column and main right column, and I'm trying to get a picture (smallfields.jpg) into the upper left-hand corner. I would prefer it if I could get it to overlap both the top and left-hand divs, but I couldn't figure that out so I've tried to put it in my header. But the text from the header shows up underneath instead of next to it. This is everything I have:

<html>
<head>
<title>Day Dreams</title>
<style type="text/css">
<!--
A:link
{ text-decoration: none; color:#990066 }
A:visited
{ text-decoration: line-through; color:#990066 }
A:hover
{ text-decoration: none; color:#FF9999; cursor: hand }
-->

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
scrollbar-face-color : #FFFF99;
scrollbar-highlight-color : #FFFFCC;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #FFCC99;
scrollbar-darkshadow-color : #FFFF00;
scrollbar-track-color : #FFFFCC;
scrollbar-arrow-color : #FFCC66;
}

#header {
margin: 20px;
padding: 10px;
height: 225px;

background-color: #CC9966;
}
#left {
position: absolute;
left: 15px;
top: 225px;
width: 200px;

background-color: #FFCCCC;

}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

<div align="left"><img src="smallfields.jpg" width="150" height="225" alt="Fields"></div> Last Updated: 15 February 2004
<HR size=4 width="100%">
</div>

<div id="left">

<hr width="4" size="100%">
</div>

<div id="center">

<center><form><textarea rows="20" cols="100" style="background-image:url(fieldsbg.jpg)"
style="font-family:times new roman" style="color:#660066" border-style:solid"> Whoohoo! The text shows up!
</textarea></form><center>
<br><br>
<br><br>
<center><form>
<select name=lissamenu3 size="1"
onchange="location.href=(form.lissamenu3.options[form.lissamenu3.selectedIndex].value)"
style="font-family: comic sans ms"
style="color: #FFFF00"
style="border: outset"
style="font-size: 12"
style="background: #CC99CC">
<option value="0">Choose One</option>
<option value="0"> - - - - - </option>
<option value="http://luzee120.tripod.com/kissdolls/index.html">Home</option>
<option value="http://luzee120.tripod.com/kissdolls/dreams.html">Daydreams</option>
<option value="http://luzee120.tripod.com/kissdolls/me.html">Down to Earth</option>
</select>
</form><center>
</div>

</body>
</html>
kittycat
02-15-2004, 03:29 PM
For this line of code
<div align="left"><img src="smallfields.jpg" width="150" height="225" alt="Fields"></div> Last Updated: 15 February 2004

Try this...
<img src="smallfields.jpg" width="150" height="225" alt="Fields" style="float: left;">Last Updated: 15 February 2004
You can change left to right as well. And also instead of that code you could replace the bold with align="left" (or right)
Luzee12
02-15-2004, 04:16 PM
Magic! Thank you sooooooooo much!

Would it be too complicated to explain to me how that works? Can I use that line of code anytime I want things to go side-by-side? I really fit the bill for your quote there. :buckt:
kittycat
02-15-2004, 06:00 PM
You should be able to use that whenever you want things beside each other, I've only used it for divs and images but I'd think it would work for other things as well :)