<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.floatleft {float:left; width:25px; height:25px; position:relative;}
.floatright {float:right; width:25px; height:25px; position:relative;}
#node {position:relative; width:500px; height:800px;}
#header {position:relative; height:25px; background-color:#999999;}
#body {position:relative; height:750px; background-color:#CCCCCC;}
#footer {position:relative; height:25px; background-color:#999999;}
#side { position:relative; height:100%; background-color:#999999;}
–>
</style></head>
<body>
<div id=”container”>
<div id=”node”>
<div id=”header”>
<div class=”floatleft”></div>
<span class=”floatleft”>HEADERORZOR</span>
<div class=”floatright”></div></div>
<div id=”body”>
<div class=”floatleft” id=”side”></div>
<span class=”floatleft”>Body contentsors woooot woooootootototottttoooooooooooooooooooooo</span>
<div class=”floatright” id=”side”></div></div><div id=”footer”><div class=”floatleft”></div>
<span class=”floatleft”>FOOTERORZORZ</span>
<div class=”floatright”></div></div>
</div>
</div>
</body>
</html>
*very* basic node css layout
September 14, 2007 by george
One Response
Leave a Reply
Pages
-
Recent Comments
george on pause rekarnar on *very* basic node css lay… george on Hubs, junctions, and node… george on Hubs, junctions, and node… george on Node Linking -
Recent Posts
Archives
gah. damn designers.
this is what were upto now, still needs a few things fixed. dins. if you please, would be better to edit the live one (rek.artificial.net.nz/internode):
<div class="#{className} outer_container" id="#{id}" style="#{style}">
<div id="#{id}_links" class="links_holder">#{made_links}</div>
<div id="#{id}_flash_msg"></div>
<div id="#{id}_css" class="css">#{css}</div>
<div class="inner_container">
<div class="header">
<div class="floatleft topleft"></div>
<div class="floatleft topcenter">#{header}</div>
<div class="floatright topright"></div>
</div>
<div class="title">#{title}<div id="#{id}_edit" class="edit">edit</div></div>
<div class="middle">
<div class="floatleft side"></div>
<div class="floatleft">#{content}</div>
<div class="floatright side"></div>
</div>
<div class="footer">
<div class="floatleft bottomleft"></div>
<div class="floatleft bottomcenter">#{footer}</div>
<div class="floatright bottomright"></div>
</div>
</div>
</div>