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.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question Please help with precise positioning of bg image?

    (I think this should be a background image, but I'm unsure.) Please refer to the attached images "Sample1.jpg" and "Sample2.jpg" and also my attached stylesheet. I want Sample1.jpg to ultimately look like Sample2.jpg. The "raccoon" image appearing on Sample2.jpg is a transparent PNG, cut away to be fitted along the right edge of the forum's header.

    Is this possible and, if so, would someone be kind enough to assist me with how to accomplish positioning the raccoon PNG so that it aligns as Sample2.jpg suggests?

    Thank you so much
    Attached Thumbnails Attached Thumbnails Please help with precise positioning of bg image?-sample1.jpg   Please help with precise positioning of bg image?-sample2.jpg  
    Attached Files Attached Files

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,690
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello IAmGrammy,
    Your sample images show what you want to accomplish but nothing more. Give us the transparent raccoon png so we have something to work with.
    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

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I'm sorry, Excavator, I forgot to do that.

    I'm attaching it now, and thank you so much for checking on this.
    Attached Thumbnails Attached Thumbnails Please help with precise positioning of bg image?-raccoonwrap.png  

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,690
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Since your image is hanging outside of any container, it's easiest to use absolute positioning which will remove it from the natural flow of the document.
    Something 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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 0 0 400px;
    	background: #999;
    }
    #header {
    	height: 250px;
    	position: relative;
    	background: #963;
    }
    #raccoon {
    	top: 20px;
    	right: -64px;
    	position: absolute;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="header">
           	  <img src="http://www.codingforums.com/attachment.php?attachmentid=11152&amp;d=1336769785" alt="raccoon peeking around edge" width="124" height="210" id="raccoon" />
    		<!--end header--></div>
        <!--end container--></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

  • Users who have thanked Excavator for this post:

    IAmGrammy (05-11-2012)

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thank you so much, Excavator. It landed a bit awkwardly on first try, but I can see that it just needs nudging a bit, now, to fit correctly. I really appreciate your help with this!

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    If you don't mind, Excavator, taking a look at these two images... One is how the header renders with Internet Explorer. The other is how it renders (correctly) with Firefox, Safari, Opera, etc. Only Internet Explorer is botching it up (according to Netrenderer.com. I don't actually have IE on my Mac to test it on.)

    Also attaching my stylesheet again; would you know of some sort of tweak to make IE render this as other browsers do?

    Thank you for your time.
    Attached Thumbnails Attached Thumbnails Please help with precise positioning of bg image?-internetexplorer.jpg   Please help with precise positioning of bg image?-allotherbrowsers.jpg  
    Attached Files Attached Files

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,690
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    You keep asking the wrong question.
    Instead of posting what your code is doing, post your code so we can figure out why it's doing it.

    Your CSS really doesn't mean much without the markup that it's styling.

    Even better, a link to the test site always makes it easier.


    Just as a guess, did you see this part in the snippet I posted? Very important.
    Code:
    #header {
    	height: 250px;
    	position: relative;
    	background: #963;
    }
    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
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Yes, I'm afraid I'm not very adept as asking intelligent questions. I'm a novice, just winging it by watching others.

    I'm attaching the template with the coding in it. (It's a PHP file, but I had to save it as a TXT file in order to be able to attach it here.) I did rename the header section, since the CSS already had a header section (if that makes sense, and it probably doesn't). I probably shouldn't have done it, but I did.


    Thank you for your patient understanding. I really am trying to learn.
    Attached Files Attached Files
    Last edited by IAmGrammy; 05-12-2012 at 02:49 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,690
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    It looks like my previous post would answer your question.

    Right now, the raccoon is positioned relative to the top left corner of the browser window.

    That doesn't work with your centered #wrap because the distance between the top left of the broswer window and the top left of #wrap is different every time the browser is resized.

    Making the raccoon positioned relative to #wrap make the image move when #wrap moves.

    Does that make sense?

    Add these bits highlighted in red -
    Code:
     #header {
    	 position: relative;
    	 height: 160px;
    	 background: #444 url(images/art/topperbg.png) 0 0 repeat-x;
    position: relative;
    	 
    }
    /*#container {
    	min-width: 900px;
    	margin: 0 auto;
    	padding: 0;
    	overflow: visible;
    	background: #EEEEEE;
    }
    #header-2 {
    	height: 250px;
    	position: absolute;
    	background: transparent;
    }*/
    #raccoon {
        /*
    float: right;
    right: -972px;
    */
    	top: 34px;
    	right: -64px;
    	position: absolute;
    }
    And remove this bit in red from your markup -
    Code:
    <a name="forum_top"></a>
      <div id="wrap">
    	 <div id="header">
    		  <div id="head-l">
    <div id="container">
        	<div id="header-2">
           	  <img src="http://whereikeepmystuff.com/hold/Themes/Actualism12/images/art/raccoonwrap.png" alt="raccoon peeking around edge" id="raccoon" height="210" width="124">
    		<!--end header-2--></div>
        <!--end container--></div>
    
    		  <div id="head-r">
    				  <div id="userarea" class="clearfix">				
    		Welcome, <b>Guest</b>. Please <a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=nsj4lfopodkmur7b3pcfsngsa2&amp;action=login">login</a> or <a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=nsj4lfopodkmur7b3pcfsngsa2&amp;action=register">register</a>.
    		<script language="JavaScript" type="text/javascript" src="http://whereikeepmystuff.com/hold/Themes/default/sha1.js"></script>
    		<form action="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=nsj4lfopodkmur7b3pcfsngsa2&amp;action=login2" method="post" accept-charset="UTF-8" style="margin: 4px 0;" onsubmit="hashLoginPassword(this, 'cd6d1246b18ed25e273a8a1e37fab6e7');">
    			 <
    There is no need to wrap that image in two div elements. See divitis here.
    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
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Good news and bad.

    First of all, making those edits just as you gave them to me, renders the header image perfectly in IE (and I never thought I'd see the day)! That's amazing; thank you!

    The only issue is that the bottom portion extends the width of the page, now, instead of complying with the width of the header.

    I've checked the edits several times before posting back to make sure I did them correctly.


    EDIT: Oh, wait.... it's that min-width in the container (that I stupidly put there, earlier) isn't it? But that's commented out...
    Attached Thumbnails Attached Thumbnails Please help with precise positioning of bg image?-sample3.jpg  
    Last edited by IAmGrammy; 05-12-2012 at 02:49 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,690
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    It looks like you have an extra closing </div> that closes #wrap too soon.
    Checking your code in the validator shows an extra one...you just need to figure out which one to remove so #wrap encloses the whole site again.

    Maybe this one ...
    Code:
    	<form action="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=login2" method="post" accept-charset="UTF-8" style="margin: 4px 0;" onsubmit="hashLoginPassword(this, '29fb6c06115351ae7c556ed210d6f457');">
    			 <b>Username : </b><input name="user" class="inputs" size="14" type="text"> <b>Password : </b><input name="passwrd" class="inputs" size="14" type="password">
    			<input class="butt" value="Login" type="submit">
    			<input name="hash_passwrd" value="" type="hidden">
    		</form>May 11, 2012, 08:07:27 PM<br>
    	</div>
    		  <div id="searcharea">
    		  <form action="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=search2" method="post" accept-charset="UTF-8">
    		  <input class="inputbox" name="search" value="Search..." onfocus="this.value = '';" onblur="if(this.value=='') this.value='Search...';" type="text">
    		</form>
    		</div>
    		<a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;" title=""><span id="logo"> </span></a>
    	  </div>	 
    	 </div>
    	</div>
    	<div id="toolbar">
    	 
    	 <div id="menu">
    		<ul id="navi"><li class="current"><a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;"><span>Home</span></a></li><li><a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=help"><span>Help</span></a></li><li><a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=arcade"><span>Arcade</span></a></li><li><a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=register"><span>Register</span></a></li><li><a href="http://whereikeepmystuff.com/hold/index.php?PHPSESSID=70r6hujfjdicfdn1si6vlb9ta3&amp;action=login"><span>Login</span></a></li>
    	 </ul></div>
    	<br class="clr">
    	 </div>
    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

  • Users who have thanked Excavator for this post:

    IAmGrammy (05-12-2012)

  • #12
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    That's the one! I have acute divitis.

    Excavator, you're a rock star! It's looking great in all browsers, now.

    Thank you so, so much!


    (Not sure how to mark this resolved, but it is!)

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


  •  

    Posting Permissions

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