14 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Hi

I have been trying to position an image in the content div in my css layout - although I have got the text to flow round it the spacing is not great and in NN6 the text is against the image.

I also can't find any good tutorials on this explain how to trouble shoot the problems I'm encountering.

Can anyone shed any light on the best ways of positioning images?

Here is my code, and I don't mind if any errors are highlighted as style sheets are still part of a big learning curve for me,

Many thanks
Emma

------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>

body{
background-color:#D6D6D6;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
a {
text-decoration: none;
font-weight: bold;
color: #666666;
outline: none;
}
a:visited {
color: #666666;
}
a:active {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: underline;
}
#wrapper{
width: 777px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}
#banner{
height: 73px;
background-image: url(top.jpg);
background-repeat: no-repeat;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul{
/*/*/
padding: 0;
margin: 0;
background-color: #9B9B9B;/* */
}
#nav ul li{
/*/*/display: inline;
padding: 0;
margin: 0;/* */
}
#nav ul li a{
/*/*/font-size: 80%;
color: #FFFFFF;
background-color: #9B8C79;
text-decoration: none;
padding: 0 10px 0 10px;
border-right: 1px solid #000000;
text-align: center;
width: 11em;/* */
}
#nav ul li a:hover, #nav ul li a:focus{
/*/*/background-color: #990000;/* */
}
#content p{
font-size: 80%;
margin: 20px;
margin-right: 20%;
margin-left: 20%;
}
#content h1{
font-size: 90%;
color: #666666;
padding: 0;
margin-right: 20%;
margin-left: 20%;
}

#content h2{
font-size: 80%;
color: #666666;
margin-right: 20%;
margin-left: 20%;
}

table {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
float: right;
margin-top: 2px;
margin-right: 2px;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
td {
font-family: Verdana, sans-serif;
font-size: 70% ;
padding: 7px;
}
th {
font-family: Verdana, sans-serif;
font-size: 70%;
background: url(stripe.jpg);
padding: 5px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#footer{
border-top: 1px solid #000000;
background-color: #666666;
color: #FFFFFF;
}
#footer p{
clear: both;
font-size: 70%;
margin: 0;
padding: 10px;
}
#sidebar {
/*/*/
float: left;
background-color: #A4C9E8;
font-family: Verdana, sans-serif;
font-size: 80%;
color: #FFFFFF;
margin-top: 2px;
margin-left: 2px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
width: 18%;/* */
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
}
#sidebar ul{
padding: 0;
margin: 0;
background-color:transparent;
list-style-type: none;

}
#sidebar ul li{
padding: 0;
margin: 0;
}
#sidebar ul li a{
background-color: #F7F4E1;
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 3px 0px 3px 7px;
text-decoration: none;
height: 1%;
}
#sidebar ul li a:hover, #leftcol #nav ul li a:focus{
background-color: #91985A;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}
IMG.left-floating {float: left}
</style>
</head>

<body>
<div id="wrapper">
<div id="banner"></div>

<div id="nav">
<ul>
<li><a href="#">Local Offices</a></li
><li><a href="#">Objectives</a></li
><li><a href="#">Board Meetings</a></li
><li><a href="#">Links</a></li
><li><a href="#">Text Version</a></li
></ul>
</div>
<div id="sidebar"><ul>
<li><a href="#">Home</a></li
><li><a href="#">Who We Are</a></li
><li><a href="#">Contact Us</a></li
>
</ul></div>
<div id="content">
<table width="18%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th id="table">Useful Links</th>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> <a href="http://www.sample.org">Northern
Ireland Website </a></td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> Browsealoud Screen
Reader </td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> Title </td>
</tr>
</table>
<h1 class="style3">Welcome </h1>
<p><img class="left-floating" src="bp.jpg"> sjdfhjsd sddjfhsd sdf dkfjkld dfjlskd ddkfj kdfjlksdfjlskd sdkfj ldksf asdjf<p>
<h2>About Us </h2>
<p>dsfkjs;dl sddkfjsdlkfj sddkfjslkddf sadkfjasdl sdkfjas dsddkf sdlkfj sdd kdffdsk lkdsfj lkds</p>
<p>Secondly,
dslkjlsdkjsdkf ksdflksd sdkdfjsddlkf sddkfjas;dlk sddkfjasdd
sdklfsdjk ddskfjdsfkds dkdjfldsdkp>
</div>

<div id="footer"><div id="footer">
<p>Copyright 2005 </p>
</div></div>
</div>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Positioning?

put some padding around the image

img.left-floating {
float:left;
padding:1em;
}

also, you should drop the xml prolog on your page. It will throw IE6 into its quirks mode, which means IE will be using a different box model from that used by CSS compliant browsers. The difference could cause you more problems.

