2+2 =? pic doesn't fit in defined area

rubyfruit · #1 (**permalink**) Oct 11th, 2006, 12:39

Hi,

I have the following bit of HTML:

<div id="content">
 
   <img src="petetest.jpg" width="625px" height="420px" alt="sculpture" />
  </div>

I have 2 columns contained within an Outer div which is centred.

Code: Select all

html, body { margin: 0; padding: 0; background-color: rgb(244,242,240); font-size: 101%;}
#outer { height: 420px; width: 700px; background-color: black; }
#outer { position: absolute; top: 50%; margin-top: -210px; left: 50%; margin-left: -350px; }
 
#nav {  height:420px; width: 75px; background-color: pink; float: left; border-right: 2px solid black; }
#content { background-color: blue; height: 420px; }

The colours are just so I can see what's happening.

The image will take up the entire space of the right column. If the image is 625px (resized in Paint Shop) and the available space is 700-75px, ie 625px why does the picture place itself below the nav div? It will place itself correctly when I increase the size of the outer div to 706px.

Just wondered why this happened.

Thanks. R

Ryan Fait · #2 (**permalink**) Oct 11th, 2006, 16:51

Can you post all of the HTML? I'm a bit confused right now.

rubyfruit · #3 (**permalink**) Oct 11th, 2006, 16:57

Ok:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html id='carver'>
 
 <head>
  <title>Sculptor &amp; Woodcarver</title>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 
  <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
 </head>
 
 <body>
 
 <div id='outer'> 
  <div id='nav'>
 
  </div> <!-- End of nav -->
 
  <div id="content">
 
  <img src="petetest.jpg" width="625px" height="420px" alt="sculpture" /> 
 
  </div> <!-- End of content --> 
 
 
 </div> <!-- End of outer -->
 
 </body>
</html>

rubyfruit · #4 (**permalink**) Oct 11th, 2006, 17:10

Just found a work around

If I make the image the background for the content div it works fine. Yippee!

I guess it is always better to have the image in CSS rather than HTML. Thanks. Ruby

ukgeoff · #5 (**permalink**) Oct 11th, 2006, 19:50

You shoudn't need a work-around. Can you post a link to your page without the work-around so we can see what is actually happening.

rubyfruit · #6 (**permalink**) Oct 11th, 2006, 20:13

Hi Geoff,

It looks like:

http://www.anstee-parry.com/

Whereas you should see a pink column and then the picture. No blue should show. Simple 2 column design.

It will only make an effort to re-align if I increase the #outer to 706px, but it's not perfect.

Making the image a background image does appear to work. However ideally I would like to be able to have text showing if the image fails, which would be easier with the image being an image rather than a background (based on my current inability to use image replacement).

ukgeoff · #7 (**permalink**) Oct 11th, 2006, 21:34

Here is your css file for that page.

Code: Select all

html, body { margin: 0; padding: 0; background-color: rgb(244,242,240); font-size: 101%;}

#outer { height: 420px; width: 700px; background-color: black; }

#outer { position: absolute; top: 50%; margin-top: -210px; left: 50%; margin-left: -350px; }

#sidebar {  height:420px; width: 75px; background-color: pink; float: left; border-right: 2px solid black; }

ul {list-style: none; font-size: 0.9em; inside; position: absolute; margin: 0px; line-height: 2em; } /* if image fails */

#navigation { width: 75px; height: 420px; position relative; }

#navigation span { background: url(navigator.gif} no-repeat; position: absolute; width: 100%; height: 100%; }
                
#content { background-color: blue; height: 420px; } /*need alt text in case prob with image*/

/*#content { background: url(petetest.jpg) no-repeat; background-color: blue; height: 420px; }*\

I've marked the problem areas in red - lines 5, 6 & 9. All of which are causing your css to be missinterprited.

Correct these then lets look again.

Ryan Fait · #8 (**permalink**) Oct 15th, 2006, 01:40

I just noticed, you shouldn't be using the px unit in attributes:

Code: Select all

<img src="image.jpg" width="200" height="400" />
Not:
<img src="image.jpg" width="200px" height="400px" />

rubyfruit · #9 (**permalink**) Oct 17th, 2006, 14:54

Cool - thanks guys.

Not sure why there were typos in the coding I posted as when I checked back to the original it was fine - must of been some dodgey copy & pasting. But thank you.

Re px - I didn't know that - will go correct my coding - thanks.

Will let you know how I get on.

R

Ryan Fait · #10 (**permalink**) Oct 18th, 2006, 05:34

Yeah, width and height attributes in HTML are always in pixels.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hello from DC area	imageworks	Introduce Yourself	14	Feb 8th, 2008 08:43
Text Area	acrikey	Flash & Multimedia Forum	5	Jul 18th, 2007 16:28
text area	geyids	Flash & Multimedia Forum	4	May 31st, 2007 12:25
Need your help: "fuction not defined" problem	irida	JavaScript Forum	2	Nov 2nd, 2006 14:50
Need Help With A User Defined Function	zorgan	Flash & Multimedia Forum	0	Aug 18th, 2003 22:13

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
2+2 =? pic doesn't fit in defined area