asked on

Manipulating an html page without tables

I've got to move a couple of things around on an html page that is set up using a number of <div>'s and css dynamics.

In short, I'm lost. If I don't see a table, I might as well be a pig on roller skates.

Head out to http://www.thebloomlaters.com. My job is to move the verbiage, "Read the latest review of the Bloomlaters" to just below the main picture. As simple as that sounds, without a cell and a row, I'm baffled.

I have the css code listed below in case you want to play with it.

body,p            /* body parameters */
{
      font-face: Arial;
      font-size: 13px;
      font-style: normal;
      text-align: justify;
      line-height: normal;
      font-weight: normal;
      padding: 10px;
      color: #FFFFFF;
      background-color: #000033;
      z-index: 1;
}

fieldset      /* fieldset parameters */
      {
            font-face: Arial;
            font-size: 16px;
            font-style: normal;
            line-height: normal;
            font-weight: 800;
            padding: 10px;
            border: 3px double #0099ff;
            z-index: 6; color: #ffffff;
      }

.logo            /* logo */
{
      width: 400px;
      height: 90px;
      position: absolute;
      top: 10px; left: 10px;
      z-index: 2;
}

.logo2            /* title */
{
      width: 135px;
      height: 120px;
      position: absolute;
      top: 20px; left: 584px;
      z-index: 1;
}

.nav      /* navigation */
{
      width: 440px;
      height: 12px;
      font-face: Arial;
      font-size: 12px;
      font-style: strong;
      text-align: justify; text-valign: center;
      line-height: normal;
      color: #FFFFFF;
      z-index: 10;
      border-top: 1px solid #0099ff;
      position: absolute;
      top: 86px; left: 245px;
      z-index: 3;
}

            /* link properties*/
