Login | Register | FAQ
Anonymous

HTML question: table or frame ?

+ Post a reply

5 posts Page 1 of 1


HTML question: table or frame ?

by D.Alex » Thu Apr 03, 2014 8:47 am

Is it better to use frames to divide a page instead of a table ? (In terms of loading especially)
User avatar

D.Alex

  • Posts: 5
  • Joined: Mon Jan 20, 2014 7:59 pm

Re: HTML question: table or frame ?

by XainPro » Thu Apr 03, 2014 9:28 pm

D.Alex wrote:Is it better to use frames to divide a page instead of a table ? (In terms of loading especially)


the best 1st is divs then table, frames are worst
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: HTML question: table or frame ?

by D.Alex » Fri Apr 04, 2014 5:58 pm

XainPro wrote:
D.Alex wrote:Is it better to use frames to divide a page instead of a table ? (In terms of loading especially)


the best 1st is divs then table, frames are worst

Thanks for the answer.

Could you give me an example code of how to divide a page like this ?

Image

And if possible, the banner code not included in the div one.
Ex:
<img src=""></img> (banner code)
<div.... (and now div code, to split in 2 columns.)
User avatar

D.Alex

  • Posts: 5
  • Joined: Mon Jan 20, 2014 7:59 pm

Re: HTML question: table or frame ?

by XainPro » Sat Apr 05, 2014 7:10 am

Code: Select all
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
   background-color: #42413C;
   margin: 0;
   padding: 0;
   color: #000;
}


ul, ol, dl {
   padding: 0;
   margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
   margin-top: 0;   
   padding-right: 15px;
   padding-left: 15px;
}
a img {
   border: none;
}


a:link {
   color: #42413C;
   text-decoration: underline;
}
a:visited {
   color: #6E6C64;
   text-decoration: underline;
}
a:hover, a:active, a:focus {
   text-decoration: none;
}

/* ~~ this fixed width container surrounds all other divs ~~ */
.container {
   width: 960px;
   background-color: #FFF;
   margin: 0 auto;
   overflow: hidden;
}


.sidebar1 {
   float: left;
   width: 180px;
   background-color: #EADCAE;
   padding-bottom: 10px;
}
.content {

   padding: 10px 0;
   width: 780px;
   float: left;
}


.content ul, .content ol {
   padding: 0 15px 15px 40px;
}


ul.nav {
   list-style: none; /* this removes the list marker */
   border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
   margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
   border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited {
   padding: 5px 5px 5px 15px;
   display: block;
   width: 160px; 
   text-decoration: none;
   background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
   background-color: #ADB96E;
   color: #FFF;
}


.fltrt {
   float: right;
   margin-left: 8px;
}
.fltlft {
   float: left;
   margin-right: 8px;
}
.clearfloat {
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
-->
</style></head>

<body>
<img src="banner.jpg" />
<div class="container">
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Instructions</h1>
    <p>&nbsp;</p>
    <h2>Clearing</h2>
    <p>&nbsp;</p>
    <h3>Footer</h3>
    <p>Adding a footer following the columns, yet still inside the .container, will cause this overflow:hidden clearing method to fail. You can place a .footer into a second .container outside the first one with no detrimental effects. The simplest choice may be to start with a layout containing headers and footers and remove the header to utilize the clearing methods in that layout type.</p>
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>

User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: HTML question: table or frame ?

by XainPro » Tue Apr 08, 2014 3:17 pm

Once again CubeSquare Rocks :)
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1