...

View Full Version : Positioning image



SteveH
05-22-2010, 11:35 AM
Hello

I have a site here:

http://www.proofreading4students.com

After the row of images, there is another image called 'our work', and I just can't seem to move it lower down (it is too close to the images above).

The relevant code is here:


<ul>
<li><a href="#">Home</a></li>
<li><a href="work.asp">Service</a></li>
<li><a href="rates.asp">Rates</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
</div>


<div id="newBox"><img src="./images/main.gif" alt="Celebration!" title="Celebration!" width="500" height="254">
</div>

<div id="#">

<h3 class="features3">features</h3>
<div id="features">

<p class="main">We provide proofreading, etc</p>

The site uses an external style sheet.

Any suggestions woulf be appreciated!

Thanks.

Steve

indo
05-22-2010, 04:22 PM
gotta scroll to the right. I highlighted the CSS to add in read.



<div id="newBox">
<img src="./images/main.gif" alt="Celebration!" title="Celebration!" width="500" height="254" style="margin-top:4px;" />
</div>

Excavator
05-22-2010, 05:00 PM
Hello SteveH,
You should check in with the validator. # is not a valid name for an id.

code beginner
05-22-2010, 08:21 PM
i don't see an image called "our work".

when you want the most guaranteed pixel precision, tables always give you that. so you can convert this stuff into tables and get guaranteed location capabilities with fine precision if the spacing is not the way you want.

there are "anti-table evangelists" out there who will automatically try to sell you on the idea of never using tables. don't buy into that. there are situations where tables give you the exact type of solution and reliability you want.

Excavator
05-23-2010, 12:09 AM
Yes, use tables for layout - refuse to learn how to do it the correct way because those that have learned how ... are just wrong.

Obligitory link about tables included in my signature line.

SteveH
05-24-2010, 11:47 AM
Sorry, my mistake. This is the actual 'our_work.gif' in my normal HTML:


<div id="#">

<h3 class="features3">features</h3>
<div id="features">


I'm not too sure, Excavator, how this # has evolved!

In my external CSS style sheet, I have:


h3.features3 { background: url(../img/our_work.gif) no-repeat top left; height: 30px; text-indent: -9999px;}

Any advice on pushing the 'our_work.gif' down the page a little would be appreciated.

Thanks.

Steve

Excavator
05-24-2010, 12:56 PM
I'm not too sure, Excavator, how this # has evolved!

In my external CSS style sheet, I have:


h3.features3 { background: url(../img/our_work.gif) no-repeat top left; height: 30px; text-indent: -9999px;}

Any advice on pushing the 'our_work.gif' down the page a little would be appreciated.

Thanks.

Steve

First you should change that # to something valid so you can style it.
Check the rest of your code with the validator, there are some other things you need to fix.

Then look at #newBox, there is not much reason to float a full width element. That image would do fine there on it's own without being in it's own container.

SteveH
05-24-2010, 02:35 PM
Hello Excavator

Thanks for your message.

I have checked the CSS validator and get the following errors (I am not sure how serious they are):