vynsane
vynsane's picture
Offline
Regular
Last seen: 14 years 39 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

Image Positioning?

you should also change the <meta> where you declare content="text/html..." to content="application/xhtml+xml..." since you are using a "xhtml transitional" DTD. why use xhtml if you are going to force the browser to render it as html?

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

Hi
I have added in the changes to the doctype and style sheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to the Quality Improvement Authority</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style>

IMG.left-floating {
float: left;
padding: 1em;
}

However the left hand image is now jumping when the left hand menu is used in IE6!

It also has too much padding round it in both.

any suggestions please,

many thanks
Emma

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Positioning?

Its an IE thing.

To fix it.

Place #content into IEs hasLayout mode. This can be done with the holly hack. In hasLayout mode, #content should now have the margins that have been placed on its decendant elements.

#content {margin: 0 0 0 20%;}
* html #content {height:1px;}  /* holly hack */
#content h1, #content h2, #content p {margin-left:0;}

In this case, a better solution is to force IE into hasLayout mode by giving #content a width. We can do this as we know its width will be 80%. By using a width instead of height, the style no longer needs to be hidden from other browsers.

Final solution:

#content {
  margin: 0 0 0 20%;
  width: 79%;   /* adding to under 100% prevents browser arithmetic rounding issues */
}

#content p, #content h1, #content h2 {
  margin-left: 0;
}

To reduce the amount of space surrounding the image, change the value for padding. e.g. padding 2px 2px 4px 4px;

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Positioning?

I'm going to counter vynsanes suggestion. IE will choke on the xml. It's okay (according to the w3c) to serve xhtml 1.0 as html, but as vynsane has stated, there is no advantage to using it over html 4.01 (other than it being more well formed). If you were using xhtml 1.1 it would have to served as xml. But I'll leave this debate for another thread.

I will ask, however, why you're using transitional? Do you plan on using deprecated elements? I believe all new code should use a strict docytpe. I personally use xhtml 1.0 strict.

Oh, and you definitely want to lose the xml prolog - it throws IE into quirks mode.

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

Thanks...that seems to work well in IE6 and N6.

On a minor point all I can see wrong with the layout is that in IE6 the H1 heading is very close to the top of the page but any added spacing puts the layout out...perhaps this is not fixable tho.

cheers,
Emma

P.S. Here is the code just to make sure it is implemented correctly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">

body{
background-color:#D6D6D6;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
a {
text-decoration: none;
font-weight: bold;
color: #666666;
outline: none;
}
a:visited {
color: #666666;
}
a:active {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: underline;
}
#wrapper{
width: 777px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}
#banner{
height: 73px;
background-image: url(top.jpg);
background-repeat: no-repeat;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul{
/*/*/
padding: 0;
margin: 0;
background-color: #9B9B9B;/* */
}
#nav ul li{
/*/*/display: inline;
padding: 0;
margin: 0;/* */
}
#nav ul li a{
/*/*/font-size: 80%;
color: #FFFFFF;
background-color: #9B8C79;
text-decoration: none;
padding: 0 10px 0 10px;
border-right: 1px solid #000000;
text-align: center;
width: 11em;/* */
}
#nav ul li a:hover, #nav ul li a:focus{
/*/*/background-color: #990000;/* */
}
#content {
margin: 0 0 0 20%;
width: 79%; /* adding to under 100% prevents browser arithmetic rounding issues */
}

#content p, #content h1, #content h2 {
margin-left: 0;
}
#content p{
font-size: 80%;
color: #666666;
}
#content h1{
font-size: 90%;
color: #666666;
}

#content h2{
font-size: 80%;
color: #666666;
}

