Table Problem!

Discussion in 'HTML & Website Design' started by Klaas Koopman, Mar 24, 2006.

0
  1. #1
    Hey All,


    I'm trying to code this design http://www.koopmanmedia.nl/design copy.png

    http://www.koopmanmedia.com/clients.../Untitled-1.htm

    I started already, box by box lol. So got 4 questions:

    1. How do I fix the top bar? I want it to be at the top and going from the absolute left to absolute right.
    2. How do I fix the grey bar at the side, somehow it's cut up now? ( same with the bottom one, but I think that once the right bar is fixed the other one will be okay aswell )
    3. How do I put the center thing in tables? the content part that is?
    4. As you can see the part where the icons are now, should become a menu, but it's just an image now. How do I make it so that I can put text in there without it all being on different places within the button? Check the design how I want it :

    http://www.koopmanmedia.nl/design copy.png

    Thanks all for reading!
     
    Klaas Koopman, Mar 24, 2006 IP
  2. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #2 
    http://www.koopmanmedia.com/clients/dikkop/images/Untitled-1.htm
    Code (markup):
    here is the link!
     
    Klaas Koopman, Mar 24, 2006 IP
  3. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello Klaas,

    I can't spend too much time on this, but if you change:

    body {
    background-color: #B1DE12;
    }


    to

    body {
    background-color: #B1DE12;
    margin:0px 0px 0px 0px;
    }

    that should take care of your first issue.

    Good luck
     
    marty, Mar 24, 2006 IP
  4. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #4
    okay thanks!
     
    Klaas Koopman, Mar 24, 2006 IP
  5. sgthayes

    sgthayes Peon

    Messages:
    171
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    here is how i would cut that page :

    
<style>
.header{
    height:40px;
    background-color:black;
}

.content {
    width: 800px;
    background-color:green;
}
</style>
<body>
 <table width=100%>
 <tr>
 <td class="header">header stuff</td>
 </tr>
 
 <tr>
 <td class="top">
      <div class="content" align=center>
              <table width=100%>
              <tr>
              <td width="width_of_menu">MENU HERE</td><td> BLACK TOP RIGHT</td>
              <td>CONTENT HERE</td><td>RIGHT MENU HERE</td>
              </tr>
              </table>
      </div>
 </td>
 </tr>
 </table>
</body>
    HTML:

    I would cut the boxes out like this :
    - make a cut of the top part
    - make a 1px high cut of the middle part (we'll tile this)
    - make a cut of the bottom part
    The good thing about this is that these boxes scale vertically.

    the code goes like this : 

    
<style>
.box {
     width:100px;
}
.box .top {
     height:20px;
     background-image:url(toppart_box.jpg);
}
.box .content {
     background-image:url(middlepart_box.jpg);
     background-repeat:repeat-y;
}
.box .bottom {
     height:20px;
     background-image:url(bottompart_box.jpg);
}
</style>


<div class="box">
<div class="top'">top part content here</div>
<div class="content">main content of box here</div>
<div class="bottom'">bottom part content</div>
</div>
    HTML:
    Hope this helps.
     
    sgthayes, Mar 24, 2006 IP
  6. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #6
    I thought about that, but didn't try it yet! Will do so today and let you know how it went, thanks!
     
    Klaas Koopman, Mar 24, 2006 IP