I'm working on a site in my free time which will hopefully become a template of sorts eventually. This is the first time I've done web coding in a long time. The site is purely HTML/CSS at the moment and I intend to keep it that way. Sort of stumbled upon YUI and it seems to make life easier... possibly. First things first, is this really necessary:

<div id="yui-main">
  <div class="yui-b">
    <div role="main" class="yui-g">
      <p>Contents, etc</p>
    </div>
  </div>
</div>

Looking at it, it feels wasteful. Three divs to surround just the body contents? Can that safely be reduced to one? Just attaching the classes/id/role to one of them?

Now the real issue, the sticky footer. I have yet to manage anything in that regard. I've tried quite a few variations. Footer inside wrap, "push" div block, footer outside wrap and absolute position with bottom: 0. When the footer is actually at the bottom of the page, the margins used throughout pushes it down further. I tried fixing that (padding instead of margin), but I was still left with additional space at the bottom, so I undid the changes.

I forgot how frustrating webdesign can be.

P.S.: It's a pain to put HTML code into this... the JS or whatever is being used is mentally retarded and resulted in parsed HTML instead of displaying code

  • EDIT: I am not using YUI's JS library, just their CSS files. The three DIVs is how it comes configured from YUI's page builder. Matty Matt Matt almost 7 years ago

2 answers

Mottie 1134
1
point

Borders

As for the three divs to surround the contents, what are you trying to accomplish? If you want to add rounded corners then ideally you can use one div with these CSS classes:

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

These classes work for Firefox and webkit based browsers, but not IE. There is a debate as to adding rounded borders for IE. Anyway, check out these answers on Stackoverflow.

If you are trying to add borders using a background image, then it is necessary to to have three divs.

Luckily when CSS3 gets implemented, you can just define a border image - check out the posting here (it's very cool!)

Footer

As for adding a sticky footer, try this CSS

#ft {
 background: #555;
 color:#ddd;
 font-size:0.8em;
 height:30px;
 left:0;
 bottom:0;
 padding:0;
 position:fixed;
 white-space:nowrap;
 width:100%;
 z-index:99;
}

Scripting

If you are just coming back to web design, and you really want to make your life easier, I would recommend using jQuery over YUI, but this is a personal preference. There are other nice javascript libraries like prototype, dojo and mootools.

Answered almost 7 years ago by Mottie
0
points

Side note: I'm only using the YUI CSS files and such, not the JS side. I want to keep it JS free if possible.

The three DIVs are there because that's how the YUI grid builder spit it out. Not sure if they can be reduced or if the CSS has rules that requires them to be nested.

Sadly that CSS footer doesn't work. I've attempted a method similar to it, but nothing. It's coming to be really annoying and I cannot figure it out :(

EDIT: It seems to be working. I was being dumb earlier... working with the wrong CSS file.

Thanks so much! Seems to work everywhere. Now to get the design to flow properly.

EDIT2: Hmmm... this isn't quite what I wanted. I want it to be at the bottom of the page, but not be stuck there when there's more contents than page length. Like this one: http://www.cssstickyfooter.com/ Just with my layout and I cannot get it to happen :( With how it is now, the footer is always on the bottom viewport rather than at the bottom of the page.

Answered almost 7 years ago by Matty Matt Matt