fragmente » HTML

CSS: center background image in Firefox & Co.

blumentritt — Thu, 01 Jul 2010 10:09:09 +0000

Today just a short snippet.

To center a background image vertical and horizontal especially Mozilla Firefox need the attribute “fixed”:

body {
background-image: url(....);
background-position: center center;
background-attachment: fixed;
height: 100%;
}

Tested with: IE 6 – 8, Firefox 3.6, Safari 4

With this little trick, my day will be fine! Ole.

How to use position-absolute and z-index with Internet Explorer 7 and nested containers

karrock — Thu, 27 May 2010 11:43:19 +0000

When you have a div-container which has the attribute position-absolute and you put a 2nd div-container inside (which has also a position-absolute attribute) it can happens that Internet Explorer 7 does not interpret this correct.

I had the problem, that the 2nd div-container (which is a fold-out CSS-menu) is larger than the sorrounding div. In IE 7 the CSS-menu lays, in the part outside the sorrounding container, behind those elements. But for a menu you aspect to be the first element in the hierarchy.

Those layer positions can be set using z-index in CSS. The higher the index, the higher the position of the element to users-view. So I set the z-index to a high value but in IE 7 nothing happened.

After trying a while I worked out a very easy solution. If you use for an element the position-absolute attribute it will be set out of the normal element-flow of the website and be positioned absolute to the given position. But IE 7 inherits the value from the parent-element (here the sorrounding div-container) which had no z-index.

So my solution is to give both, the surrounding and the inner div-container a z-index. The surrounding container gets (in my case) a higher z-index than the surrounding one and the problem is fixed!

The surrounding element is the YAML #topnav-element and the inner one is a div-container with list-items which are styled as a JS-free fully CSS-menu.

#topnav {
  overflow:visible;
  z-index:5;
  position:absolute;
  [...]
}

#inner_container {
  position:absolute;
  z-index:2;
  [...]
}

How to delete csc-default and id tag in TYPO3 4.3

blumentritt — Sat, 10 Apr 2010 15:48:34 +0000

How to …

Since TYPO3 Version 4.3 all the source code is tagged with unlovely id and class tags with div-wrapper.

But with one little typoscript snippet you will get rid off it:

tt_content.stdWrap.innerWrap >

Now everything looks clean and sweet. I love TYPO3 anyway!

How to code a jQuery slider menu

blumentritt — Sun, 21 Mar 2010 13:25:54 +0000

How to …

I show you a nice jQuery snippet for a smoothy slider menu.

This was my first jQuery experience – if you find some tuning options, tell me please!

Here you can see my script in Action: http://www.gyn-endoskopie.de/

/**
 * @author team noir GbR
 * simple slide-out Menu
 * www.gyn-endoskopie.de
 * Version 1.5 - 11.01.2010
 */
$(document).ready(function() {
 //on first loading, hide the submenu
 $(".subul li").hide();
 //show active sub element, after paging
 $(".active").parent().parent(".subul").css('margin-top', -4).children("li").show(".subul li");

 //Actionhandling
 //click on menu
 $(".slide").click(function(){

 //only one submenu is allowed to show
 $(".angeklickt li").slideUp("fast");
 $(".angeklickt").removeClass("angeklickt");
 //close other open submenus
 $(".active").parent().parent(".subul").children("li").slideUp(".subul li");

 //mark heading ul
 $(this).next("ul").addClass('angeklickt');

 //show marked submenu
 if ($(".angeklickt li").is(":hidden")) {
 $(".angeklickt li").slideDown("slow");
 $("ul.angeklickt").css('margin-top', -4);
 return false;
 }
 //close/slide submenu
 else {
 $(".angeklickt li").slideUp("slow");
 $("ul.angeklickt").css('margin-top', 0);
 $(this).next("ul").removeClass("angeklickt");
 return false;
 }
 });

});

this is the menu source code:



Startseite
Zur Person
Operationen
 Operationsspektrum
   OP-Aufklärung
   OP-Patienteninfos
   Anmeldung
 Novasure/Goldnetz
 

Tagesklinik
Kontakt
 Schreiben Sie uns
   Anfahrt mit dem Auto
   Wegbeschreibung

System information:

TYPO3 4 CMS
YAML 3.1
CSS 2/3
XHTML 1.0
http://www.gyn-endoskopie.de/

greetz!

How to use images base64 encoded inline an img-tag

karrock — Sat, 13 Mar 2010 09:56:56 +0000

It´s feasible to put elements (like an image) in raw format (base 64 encoded) directly into an HTML-tag. I will show you an example with an img-tag.

First of all you need your image in a base64 encoded format. For this you can use the base64-decoder-encoder of motobit.com. Just choose your file to upload and afterwards hit “convert the source data”. The base64 encoded string will be shown in a textbox. For this example I use the external-link-image of wikipedia. And I´ll get back the following base64 encoded string:

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8A
ZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8k
mrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC

If you have this, you need to extend your normal img-tag with the information about an inline used image in base64-format. You put this information in the src-attribute. After the keyword “data:” you have to put the mime-type of the encoded image. We have to use “image/png”. If you put all together it looks like this:

This can be very useful if you e.g. want to give an image-tag or an html-code-snippet to a client or a colleague. So there is no need to copy or send the used image. It´s just enough to copy the html-code-snippet. Have fun …

No related posts.

Fight old Browsers – YouTube follows

blumentritt — Wed, 15 Jul 2009 06:02:50 +0000

Good news!

I just found several messages about YouTube and Internet Explorer 6 Support. Great.

They also use a small popup for User’s with old browsers.

I think this is the right way. Help those users, warn them and in a couple of month – STOP THE SUPPORT!

Thanks YouTube/Google Go for it

If you like to warn users also, look at our Post about jQuery-Popup & our new Version (1.3)

Martin

(in the next days i will check this online and present some screenshots, hopefully)

UPDATE (17.07.09)

Here is a small screenshot from the InternetExplorer 6 on Youtube.com.
I also checked youtube.com with Opera 9.26 – but nothing appears.

Aptana IDE Webdevelopment

blumentritt — Sat, 30 May 2009 14:32:00 +0000

hey!

instead of giving you TYPO3 hints and snippets i like to share my enthusiasm. Yesterday i found APTANA and started to work with. Amazing!

The hole IDE is nice to look at, good to work with and for now i discover so much features … WHOU.

I will continue posting here all the nice possibilities to work with.

for now, look here: a really cool plugin is ZEN CODE:
(turn off the sound )

If you want to share your APTANA-experience – feel free to post here.

Links:

greetz
Martin