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

    UL image problem

    Hi, I am very new to HTML/CSS so you will have to excuse my uselessness!

    Please see this webpage

    http://www.militarystar.co.uk/pages/products.html

    I set up a UL image in my stylesheet but for some reason this isnt aligning with the text. The star should be next to the text "Available in M/L etc...." but it appears at the left hand side of the page.

    This is the Stylesheet I am using...

    body {
    font-size: 10pt;
    font-weight: bold;
    background-color: #336600;
    color: white;
    line-height: 14pt;
    line-left: 5pt;
    line-right: 5pt;
    padding-top:5pt;
    text-align:center;
    text-indent:24px;
    }

    h1 {
    font: 14pt Verdana;
    color: white;
    font-weight: bold;
    line-height: 20pt;
    text-align:center;
    }

    h2 {
    font: 10pt Verdana;
    color: white;
    font-weight: bold;
    line-height: 10pt;
    }

    h3 {
    font: 8pt Helvetica;
    color: white;
    font-weight: bold;
    line-height: 10pt;
    }

    p {
    font: 8pt Helvetica;
    color: white;
    font-weight: bold;
    line-height: 10pt;
    }

    div.imageleft {
    float:left;
    clear:all;
    text-align:center;
    font-size:9px;
    font-style:italic;
    }

    img {
    padding:6px;
    border:none;
    }

    ul{
    list-style-image: url(/images/bulletpoint.jpg);
    }


    and this is the html

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org.TR/xhtml11/DTD/xhtml11/dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Products</title>
    <link rel="stylesheet" type="text/css" href="productpagestyles.css" />
    </head>

    <body>
    <img src="/images/military star logo.jpg" alt="Military Star Logo" />
    <h1> Products </h1>
    <hr />
    <p><div class="imageleft">
    <a href="http://www.militarystar.co.uk/images/ghillie%20suit.jpg">
    <img src="/images/ghillie suit.jpg" alt= "Ghillie Suits" width="200" height="200"/></a>
    <br/>Click image to enlarge</div>
    </p>
    <h1>Great Value Ghillie Suits.</h1>
    <ul>
    <li>Available in M/L and XL/XXL.</li>
    </ul>
    <a href="http://www.militarystar.co.uk/">Back to the homepage</a>
    </body>
    </html>

    Can anyone advise how to overcome this?

    Thanks

  • #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
    Good morning dogbash,
    It's always easier to keep images and captions/descriptions in the same containing div so you can control where things are.
    In your example h1 and your ul have no width so they inherit from their parent, the full width body of the document.

    Try something like this. You can see h1 and ul still have no width but we can control them with their parent container -
    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 {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 20px 20px 40px;
    	background: #999;
    }
    .entry {
    	width: 600px;
    	margin: 20px auto 0;
    	padding: 5px;
    	overflow: auto;
    	border: 3px double #ccc;
    }
    .entry a.item {
    	width: 200px;
    	float: left;
    	font-size: 9px;
    	color: white;
    	line-height: 14px;
    	text-align: center;
    	font-style: italic;
    }
    .description {margin: 0 0 0 220px;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div class="entry">
            	<a href="http://www.militarystar.co.uk/images/ghillie%20suit.jpg" class="item"><img src="http://www.militarystar.co.uk/images/ghillie%20suit.jpg" alt= "Ghillie Suits" width="200" height="200"/> click image to enlarge</a>
                	<div class="description">
                    	<h1>Great Value Ghillie Suits.</h1>
                            <ul>
                            	<li>Available in M/L and XL/XXL.</li>
                            </ul>
                    <!--end description--></div>
            <!--end entry--></div>
        	<div class="entry">
            	<a href="http://www.militarystar.co.uk/images/ghillie%20suit.jpg" class="item"><img src="http://www.militarystar.co.uk/images/ghillie%20suit.jpg" alt= "Ghillie Suits" width="200" height="200"/> click image to enlarge</a>
                	<div class="description">
                    	<h1>Great Value Ghillie Suits.</h1>
                            <ul>
                            	<li>Available in M/L and XL/XXL.</li>
                            </ul>
                    <!--end description--></div>
            <!--end entry--></div>
        <!--end container--></div>
    </body>
    </html>
    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
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thanks for the reply. I am still struggling to get my bullet point to go next to the text though. Can you re-load my website page and advise next best step to take to get it looking correct? I'd like the bullet points to be just to the right of the images with the text straight after the bullet points.

    Many thanks,
    Andrew

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    best thing i would do would instead put the img right next to the text where ever you want it like say this

    Code:
    <h1><img src="/images/military star logo.jpg" alt="Military Star Logo" />Great Value Ghillie Suits.</h1>
    Thats what i would do for a quick fix.

    But i would wait to see if Excavator helps you further as he has more knowledge than i do and he is more "professional" at this kind of stuff



    Edit: i would just wait for a little as i just tested it and it did not work.
    Last edited by D34th Maker; 01-20-2012 at 07:50 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    You should start running your code through the validator. It's a great learning tool and catches a lot of little mistakes in your code. See the links about validation in my signature line below.

    You also might be able to use a different approach for your bullet image. Look at a demo of mine here.

    See what these changes do for you, mabye this will be good enough... -
    Code:
    <?xml version="1.0"  encoding="UTF-8"?>
    <!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" xml:lang="en">
    <head>
    <base href="http://www.militarystar.co.uk" />
    <title>Products</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #336600;
    	font-weight: bold;
    	color: #fff;
    	font-size: 10pt;
    }
    #container {
    	width: 1200px;
    	margin: 30px auto;
    	padding: 20px 20px 40px;
    	background: #336600;
    }
    	.entry {
    		width: 1200px;
    		margin: 20px auto 0;
    		padding: 5px;
    		overflow: auto;
    		border: 3px double #ccc;
    	}
    		.entry a.item {
    			width: 200px;
    			margin: 6px;
    			float: left;
    			font-size: 9px;
    			color: #fff;
    			line-height: 24px;
    			text-align: center;
    			font-style: italic;
    		}
    .description {margin: 0 0 0 800px;}
    	ul {list-style: url(/images/bulletpoint.jpg) inside;}
    		li {text-align: left;}
    h1 {
    	font: 14pt Verdana;
    	font-weight: bold;
    	line-height: 20pt;
    	text-align: left;
    }
    h2 {
    	font: 10pt Verdana;
    	font-weight: bold;
    	line-height: 10pt;
    }
    h3 {
    	font: 8pt Helvetica;
    	font-weight: bold;
    	line-height: 10pt;
    }
    p {
    	font: 8pt Helvetica;
    	font-weight: bold;
    	line-height: 10pt;
    }
    img {
    	display: block;
    	border:none;
    }
    </style>
    </head>
    
    <body>
        <div id="container">
            <img src="/images/military star logo.jpg" alt="Military Star Logo" />
            <hr />
        	<div class="entry">
            	<a href="/images/ghillie%20suit.jpg" class="item"><img src="/images/ghillie%20suit.jpg" alt= "Ghillie Suits" width="200" height="200"/> click image to enlarge</a>
                	<div class="description">
                    	<h1>Great Value Ghillie Suits.</h1>
                            <ul>
                            	<li>Available in M/L and XL/XXL.</li>
                            </ul>
                    <!--end description--></div>
            <!--end entry--></div>
        	<div class="entry">
            	<a href="/images/ghillie%20suit.jpg" class="item"><img src="/images/ghillie%20suit.jpg" alt= "Ghillie Suits" width="200" height="200"/> click image to enlarge</a>
                	<div class="description">
                    	<h1>Great Value Ghillie Suits.</h1>
                            <ul>
                            	<li>Available in M/L and XL/XXL.</li>
                            </ul>
                    <!--end description--></div>
            <!--end entry--></div>
        <!--end container--></div>
    
    </body>
    </html>
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by D34th Maker View Post

    Edit: i would just wait for a little as i just tested it and it did not work.
    You're suggesting the same thing I did, you just using different text. Look at it this way with a little added CSS -
    Code:
    <?xml version="1.0"  encoding="UTF-8"?>
    <!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" xml:lang="en">
    <head>
    <base href="http://www.militarystar.co.uk" />
    <title>Products</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #336600;
    	font-weight: bold;
    	color: #fff;
    	font-size: 10pt;
    }
    #container {
    	width: 1200px;
    	margin: 30px auto;
    	padding: 20px 20px 40px;
    	background: #336600;
    }
    	.entry {
    		width: 1200px;
    		margin: 20px auto 0;
    		padding: 5px;
    		overflow: auto;
    		border: 3px double #ccc;
    	}
    .description {margin: 0 0 0 800px;}
    img {
    	display: block;
    	border:none;
    }
    h1 img {
    	float: left;
    	margin: 0 5px 0 0;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div class="entry">
                	<div class="description">
                    	<h1><img src="/images/bulletpoint.jpg" alt="Military Star Logo" width="27" height="24" />Great Value Ghillie Suits.</h1>
                    <!--end description--></div>
            <!--end entry--></div>
    	<!--end container--></div>
    </body>
    </html>
    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


  •  

    Posting Permissions

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