a:link            { color: #ffffff; text-decoration: none; }
a:visited      { color: #ffffff; text-decoration: none; }
a:hover            { color: #ff7f00; text-decoration: none; }
a:active      { color: #ffffff; text-decoration: none; }

.indeximage2      /* dejoe picture placement */
{
      width: 550px;
      height: 303px;
      align: center;
      border: 3px double #0099ff;
      padding: 5px;
      position: absolute;
      top: 188px; left: 100px;
      z-index: 8;
}

.tomp3            /* downlaod button */
{
      width: 83px;
      height: 43px;
      position: absolute;
      top: 50px;
      left:780px;
      z-index:6;
}

.jump
{
      width: 130px;
      height: auto;
      position: absolute;
      top: 190px; left: 740px;
      z-index: 11;
}

.mainnames      /* names overlay */
{
      width: 184px;
      height: 150px;
      font-face: Arial Narrow;
      font-size: 17px;
      font-style: normal;
      line-height: normal;
      text-align: center;
      text-valign: middle;
      padding: 10px;
      color: #ffffff;
      position: absolute;
      top: 250px;
      left: 140px;
      z-index: 20;

}

.bio      /* bio fieldset */
{
      float: left;
      width: 600px;
      padding: 10px;
      image-padding-top: 3px;
      image-padding-right: 8px;
      font-size: 10pt;
      font-weight: 600;
      text-align: left;
      text-valign: top;
      position: absolute;
      top: 165px;
      left:85px;
      z-index: 4;
}

.calendar
{
      width: 500px;
      font-size: 15px;
      font-style: normal;
      line-height: 15px;
      font-weight: 500;
      text-align: justify; text-valign: bottom;
      position: absolute;
      top: 165px; left: 165px;
}

.contact
{
      width: 560px;
      height: 350px;
      font-size: 12px;
      text-align: center;
      padding: 10px;
      position: absolute;
      top: 165px; left: 86px;
      z-index: 4;
}

.counter
{
      width: 88px;
      height: 32px;
      align: center;
      valign: middle;
      position: absolute;
      top: 640px; left: 343px;
      z-index: 10;
}

.player
{
      width: 144px;
      height: 16px;
      position: absolute;
      top: 25px; left: 750px;
      z-index: 7;
}

.moh
{
      width: 80px;
      height: 100px;
      position: absolute;
      top: 285px; left: 778px;
      z-index: 30;
}

.gallery1
{
      width: 550px;
      height: 170px;
      padding: 5px;
      position: absolute;
      top: 185px; left: 95px;
      z-index: 6;
}

.submit
{
      width: 300px;
      height: auto;
      font-face: Arial;
      font-size: 14px;
      font-style: normal;
      line-height: normal;
      font-weight: normal;
      position: absolute;
      top: 165px; left: 200px;
      z-index: 1;
}

.thankyou
{
      width: 350px;
      height: 15px;
      text-align: center;
      position: absolute;
      top: 200px; left: 200px;
      z-index: 11;
}


.tracks
{
      width: 520px;
      font-size: 13px;
      text-align: center;
      padding: 10px;
      position: absolute;
      top: 165px; left: 107px;
      z-index: 4;


}

.downloads
{
      width: 630px;
      height: 10px;
      text-align: center;
      padding: 10px;
      position: absolute;
      top: 515px; left: 215px;
      z-index: 6;
}

.design            /* design/css/xhtml/copyright table */
{
      width: 595px;
      height: 25px;
      padding: 5px;
      /*border-top: 1px solid #0099ff;*/
      font-size: 11px;
      text-align: center;
      text-valign: middle;
      position: absolute;
      top: 702px; left: 85px;
      z-index: 3;
}

.designbio      /* design table placement for bio page */
{
      width: 595px;
      height: 25px;
      padding: 5px;
      /*border-top: 1px solid #0099ff;*/
      font-size: 11px;
      text-align: center; text-valign: middle;
      position: absolute;
      top: 2350px; left: 100px;
      z-index: 3;
}

.designbio2 /*alternate table placement for bio page*/
{
      width: 595px;
      height: 25px;
      padding: 5px;
      /*border-top: 1px solid #0099ff;*/
      font-size: 11px;
      text-align: center; text-valign: middle;
      position: relative;
      top: 2250px; left: 110px;
      z-index: 3;
}
.designphotos                  /* design table placement for photos page */
{
      width: 595px;
      height: 25px;
      padding: 5px;
      /*border-top: 1px solid #0099ff;*/
      font-size: 11px;
      text-align: center; text-valign: middle;
      position: absolute;
      top: 825px; left: 85px;
      z-index: 3;
}

.designcal            /* design/css/xhtml/copyright table */
{
      width: 595px;
      height: 25px;
      padding: 5px;
      /*border-top: 1px solid #0099ff;*/
      font-size: 11px;
      text-align: center;
      text-valign: middle;
      position: absolute;
      top: 900px; left: 110px;
      z-index: 3;
}

.permit        /*permission to use 50MOH graphics*/
{
      width: 500px;
      height: 15px;
      font-size: 11px;
      text-align: center;
      text-valign: middle;
      position: absolute;
      top: 770px; left: 135px;
      z-index: 20;
}

jessegivy

Insert your content where you see the row of Astrix's

<div class="indeximage2">
<a href="/bios.htm" target="_blank"><img src="http://www.thebloomlaters.com/images/dd-main.jpg" alt="Doug Dejoe" width="550" height="303" border="0" align="middle"/></a>
****************************************************
</div>
<div class="mainnames">

<a href="/bios.htm" title="Doug DeJoe" accesskey="b" target="_blank">Doug DeJoe</a><br clear="all"/>
<br clear="all"/>
<a href="/bios.htm" title="Nick Lauritano" accesskey="b" target="_blank">Nick Lauritano</a><br clear="all"/>
<br clear="all"/>
<a href="/bios.htm" title="Joe Dursma" accesskey="b" target="_blank">Joe Dursma</a><br clear="all"/>
<br clear="all"/>
<a href="/bios.htm" title="Joe Lamont" accesskey="b" target="_blank">Joe Lamont<br/>

jessegivy

One thing to note about css development is that a DIV is a block level element which essentially means it includes a line break. You can also explicitly declare a line break with the line break tag

<br>

jessegivy

...a span tag is an inline element and doesn't include a line break. Html 4.01 specifies that inline elements should not contain any block elements, and of course this attribute can be set in css but that could confuse future folks as they want to digest your code

div style="display:inline;"

...hope this helps

Frosty555

You can move the entire bottom part (e.g. "Read the latest reviews" as well as the copyright and W3Schools images) by altering the .design CSS class's top property.

You can move the sitemeter counter by altering the .counter CSS class's top property.

However, to move *just* the referral link, I suggest you go into the HTML where that is:

<div class="design">
      <table width="500" align="center" border="0">
      <tr>
      <td colspan="3" align="center">
      <A HREF="Review.htm" target="_blank"><u>Read the latest review of the Bloomlaters</u></a>
      </td>
      </tr>
....

Wrap the link in a DIV tag with a new CSS class attribute (class="review", lets say)

Then make a new CSS class "review" something like this:

.review
{
width: 595px;
height: 25px;
padding: 5px;
/*border-top: 1px solid #0099ff;*/
font-size: 11px;
text-align: center;
text-valign: middle;
position: absolute;
top: 400px; left: 85px;
z-index: 3;
}

Frosty555

Then tweak the Review class's top property to move just that part.

Bruce Gust

ASKER

Hey, folks!

Thanks to you both for your input.

Frosty555, head out to http://www.thebloomlaters.com/index1.htm and see what I've got. The problem is the positioning in that there's way too much dead space between the new position of the link and the main graphic. Also, I've got the CD cover and the other graphics that were sitting to the right now down below and that's wrong. How can I fix that?

jessegivy, I used your suggestion but the link fell within the blue border surrounding the graphic, I've got to get outside the border and positioned just below. How can I fix that?

ASKER CERTIFIED SOLUTION

Frosty555

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial