Html and Css (divs)

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • musaligari
    New Member
    • Mar 2008
    • 3
    #1

    Html and Css (divs)

    Hi all,

    i want to learn the divs without <tables> <tr> and <td>, is there any chance to learn divs.

    help me out

    Regards,
    suren
    9949811007
    Tags: None
    • ronverdonk
      Recognized Expert Specialist
      • Jul 2006
      • 4259
      #2
      When you google for 'table without table' yo're likely to get a lot of hits. Try the following tutorial on this webpages without tables

      Ronald

        Comment

        • jerrygadd
          New Member
          • Mar 2008
          • 8
          #3
          Here is a sample of using divs instead of tables + CSS

          Code:
          <html>
	<head>
		<style type="text/css">
			body { margin:0 0 0 0; font-family:arial; }
			h1 { font-weight:bold; white-space:nowrap; font-size:12pt; margin:0}
			table { border-collapse:collapse; border:width:0 0 0 0; border-outset:0; border-inset:0; }
			td, th { padding:0 5pt 0 5pt; margin:0; white-space:nowrap; }
			.header { font-size:8pt; }
			
			div.page { float:top; width:1050; height:600; page-break-inside:avoid; page-break-after:auto; }
			div.page_hdr { float:top; background-color:#FF0; }
			div.page_bdy { float:top; height:100%; background-color:#F0F; }
			
			div.inners { float:top; width:100%; height:50%; background-color:#0FF; }
			div.outers { float:top; width:100%; height:50%; background-color:#F0F; }
			
			div.inner { float:left; width:33.33%; height:100%; border:2pt solid #999; background-color:#F08; }			
			div.outer { float:left; width:50%; height:100%; border:2pt solid #999; background-color:#80F; }

			div.inner_hdr { float:top; width:100%; height:10%; border-bottom:1pt solid #999; background-color:#EEE; }
			div.outer_hdr { float:top; width:100%; height:10%; border-bottom:1pt solid #999; background-color:#EEE; }
			
			div.inner_ftr { float:top; width:100%; height:10%; border-top:1pt solid #999; background-color:#EEE; }
			div.outer_ftr { float:top; width:100%; height:10%; border-top:1pt solid #999; background-color:#EEE; }

			div.inner_bdy { float:top; width:100%; height:80%; }
			div.outer_bdy { float:top; width:100%; height:80%; }

		</style>
	</head>
	<body>
		<div class="page">
			<div class="page_hdr">
				<h1>TITLE</h1>
				<hr/>
				<table>
					<tr>
						<td>data</td>
						<td>more data</td>
					</tr>
					<tr>
						<td>data</td>
						<td>more data</td>
					</tr>
					<tr>
						<td>data</td>
						<td>more data</td>
					</tr>
					<tr>
						<td>data</td>
						<td>more data</td>
					</tr>
					<tr>
						<td>data</td>
						<td>more data</td>
					</tr>
				</table>
				<hr/>
			</div>
			<div class="page_bdy">
				<div class="inners">
					<div class="inner">
						<div class="inner_hdr">
							some
						</div>
						<div class="inner_bdy">
							other
						</div>
						<div class="inner_ftr">
							stuff
						</div>
					</div>
					<div class="inner">
						<div class="inner_hdr">
							somer
						</div>
						<div class="inner_bdy">
							other
						</div>
						<div class="inner_ftr">
							stuff
						</div>
					</div>
					<div class="inner">
						<div class="inner_hdr">
							some
						</div>
						<div class="inner_bdy">
							other
						</div>
						<div class="outer_ftr">
							stuff
						</div>
					</div>
				</div>
				<div class="outers">
					<div class="outer">
						<div class="outer_hdr">
							some
						</div>
						<div class="outer_bdy">
							other
						</div>
						<div class="outpart_ftr">
							stuff
						</div>
					</div>
					<div class="outer">
						<div class="outer_hdr">
							part_number
						</div>
						<div class="outer_bdy">
							other
						</div>
						<div class="outer_ftr">
							stuff
						</div>
					</div>
				</div>
			</div>			
		</div>
	</body>
</html>

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              jerry,
              Did you test that? There is no such thing as 'float:top' and the page breaks don't work in all browsers.

                Comment

                • jerrygadd
                  New Member
                  • Mar 2008
                  • 8
                  #5
                  Sorry drhowarddrfine is correct, my example does not work on all browsers, due to the page-break-xxx CSS not being supported in all browsers, and I do not know where I got float:top from! Appologies!

                    Comment

                    Previous template Next
                    Working...