By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,133 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

Why does my image make everything shift down?

P: 3
I can't figure out why my img keeps moving everything down. I have worked on this for a solid 24+ hours and still cannot position this logo. This is the last step. Please help!
The css is:
Expand|Select|Wrap|Line Numbers
  1. .logo { font-family: Times, sans serif;
  2.        font-size: 57px;
  3.        color: #ffffff;
  4.        position: relative; top: 50px; right: 0px; bottom: 0px; left: 65px; }
  5.  
  6. .subtext { font-family: Times, sans serif;
  7.            font-size: 17px;
  8.            color: #f74a89;
  9.            position: relative; top: 75px; right: 0px; bottom: 0px; left: -262px; }
  10.  
  11. .us { font-family: Times, sans serif;
  12.       font-size: 25px;
  13.       color: #ffffff;
  14.       position: relative; top: 43px; right: 0px; bottom: 0px; left: -264px; }
  15.  
  16. img.logoimg { position: relative; top: 0px; right: 0px; bottom: 0px; left: 0px;  }
  17.  
  18.  
The html is:

Expand|Select|Wrap|Line Numbers
  1. <div id="container"><span class="logo">Quiet Solitude</span>
  2.                     <span class="subtext">My Writings on Personal Growth and Mental Health</span>
  3.                     <span class="us">.us</span>
  4.                     <img src="flowervasetransparency.gif" class="logoimg" />    
  5. ............</div>
  6.  




I've tried to do this with Header tags and division tags, the same shifting down happens. I have tried to isolate the cause and it seems to be the image. I have tried positioning the image, but it doesn't correct the shifting. I plan to re-position the image once I fix the shifting. Please help. Cady
Feb 25 '11 #1

✓ answered by drhowarddrfine

Tested this and don't see the problem. Which browser are you using? Are you using a doctype?

Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Images are inline elements just like text. To position them, you need to change their style to 'block'.
Feb 25 '11 #2

P: 3
I tried display: block; but it still leaves a large space under the heading image and all.
Feb 25 '11 #3

drhowarddrfine
Expert 5K+
P: 7,435
Tested this and don't see the problem. Which browser are you using? Are you using a doctype?
Feb 25 '11 #4

P: 3
Display: block; adjusted everything correctly but I had a previous trial's positioning of everything below this causing everything to still go downward. When I added display: block; to the css and re-adjusted the positioning, it all worked perfect. Thanks so much DrHowardDrFine!!!!!!!
Feb 25 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.