Another IE (now 7) Hack
April 21st, 2009
Hi, i always, or 90%, talk about the Flash or Actionscript tips, classas and more, but today i have to work again with XHTML and CSS and one more time i hate the Internet Explorer – Microsoft Windows too. But well, the problem is: my css code work with Google Chrome and Mozilla Firefox but don’t in IE.
I thought to make other CSS file and import it with conditional only for IE like show my post about the CSS Conditional Comments, but searching and reading one more i saw one article that resolve my problem, use an IE7 Hack, YES! The Hack work easelly and fine like i will show.
In IE 6 to make a Hack into the CSS file you put the ‘underline’ symbol before the CSS and work fine only into the IE 6. The Internet Explorer Seven this Hack die but the IE Team forgot the *. Simple, right? You need only put the * symbol before your CSS code and work your CSS code only into the IE7.
32 33 34 35 36 37 38 39 40 41 | .scroll { height: 100px; overflow: auto; position: absolute; /* fix for IE to respect overflow */ left:50px; *left:15px; /* Hack for IE 7 */ width:630px; float:left; } |
For Firefox, Safari and Chrome you will see the left equal 50 pixels but only for Internet Explorer the left will be 15 pixels, with this you cannot create other files for your Hacks. Try it!
CSS Positioning in Ten Steps
March 17th, 2009
Yes, is this. CSS positions in only tens steps and work fine ehehe. Today is may second day working with another XHTML project, with out Flash oh my God. But so much interesting new things that i was read and learn, one of these thing is CSS Position.
First my problem was how to position one object – DIV – bottom of other container DIV? Its so easy. First step is set the container div with position relative, well now other DIV that you put into this one with position absolute will position right like show code bellow:
1 2 3 4 5 6 7 8 9 | #mainDiv { position:relative; } #childDiv { position:absolute; bottom:0; right:0; } |
This code will position the childDiv bottom and right into the mainDiv easily. This and other steps you will see in the link: http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Conditional comments
March 15th, 2009
Hi i am working hard in one new project but the first part of this project have nothing interesting using Flash – haaaaaaaa fuc** – and i expend so much time using and programming Actionscript and when i turn back to my begin, the XHTML, have some problems and one os this problems was using the drunk browser: Internet Explorer.
I think that nobody love IE, but if have one whatever. The fact is that IE is a most problem when use XHTML and it is one of thing that made me a Flash Programmer and not a XHTML Designer professional – hehehe.
Well, CSS and XHTML can work fine into Google Chrome, Mozilla Firefox, Opera, Safari but when you try test your project into the drunk browser you will see the problems:
• Wrong element position
• Wrong font-size
• Wrong list style, background position and so much more wrong things.
To resolve this problem, the first thing that you need is install Firefox, Safari, Opera or Chrome, ehehe, but if your client use Internet Explorer yet, well you will need make a custom style for your site: one work fine for all browser and one single for only resolve the problems of Internet Explorer.
In this case you will import one *.css file for all browsers and use the conditional comment to import a custom style for the Internet Explorer users. Hmmmm great no? To do it you need put this code into <head> tag:
<!--[if IE]><link to your custom style for IE<![endif]-->
You will see in your Dreamweaver, Aptana or other editor that your code will be commented but when you load the page on IE browser this *.css will be loaded and resolver your style problems, the problem is make the style two times but for XHTML sites is necessary.
You can too load files for especificly IE version using others codes like
<!--[if IE 5]>, <!--[if IE 5.5]>, <!--[if lte IE 5.5]>
and others, you can read more about it in bellow link.
http://www.quirksmode.org/css/condcom.html
15 Most Interesting jQuery Tutorials
March 4th, 2009
Reading about jQuery plug-ins and other i was to AjaxLine web site, there i read a fantastic post about 15 most interesting jQuery tutorials. Some great plug-ins and samples that you will see there:
Create A Tabbed Interface
PHP & Ajax with the Twitter API
Directory Trees With PHP
jQuery Sequential List
Create a jQuery Popup Bubble
AutoCompleter
Create an apple style menu and improve it via jQuery
see more there…
Link: http://www.ajaxline.com/15-most-interesting-jquery-tutorials
Useful and easy htaccess editor
March 4th, 2009
I really knew nothing about the htaccess file before meet this htaccess online editor. You can restrict folders, change the initial page name or extension.
A simple htaccess document that i was never wrote and today i made my first in two minutes:
<files ?^.(htaccess|htpasswd)$? ~>deny from all Options -Indexes ErrorDocument 400 400.htm ErrorDocument 401 401.htm ErrorDocument 403 403.htm ErrorDocument 404 404.htm ErrorDocument 500 500.htm DirectoryIndex default.php index.php init.php order deny,allow deny from restrict.php
Really good to try.
Link: http://www.htaccesseditor.com
jQuery.popeye: a lightbox alternative
November 26th, 2008
A power full alternative to load pictures and descriptions about the photo is a Popeye, a jQuery plug-in. Popeye work inline floating across the content. The XHTML code is simple and W3 valid.
To load this plug-in you may before load too jQuery after include too Popeye Javascript file, and to run it use the code bellow into HEAD tag:
$(document).ready(function () { $('.popeye').popeye(); });
Take a look in DEMO page and in Download page, two links bellow:
Overflow em imageResize via CSS
August 5th, 2008
A ideia do resize na verdade é meio que criar uma mascara, uma area de visualização da imagem, assim ao passar o mouse sobre a imagem mostraria a tag <img> por completo, assim como segue o conceito abaixo:
O Codigo para a inserção da imagem já com o efeito de resize é bem simples e não joge muito do que temos hoje em webStandard:
<a href=”#”><img src=”image.jpg” alt=”my image” /></a>
Veja o exemplo rodando ok na Demo page.
O estágio default em css para as imagens pequenas, thumbnails, é algo em torno do código abaixo, podendo, é claro, ser alterado de acordo com a necessidade do projeto:
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
Usando posicionamento absoluto podemos então criar o nosso ‘fake crop’ na imagem, cada imagem deve ter um estilo proprio para o crop e mudando o posicionamento em top e left de acordo com a necessidade.
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs li#image1 a img{
top:-28px;
left:-55px;
}
ul#thumbs li#image2 a img{
top:-18px;
left:-48px;
}
ul#thumbs li#image3 a img{
top:-21px;
left:-30px;
}
e Finalmente para ativar o resize colocamos o codigo hover que vai fazer a imagem aparece toda:
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
Bom proveito a todos e qualquer dúvida não deixem de ler o post original que segue o link abaixo:
CSS Frameworks
August 4th, 2008
Como em um passe de mágica, ou um pouco menos lento que isso, espalharam-se pela internet os danados, e facilitadores, CSS Grids ou melhores nomeados de CSS Frameworks. No inicio desse processo todo eu comecei testando o 960Grid System e o Blue Print, muito bons mesmo, cada um nas suas especialidades. Hoje rodando pelos blogs da vida para animar a começar criar, o que foi dificil, encontrei um post muito interessante sobre os diversos tipos de CSS Frameworks encontrados pela rede.
No site Hidden Pixels .com encontrei uma lista bem completa para com os mais conhecidos frameworks de CSS da net, vale a pena baixar alguns testar e usar essa facilidade para montar layouts em XHTML.
Link: CSS Frameworks
Mootools slider menu com jQuery
July 29th, 2008
Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.
Usando de um menu simples feito em lista (ul):
<ul class="kwicks" >
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
O estilo voce faz como preferir respeitando as config abaixo:
.kwicks li{
float: left;
width: 125px;
height: 100px;
margin-right: 5px;
}
e por fim so ativar o plugin na classe ‘Kwicks’ colocada na tag ‘ul’:
$().ready(function() {
$(‘.kwicks’).kwicks({
max : 205,
spacing : 5
});
});
Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:
Kwicks uncompressed
Kwicks packed
Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais". Cya.
Link: Kwicks for jQuery
jQuery for Dummies
July 18th, 2008
Quem trabalha com web hoje em dia, com Coding principalmente, encontra em diversos sites fontes muito interessantes de jQuery. Esse danado, que amo (lol), não serve somente para dar uma vida, animadinha, no site, ele vai muito além.
Com jQuery você pode validar forms em realTime usando efeitos de fade ou slide nas suas mensagens, pode fazer seus campos de texto ou tags como H1 serem editáveis com projetos em Ajax e muito mais, fora as animações é claro.
No site “Web Dev Lounge” encontrei um tuto muito legal para iniciantes nessa biblioteca de JavaScript, fácil dimais de utilizar e muito bom para expandir. Link abaixo.
