Advanced Search

Results 1 to 8 of 8

Thread: Centering a title image...

  1. #1
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Centering a title image...

    Here is a link to my site:

    http://www.rezzurrectiontaxidermy.com/

    Problem: The title image moves on different screen sizes. On a 20" monitor is how it should look but going down to a 15 or going wider moves the image to the right for some reason. Could someone check out my code and see what I am doing wrong or not doing. Thanks!!
    Last edited by jscheuer1; 08-14-2013 at 01:37 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Where you have it, it's a child of an element that's narrower than it is. It really should be a child of either the body or the wrapper (pagewrap).

    Moving it to here with the styles as indicated looks about right:

    Code:
    <body >
    
    	<div id="pagewrap">
    		
    		<div id="bg"><img src="./Rez_Pics/Logo2.jpg" width="100%" /></div>
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="">Gallery</a></li>
    				<li class="item2"><a href="">Tips & Hints</a></li>
    				<li class="item3"><a href="">About</a></li>
    				<li class="item4"><a href="">Contact</a></li>
    				
    			</ul>
    		</div>
    	</div>
    	<div style="position:absolute; width: 500px; height: 375px; top: 20px; left: 50%; margin-left: -250px;"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
    	</div>
    
    
    </body>
    Notes: I removed the id to avoid any conflict with styles set for it in the stylesheet. These styles can and should be in the stylesheet. The existing ones for it in the stylesheet should be removed. Then it's id can be restored and used to set it to these new styles in the stylesheet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chadlexmorgan (08-14-2013)

  4. #3
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Thanks again John, that worked perfectly. One more question if I may, on a wide screen monitor it is cutting the bg img in half. Is it an issue with the media-queries or something else?? Thanks

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Do you mean the 3x3 image - the actual background image, or the 600x429 image, the image src attribute of the img tag located in the bg div?

    And do you mean in half exactly, or just that part of it is cut off?

    And do you mean cut vertically, or horizontally?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    The image src attribute of the img tag located in the bg div, cut horizontally. You would have to scroll to see the rest of the image.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    OK, that's what I thought, but as I got into the explanation, I wasn't sure. That image is 600x429, an aspect ratio of 1.4 and has it's width specified (100%) but not its height, so it will scale (maintain that aspect ratio) regardless of how wide it is. So, unless the window is also at that same aspect ratio, either part of the bottom will be cut off or there will be blank space at the bottom. In many cases where the bottom is cut off, there's enough 'empty' space at the bottom of the image that you don't notice much. But at a certain point, you do.

    Now there may be a way, but I can't think of one right now, to do this without the CSS 3 background-size property, which means it will not scale in IE 8 and less, but IE 9+ and all other modern browsers will be fine in almost all widow shapes and sizes, IE 8 and less should be acceptable, in them the image will show in its native dimensions:

    Code:
    <body >
    
    	<div id="pagewrap">
    		
    		<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="">Gallery</a></li>
    				<li class="item2"><a href="">Tips & Hints</a></li>
    				<li class="item3"><a href="">About</a></li>
    				<li class="item4"><a href="">Contact</a></li>
    				
    			</ul>
    		</div>
    	</div>
    			<div style="position:absolute; width: 500px; height: 375px; top: 20px; left: 50%; margin-left: -250px;"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
    	</div>
    
    
    </body>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chadlexmorgan (08-15-2013)

  9. #7
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    John, perfect!! Thank you!! Very much appreciated!

  10. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Great! I just figured out how to get it to scale in IE 8 and less, just put this in the head of the page:

    Code:
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chadlexmorgan (08-16-2013)

Similar Threads

  1. Use image in the window title dhtmlwindow script
    By antonyf in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-17-2012, 01:40 PM
  2. Replies: 2
    Last Post: 01-03-2012, 10:38 AM
  3. Resolved <title> tag with image
    By keyboard in forum HTML
    Replies: 3
    Last Post: 08-06-2011, 05:26 AM
  4. Replies: 1
    Last Post: 11-19-2008, 03:04 AM
  5. Title to image convert problem !!!
    By winpeace in forum PHP
    Replies: 1
    Last Post: 10-20-2008, 07:04 PM

Bookmarks

Posting Permissions

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