PDA

View Full Version : yahoo reset css - help?!



jarv
10-27-2009, 01:07 PM
hi, IU am using the YUI yahoo CSS reset library,

on my site: http://vila.slicedcreative.co.uk/

I am having trouble positioning the class="yui-g" and the class="yui-u First"

please help

css


#bd {
line-height: 0px;
background-image: url(/images/top_page_03.png);
background-repeat: no-repeat;
min-height: 400px;
position:relative;
}
.yui-g{
background-image: url(/images/1px_mid.png);
background-repeat: repeat-y;
padding-left:69px;
padding-right: 37px;
position:absolute;
top:49px;
left: 0px;
width: 850px;
}
.yui-u{
float: right;
width:200px;

}

.first{
width:500px;
}



html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//E" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset-style.css" />
<link rel="stylesheet" type="text/css" href="css/vila-style.css" />
</head>
<body>
<div id="doc">
<div id="hd">
<h1>Villa Fulmar</h1>
<img src="/images/logo.png" border="0" alt="Vila Fula Logo" align="left" />
<img src="/images/top-text.png" border="0" alt="top text" class="toptext" align="right" />
<div id="navbar">
<img src="/images/left_side_nav.png" alt="left side nav" class="nav_end" />
<ul id="menu">
<li><a href="#" title="Vila Fulmar">Vila Fulmar</a></li>
<li><span></span><a href="#" title="The Area">The Area</a></li>
<li><span></span><a href="#" title="The Property">The Property</a></li>
<li><span></span><a href="#" title="Gallery">Gallery</a></li>
<li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
<li><span></span><a href="#" title="Availability & Prices">Availability & Prices</a></li>
</ul>
<img src="/images/right_side_nav.png" alt="right side nav" class="nav_end" />
</div>
</div>
<div id="bd">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u">
<div class="sideimage1"><a href="#"></a></div>
<div class="sideimage2"><a href="#"></a></div>
<div class="sideimage3"><a href="#"></a></div>
</div>
</div>
</div>
<div id="ft">
<div class="textonright">Web Design by Sliced</div>
&copy; Fulmar 2009. Contact us for our <u>Villa in Spain to rent on the Costa Blanca</u>
</div>
</div>
</div>
</body>
</html>

jarv
10-27-2009, 01:38 PM
my css reset is saying:


.yui-g .yui-u, .yui-g .yui-g, .yui-g .yui-gb, .yui-g .yui-gc, .yui-g .yui-gd, .yui-g .yui-ge, .yui-g .yui-gf {
width:49.1%;
}


If I take this out, I can make it work but I know I shouldn't be touching the reset CSS

Excavator
10-27-2009, 03:41 PM
Goodmorning jarv,
Not sure what you mean by having trouble positioning your classes. Sometimes it helps to put a background color on them just to see where they really are, like this -

/** CLASSES **/
.yui-g{
background: #ccc url(/images/1px_mid.png) repeat-y;

}
.yui-u{


}
#rightcol {
width : 220px;
margin-right:41px;

}

.first{
line-height: 18px;
margin-left: 62px;
background: #f00;

}

Your "CSS reset" ... not sure where you got that or what it's supposed to do but that is making things way more complicated than it needs to be.