www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with Page Layout

  1. #1
    Join Date
    Mar 2006
    Posts
    2

    Problem with Page Layout

    Im trying to get my web page layout sorted, but cannot get the desired effect.
    I want a rectangular box across the top, but the lines to be dashed, and two further retangular boxed one down either side, again dashed lines. However, for some reason i cannot get the desired effect. Any takers?

    Like below, but obviously the same down the sides to make boxes.
    Code:
                     -------------------------|
                                                        |
                                                        |
                     -------------------------|
    
                     -----                    -----|
                                                       |
                                                       |
                                                       |
                                                       |
                     -----                    -----|
    Last edited by ray326; 03-28-2006 at 01:54 PM. Reason: code wrapper on his layout attempt

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The boxes are divs. You can put dashed borders on any side of a div. Say your top one is id="banner".
    Code:
    /* untested */
    div#banner {
      width: 800px; height: 150px;
      border: 1px dashed black;
      border-left: 0;
    }

  3. #3
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    If you want dashed borders to work, I think they have to be huge.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
      body{
    	padding: 0;
    	margin: 0;
    	font: 10px sans-serif;
    	letter-spacing: 0.1em;
    	color: #444;
    	}
    h1,div.half,div.full{
      border: 4px dashed #666;
    	margin: 15px;
    	padding: 1em;
      }
    h1,div.full{
     width: 80%;
     clear: both;
     }
    div.half{
     width: 35%;
     float: left;
     }
    -->
    </style>
    
    </head>
    <body>
    <h1>Using lyrics as placeholders is my thing.</h1>
    <div class="half">
    <h2>One of those days &ndash; Athlete</h2>
    <p>it's been one of those days<br>
    and everybody's on it everybody's on it<br>
    and it's been one of those days<br>
    and everybody's on it everybody's on it</p>
    
    <p>here comes the rain<br>
    the boys and the girls are coming inside<br>
    walking past the gate if i hurry i can get home in time<br>
    i love my house</p>
    
    <p>it's been one of those days<br>
    and everybody's on it everybody's on it<br>
    and it's been one of those days<br>
    and everybody's on it everybody's on it</p>
    
    <p>toast the morning tv<br>
    the phone's just gone and i've missed my ride<br>
    one jump free and i was out the door and already late<br>
    and god came down and swept me off my feet and</p>
    
    <p>it's been one of those days<br>
    and everybody's on it everybody's on it<br>
    and it's been one of those days<br>
    and everybody's on it everybody's on it</p>
    </div>
    <div class="half">
    <p>Sometimes, songs don't need words.</p>
    </div>
    <div class="full">
    <p>&copy; Legalities are boring.</p>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles