The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Designing fancypants table help

View previous topic View next topic Go down

Solved Designing fancypants table help

Post by Anzo on September 28th 2014, 2:30 am

Hello.

So, I require some help in designing a special table to use in the events which we held in my forum. However, as a person who's new to HTML, I find it a bit complicated to design what's in my head. I went to PS and made this map:




I need a table, with EXACTLY the same width and height like its mentioned in the image above. The total size of the table is 602x300, and the padding between the different boxes is estimated 5 to 10 (didn't do the exact math).

CSS could be anything basic, but what matters is for the table to look like the image.

Thanks Smile

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Designing fancypants table help

Post by Ramdaman on September 28th 2014, 3:03 am

The only way I think of doing it using HTML with the <div> tag.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Designing fancypants table help

Post by Anzo on September 28th 2014, 2:55 pm

How?

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Designing fancypants table help

Post by Ange Tuteur on September 28th 2014, 4:16 pm

Hello Anzo,

So something like this ?
http://generaltesting.forumotion.com/h4-example

HTML
Code:
<style type="text/css">
#theTable {
  color:#000;
  width:598px;
  overflow:hidden;
}
#theTable div { word-wrap:break-word }
  
.top-block {
  background:#FF3F67;
  width:594px;
  height:50px;
  margin:2px;
}
  
#column-left { float:left }
#column-left .b1 {
  background:#DFFE46;
  width:240px;
  height:240px;
  margin:2px;
}
  
#column-right { float:right }
#column-right .b1 {
  background:#3EF6FF;
  width:350px;
  height:40px;
  margin:2px;
}
  
#column-right .b2 {
  background:#4E41FD;
  width:350px;
  height:198px;
  margin:2px;
}
</style>

<div id="theTable">
  <div class="top-block">Content</div>

  <div id="column-left">
    <div class="b1">
      Content
    </div>
  </div>

  <div id="column-right">
    <div class="b1">
      Content
    </div>
    <div class="b2">
      Content
    </div>
  </div>
</div>

You can utilize floats to make columns, take a look over the code to see what I mean. Specifically the div elements with column-left and column-right. You'll notice in the inline sheet they're using the float property.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Designing fancypants table help

Post by Anzo on September 28th 2014, 6:03 pm

Man, you're the best. Smile Thanks a bunch.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Designing fancypants table help

Post by Ange Tuteur on September 28th 2014, 7:40 pm

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum