Text next to picture (background image)

BenPSP

04-08-2010, 05:29 PM

Hi all,

Fairly new at HTML / CSS so this has got me confused :)

Trying to put text next to an image, or to be correct a background image of a div.

Here is a picture of what it looks like now: http://i985.photobucket.com/albums/ae339/BenKxK/nextoeachother.png

And here is what I want it to look like (fake): http://i985.photobucket.com/albums/ae339/BenKxK/dd.png

I tried using a margin but the text moved but pushed the image down as well.

Here is the HTML I used:

<fieldset>
<legend>XHTML Basics</legend>
In this exercise you will start to learn the basics of HTML / XHTML. The XHTML PDF will first guide you through making your first
website, which although basic, is where all web developers start! lists&table PDF will take you through just that, how to use and create lists and tables.
This PDF also teaches you how to use tables for layout, but this is not recommended, as CSS does a much better job, information on this can be found in the
extra reading section.
<div class="files" id="xhtml">
<img src="Pictures/FileTypes/zip.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/XHTMLBasics.zip">XHTMLBasics.zip</a> 
<img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/01-xhtml.pdf">01-xhtml.pdf</a> 
<img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/01a-lists%26tables.pdf">01a-lists&tables.pdf</a> 
<img src="Pictures/FileTypes/txt.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/content.txt">content.txt</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lquiz.gif">lquiz.gif</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lsmile.gif">lsmile.gif</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lwot.gif">lwot.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/layout_table.html">layout_table.html</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lists.html">lists.html</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/netskills.gif">netskills.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/other.html">other.html</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/small_logo.gif">small_logo.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/tables.html">tables.html</a>
</div>
</fieldset>

And here is the CSS (mostly to get the files sitting on the notepad lines):

div.files {padding-left: 7em;
padding-top: 4.4em;
line-height: 1.35em;
width: 15em;
background-image: url(Pictures/filesback.png);
background-repeat:no-repeat;}

Cheers :)

Excavator

04-08-2010, 05:41 PM

Hello BenPSP,
We float things to put other things beside them.
Try something like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 800px;
margin: 30px auto;
padding: 50px 0 100px;
background: #999;
font-size: 0.8em;
}
fieldset {
background: #fff;
overflow: auto;
}
#xhtml {
width: 15em;
float: left;
padding: 4.4em 0 4.4em 7em;
line-height: 1.35em;
background-image: url(Pictures/filesback.png);
background-repeat:no-repeat;
background: #f00;
}
.right {margin: 0 0 0 24em;}
</style>
</head>
<body>
<div id="container">
<fieldset>
<legend>XHTML Basics</legend>
<div class="files" id="xhtml">
<img src="Pictures/FileTypes/zip.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/XHTMLBasics.zip">XHTMLBasics.zip</a> 
<img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/01-xhtml.pdf">01-xhtml.pdf</a> 
<img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/01a-lists%26tables.pdf">01a-lists&tables.pdf</a> 
<img src="Pictures/FileTypes/txt.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/content.txt">content.txt</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lquiz.gif">lquiz.gif</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lsmile.gif">lsmile.gif</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lwot.gif">lwot.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/layout_table.html">layout_table.html</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/lists.html">lists.html</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/netskills.gif">netskills.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/other.html">other.html</a> 
<img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/small_logo.gif">small_logo.gif</a> 
<img src="Pictures/FileTypes/html.png" alt="**" class="icon" />  <a href="Exercises/XHTMLBasics/tables.html">tables.html</a>
</div>

In this exercise you will start to learn the basics of HTML / XHTML. The XHTML PDF will first guide you through making your first
website, which although basic, is where all web developers start! lists&table PDF will take you through just that, how to use and create lists and tables.
This PDF also teaches you how to use tables for layout, but this is not recommended, as CSS does a much better job, information on this can be found in the
extra reading section.

</fieldset>
</div>
</body>
</html>

BenPSP

04-08-2010, 06:03 PM

Thanks Excavator!

I tried floating, but it was the order of my p and div that got me!

Can I just ask, is the container necessary?

Excavator

04-08-2010, 06:09 PM

No, the fieldset is enough on it's own.
That got in there by force of habit, you never know what's going to be added later on in development.

You can check things like that with the validator. See the links about validation in my sig below.

...

DRowland

04-11-2010, 06:29 PM

What about a two column table? You could put the graphic in the left column, and the text in the right column and adjust the column widths
to make everything line up nicely.
DRowland

effpeetee

04-11-2010, 07:41 PM

Generallt speaking, we don't use tables for positioning graphics.

Look here. (http://www.hotdesign.com/seybold/)

Frank

DRowland

04-11-2010, 09:44 PM

I found a site that shows exactly how to do it.
try this link

http://www.html.net/tutorials/css/lesson13.asp

maybe that will help.

Dick