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 17
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How to set the background colour and center the image..

    I know it sounds daft; but my attempts to set the backgound colour have not succeeded. I must be suffering from too much Xmas Pud. Help appreciated. I know the code is messy, I am trying to adapt a program.

    Frank

    http://www.exitfegs.co.uk/ExpMenu.html

    Code:
    {
        margin: 0;
        padding: 0;
        border:0;
    }
    body
    {
         width:100%;
         height:100%
    	background-color: #555555;	
    	color: #ffffff;
    	font: 900 10px/1.4 "Lucida Sans", Verdana, Arial, sans-serif;	font-size: 8.5px;
    	font-weight:900;	
    }
    Last edited by effpeetee; 12-28-2007 at 03:25 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You missed the semicolon after height
    Code:
    height:100% ;
    background-color: #555555;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by abduraooft View Post
    You missed the semicolon after height
    Code:
    height:100% ;
    background-color: #555555;
    Thanks abduraooft .

    I now have 20:20 hindsight vision.
    Pity my real sight is not as good.

    What would I do without the Forum and its members?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hmm... I know, and I'd like to remind you about CSSValidator, which can effectively help in similar situations
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by abduraooft View Post
    Hmm... I know, and I'd like to remind you about CSSValidator, which can effectively help in similar situations
    Cor! The original has been validated. I must have accidentally removed the ;

    How do I centre/position the image. Do I need another DIV? or can I use an existing one?


    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove all absolute positions (and related top, left etc) from img and add
    Code:
    text-align:center;
    to #home (div)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by abduraooft View Post
    Remove all absolute positions (and related top, left etc) from img and add
    Code:
    text-align:center;
    to #home (div)
    I don't have any of these except on the home icon. Am I missing something again?

    http://www.exitfegs.co.uk/ExpMenu.html

    Frank
    Last edited by effpeetee; 12-28-2007 at 02:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    remove in red from
    Code:
    <img width="64" height="32" src="home.jpg" alt="return to the home page" style="z-index: 900; left: 468px; position: absolute; top: 6px;"/>
    and add a style to your
    Code:
    <div id="home">
    .........
    </div>
    as
    #home{text-align:center;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I still cannot make it work. Sorry.

    Frank

    http://www.exitfegs.co.uk/ExpMenu.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It seems to be almost(?) centered for me.
    But you've missed * selector in
    Code:
    {
        margin: 0;
        padding: 0;
        border:0;
    }
    and there are 71 errors (mostly due to wrong nesting of <div> and <ul>) in your markup!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Yes, I'll have to deal with the rubbish. It is my "Sources" program being modified.
    I'll sort that out first and see where that gets us.

    Many thanks for your patience.

    http://www.exitfegs.co.uk/ExpMenu.html

    Frank

    EDIT I have tidied it up but I still cannot get the image centered. It still goes to the left
    Last edited by effpeetee; 12-28-2007 at 04:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Frank,
    Lots of extra stuff in there... not sure what else you had in mind but, since it's not a linked CSS file I removed all the extra and re-arranged the markup a bit.
    There was no home icon, you can add that.

    To center the images your linking to, you'll need to make a page for each one to center in. The way it is now, your just linked to the image and you have no control over that.

    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu</title>  
    <style type="text/css">
    body {
      	width: 100%;
      	height: 100%;
      	background-color: yellow;	
    	color: #ffffff;
    	font: 900 10px/1.4 "Lucida Sans", Verdana, Arial, sans-serif;
    	text-align: left;
    }
    * {
        margin: 0;
        padding: 0;
        border: none;
    }
    #menu, #menu2 {
      width: 29%;
      background-color:#551100;
      padding: 5px;
    }	
    	#menu {
    	  float: left;
    	  margin-left: 5%;
    	}
    	#menu2 {
    	  float: right;
    	  margin-right: 5%;
    	}
    .links {
      clear: left;
      margin: 10px 0 0 15px;
    }
    a:link {
      color: #FFF;
      text-decoration:none;  
    }
    a:visited, a:hover, a:active {
      color: #FFFF00;
    }
    </style>
    </head>
    <body>    
    <div id="menu">        
        <ul class="links">
              <li><a href="http://www.exitfegs.co.uk/1.jpg">Tolpuddle martyrs museum.</a></li>
              <li><a href="http://www.exitfegs.co.uk/4.jpg">Higher Came Farm.</a></li>
              <li><a href="http://www.exitfegs.co.uk/7.jpg">In a Japanese Garden.</a></li>
              <li><a href="http://www.exitfegs.co.uk/steve6.jpg">Steve, relaxing on the Bluebell Railway.</a></li>
        </ul>
    <!--end menu--></div>    
            <div id="menu2">
              	<ul class="links">          
                    <li><a href="http://www.exitfegs.co.uk/10.jpg">A bridge somewhere.</a></li>
                    <li><a href="http://www.exitfegs.co.uk/12.jpg">Lawrence of Arabia is buried here.</a></li>
                    <li><a href="http://www.exitfegs.co.uk/13.jpg">Alresford High Street.</a></li>
                    <li><a href="http://www.exitfegs.co.uk/16.jpg">Swanage - Sea front.</a></li>
              	</ul> 
            <!--end menu2--></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

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you for your help. Your code is the best to date.
    But what I am trying to do is:
    To use a text to link to the main jpg and then link back to the original showing of the texts. At present I am using html to present the main image. It works fine accept the as I use the same images in more than one list, it means different html page for each menu that I need to return to. I have nearly 100 html pages which I have repeated four times in order to use in three seperate menus. eg 101a, 101b, 101c. As each page is identical is seems rather silly. Being able to link from the image by linking to its DIV would mean that I could just show the image without an unnecessary html page to carry it, in order to use the pages link.

    Basically I need a text line, linked to main image (jpg) linked back to thumbnails. Nothing else used. I did it once. I linked to a div. I have lost the original program and I am saddled with an 82 year old forgetary. (memory?)

    This is the nearest so far. Picture is centred and the icon is visible.

    http://www.exitfegs.co.uk/ExpMenu2.htm

    Frank
    Last edited by effpeetee; 12-28-2007 at 08:39 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sounds like you need to start looking into using something more dynamic. Does your web host support php?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Sounds like you need to start looking into using something more dynamic. Does your web host support php?
    Yes PHP is available to me.

    At the moment I am not very much use with php although I do have a book - "Learning PHP & MySQL by Michele E.Davis & A Phillips."
    I will need to get reading. What do you suggest I should do?

    Frank
    Last edited by effpeetee; 12-28-2007 at 09:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


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