?
Solved

Manipulating an html page without tables

Posted on 2007-07-31
7
Medium Priority
?
192 Views
Last Modified: 2010-04-09
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;
}


0
Comment
Question by:brucegust
  • 3
  • 3
7 Comments
 
LVL 12

Expert Comment

by:jessegivy
ID: 19605992
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/>
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19606007
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>
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19606019
...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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 31

Expert Comment

by:Frosty555
ID: 19606034
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;
}
0
 
LVL 31

Expert Comment

by:Frosty555
ID: 19606039
Then tweak the Review class's top property to move just that part.
0
 

Author Comment

by:brucegust
ID: 19615840
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?

0
 
LVL 31

Accepted Solution

by:
Frosty555 earned 2000 total points
ID: 19616999
Brucegust,

Not sure what you did but I'd say scrap index1.htm and start from your original.

This is the effect you wanted?
   http://www.kleincs.com/temp/bloomlaters.htm

Don't mind the position of the site counter I was playing with it.

Look in the HTML you'll see the relevant part of code at the bottom where I've split out your link into it's own table and div tag (with a css class of "review"). In the CSS file the "review" class looks like this:

.review {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-SIZE: 11px;
Z-INDEX: 3;
LEFT: 85px;
PADDING-BOTTOM: 5px;
WIDTH: 595px;
PADDING-TOP: 5px;
POSITION: absolute;
TOP: 702px;
HEIGHT: 25px;
TEXT-ALIGN: center;
text-valign: middle
}

You can tweak that "Top:" property to adjust the vertical position of the link
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question