table {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
float: right;
margin-top: 2px;
margin-right: 2px;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
td {
font-family: Verdana, sans-serif;
font-size: 70% ;
padding: 7px;
}
th {
font-family: Verdana, sans-serif;
font-size: 70%;
background: url(stripe.jpg);
padding: 5px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#footer{
border-top: 1px solid #000000;
background-color: #666666;
color: #FFFFFF;
}
#footer p{
clear: both;
font-size: 70%;
margin: 0;
padding: 10px;
}
#sidebar {
/*/*/
float: left;
background-color: #A4C9E8;
font-family: Verdana, sans-serif;
font-size: 80%;
color: #FFFFFF;
margin-top: 2px;
margin-left: 2px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
width: 18%;/* */
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
}
#sidebar ul{
padding: 0;
margin: 0;
background-color:transparent;
list-style-type: none;

}
#sidebar ul li{
padding: 0;
margin: 0;
}
#sidebar ul li a{
background-color: #F7F4E1;
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 3px 0px 3px 7px;
text-decoration: none;
height: 1%;
}
#sidebar ul li a:hover, #leftcol #nav ul li a:focus{
background-color: #91985A;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}
IMG.left-floating {
float: left;
padding: 10px 10px 0px 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner"> </div>

<div id="nav">
<ul>
<li><a href="#">Local Offices</a></li
><li><a href="#">Objectives</a></li
><li><a href="#">Board Meetings</a></li
><li><a href="#">Links</a></li
><li><a href="#">Text Version</a></li
></ul>
</div>
<div id="sidebar"><ul>
<li><a href="#">Home</a></li
><li><a href="#">Who We Are</a></li
><li><a href="#">Contact Us</a></li
>
</ul></div>
<div id="content">
<table width="18%" border="0" cellpadding="0" cellspacing="0" summary="Useful Links">
<tr>
<th id="table">Useful Links</th>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> <a href="http://www.url.org">Sample Link</a></td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> Browsealoud Screen
Reader </td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> IT Commission </td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> IT Commission </td>
</tr>
<tr>
<td><img src="bullet.jpg" width="12" height="12" /> IT Commission </td>
</tr>
</table>
<h1>Welcome </h1>
<p><img src="bp.jpg" alt="Person holding cup" class="left-floating"/> blah blah blah blah blah blah</p>
<h2>About Us </h2>
<p>In delivering on its responsibilities, blah blah blah Firstly, it will inspect the blah blah bla</p>
<p>Secondly,
blah blah blah blahp>
</div>

<div id="footer">
<p>Copyright 2005 </p>
</div>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Image Positioning?

vynsane wrote:
you should also change the <meta> where you declare content="text/html..." to content="application/xhtml+xml..." since you are using a "xhtml transitional" DTD. why use xhtml if you are going to force the browser to render it as html?
This is not a good idea. XHTML1.0 may be delivered as text/html. XHTML1.1 should be delivered as application/xhtml+xml.

If delivered as application/xhtml+xml, IE cannot render it. Ah, you say. "I've used application/xhtml+xml and IE works just fine, thank you." Well, that's not quite right. The server sends a header that includes the file's MIME type, and that overrides the meta data. The server must be configured to either not send a MIME type (that can cause problems you do not want), or to send the right one.

See this XHTML Doc. If you check the response header, you'll see the content type. Try opening the file in IE.

Now look at response header on one of your 'xhtml+xml' files. The header shows 'document type: text/html', does it not?

As a side note, open a broken xhtml doc. The only error is a missing closing tag.

To summarize, use xhtml1.0 with a content type of text/html. Do not use application/xhtml+xml until IE learns to render it, and until you configure your server to apply the correct header (or you use scripting to generate the header).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

Wolfcry911

I use Dreamweaver which automatically inserts the transitional doctype when you make the page XHTML compliant.

I have lost the xml prolog - thanks!

BW
Emma

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Image Positioning?

You will also want to read up on Shorthand CSS - it will cut down most of your style declarations, reducing your page size.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Positioning?

Emma wrote:
On a minor point all I can see wrong with the layout is that in IE6 the H1 heading is very close to the top of the page but any added spacing puts the layout out...

FF seems to be rendering some margin-top for #content h1 where as IE isn't. By default most block elements (except <div>) have a margin-top (and margin-bottom) of 1em. I am not sure what IE is up to, but its not unusual for IE to go its own way. :?

Anyways, specify a margin-top value for #content h1 to get both rendering in a similar manner.

e.g.
#content h1 {margin-top:1em;}

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

Hi
Thanks for the explantion Chris, that works.

However I have just realised that the fix for the jumping image now means that the content is not centred in a middle column but overspills into the third column. :?

How can I have the content in a centred column as before with the image displayed correctly & not jumping?

I don't understand the Holly hack enough to add it into my previous code without affecting the layout.

Many thanks
Emma

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Positioning?

I am not sure what you mean. I am worried about these jumping images Tongue

Here is my mock-up of your page (obviously I don't have access to your images). I have been unable to get the images to jump #-o and I am not sure what you mean by the second column spilling into the third column.

Does my mock-up work properly for you?
Can you make a screen grab of your page (or mine) and annotate it where you are seeing the problems?

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

[img]D:\Quality Improvement Council\sample.jpg[/img]

Not sure if I know how to do the image upload - here goes...
Basically when the page is refreshed or the mouse is rolled over the left hand menu the image moves.

thanks
emma

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Image Positioning?

Chris
I have got that pesky jumping image under control....thanks for the mock up Smile

Strangely it only started jumping when I removed the xml prologue...typical.

cheers
emma