Placing it correctly with image?

[mommy]

First of all, I am using Dreamweaver, and I'm a bit new to HTML.I've uploaded my webpage to my webserver for you to help me.This is how it currently looks (not the right way):www.borelli-kjaer.dk/newsite/howitlooks/index.htmlThis is how it's supposed to look (did this using style="position:absolute" which is not good, but this is how it's supposed to look).www.borelli-kjaer.dk/newsite/index.phpEDIT: READ AT BOTTOM OF PAGE PLEASE .

[mmcspadden]

Hey, I am a newbie, as my title states, and someone may come along with a better idea, but here is one way that you can get it done.First thing to do is to size the images properly. The proper way to do this would be to resize the images to be the exact size you need them to be. Right now the filler image is set to 100% of the div width and this puts the other two images on the other lines. Instead of using a %, us actual pixel for measurement. I believe for your site the filler should be about 176px

 <div id="sidebar1">	<p><img src="corner1.png" width="13" height="26" /><img src="fill.png" width="176px" height="26" /><img src="corner2.png" width="13" height="26" /></p>	<div id="boxbg">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </div>	<br />	<br />	<br />	<br />	<br />	<br />		<br />	<br />	<br />	<br />	<p><img src="corner3.png" width="13" height="28" /><img src="fill2.png" width="176px" height="28" /><img src="corner4.png" width="13" height="28" /></p>  <!-- end #sidebar1 --></div>

Next get rid of the paragraphs on each one, these are giving you empty space between the top images and the central menu background. (This could be bad coding, i dunno, but it works cause I tried it)Oh, and I think adding one more <br> to the list will fix the bottom images.

<div id="sidebar1">	<img src="corner1.png" width="13" height="26" /><img src="fill.png" width="176px" height="26" /><img src="corner2.png" width="13" height="26" />	<div id="boxbg">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </div>	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<img src="corner3.png" width="13" height="28" /><img src="fill2.png" width="176px" height="28" /><img src="corner4.png" width="13" height="28" />  <!-- end #sidebar1 --></div>

The last issue I see is making the background div fit the images on top and bottom. This can be done by (again) changing the percentages to pixel height for the boxbg and adding a little margin.

<div id="container"> .thrColLiqHdr #boxbg {	width:192px;	height:150px;	background:#C3C3C3;	padding: 15px 0;	margin-left: 5px;	float:left;}

[mommy]

Thanks mate, gonna try this right now .EDIT: I have one question though..Changing the CSS to actual pixels and not percentage.. Won't that result in when with lower resolution, the images will mess up if you know what I mean?Lol I think I'm being stupid there.. nvm.. How can I do so when someone uses lower resolution the top and bottom image will just shrink, and not stay at width="176"?

[mommy]

Okay, so now I just need one more thing which I can't figure out on my own .If you go to www.borelli-kjaer.dk/newsite/howitlooks/index.html now you will see that it almost looks correctly. I dunno if you can spot it, but I need to add shade on the left side of the box.. How do I do this? Everytime I try on my own in Dreamweaver it just messes up.

[Ingolme]

I'm afraid I see your page messed up both in Firefox and Internet Explorer 7. What browser are you testing your site in?It's not going to be easy to fix it up.

[mommy]

I'm testing in Firefox. The reason you see it messed up is because you probably are running lower than 1280 x 1024 res am I right? :)That's also one of the problems I need help with (how to make the image shrink with lower resolution.

[Ingolme]

Few people today use 1280x1024. Rather than using images, why not use <div> tags with background images for the rounded corners?It could be something like this:HTML:

<div id="container">  <div class="tl"><div class="tr"><div class="top"></div></div></div>  <div class="left"><div class="right">	<div class="middle">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.	</div>  </div></div>  <div class="bl"><div class="br"><div class="bottom"></div></div></div></div>

CSS:

.tl { background: url(corner1.png) top left no-repeat;}.tr { background: url(corner2.png) top right no-repeat; padding: 0 13px;}/* IMPORTANT: make fill.png only one pixel wide, background repeating will take care of the rest /*.top,.bottom { background: url(fill.png) top repeat-x; height: 26px;} .bl { background: url(corner3.png) top left no-repeat;}.br { background: url(corner4.png) top right no-repeat; padding: 0 13px;}/* IMPORTANT: make boxshade_left.png and boxshade_right.png only one pixel tall, background repeating will take care of the rest */.left { background: url(boxshade_left.png) left repeat-y; }.right { background: url(boxshade_right.png) right repeat-y; padding: 0 3px;}.middle { background-color: #C3C3C3; }

Give the #container class the width you want the box to have.

[mommy]

Doing as you told me, and correcting a few things, I managed to solve the left shading problem of the "box" and the browser resolution problem. This created 2 new problems though . look at this:http://www.borelli-kjaer.dk/newsite/howitlooks/index2.htmlAs you can see, the div tag under the top of the box and over the bottom of the bottom of the box is too wide, I tried with margins and stuff to fix this, no result though. And the other problem is pretty obvious .thanks :mellow:EDIT: GOD I'm STUPID. Lol. Accidently added a </div> too much, so the div with id="container" closed after the sidebar1 and header. So now that the main problem has been solved (doh) I still need to know what to do to make the div with the id="middle" fit with the images.thanks again.

[Ingolme]

You're going to have to make the shadow images consistent with the other ones, CSS can't help with the shadow positioning, so make your side shadow images 5 pixels wide instead of 3 so it fits with the other images.You can change the padding in the .right class to adapt to the new background image you make once you've finished:

.right { 	background: url(boxshade_right.png) right repeat-y; padding: 0 5px;}

[mommy]

Thanks mate, can't believe I didn't think of that .