Archive

Archive for April, 2010

Cool CSS tab menu

April 17, 2010 4 comments

As you can see, lately I have been playing quite a bit with CSS.
So I recently made a CSS tab menu that I thought was worth sharing. It looks like this:

CSS Tab Menu

And it is quite simple.
All that is needed is an image with the looks of the tabs, when unselected and when selected/hovered.
I used this:

tabs background image

You can edit the image to get whatever looks you want.
So, now we only need our html and css:

* Please notice that I used a ‘header’ container for the menu and I set some style attributes for position/etc, but you would probably change it to whatever your container needs.

HTML fragment:

<div class="header">
  <ul class="menu">
   <li>
     <a href=""><span>Option 1</span></a>
   </li>
   <li class="selected">
     <a href=""><span>Option 2</span></a>
   </li>
   <li>
     <a href=""><span>Option 3</span></a>
   </li>
   <li>
     <a href=""><span>Option 4</span></a>
   </li>
 </ul>
</div>

CSS:

.header {
  width: 100%;
  height: 80px;
  background: #003366;
  position: relative;
}

.menu {
  margin: 0px;
  list-style: none;
  position: absolute;
  bottom: 0px;
  right: 20px;
}

.menu li {
  float: left;
  margin-left: -12px;
}

.menu li a {
  float: left;
  height: 24px;
  background: url('img/menu.png') no-repeat;
  position: relative;
  text-decoration: none;
  color: #003366;
  cursor: pointer;
}

.menu li a span {
  float: left;
  padding: 6px 31px 0 35px;
}

.selected a,
.menu li a:hover {
  background: url('img/menu.png') 0px -25px no-repeat !important;
  z-index: 10;
}

.menu li a:hover {
  z-index: 11;
  color: #99cc00;
}

Notice that the image has to be placed in a folder called img with the name menu.png.

And that’s it! ;)

Categories: English, Programming Tags: , , , , , , ,

How to center a floating HTML div with variable width

April 15, 2010 4 comments

Hi! I know I have been away from the blog for a long time, but I decided to wipe off a little of dust and write some small things that I have been doing here.
Recently I have been working and learning lots of new and cool things, some of them are simple, some are not so trivial, but many of them could be quite useful for a bunch of people out of there, including myself! I mean, I decided to restart writing small tutorials on some simple things that I usually do, like the one I wrote about how to install the new JDK release candidate on Linux.
Ever since I wrote it, many times I had to come back here to recheck one or another detail of some command, when I wanted to install a version of JDK that was not available on the Ubuntu repositories.

So, today I will write down how to center a floating div with variable width…. A what? Portuguese English please!

Nowadays it is very common to see on websites a small notification on the top of the screen, like those:

Notification

I first saw these things on Google applications like GMail, but they are very nice anyways, because they avoid the use of (grr!) pop-ups (grr!) when there’s the need to notify the user about something. That’s probably why they are becoming each time more popular.

Anyway, this is basically a div or a span, centered on the screen or whatever other container contains it.
Usually to center something it is enough to use

margin: 0 auto;

But in this case we don’t know how wide the div should be, as it depends on the text it will show, which is dynamically provided by some programming language.
So my notification div class does not have a ‘width’ attribute and is displayed as an inline element:

.notification {
  display: inline;
}

In this case setting the margin to auto won’t work, so what to do?
I wanted to center my notification div in relation to the screen, so I created two divs:

<div class="container">
  <div class="notification">
   Here goes my notification message
  </div>
</div>

And my CSS:

.container {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
}

.notification {
  display: inline;
}

Basically we insert the notification div inside a container that occupies the whole area in which the div is to be centered, and set text-align: center.

I know it is very simple but it is not always obvious :)

Follow

Get every new post delivered to your Inbox.