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
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
Como conseguir compatibilidade cross browser
June 27th, 2008
Parece hilário falarmos de cross browse hoje em dia com tantas diferenças que conseguimos encontrar na interpretação do codigo XHTML e CSS. Dia após dia me deparo com outros ‘problemas’, identifico soluções – mas que são sempre paleativas. Encontrei hoje de manhã uma referência em um dos meus feeds para o site do Anthony Short e diretamente em um post com nome muito interessante e chamativo: How to get Cross Browser Compatibility Every Time. O engraçado que dessa vez não é somente um monte de ‘achismos’, existe uma lógica muito boa no texto, vale a pena conferir e ver se você anda fazendo tudo certinho ou erradinho por ai eheh.
Link original: How to get Cross Browser Compatibility Every Time
jQuery Multiple Dropdown
June 20th, 2008
Cada dia que passa fico mais impressionado com os poderes do jQuery. Hoje pesquisando mais sobre o infeliz encontrei algo muito interessante, um menu dropdown com multiplas opções, colunas e sub opções. Complicado de imaginar isso sem ver funcionando. O addict do jQuery tem 47k, incluindo a biblioteca base e ainda é XHTML válido.
Acesse o link do post original no labs do Gíva para fazer download do Dropdown. Link e print abaixo:
Link: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
WordPress 2.5 Treinamento
June 14th, 2008
Olá novamente. Hoje a tarde me deparei com um grande amigo atualizando seu blog, que prefiro não dizer qual era ou o nome do programa, e fiquei indignado com a burocracia – se é que se pode chamar assim – para adicionar ou editar um post. Fiquei por alguns minutos convencendo o infeliz do amigo a trocar para o WordPress até que deu certo.
No site do Lynda.com tem uma série de video aulas sobre a nova versão do WordPress (2.5.1) para iniciantes e mesmo para os mais familiarizados com a versão anterior. Alguns videos, os mais básicos, são free. Link segue abaixo para interessados. Luv XHTML, Luv WordPress.
Link: Lynda WordPress Training
H1,H2,H3… Como usar?
June 13th, 2008
Até mesmo para a criação web, que parece ser uma coisa muito “eu-pc-cliente”, existe as tão buscadas BOAS MANEIRAS. O uso abusivo de DIVs e IDs, Classes e mais classes por XHTML Coders inexperientes faz o pablinho aqui ficar com gosto de sangue na boca de tanta raiva ehehe. O XHTML é o standard do stardand da web, deve ser um codigo inteligente, reutilizavel e uniforme, sendo esse último o mais importante.
Para tanto, Alen Grakalic escreveu um artigo já faz um bom tempo falando sobre a utilização adequada do heading, pois não existe certo ou errado na web, existe funcional ou não. Essas tags são basicamente utilizadas para se por titulos e hieraquizar – espero que essa palavra exista – os textos na sua página.
Como exemplo podemos fazer uma ordenação da seguinte forma:
H1 – TITULO DO SITE
H2 – TITULO DO POST
H3 – SUB-TITULO DO POST
H4 – RESUMO BREVE DO POST
Atéééééééé o H6, o último existente de acordo com a W3C. O artigo do Alen Grakalic no CSSGLOBE.com ficou muito legal, pequeno mas esclarecedor. Segue o link do post original abaixo.
