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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Positioning image

    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:

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

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    gotta scroll to the right. I highlighted the CSS to add in read.

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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello SteveH,
    You should check in with the validator. # is not a valid name for an id.
    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

  • #4
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    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
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Sorry, my mistake. This is the actual 'our_work.gif' in my normal HTML:

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

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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm not too sure, Excavator, how this # has evolved!

    In my external CSS style sheet, I have:

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

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    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>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>
    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

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    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

  • #11
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    have you seen this page? it can be very very useful
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #12
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    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

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

    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>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
    Last edited by SteveH; 05-26-2010 at 09:24 AM.

  • #13
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello

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

    Code:
    <div id="#">
    
    <h3 class="features3">features</h3>
    <div id="features">
    This related to the following in my CSS file:

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

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Quote Originally Posted by code beginner View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    In my HTML I have:

    Code:
    <div id="#">
    Why are you still using an invalid markup?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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