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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text next to picture (background image)

    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:

    And here is what I want it to look like (fake):

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

    Here is the HTML I used:

    Code:
    <fieldset>
    		  <legend>XHTML Basics</legend>
    		    <p class="right">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&amp;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.</p>
      		  <div class="files" id="xhtml">
    		    <img src="Pictures/FileTypes/zip.png" alt="**" class="icon" />&nbsp; <a href="Exercises/XHTMLBasics/XHTMLBasics.zip"><strong>XHTMLBasics.zip</strong></a><br/>
    		    <img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />&nbsp; <a href="Exercises/XHTMLBasics/01-xhtml.pdf"><strong>01-xhtml.pdf</strong></a><br/>
    		    <img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/01a-lists%26tables.pdf"><strong>01a-lists&amp;tables.pdf</strong></a><br/>
    		    <img src="Pictures/FileTypes/txt.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/content.txt">content.txt</a><br/>
    		    <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lquiz.gif">lquiz.gif</a><br/>
    		    <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lsmile.gif">lsmile.gif</a><br/>
    		    <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lwot.gif">lwot.gif</a><br/>
    		    <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/layout_table.html">layout_table.html</a><br/>
    		    <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lists.html">lists.html</a><br/>
    		    <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/netskills.gif">netskills.gif</a><br/>
    		    <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/other.html">other.html</a><br/>
    		    <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/small_logo.gif">small_logo.gif</a><br/>
    		    <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <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):

    Code:
    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello BenPSP,
    We float things to put other things beside them.
    Try something like this -
    Code:
     <!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" />&nbsp; <a href="Exercises/XHTMLBasics/XHTMLBasics.zip"><strong>XHTMLBasics.zip</strong></a><br/>
                        <img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />&nbsp; <a href="Exercises/XHTMLBasics/01-xhtml.pdf"><strong>01-xhtml.pdf</strong></a><br/>
                        <img src="Pictures/FileTypes/pdf.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/01a-lists%26tables.pdf"><strong>01a-lists&amp;tables.pdf</strong></a><br/>
                        <img src="Pictures/FileTypes/txt.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/content.txt">content.txt</a><br/>
                        <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lquiz.gif">lquiz.gif</a><br/>
                        <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lsmile.gif">lsmile.gif</a><br/>
                        <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lwot.gif">lwot.gif</a><br/>
                        <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/layout_table.html">layout_table.html</a><br/>
                        <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/lists.html">lists.html</a><br/>
                        <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/netskills.gif">netskills.gif</a><br/>
                        <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/other.html">other.html</a><br/>
                        <img src="Pictures/FileTypes/picture.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/small_logo.gif">small_logo.gif</a><br/>
                        <img src="Pictures/FileTypes/html.png" alt="**" class="icon" />&nbsp;  <a href="Exercises/XHTMLBasics/tables.html">tables.html</a>
                    </div>
                    <p class="right">
                        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&amp;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.
                    </p>
                </fieldset>
    <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 04-08-2010 at 06:49 PM. Reason: added fieldset
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.



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

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tried a two column table?

    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

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Generallt speaking, we don't use tables for positioning graphics.

    Look here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Apr 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    OK,, Try this site..

    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


  •  

    Posting Permissions

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