...

View Full Version : how to... make line as page divider but not in a table?



h-tee-em-elle
12-21-2006, 01:00 AM
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

VIPStephan
12-21-2006, 02:12 AM
http://www.hotdesign.com/seybold/
http://bonrouge.com/

Arbitrator
12-21-2006, 02:37 AM
How about something like this? CF 103458 Demo (http://jsg.byethost4.com/demos/CF%20103458%20Demo.html)

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


<?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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum