#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    20
    Rep Power
    0

    Getting alingment right.


    I have the new website design all done in html, it works fantastic and looks clean. but the problem is this site has a background image, all content areas are in tables on top of that background and i need an opaque background. I got that far and found out online after a few days of reading that it is not easy or clean to get the text within the table to NOT be opaque when the td is set to opaque through the style sheet.

    So i read with css you cna do it by just putting another block on top of the opaque one for the text. Now i am in all kinds of confusion and frustration.

    What i need is 2 full width cells (1000px) on top (150px tall for the top and the second is 100px tall). under those 2 i need cells but going vertical for a nav bar on the left and a content area in the center/right.

    I need these locked together, but when playing with margins, absolute and position it cannot line them up properly. I got close, but when the main content area is longer than the left hand nav bar, it goes on over into that bellow.

    seriously confused after a lot of reading.

    there must be some kind of easy way to make a background in a table/div opaque without messing up everything placed in/over it, no?

    attaching a pic of the basic layout i am after.



    here is what is in my stylesheet so far (note i have not done opacity or anything yet, because i can do that ok but cannot get these boxes to fit together and not move.

    Code:
    body {
      background-image: url('pictures/back.jpg');
    }
    #container {
    position: relative
      margin: 0 auto;
      width: 1000px; 
      background: transperant;
    
    }
    #header {
    position: absolute;
      left: 1px;
      top: 1px
      width: 1000px;
      background: transperant;
    }
    
    #topBar {
    position: absolute;
      left: 1px;
      top: 150px
      width: 1000px;
      background: #C5D5A1; 
    }
    
    #leftBar {
    position: absolute;
      left: 1px;
      top: 250px
      width: 200px;
      background: #C5D5A1; 
    }
    
    #content {
    position: absolute;
      left: 201px;
      top: 250px
      width:800px;
      background-color: #C5D5A1;
    }

    none of it works at all though. If anyone could lend a hand i would greatly appreciate it! or if you know a way to simply change my color background in a table into opaque without touching the images and text, that would save me so much wasted time.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    703
    Rep Power
    441
    I'm not following exactly what you want to do, but generally speaking you don't want to layout your page with absolute positioning. That makes all your boxes independent of everything else in the page, so they don't move together.

    It would be helpful if you could post a link to the page you're working on.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    20
    Rep Power
    0
    I do it in notepad, so its not uploaded until it runs smooth.

    here is code for full thing as is right now, i am trying differnet ways of going back to tabels with beating the opacity, so far not working still.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title></title><link rel="stylesheet" type="text/css" href="stylesheet1.css" />
    
    </head>
    
    <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff">
    
    <table width="1000">
    <tr><td colspan="2" valign="top">
    <a href="index.html"><img src="pictures/head.gif" border="0"></a>
    </td></tr>
    
    <tr><td colspan="2" valign="top">
    <div id="container">
      <div id="header">
    
    <table width="1000" border="0" cellspacing="3">
    <tr><td width="200"><h3><a href="index.html">Home Page</a></h3></td>
    	<td width="200"><h3><a href="products.html">Products</a></h3></td>
    	<td width="200"><h3><a href="shipping.html">Shipping</a></h3></td>
    	<td width="200"><h3><a href="terms.html">Terms</a></h3></td>
    	<td width="200"><h3><a href="contact.html">Contact Us</a></h3></td></tr>
    
    </table>
    
    </div>
    
    </td></tr>
    
    <tr><td width="200" valign="top">
    <div id="container1">
      <div id="header1">
    <h4 class="left">Wholesale Nav</h4>
    <hr>
    
    
    <h4 class="left"><a href=".html"></a></h4>
    <h4 class="left"><a href=".html"></a></h4>
    <h4 class="left"><a href=".html">Shipping</a></h4>
    <h4 class="left"><a href=".html">How to Order</a></h4>
    <h4 class="left"><a href=".html">Terms</a></h4>
    <h4 class="left"><a href="con.html">Contact Us</a></h4>
    </div>
    
    </td>
    
    
    <td width="800" valign="top">
    <div id="container2">
      <div id="header2">
    <h1>Title</h1>
    CONTENT I PUT HERE
    </div>
    
    </td></tr>
    
    </body></html>

    My stylesheet is here:

    Code:
      body {
       margin-top: 0;
       margin-bottom: 0;
       margin-left: 0;
       margin-right: 0;
        color: #000000;
        background-color: #ffffff;
        font-family: Georgia, "Times New Roman",
             Times, serif; 
    background-attachment: fixed;
    background-image:url('pictures/back.jpg');
    background-repeat: repeat;
    }
    
    #container {
    position: relative
      margin: 0 auto;
      width: 1000px; 
      background: #C5D5A1;
      opacity:0.8;
      filter:alpha(opacity=80);
    }
    #header {
      width: 1000px;
      background: #C5D5A1;
    
    }
    #container1 {
    position: relative
      margin: 0 auto;
      width: 200px; 
      background: #C5D5A1;
      opacity:0.8;
      filter:alpha(opacity=80);
    }
    #header1 {
      width: 200px;
      background: #C5D5A1;
    
    }
    #container2 {
    position: relative
      margin: 0 auto;
      width: 800px; 
      background: #C5D5A1;
      opacity:0.8;
      filter:alpha(opacity=80);
    }
    #header2 {
      width: 800px;
      background: #C5D5A1;
    
    }
    table {
       margin-left:auto;
       margin-right:auto;
       margin-top: 0;
       margin-bottom: 0;
    }
    A:visited {
    	COLOR: purple; TEXT-DECORATION: underline
    }
    A:link {
    	COLOR: blue; TEXT-DECORATION: underline
    }
    A:hover {
    	COLOR: #719FFE; TEXT-DECORATION: underline
    }
    A:active {
    	COLOR: #2C31FF; TEXT-DECORATION: underline
    }
    
      h1 {
    FONT-WEIGHT: bold;
    text-align: center;
    font-size: 30px }
      h2 {
    FONT-WEIGHT: bold;
    text-align: center;
    font-size: 25px }
    h3 
    {
    FONT-WEIGHT: bold;
    text-align: center;
    font-size: 18px }
    h4 
    {
    FONT-WEIGHT: bold;
    text-align: center;
    font-size: 15px }
    h5 
    { 
    padding: 0px;
    FONT-WEIGHT: bold;
    text-align: center;
    font-size: 12px }
    h6 
    {
    FONT-WEIGHT: normal;
    text-align: center;
    font-size: 9px }
    p { 
    FONT-WEIGHT: normal;
    text-align: left;
    font-size: 14px }
    p.bold {
    FONT-WEIGHT: bold;}
    hr {color: #000000 }
    .right {text-align: right }
    .center {text-align: center } 
    .left {text-align: left }

    thanks for looking
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    703
    Rep Power
    441
    I'd strongly recommend uploading the page somewhere. It's much easier for us to answer your questions with a working page instead of recreating your page on our own.

    The first thing I'd point out is you're not following best practices here. You're using tables for layout (bad for mobile devices), you've got code in your HTML that should be in your stylesheet (bad for maintenance), etc.

    The second thing I'd note is your CSS has errors. If you have "position: relative", you must put a semicolon after that, otherwise the browser will ignore the rest of your CSS.

    You'll probably also want to validate your HTML, which you can do at http://validator.w3.org/

    ANYWAY, it seems one thing you want to do is make your text transparent without making your background transparent. You could do that by setting your text in rgba (supported by current browsers), or by simply wrapping your text in another element, a la:

    Code:
    <div>Not transparent text. <span class="trans">This is semi-transparent text.</span></div>
    
    CSS:
    .trans {opacity: .5}

IMN logo majestic logo threadwatch logo seochat tools logo