9 Parse Error { margin: 0; padding: 0; border: 1; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
39 Parse Error } { width:160px height: 254px; margin: 0 0 0 225px; background: #fc6; }
47 Parse Error } { width:160px height: 254px; margin: 0 0 0 225px; background: #fc6; }
55 Parse Error } { width:160px height: 254px; margin: 0 0 0 225px; background: #fc6; }

I have also removed the container surrounding the image; it hasn't changed anything as you said.

I'll go through the HTML errors, though some of them are false (my head tag is closed!).

My guess is that the # is preventing me from moving the image.

Cheers

Steve

Excavator
05-24-2010, 03:27 PM
Normally you would move an element down by adding bottom margin to the element above it. That lends itself well to the cascading flow of the document. If it's not possible to margin it down from above there is nothing wrong with putting a top margin on the actual element you intend to move.

Your code online doesn't show your updated version yet.


I'll go through the HTML errors, though some of them are false (my head tag is closed!).

No false errors there. The validator is rarely wrong but often confusing.

Your head looks open to the validator because of the invalid code above it. Add the missing xmlns statement and the closing tag for head becomes relative.

Try making the head of your document look 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>proofreading4students</title>

<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>

<style type="text/css">
---your CSS
</style>
</head>

SteveH
05-25-2010, 09:24 AM
Hello Excavator

I'll try adding a margin a little later to push the image down - thanks for your idea - but I'll try to resolve the HTML errors first.

Yesterday I had 64 errors, but including your heading has reduced those to 17 errors.

Unfortunately, I have now lost my (ASP) date and my footer (which included an ASP counter). Any suggestions as to how I may get them back?

Thanks for all your help again.

Steve

rakasv
05-25-2010, 10:16 PM
have you seen this page (http://www.w3schools.com/css/css_positioning.asp)? it can be very very useful

SteveH
05-26-2010, 09:22 AM
Hello Rakasv

Thanks for your message.

I'll take a look at that page and try to reposition the image.

In the meantime, I have had to reuse my


<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>proofreading4students</title>

<link rel="stylesheet" href="../_common/css/main.css" type="text/css"
media="all">
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>

<p style="text-align:right;padding-right:10px;">
<!--#include file="date.inc"-->
</p>

<style type="text/css">

#footer {
width:550px;

as opposed to Excavator's


<!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>proofreading4students</title>

<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>

<style type="text/css">
---your CSS
</style>

in order to get my footer and date to reappear. It means that the HTML Validator gives me 18 errors, unfortunately.

Steve

SteveH
05-26-2010, 10:03 AM
Hello

I have tried to position the small image using the margin. In my HTML I have:


<div id="#">

<h3 class="features3">features</h3>
<div id="features">


This related to the following in my CSS file:


h3.features3 { background: url(../img/our_work.gif) no-repeat top left; height: 30px; margin 0 0 0 0; text-indent: -9999px;}

Yet, whatever value(s) I place in here margin 0 0 0 0;, it makes no difference - the image refuses to budge.

I'll take a look at the W3 schools link that Rakasv kindly sent.

Steve

abduraooft
05-26-2010, 12:00 PM
when you want the most guaranteed pixel precision, tables always give you that. so you can convert this stuff into tables and get guaranteed location capabilities with fine precision if the spacing is not the way you want.

there are "anti-table evangelists" out there who will automatically try to sell you on the idea of never using tables. don't buy into that. there are situations where tables give you the exact type of solution and reliability you want. I wish this was a joke :D

abduraooft
05-26-2010, 12:03 PM
In my HTML I have:


<div id="#">
Why are you still using an invalid markup?

SteveH
05-26-2010, 12:40 PM
OK, just removed that abduraooft (plus another one that I found). It has made no difference to the layout (showing that it was redundant anyway).

Now the code looks like this (I have put in bold what relates to the image I would like to position):


<div id="container">

<div class="halfmoon">
<ul>
<li><a href="#">Home</a></li>
<li><a href="work.asp">Service</a></li>
<li><a href="rates.asp">Rates</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
</div>

<div id="newBox"><img src="./images/main.gif" alt="Celebration!" title="Celebration!" width="500" height="254">
</div>


<h3 class="features3">features</h3>
<div id="features">

<p class="main">We provide proofreadin

Thanks for your help.

Steve

abduraooft
05-26-2010, 12:55 PM
Okay, now remove flloat:left; from #newBox and add a margin, say margin-top:20px; to h3.features3

SteveH
05-26-2010, 01:07 PM
I have removed this (in bold) from the main.css file:


#newBox {float:left;}
{
width:160px
height: 254px;
margin: 0 0 0 225px;
background: #fc6;
}

but it has now put all of my page out.

Steve

abduraooft
05-26-2010, 01:23 PM
#newBox

{

width:160px

height: 254px;

background: #fc6;

}

#newBox1 {float:left;}

{

width:160px

height: 254px;

margin: 0 0 0 225px;

background: #fc6;

}



#newBox2 {float:left;}

{

width:160px

height: 254px;

margin: 0 0 0 225px;

background: #fc6;

}
What's all these? Don't you know the basic syntax of CSS?
What I was asking to do is

#newBox

{

width:160px

height: 254px;

margin: 0 0 0 225px;

background: #fc6;
/*float:left*/
}
h3.features3 {
background:url("../img/our_work.gif") no-repeat scroll left top transparent;
height:30px;
text-indent:-9999px;
margin-top:20px;
}

SteveH
05-26-2010, 02:01 PM
Those other 'newBox' items were left over from previous scripting and I have now removed them.

This is what I have now in my main.css:
#newBox

{
width:160px
height: 254px;
margin: 0 0 0 225px;
background: #fc6;
/*float:left*/
}

and then:


h3.features3 {
background: url(../img/our_work.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}

I have also removed this:
.clear{
clear:both;
}

I can't tell in the 'our_work' image has moved or not but the main image, governed by this:


<div id="newBox"><img src="./images/main.gif" alt="Celebration!" title="Celebration!" width="500" height="254">
</div>

is still off centre (this is the image affected by the newBox changes).

Steve

abduraooft
05-26-2010, 03:06 PM
You've a large margin-left applied at
#newBox {
background:none repeat scroll 0 0 #FFCC66;
margin:0 0 0 225px;
}, which is pushing that block to the right.

SteveH
05-26-2010, 03:24 PM
Slap on the wrist! Many thanks for seeing that, abduraooft. It looks fine now.

Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum