[thelist] YUI - Grid Layout Issues
Chris Ditty
cditty at gmail.com
Wed Aug 23 08:33:57 CDT 2006
I am trying to teach myself Aja and i figured the best way was to rebuild my
site using it.
I was finally able to get the basic layout done, but I seem to be having
problems with positioning. The left side is fine, but I cannot get the
center and right sides to co-operate. The right side has to be 190px wide
with a 10px buffer on both sides and the center needs to be dynamic between
the left and right sides. Below is the stylesheet and the code that I am
using. Can someone show me the errors of my ways.
CSS
-------
body{
color: #333333;
background-color: #6B965A;
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
#doc{
width: 100%;
}
#page_header{
height: 77px;
background-color: #841010;
border-bottom: 2px solid #000000;
}
#leftNav{
width: 150px;
position:absolute;
top:87px;
border: 1px solid black;
background-color: #C08C8D;
width: 150px;
padding: 10px;
color: #000000;
}
#rightNav{
color: #333333;
position:absolute;
width:190px;
top:87px;
right:10px;
border:1px solid black;
background-color:#C08C8D;
}
.smallHeaders{
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding: 0px;
}
.underline{
border-bottom: 1px solid black;
}
#contentSection{
border: 1px solid black;
background-color: #cccccc;
position:absolute;
top: 87px;
right: 100px;
left: 205px;
padding: 10px;
border: 1px solid black;
background-color: #cccccc;
}
HTML
--------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/reset.css">
<link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/fonts.css">
<link rel="stylesheet" type="text/css" href="/Y-Ajax/grids/grids.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="doc" class="yui-t1">
<div id="page_header"></div>
<div id="bd"><!--- Outer Template --->
<div id="yui-t1">
<div id="leftNav" class="yui-b sideSpacer">
<div class="smallHeaders underline">Site Navigation</div>
</div>
<div id="yui-main">
<div class="yui-gc">
<div id="contentSection" class="yui-b">
<div class="yui-u">Center</div>
</div>
<div id="rightNav" class="yui-b">
<div class="yui-u">Shopping Cart</div>
</div>
</div>
</div>
</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>
Thanks
More information about the thelist
mailing list