Josef Richter » css http://www.josefrichter.com/blog blogging about the world around Sun, 25 Jul 2010 17:20:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS positioning with vertical spacers http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/ http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/#comments Wed, 08 Jul 2009 09:54:44 +0000 Josef Richter http://www.josefrichter.com/blog/?p=217 Making layouts in CSS is a real pain. To me it’s like cleaning toilet with a toothbrush – it can be done, you can even achieve great results, but you would probably choose different tool if you could… The community, including Eric Meyer and Shaun Inman obviously longs for a real layout system.

Before we get one, if ever, everyone’s using various hacks. Here is mine – the vertical spacers. I use Blueprint or 960.gs for layout and horizontal positioning and supplement them with this easy piece of html+css. If you need lots of irregular vertical spacing, like me in the below screenshot with arrows where vertical spacing is needed, this might help.

css vertical spacing

So the code is really simple. First we define css classes:

.h10 {
	margin-top: 10px;
}

.h20 {
	margin-top: 20px;
}

.h50 {
	margin-top: 50px;
}

.h100 {
	margin-top: 100px;
}

hr {
	visibility: hidden;
	clear: both;
}

The usage in HTML may be as follows:

As you can see you can get various heights by combining the classes. Hardcore CSS proponents may say HTML shall not bear any formatting info. Well, this might be true, but in my view it’s pure theory. Most CSS frameworks breach this rule as well and as long as CSS is so bad for layouting, I don’t care.

Enjoy! If you have any suggestions how to develop this method please leave a comment. Thank you.

]]> http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/feed/ 1 Auto-fit background image in CSS http://www.josefrichter.com/blog/auto-fit-background-image-in-css/ http://www.josefrichter.com/blog/auto-fit-background-image-in-css/#comments Sun, 23 Nov 2008 21:35:47 +0000 Josef Richter http://richter.wordpress.com/?p=14 I was trying to implement a background image which automatically resizes with the browser window. I was inspired by this lovely site: http://www.ringvemedia.com/. I googled out some solutions, however, none of them seemed to work just right. After few experiments, I arrived to this solution, which seems to be working so far:

UPDATE: also removed the scrollbars

body {
overflow-y: hidden ! important;
overflow-x auto ! important;
}

#background {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}

#content {
z-index: 2;
position: absolute;
}

#background img { width: 100%; }

<div id=”background”>
<img src=”images/bg1.jpg” />
</div><!– end #background –>

<div id=”content”>Lorem ipsum</div>

update: this solution is implemented at http://www.lachmani.cz/ – check it out!

Any better solutions out there? Any suggestions how to improve it?

]]> http://www.josefrichter.com/blog/auto-fit-background-image-in-css/feed/ 3