...

View Full Version : UL image problem



dogbash
01-20-2012, 03:15 PM
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

Excavator
01-20-2012, 04:30 PM
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 -
<!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>

dogbash
01-20-2012, 06:19 PM
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

D34th Maker
01-20-2012, 07:39 PM
best thing i would do would instead put the img right next to the text where ever you want it like say this


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

Excavator
01-20-2012, 07:53 PM
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 (http://nopeople.com/CSS%20tips/li_image/index.html).

See what these changes do for you, mabye this will be good enough... -
<?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>

Excavator
01-20-2012, 08:11 PM
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 -
<?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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum