Making the horizontal menu vertical!

Hi all,

Today I'll show you how to make the horizontal menu we made earlier vertical.
If you didn't read my article on "How to make a horizontal menu" I recommend you do that first because I am going to cut through all the crap here since we need only a few adjustments in the original code.

So hopefully after this short article you can go from this:

• One
• Two
• Three
• Four
• Five

To this:

• One
• Two
• Three
• Four
• Five

Okay lets do it!
The first thing we need to do is change the id's of the div and the ul otherwise we might accidentally target the horizontal menu if you would use it on the same page.(like here) So from this:<div id="menu"> <ul id="hornav"> To this:<div id="vertmenu"> <ul id="vertnav">      

Styling the div
Since it's only used to make a nice contrasting background behind the menu we only need to adjust the width and height (in real life you probably don't want to set the margin like below) Code:

div#vertmenu{

width:300px; /* adjusted the width */

height:300px; /*adjusted the height to fit all elements */

}

Styling the ul
We are going to use the same trick with the border as we did with the horizontal menu. We need to close the top and the left side of the menu. Code:

ul#vertnav{ border-left:1px solid #fff; border-top:1px solid #fff; /* added this to close the top gap */ }

Styling the li Now this is the most important part! This is were we magically switch from a horizontal menu to a vertical menu. By removing display:inline; from the code the list is shown the normal way. Code:

#vertnav li{ /* display:inline; commented this line since we want a vertical menu */ }

Styling the a elements
As you might have noticed we added display:block to the <a> elements in the horizontal menu. this allows us to set a width and a height to it. We only need a width and remove the top border since we use it from <ul>.So here goes: Code:

#vertnav a{ width: 200px; /* adjusted the width */ }

And That's it, you know have a nice styled vertical menu with hover effect! Hopefully the above was fun helpful, and easy. Easy it should be as a follow up of the article on the horizontal menu. Wish you happy coding, and leave a comment if this was helpfull or if you have requests!

Cssfreakie

P.s. Blogspot, stop facking up my code ! sorry guys blogspot is adding and removing breaks

Making a Horizontal menu

Hi all,

Today I would like to show you guys a very clean way to make a 1 level horizontal menu. Now before we start of I assume that you guys worked with the property 'float' before. If you didn't I recommend you read up on it. A nice way of doing that is reading my post on the photo book layout. Or in the future read my still to write article on float. When you read the stuff below and apply styles in the same order and refresh every-time you applied a style you will learn the most of it.

This is how it will look

• One
• Two
• Three
• Four
• Five

Now lets make it.

First of all we need some html mark up. We will use an unordered list for this. Now you might think but aren't those displayed vertical? Yes they are, that why i use it, after you read this tutorial you can make not only a horizontal but also a vertical menu if you pay attention. :)

Code:

<div id="menu">
            <ul id="hornav">
                <li><a href=""><span>One</span></a></li>
                <li><a href=""><span>Two</span></a></li>
                <li><a href=""><span>Three</span></a></li>
                <li><a href=""><span>Four</span></a></li>
                <li><a href=""><span>Five</span></a></li>
            </ul>
        </div>

Now you may ask yourself why on earth is he putting those extra span elements inside the anchor tags? Well I do that because quite some cool looking menu use an advanced technique named "sliding doors". This technique uses 2 images (or a 1 well targeted sprite) as a background. 1 for the anchor and 1 for the span element. Because they slide over each other, it allows for instance nice round corners in all browsers or other fancy looking stuff.

So we have a nice list with links and spans. Notice also I wrapped it in a <div> and I gave both the <div> and the <ul> an #id. This is of course to target them (that's what css is all about). Now lets style them.

Styling the  <div>
Lets start of with the <div> this div is of no real importance for the menu but it gives a good contrast for it and since we wrap it around the menu its a nice practise to give the #id the name of #menu.

Code:

div#menu{
    width:500px;
    height: 200px;
    margin:0 auto;
    background:#80b3ff;
}

Now what happens here. We give this div a width a height, a nice blue background, and we centre it by using  margin: 0 auto;
This will try to set the top and bottom margin to 0 and the left and right margin to auto. which centres it. Note IE 5 ("what's IE 5 dad?") needs text-align:center; for this.

Styling the <ul>
The <ul> is in fact the container of the menu, an we are going to give it some styling which seems odd at the start but if you follow along closely it will make sense. I added comments in the css.

ul#hornav{
    float:left; /* to let other elements sit next to it instead of pushing them off */
    border-left:1px solid #fff; /* set a border left a-elements will do the rest */
    overflow:hidden; /* if no width or height is given it will shrinkwrap to
                     heigth or with of inner elements */
    list-style: none; /* removes bullets */
    padding:0;  /* if you would have used a reset.css this is done already */
    margin:5px;
}

• We use float left, because it could very well be that we like to add more block elements on that same line for instance a search box or something.
• We use a border of 1 pixels only at the left side. We do this because as you will see the anchor elements will have a border top right and bottom. this way the menu can grow as width as we want without extra headaches.
• We us overflow:hidden; Now this is a little trick, which can only be understood when you play with it (give it a contrasting background if you do). As you see we did not specify a width or a height to the <ul>. Why not? well if this menu is created dynamically we can not know the width. (we can with javascript but why should we if we don't have to). By using oveflow:hidden it will shrink wrap to the width and height of the inner elements (<li> <a> <span>). (a nifty trick!)
• We use list-style:none; otherwise we would see the default bullets.
• We set padding to 0, otherwise the <ul> would have it's normal padding.
• We set margin to 5px. I normally would set this to 0 too, but I want it to give some space, if you look at the menu above that tine space top and right those are those 5 pixels. Now if you read my article on the box model you know why I used margin and not padding.

Styling the <li>

This part is crucial for horizontal menu, so pay attention :)

Code:

#hornav li{
    display:inline; /* make it a horizontal list */
}

Yep that's it, by displaying it in-line it becomes a horizontal list. :)

Styling the <a> (normal state)

Styling this is all about taste, and remembering we applied a left border on the <ul>

Code:

#hornav a{
    color:#04a; /*give the links some color */
    display:block; /*give them body */
    float:left; /* bloack elements start at new lines,
                by using float we undo this but keep the body */
    text-decoration: none; /* remove line under link*/
    font-size: 15px;
    padding: 15px;
    border:1px solid #fff;
    border-left:none; /* ul already has a border left */

}

• After we set a nice contrasting colour we set it to display:block; this will give it some body and even allows to set a width if we wanted to.
• Since it will now behave as a block element, it will start at a new line if we don't do anything about it. Here comes float:left; to the rescue, as you now know float allows to let multiple block elements on  the same line. So that's what we do.
• We use text-decoration:none; to remove the default ugly little underline from the <a>
• Next the font-size 15px and some padding of 15 now if you read my article on the box model you now know what height it has. indeed 45px. 15 + padding top and bottom.
• Now here comes the border trick I told about at the "styling the <ul>" part. We give it a border of 1 pixels and directly after it we say no border to the left. So what happens is that the button now in fact looks like this:

sample



So all those <a> elements just connect nicely to each other like lego bricks and the border from the ul closes the gap at the left.

Styling the <a> (hover state)

Styling the hover state is easy if you are familiar with the hover class.

Code:

#hornav a:hover{

    background:#fff; /* just a nice contrasting background */

    color:#80b3ff; /* a nice complementing text color */

}

The :hover on the a element allows for special styling ones your mouse is over the element. You can apply :hover on anything you like. So if you want a mouse-over effect with just css and no javascript you can do it! There is only one problem, IE 7 and lower don't like this pseudo hover class. it only allows :hover on <a> elements. But there are some great javascript fixes for that.

Ones you did all the above you should have a great looking menu that's is portable, ready for the more advanced sliding doors technique and even has a mouse-over effect without using javascript.

Hope you enjoyed this! wish you happy coding and as allows leave a comment if you found this useful or have requests.

cssfreakie

Creating a Media-Box

Hi everyone,

I thought I share the following with you because  quite often people try to make a box with a picture in it and some extra text to the right but do it wrong. I call this box a mediabox. This is done by all big websites like facebook, amazon google, and pretty much any website that aims at people that read from left to right do.

For some reason people keep using tables for this kind of job, which brings in extra complexity and mark-up code while it can be done in a much easier and cleaner way.

Now if you would have read my article on monkey book which I still recommend you do, you would probably know how to do this without using tables. In fact the mark up is pretty much the same except for the extra float on the image.

General mark-up:
Code:

<div class="media-box">

<img src="http://i55.tinypic.com/2d962ww.png" alt="" />

<strong>This is a title</strong>

<p>this is some text, lalalala lalalala lalalala lalalalala lalalala</p>

</div>

We used a class of media-box, since it's pretty likely that we are going to use the style for that div and it's inner elements more than ones. For instance if we have a catalogue with products.

Just some thing we should arrange for this div. we need to let it float left, so we can show more or less  of these boxes depending on the window size or wrapping container. maybe a nice background color and maybe even some padding so the contents have some air. We could set a fixed height and width.

We also need to set the image to float: left; so the shows up nicely at the right side of it. And we should apply some margin to the right of the image to keeps some space between the text and the image.

The style could look like this:
Code:

            div.media-box{

                float:left;

                margin-right:10px;

                overflow: hidden;

                background:#0055BB;

                padding:3px;

                border:1px solid #fff;

                color:#fff;

            }

            .media-box img{

                float:left;

                margin-right:5px;

            }

An example can be found here here
And the complete script I used here. (note though: use an external style sheet on a live site! this is why)

Rests me to wish you happy coding! Leave a comment if you found it useful, have questions or have requests.

Cssfreakie

Eliminate Browser differences with a reset.css

Hi everybody,

In this article I want to show what I do after I included a reset.css.

But for those of you who didn't read my article on the css box model. Hereunder a short introduction on the reset.css. As you may or may not know, all browsers are different. Not only by name but also in the way they apply default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same in every browser.

A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is to use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a  margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility without a reset.css. The best reset.css I worked with is: meyer's reset.css

Now because of the cascading effect you need to put that reset.css above the other style sheet. That way you first reset all properties and than apply your own style instead of the other way around. which hopefully makes sense.

<link href="http://yourdomain.com/reset.css" rel="stylesheet" type="text/css"> 

<link href="http://yourdomain.com/styles.css"  rel="stylesheet" type="text/css"> 

I got the reset.css, but now what?
Well now you will probably think "what the hack just happened....this will take years to style"
No worries there are some great tools to help you out. One I use pretty often is this one. It's a html elements test page. Just insert it to your website and you are ready to style all elements in an organised way.

Hopefully the above was useful to you, if so leave a comment.

Cssfreakie

Don't use inline style

Hi everybody,

This is just a very short article, to convince you not to use in-line style, but use an external style sheet instead.

As you may or may not know css can be applied by using:

• an external stylesheet:

<link href="http://somedomain.come/stylesheet.css" rel="stylesheet" type="text/css"></link>

• style tags

<style type="text/css">

#myelement{

    color:#f4a;

}

</style>

• inline style 

<div style="width:300px; height:300px; color:#333"></div>

4 Reasons why you should use an external style sheet!

• A good practice in coding is to separate style from content. One reason why this is a good practice, is because ones we separate stuff that does something different, it will be easier to isolate problems and maintain it in the long run. Certainly when you work in teams.
• Inline style is redundant. Ever seen a tabular design where the coder uses valign:top; on the table cells  (<td>). While most use tables for no good reason at all, they often also use in line style. So in case they have a table with 10 rows and  3 columns, by using in line style they would have to set valign:top; 30 times. While it could be done with 1 single line in an external style sheet.
• Prevent chaos. inline styles are quite often the cause of pages breaking or codes not functioning as intended because of the extra semicolons ; too many " or ' or : characters.
• An external stylesheet is faster.  Now this may sound weird, but if you would use either in-line style or styles by using the style tags, the page will load slower, than it would when using an external style sheet. For more details have a look here.

Hopefully, you make the above a best practice. it will save you time, keep things organized and even speeds up your website.

Rest me to wish you happy coding, and again, don't hesitate to leave a comment if it was useful, or if you want to request something.

Cssfreakie

The Css Boxmodel (simple explanation)

Hi everybody,

I thought it would be good to write a short article on the css boxmodel and share it with you, since it's pretty much vital to layout your content. If you would google for images and use boxmodel as query, you will see thousands of images that pretty much look like the one below.

But the image above won't help a lot if you have no idea what you can do with it. Since most articles assume that the above is clear enough I thought I do tell what it is used for, since assumption is the mother of all fuck ups

Simple said: any element (content) has a padding, a border and a margin.

• Padding is used to give some extra space with a background around the content. This property is ideal for a div-element with elements inside. By using padding the elements inside will have some air between itself and the edge of the background.
• Border is used to mark the end of the padding with a line-style. So if you would have a no padding (padding:0;) the border is directly put around the content.
• Margin is used to give the some transparent space (without a background) around the content. So that's with the padding and margin included.

 So lets apply that to a real-life example:

Here you see an image of a monkey with the following properties:

padding: 5px; this allows us to give a nice background(image) behind it ( background: #37abc8; )

border: 2px solid red
a red border around the padding 

margin:5px;
some transparent space around it.


Things to pay attention to:

• Dimensions: In case this image is 200x200 pixels. By applying a padding of 5px a border of 2 pixels and a margin of again 5pixels around the image, the object becomes larger than the original 200x200 pixels. To be precise it becomes 224x224 pixels. This is because we applied a padding a border and margin at the: top-, right-, bottom-, and left-side of the image.
• Browser differences: All browsers are different. Not only by name but also in applying the default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same. A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a  margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility. The best reset.css I work with is: meyer's reset.css

Hopefully the above was any useful.
Rests me to wish you happy coding, and don't hesitate to leave a comment or request something.

Cssfreakie

edit: in addition to the above you might want to read my article on the reset.css and what to do afterwards here.

HTML elements and endtags

Hello everybody,

I thought I post the code below after I saw that someone posted a pretty weird code on a forum asking what was wrong with it. The poster is clearly unaware of the concept of the end-tag. Depending on your doctype all* HTML elements require an end-tag (*xhtml). The code that was posted looks like this:

Code:

    <div class="footer">
      <div class="footertxt">
        <div class="footerme"> <>
        <div class="footerright"><>
        <div class="footerimgmail"><>
        <div class="footercopyleft"><>
        <div class="footercopyright">
          <div class=" "><>
        <>
      <> <!-- closes footertext -->
    <> <!-- closes footer -->

this code is pretty much invalid. A good editor would have told this directly. (netbeans does a great job at this)

now back to the code:

the poster did this : <>   but that doesn't mean anything really.

Since all* elements in html require an end-tag we should do the following
for a div-element

• the start-tag is <div>
• the end-tag is </div>

and for a p-element

• the start-tag is <p>
• the end-tag is </p>

See the / in the end-tag? all end-tags have that.

So in this situation the poster was using a div in a div (nested elements)
so it should look like this:

Code:

<div id="outer-div">
     <div id="inner-div"></div>
</div>

By using clear indentation we can easily see which start-tag is the "partner" of which end-tag. Any-time an element is a nested child, you make an extra indentation. So the code should have looked like this:

Code:

<div class="footer">
      <div class="footertxt">
              <div class="footerme"> </div>
              <div class="footerright"></div>
              <div class="footerimgmail"></div>
              <div class="footercopyleft"></div>
              <div class="footercopyright">
                    <div class=" "></div>
              </div><!-- closes footercopyright -->

      </div> <!-- closes footertext -->
</div> <!-- closes footer -->

Happy coding! Feel free to leave a comment if you have questions or requests

Cssfreakie

making a photobook layout with float

Hello everybody,

Today I would like to show you how make a very simple photo book layout named "monkey book" by using the power of float. It won't be extremly advanced, but trust me it doesn't have to be either.

For quite some people the float property is hard to understand at first. Hopefully though after you read this brief article you know what it could do for you.

In a nutshell float allows you to put block elements on the same line. While the normal behaviour of a block element is to start at a new line. Now why would we need float in case we need images on the same line. Aren't those images in-line elements? Exactly! But what if we want to put a little caption underneath it with the name?

In those cases it's nice to have the power of float in combination with a wrapper around both the image and the caption.

A simple mark-up could look like this.


Code:

<div class="image-holder">
     <img src="http://i55.tinypic.com/2d962ww.png" alt="" />
     <p>this monkey nr 1<br />this is line 2</p>
</div>

This little snippet doesn't look promising but it's in fact how the structure for the image holder looks like, a div with a class of image-wrapper (a class because we are going to use it more than ones). And inside an image a paragraph and a break (strict style
instead but that depends on your doctype)

Since we wrapped up the image and caption in one nice div we can easily target it and set properties for it. So lets do that!

Code:

.image-holder{
  float:left; /* all images should float left */
  margin:5px; /* some space around the div to give it some air */
  text-align: center; /* to center all content of the div */
  background:#0055BB; /* fancy background for the div */
  padding:3px; /*some padding to make the background reach 
               further than the width of the image */
  color:#fff; /* a nice contrasting color */
  }

So that is a the style! now how would it look with much more photo's
well have a look here: http://cssfreakie.webege.com/monkeybook.php
If you resize your window you can see what happens to the floated elements

Now I cheated a bit by using a php script to generate the images instead of putting in 80 images by hand.

The final script can be found here: But watch out! For production purposes use an external style sheet. It's always better to separate style from content.

happy coding and leave a comment if this was helpful or if you have questions or requests.

Cssfreakie