Jump to content
MaxCheaters Official Group at Discord
--> Place your ad text here <--

{Tutorial}HTML Layouts.Step 15.

MrHotFire

By MrHotFire
in Coding Tutorials/Guides

 Share

Recommended Posts

MrHotFire Newbie

MrHotFire

Posted
Posted

Website Layouts

 

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

 

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

Note:Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

 

HTML Layouts - Using <div> Elements

 

The div element is a block level element used for grouping HTML elements.

 

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © mrhotfire.com</div>

</div>

</body>
</html>

 

HTML Layouts - Using Tables

 

A simple way of creating layouts is by using the HTML <table> tag.

 

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

Note:Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!

 

The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © mrhotfire.com</td>
</tr>
</table>

</body>
</html>

 

HTML Layout Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

 

Credits Olympus,Internet,ME.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing


  • Posts

    • Finn
      Help with folder system!

      By Finn · Posted

      rename the l2.bin into l2.exe
    • L2LIVEpro
      [L2j] L2LIVE

      By L2LIVEpro · Posted

      L2LIVE.PRO- Dynamic Mid-rates Essence Seven Signs GRAND OPENING - July 5, 20:00 GMT+3 (EEST) TEST SERVER IS OPEN - COME AND CHECK IT OUT TODAY! Join our community and be part of it at: https://www.l2live.pro https://discord.gg/k3NMgR4Dmu   Server description * EXP/SP: Dynamic (x1- x100 based on your level, *before* Sayha and EXP buffs * Adena: x50 / Item Drop: x10 / Fishing EXP increased / Attribute EXP increased * Simplified gameplay to stay in the loop while not spending hours and hours farming * Starter Pack containing very useful items for beginners * MP replenishing potions with auto-consumption * No overpowered donations L2LIVE shop * All spellbook coupons, pet spellbook coupons and master books are sold via Game Assistant * Additionally you can buy SP pouches, enchanted talismans, pet training guides and various other consumables for Adena and L-Coin * More items such as cloaks, more talismans, agathions, belts, pendants, enchantment scrolls of various grades, evolution stones, etc will be added! Shop server as a shortcut, and all retail-like ways of earning items are still here! L-Coins * Drops with small change and in random amounts from Lv60+ monsters  * All raidbosses drop random amount of L-Coin Pouches generating up to 420 Lcoin per unit. **Grand Olympiad and Events** * Grand Olympiad is held week day * Format is 1v1, unlimited weekly fights  * Heroes are declared weekly at Sunday * There are three automated events - TvT, CTF and Deathmatch, running at evenings * Orc Fortress, Battle with Balok, Keber Hunter, Archievements Box, Daily Gift Calendar provisional events are active too Custom user commands * .offlineplay command, your character will keep playing till death or server restart * .offlineshop command, keeps your shop sitting until all items are purchased * .apon / .apoff - enable/disable HP/MP autoconsume And lots of other small improvements are waiting for you!   Join our community and be part of it at: https://www.l2live.pro https://discord.gg/k3NMgR4Dmu
    • milozare
      ⭐ LIST OF FORUMS FOR YOUR NEEDS ⭐ [OVER 100 RUSSIAN FORUMS]

      By milozare · Posted

      Relevant! List of forums on sale! Contact us!
    • bomarket
      ⭐️BUYING CSGO SKINS⭐️INSTANT CRYPTO / BANK

      By bomarket · Posted

      Bump
    • Alo2alo2
      Help with folder system!

      By Alo2alo2 · Posted

      I can use this folder system for High Five offline server?   The folder does not have a l2.exe file.   Thank you very much if anyone can help me.   https://drive.google.com/file/d/13kU-g_4JJ-sP-kg2F7pqkUOVKmQdubFm/view

  • Topics

×
×
  • Create New...