PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Sep 30, 2020 4:08 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Wed Nov 26, 2014 11:13 am 
Offline
Forum Commoner

Joined: Mon Nov 17, 2014 9:03 pm
Posts: 83
Hi,

I need someone to look at this image

Image

And please help write a table in HTML5 that would have cells in the same way you see on image, or does it require FRAMEs instead.

If either tables or frames, can someone write an HTML code to build the box areas you see on the image?

Any suggestion or helpful comment will be great.

Thanks.


Attachments:
chess_editor_dashboard_outline.jpg
chess_editor_dashboard_outline.jpg [ 39.33 KiB | Viewed 3756 times ]
Top
 Profile  
 
PostPosted: Wed Nov 26, 2014 11:56 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Don't use tables for layout. I believe you're looking for something like this.
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>DN</title>
        <style>
        header, footer, div {
                border: 1px solid #CCC;
        }
        .wrap {
                border: none;
        }
        .left-sidebar {
                box-sizing: border-box;
                float: left;
                width: 15%;
        }
        .content {
                box-sizing: border-box;
                width: 70%;
                display: inline-block;
        }
        .right-sidebar {
                box-sizing: border-box;
                float: right;
                width: 15%;
        }
        footer {
                clear: both;
        }
        </style>
</head>
<body>
        <header>Box 1</header>
        <div class="wrap">
                <div class="left-sidebar">Box 2</div>
                <div class="content">Box 3</div>
                <div class="right-sidebar">Box 4</div>
        </div>
        <footer>Box 5</footer>
</body>
</html>
 

_________________


Top
 Profile  
 
PostPosted: Wed Nov 26, 2014 12:13 pm 
Offline
Forum Commoner

Joined: Mon Nov 17, 2014 9:03 pm
Posts: 83
thank you.

Is that what you call CSS style sheets?


Top
 Profile  
 
PostPosted: Wed Nov 26, 2014 12:27 pm 
Offline
Forum Commoner

Joined: Mon Nov 17, 2014 9:03 pm
Posts: 83
I changed the code a little to get the desired effect.

But thanks.

Syntax: [ Download ] [ Hide ]
  1. <html> 
  2. <head> 
  3. <style> 
  4. header, footer, div { 
  5. border: 1px solid #CCC; 
  6. .wrap { 
  7. border: none; 
  8. .top-bar { 
  9. box-sizing: border-box; 
  10. float: center; 
  11. width: 100%; 
  12. height: 15%; 
  13. .left-sidebar { 
  14. box-sizing: border-box; 
  15. float: left; 
  16. width: 20%; 
  17. height: 65%; 
  18. .content { 
  19. box-sizing: border-box; 
  20. width: 60%; 
  21. height: 65%; 
  22. display: inline-block; 
  23. .right-sidebar { 
  24. box-sizing: border-box; 
  25. float: right; 
  26. width: 20%; 
  27. height: 65%; 
  28. .bottom-bar { 
  29. box-sizing: border-box; 
  30. float: center; 
  31. width: 100%; 
  32. height: 20%; 
  33. footer { 
  34. clear: both; 
  35. </style> 
  36. </head> 
  37. <BODY> 
  38. <div class="top-bar">Box 1</div> 
  39. <div class="wrap"> 
  40. <div class="left-sidebar">Box 2</div> 
  41. <div class="content">Box 3</div> 
  42. <div class="right-sidebar">Box 4</div> 
  43. </div> 
  44. <div class="bottom-bar">Box 4</div> 
  45.  
  46. <?php 
  47.  
  48. ?> 
  49.  
  50. </BODY> 
  51. </HTML> 


Note: I couldn't find the correct syntax to show it as a HTML format, any help on that?


Top
 Profile  
 
PostPosted: Wed Nov 26, 2014 12:45 pm 
Offline
Forum Commoner

Joined: Mon Nov 17, 2014 9:03 pm
Posts: 83
I have to say, STYLE sheet has changed my mind.

I just started doing php and html, I guess now I will go buy a book on CSS style sheets.

But now I found the proper effect, I used IFRAMEs.

Since each section will have relay information back to the socket server CLI program and according to all bunch of information, including like user, and game ID, will be relayed back and forth so that the server program can update the MySQL tables and game statics, etc.

But thank you so much, if it wasn't for you I couldn't had found the solution.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group