What code makes this div box work?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
The site academicearth < http://www.academicearth.org has an HTML
construct that I am trying to learn by duplicating.  And so far I have
not succeeded.  If it's not too much to ask, could anyone look at what
they've done and advise me?

The construct (probably not the right term) is on the left and labeled
"Universities", "Subjects" and "Top Rated Instructors".

I tried to duplicate this by cutting & pasting the text between:

   <div class="col-left">

and the </div> before

   <div class="col-main">

Then, I incorporated all the calls to style sheets into my html.

All I got was text (an unordered list without the rounded-corner

What is in that code that makes the rounded-corner boxes?  I looked
carefully and I see no link to Javascript or anything else in that
part of the code.   Thanks for any help.

Re: What code makes this div box work?

luxor1275bc@gmail.com wrote:
Quoted text here. Click to load it

Nothing. It's a background applied with CSS, as is the rest of the styling.

Quoted text here. Click to load it

Look at the CSS.

Re: What code makes this div box work?

On 7 May, 23:45, luxor127...@gmail.com wrote:

Quoted text here. Click to load it

The .accordion class on  a list, not the col-left class. Then it sets
a background image. Look for  ul.accordion

It's not great, as it uses a fixed width image

You might like to look at the "sliding doors" menu code for other
approaches. Watch out for problems when font sizes are changed.

In general though:

* Rounded corners aren't worth the effort.  (anything involving
background images is rarely worth it these days - there's increasingly
an easier way).

* Rounded corners can look very dated on the web

* CSS 3 does them easily, so code to that.

* There are browser-specific tweaks that can non-harmfully emulate CSS
3 rounded corners for most users, most of the time, today. Search this
ng and c.i.w.a.s

Secondly, use Firefox, install the "Web Developer" toolbar and
investigate its CSS menu on the right-click. Lots of useful gadgets
for sniffing out page structure and CSS selectors.

Site Timeline