Images go onto newline when changing browser size. 2

ascotta · Mar 20, 2007

What the heck am I doing wrong.

I have been at this all day, and I cannot make it work.

I have three images butted together. If I make the browser width smaller the last image drops below the others.

I want this to be in the middle of the browser right at the top. (Cos its a header).

Its in a Masterpage using visual studio cheepness.

Code:

</head>
<body >

<a name="top"></a>
 


                        <div id="header" align="center"><img src="Images/picture10.jpg" style="width: 220px; height: 120px; vertical-align: top"/><img src="Images/quote.jpg" style="width: 462px; height: 120px; vertical-align:top[" /><img src="Images/name.jpg" style="width: 314px; height: 120px; vertical-align: top" /></div>
                         
<div id="content1"; align=center >
 
         <div id="container" align=center style="width: 1000px">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        <div></div>             
         </asp:ContentPlaceHolder>

Now if I make changes I can make it appear at lets call it top left, and the image doesn't jump down, however I want it centred above the Content below. Or am I being as dense as a dense thing ?

[blue] A perspective from the other side!![/blue]

Cheers
Scott

audiopro · Mar 21, 2007

You seem to have a lot of additional styling in the header section which could cause you problems. All the images are 120px. high so should line up without the size information. It may be worth placing the pictures in the div without any additional size or positioning information to see how they appear.
Is the width of id-'header' set to the total width of the images?

Keith

http://www.studiosoft.co.uk

Foamcow · Mar 21, 2007

Jsut set a width on the header element

I'd also remove the extra styling on the images.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Foamcow · Mar 21, 2007

Depending on whether you are aiming for a fixed or fluid width layout you may run into this little problem.

Images are inline elements so they naturally sit side by side. However, Firefox (the latest versions at least) places a kind of margin around the element. This isn't the normal margin or padding and setting either of these to 0 has no effect.

The answer is to make the images block level elements, which will make them sit below each other. You can then set them to float left which will put them all side by side.

But then... Because the images in your header are floated they will not influence the height of the header element. So you can float the header to fix that.

But then... It's more difficult to centre the header - because it's floated!

The solution therefore may be to place an additional block level element, say a <p> tag within your header to contain the images. Then give this a fixed width based on the width of your images.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Foamcow · Mar 21, 2007

A little CSS

Code:

	#header {
		width:100%;
		border:1px solid green;
		margin:0 auto;
		text-align:center;
		float:left;
	}
	
	#header p {
		width:390px;
		margin:0 auto;
	}
	
	#header img {
		display:block;
		float:left;
		margin:0;
		padding:0;
	}

And the cut down html

Code:

<div id="header">
   <p>
      <img src="1.gif" alt="" />
      <img src="2.gif" alt="" />
      <img src="3.gif" alt="" />
   </p>
</div>

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

ChrisHunt · Mar 21, 2007

Two approaches to try, (leaving everything else as it is)...

Code:

<div id="header" style="text-align:center; [red]white-space:nowrap;[/red]">

or

Code:

<div id="header" style="text-align:center; [red]width: 996px; margin: 0 auto;[/red]">

I'd go with the first one (if it works) as you won't need to change it if you change the number/width of the images.

Looking at it again, though, would it not be easier to make a single big image? If the idea is to make (some of) them into links, you could do that with a client-side image map.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Foamcow · Mar 21, 2007

White-space:nowrap is a good idea.
I just discovered that the image spacing I was talking about is caused by the line breaks in the source code. Damn my obsession with neat code

Image maps are also certainly an option too.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

ascotta · Mar 21, 2007

I shall be giving this a go shortly. Thank you very muc, I shall return and place stars appropriately. Seeing as I am "totally so learning" this stuff, and kinda making it up as I go along. I shall fo course ask for your comments when it is live, in the next few weeks.

[blue] A perspective from the other side!![/blue]

Cheers
Scott

ascotta · Mar 21, 2007

foamcow said:
I just discovered that the image spacing I was talking about is caused by the line breaks in the source code. Damn my obsession with neat code

Oh how I have been there !!!! Indentations and stuff making it look pretty. humph.

[blue] A perspective from the other side!![/blue]

Cheers
Scott

ascotta · Mar 21, 2007

So here is what worked

Code:

<body>
<a name="top"></a>
 


                        <div id="header" align="center" style=" height: 120px"><p style="width: 1000px; height: 120px"><img src="Images/picture10.jpg" alt="Brock &amp; Associates Logo" style="width: 227px; height: 120px" /><img src="Images/quote.jpg" alt="engineering excellence for all out clients" style="width: 500px; height: 120px" /><img src="Images/name.jpg" alt="Brock &amp; Associates Pty Ltd Consulting Engineers and Project Managers" style="width: 272px; height: 120px"  /></p></div>
         <div id="content1"; align=center >
 
         <div id="container" align=center style="width: 1000px">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        <div></div>             
         </asp:ContentPlaceHolder>
             <div  id="footer9"; align="center" style="top: 0px;color: #06a225">
                 Copyright &copy;  2007 Brock  &amp; Associates Pty Ltd * BN 82 064 775 088
            </div >  
          </div>

</div> 

</body>

It is three images that together make the header. I wouldn't have the first foggiest how to make one big image, artist I am not. So Chris and Foamcow stars for helping me get a result. I may once I have it just right go back and CSS it.

[blue] A perspective from the other side!![/blue]

Cheers
Scott

Foamcow · Mar 22, 2007

You could make them one single image by screengrabbing your webpage ;-)

For the record, I thought Chris' suggestion was better than mine

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Images go onto newline when changing browser size. 2

ascotta

Vendor

audiopro

Programmer

Foamcow

Programmer

Foamcow

Programmer

Foamcow

Programmer

ChrisHunt

Programmer

Foamcow

Programmer

ascotta

Vendor

ascotta

Vendor

ascotta

Vendor

Foamcow

Programmer

Similar threads

Part and Inventory Search

Sponsor