HTML Is this doable??

Hi guys, I recently downloaded the free template "beauty company". I really liked it because I hoped that I could use all of the white space to provide text. I was wanting to remove some of the dividing lines in the white space to create a place to publish helpful articles.

After I downloaded the template, I realized that the "dividers" are in fact separate white boxes over the fuscia background. What I am wanting to know is if there is a way that I can make one of these "boxes" cover the entire white space (and even if it helps, the images in the top left corner "Nail care, Skin care, Hair care" can be white as well.)

Also, while I am at it, is there any way that I can add tabs to the navigation bar without having my tabs end up under the original tabs? I tried adding some with hopes of them just squeezing tighter, and ended up with them stacking!

Thanks so much for your advice!!

 

I am not 100% sure I understand the details of your problem but try this:
1. change the index.html so the divs that hold the pictures on the left have a fixed height and so the text box will not overlap with the left picture. Here is the highlight div after the change.

Code:

          <div id="highlights">
            <div style="float:left;">
              <a href="#"><img src="images/photo_1.jpg" width="186" height="279" alt="Nail Care" /></a>
            </div><!-- end .green -->
            <div style="height: 279px;">

              <div class="p green">
                  <a href="#"><img src="images/photo_2.jpg" width="124" height="76" alt="Nail Care" /></a>
              </div><!-- end .green -->
              <div class="p purple">
                  <a href="#"><img src="images/photo_3.jpg" width="124" height="76" alt="Skin Care" /></a>
              </div><!-- end .purple -->
              <div class="p orange">
                  <a href="#"><img src="images/photo_4.jpg" width="124" height="77" alt="Hair Care" /></a>
              </div><!-- end .orange -->
            </div>
              <div id="topspot">
                  <h2><img src="images/title_face_week.gif" width="116" height="17" alt="Face of the week" /></h2>
                  <div class="faceotweek">
                      <img src="images/photo_7.jpg" width="87" height="130" alt="Sintama" />
                      <p>Name: Sintama<br />
                      Age: 21 yrs</p>
                  </div><!-- end .faceotweek -->
                <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
                 <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
                  <p class="readmore"><a href="#">read more</a></p>
              </div><!-- end topspot -->
          </div><!-- end highlights -->

2. Change the style.css to remove the background from the highlight div.

Code:

/* highlights */

#highlights {
    /*background: url(images/photo_1.jpg) no-repeat;*/
    width: 327px;
    float: left;
    margin-right: -10px;
}

So the photo_1.jpg is now a regular image instead of the pic background and the extra div in the index.html has a fixed height therefore even if you remove one of the small images the face of the week text box will stay at the same location.

For the menu navigation it will wrap because a fixed width is used (139px and if you exceed the total width of the template (which will happen by adding extra entries). Therefore you could adjust the width or create separate classes for the li elements as a quick workaround.
for example:

Code:

#nav li {
    float: left;
    list-style: none;
width: 100px;
    font-size: 11px;
    font-weight: bold;
    border-left: 1px solid white;
    text-align: center;
}

 

Wow, Enigma, that was so helpful. I did everything you said, and it worked! Yay!! Thank you so much! Do you mind if I ask another question?? I would like to have a vertical navigation bar. I'm not sure how to fit it in or if that is even something I can do. (as you can tell, I'm really a novice at this!) I thought about putting it in where the "nail care" "skin care" and "hair care" section is. Would it be possible to remove those photos, still keeping the background white, and maybe put a vertical navigation bar in? I like how those photos are links, but they are the images that came with the program and the text doesn't fit my website, so I can't use them.

Do you have any suggestions?

Thanks a million..

And, also, this might seem so elementary, but how do I get text in a paragraph to continue to flow around a photo? I tried inserting one into the white region and had it align right, but then in the area to the left there was nothing but white space with text above and below. This is like learning a new language!
Thanks again!

 

If you want to replace the pictures there with a vertical menu here is one way,

From the last mods you did right after the highlight div line remove the code:

Code:

            <div style="float:left;">
              <a href="#"><img src="images/photo_1.jpg" width="186" height="279" alt="Nail Care" /></a>
            </div><!-- end .green -->
            <div style="height: 279px;">

              <div class="p green">
                  <a href="#"><img src="images/photo_2.jpg" width="124" height="76" alt="Nail Care" /></a>
              </div><!-- end .green -->
              <div class="p purple">
                  <a href="#"><img src="images/photo_3.jpg" width="124" height="76" alt="Skin Care" /></a>
              </div><!-- end .purple -->
              <div class="p orange">
                  <a href="#"><img src="images/photo_4.jpg" width="124" height="77" alt="Hair Care" /></a>
              </div><!-- end .orange -->
            </div>

Taking out the code will remove the pictures. Now you need the menu so in the same place put the following:

Code:

            <div class="sidemenu">
              <div><a href="#">Menu Line-1</a></div>
              <div><a href="#">Menu Line-2</a></div>
              <div><a href="#">Menu Line-3</a></div>
            </div>

Then in the style.css at the end of the file setup the divs to make the above html look like a menu:

Code:

.sidemenu {
  width: 100%;
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 14px;
}

.sidemenu div {
  background: #CC0;
  padding: 2px;
  border-bottom: 1px solid #FFF;
}

.sidemenu div a {
  display: block;
}

For the picture you asked you use the float property on the picture:
eg:

Code:

<div><p><a style="float: left;" title="Image Title"><img src="http://www.example.com/image.jpg"></a>Paragraph text here</p></div>

So in this example there is a link for the picture inside the paragraph and the picture floats to the left with float:left property.

 

Wow, thanks! That is so helpful. I really appreciate you taking the time to walk me through the baby steps to getting this right.