Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to... make line as page divider but not in a table?

    hey,
    k what i'm trying to do is make a line segment that divides my entire page (left | right), and within that, one that divides it top and bottom.. I want a relatively thin line (1px-2-px). I tried puting it in a table but that didn't seem to work; this is due to the fact that i want the line to touch the extremeties of the page (all the way from top to bottom, inclusive). I also want to add some more lines like this that touch other ends of the page, that all connect.

    How would I go about doing this?

    Note: I also tried <hr> but that only went as far as the table..

    Thanks in advance,

    -HTML

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    How about something like this? CF 103458 Demo

    View it in Firefox or another modern browser for the best effect.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Author" content="Patrick Garies"/>
        <title>CF 103458 Demo</title>
    
        <!-- Tested: Firefox 2 and Internet Explorer 7 -->
    
        <style type="text/css">
          * {
            margin: 0;
            }
          html, body {
            height: 100%;
            color: black;
            font: italic 70px "Palatino Linotype", Palatino, serif;
            text-align: center;
            }
          body > div {
            display: table;
            position: absolute;
            width: 50%;
            height: 50%;
            border: solid silver;
            }
          body > div > div {
            display: table-cell;
            vertical-align: middle;
            }
          *#top-left {
            top: 0;
            left: 0;
            border-width: 0 1px 1px 0;
            background-color: green;
            color: white;
            }
          *#top-right {
            top: 0;
            right: 0;
            border-width: 0 0 1px 1px;
            background-color: tan;
            }
          *#bottom-left {
            bottom: 0;
            left: 0;
            border-width: 1px 1px 0 0;
            background-color: crimson;
            }
          *#bottom-right {
            right: 0;
            bottom: 0;
            border-width: 1px 0 0 1px;
            background-color: #222;
            color: white;
            }
        </style>
    
      </head>
      <body>
    
        <div id="top-left">
          <div>GREEN</div>
        </div>
        <div id="top-right">
          <div>TAN</div>
         </div>
        <div id="bottom-left">
          <div>CRIMSON</div>
        </div>
        <div id="bottom-right">
          <div>SABLE</div>
        </div>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •