Sam Beauvois | Archive

How to set two background images for an HTML page ?

Posted June 7th, 2010 in CSS, Tips and Tricks, Web design by Sam Beauvois

The other day I was wondering how could I set two background images for an HTML page and I came with one solution.
I don’t know if it’s the best way to do that but it worked as I wanted.

To explain the solution, here is the complete steps I made

First I had an HTML page without any background:

Then I added some CSS to set a background image :

body
{
   background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

The result was good :

But I wanted to add a second background image on the right bottom :

So I moved my background declaration for the head part of the html file

html
{
 background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

and I added an other background declaration for the body part

body
{
 background:url("img/logobeachrahier_medium.png") no-repeat fixed right bottom ;
}

The background declared for the body is applied over the html one:

I think it’s Pretty good now.

CSS Mixer

Posted February 25th, 2010 in .NET, ASP.NET, CSS, MyProjects, Personal, Tools, Web development by admin

Css mixer is a tool I’ve developped in C# winforms, .NET framework 3.5

You can use it to improve you ASP.NET Themes or your CSS files for all your web projects.

If you have many css files linked to a page, you can group them in a single file with CSS Mixer.

You can also minify CSS files to save the bandwith.

To use it, open a folder containing CSS files,

choose an action (simple combine, or combine and minify) then click Save as …

Download the last version of CSS Mixer on codeplex.

I hope you’ll find it usefull. please give me feedback on it

How to build a “visible on hover” action menu with CSS?

Posted February 7th, 2010 in CSS, Web development by Sam Beauvois

In my previous post I explain a way to build a “visible on hover” menu using jQuery.

Now, I’ll explain you how to do that without javascript, using only CSS.

First, built the web page and a CSS file


<html>
 <head>
 <title>Sam Beauvois | CSS on hover menu</title>
 <link href="demo.css" type="text/css" rel="stylesheet" />
 </head>

 <body>
 <h2>Visible on hover with CSS demo.<h2>
 <h3>Please put you mouse hover the following texts</h3>

 <div>
 Demo 1
 <div>
 <a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
 </div>
 </div>

</body>

Then add a class to the container and content divs

</pre>
<div class="hidden_action_container">
Demo 1
<div class="hidden_action">
<a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
</div>
</div>
<pre>

And define the classes in the CSS file :


.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

note the class declaration :

.hidden_action_container:hover .hidden_action

Now it’s functionnal,

Add a style to make it nicer :

.hidden_action_container
{
 padding : 15px 15px 15px 15px;
 background-color: #DDDDDD;
 border-style:solid;
 border-color:#EEEEEE;
 height:50px;
}

.hidden_action_container .hidden_action a
{
 color:#999999;
 font-size: 20px;
 font-weight:bolder;
}

.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

You can see the online demo here : http://www.sambeauvois.be/Demos/CSS/VisibleOnHover/demo.html