Today I was working on a page layout where a page width had to be fluid, while the sidebar had to be with fixed width. So here is my solution:
The layout looked like this in the beginning:
» Read more: How to – layout with fixed sidebar
Posts Tagged ‘css’
How to – layout with fixed sidebar
March 13th, 2010» Read more: How to – layout with fixed sidebar
Strange issue with captcha field
January 24th, 2009
Well, it’s more an observation than a real problem.
For my current CakePHP project I had to set a captcha field to a user registration form. I decided to be “creative” and I set the captcha image as background of the input field. In fact the graphical representation wasn’t bad at all. Unfortunately when it’s used, the captcha word shows wrong image and of course the result was wrong. To be correct the first attempt was always ok, but the second one (let’s say if the user decided to register again) the captcha was always wrong.
I checked everything especially after the image in Javascript library case and I couldn’t find anything suspicious.
The solution came when I removed the image from the background of the field and call it with an <img> tag. This time everything went just fine. This make me think that it’s a cache problem. I didn’t dig it deeply, because for now it’s working and as you can see it’s looking better.
So, an advise from me – never put your captcha image as background of your field, or call through css. Just use good old <img> tag instead.
Fixing Dead Centre approach with jQuery
October 17th, 2008I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.
Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.
I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.
You can see the difference in these 2 examples:
Resize your browser window in order to see the difference.
How it’s working?
First of all there are 2 javascript includes:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
After this there is a function which track the size of the screen and the content.
<script type="text/javascript">
/*Track height and width of the window and the content*/
function resize(){
if($(window).height() < $('#content').height()){
$('#horizon').css('top', '0px');
$('#content').css('top', '0px');
} else {
$('#horizon').css('top', '50%');
$('#content').css('top', '-'+($('#content').height()/2)+'px');
}
if($(window).width() < $('#content').width()){
$('#content').css('left', ($('#content').width()/2)+'px');
} else {
$('#content').css('left', '50%');
}
}
//Bind events on resize
$(document).ready(function(){
resize();
})
$(window).bind("resize", function(){
resize();
});
</script>
/*Track height and width of the window and the content*/
function resize(){
if($(window).height() < $('#content').height()){
$('#horizon').css('top', '0px');
$('#content').css('top', '0px');
} else {
$('#horizon').css('top', '50%');
$('#content').css('top', '-'+($('#content').height()/2)+'px');
}
if($(window).width() < $('#content').width()){
$('#content').css('left', ($('#content').width()/2)+'px');
} else {
$('#content').css('left', '50%');
}
}
//Bind events on resize
$(document).ready(function(){
resize();
})
$(window).bind("resize", function(){
resize();
});
</script>
The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.
Hope this will help someone.
CSS Menu builder
September 2nd, 2008Today I found a new service which could help to designers and developers while they creating the menus for their projects. The site is: www.cssmenubuilder.com and as far I can check from the site’s blog it’s quite new – about a month, but it provide very good service to it’s visitors.
So what is it? As the domain says it’s an online menu generator. The site provide 3 main types of menus: Horizontal and Vertical Menus as well as Breadcrumbs bars. The combinations are unlimited – see what the author said:
Please check out our 30+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.
Briefly what I like and what I miss in that site:
- Great service for people which are too busy to spend hours for building menus. I could say I am one of them
- It’s free, no need to register.
- Ability for live preview of the menu while doing it.
There is only one thing which missing and it’s multilevel menus, let’s hope this functionality will be available soon.
I definitely will use this service for my future projects. Why don’t you try yourself?
The site: www.cssmenubuilder.com
Yet Another Multicolumn Layout (YAML)
June 27th, 2008Today I found a nice CSS framework which claim to solve the multi-column layout issues which everyone of us meet during the construction of the web site design.
Actually I am speaking about YAML – Yet Another Multicolumn Layout. At first time I mix it with Yaml.org, but actually it’s a different thing. It’s a set of CSS files + few image files which would sort the issues with multi-column layouts.
The benefit is the availability of good documentation and nice examples.
Hope you found it helpful.
Nik Chankov is a web developer, with experience in various fields and frameworks. He has 10+ years of experience in web development. Currently working in his own company 
Loading ...
