WYSIWYG Fool

[Teljkon]

Hello and thanks for this awesome resource. This is my problem I am making a web site its www.IGADA.org (http://www.igada.org)Its going to be a cool little place i hope but I am having problems figuring out how to attach a image to my navigation panel. I used a WYSIWYG editor to start up my site and worked it all from a template. The problem I am having is I think the WYSIWYG changed the way the area of the subnav is treated. I modified it as I really didnt need a sub nav but I decided it would be a good spot to place a picture. IDK what exactly to do I have been playing with the Float absolute tags in the html and that does not help much I removed the Z- Index command and that helped the nav bar float over the picture but I rather the picture be linked to the nav bar with the body and header adjusting size to the movement of the picture and navigation panel. Am i barking up the wrong tree hear do I need to be tinkering in the CSS or is there a way to lock the picture in place with the HTML.

i have a little bit of understanding of how thinks work and im not afriad to tinker to learn.

I have included both the CSS code and the relevant Image HTML

/* nav & subnavigation */
.nav,.right {
margin-bottom: 20px;
position: absolute;
top: 40px;
}

/* navigation */
.nav {
right: 23%;
text-align: center;
width: 17%;
}
.nav .logo {
background: url(img/logo.gif) no-repeat center top;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
height: 159px;
}

.nav h1 {
color: #F60;
margin: 12px 0;
}
.nav li {
border-bottom: 1px solid #EEE;
}
.nav li a {
color: #888;
display: block;
font: normal 1.4em serif;
padding: 8px 0;
}
.nav li a:hover {
background: #FAFAFA;
color: #F06;
}

/* subnav */
.right {
background: #222;
right: 3%;
width: 18%;
}
.subnav {
padding: 12px 12px 0;
}
.subnav h1 {
color: #F06;
font-size: 1.4em;
height: 20px;

<img
style="border: 0px solid ; z-index: 101; position: absolute; width: 212px; height: 698px; top: 41px; left: 807px;"
alt="" src="images/Forum.jpg" hspace="0">


I am not looking for a quick fix from you guys but I need to now what tree to bark up to get what I want and that for the picture to behave like the subnav in the original template where the two effect the line breaks depending on screen size. If i can only do this with one picture because in the original template the images in the subnav were referenced in the CSS not the HTML

:teleport: