Ultimate layout

gebruikte technieken

- jquery-1.1.3.1.pack
plugins:
- vjustify() voor het gelijktrekken van CSS kolommen
- SaferMailTo() anti-spam voorziening
- RunOnLoad() beter werkende functie

versie geschiedenis

14-8-2007 – runOnLoad() in plaats van $(document).ready() toegevoegd.

BACKGROUND-IMAGE verdwijnt in de HTML e-letter

De oplossing is de link naar de background image een volledig pad van te maken, dus;

background-image: url (http://...........);

Elementen willen niet FLOATen

Wanneer meerdere elementen niet naast elkaar willen floaten, moet de parent een breedte hebben!

<div width=x>  <<---belangrijk!!
   <div style="float:left;">hoi</div>
   <div style="float:left;">hoi</div>
   <div style="float:left;">hoi</div>
</div>
Geplaatst in css, html. Leave a Comment »

FORM tag breekt DIV opmaak

Als de DIVs in een opmaak niet schijnen te floaten, of niet naast elkaar lijken te passen in IE, dan komt dit door het ontbreken van de volgende tag:

form {
width: 100%;
}
Geplaatst in css, html. Leave a Comment »

CSS BORDERS en TABLE-CELLS

Als er in de css een border om een td wordt gedefineerd, dient de td te worden voorzien van inhoud, al was het maar een nonbreaking-space.

css:

td {border:1px solid black;}

html:

<table>
   <tr>
     td> </td>
   </tr>
</table>
Geplaatst in css, html. Leave a Comment »

FLOATing DIVs

Bij Float: Let op de volgorde van de DIV!

de DIV die b.v. rechts gefloat moet worden dient in de hierarchie VOOR de andere DIV te komen, ook al komt hij er visueel gezien na!

Geplaatst in css, html. Leave a Comment »

PNG alpha transparency en IE

PNG alpha transparency wordt niet ondersteund in IE, gebruik hiervoor:

/* */
* html .kader .hd {
 margin-right:0px; /* space for right corner */
background: none;
width: 250px;
height:25px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/kaderTopL.png', sizingMethod='scale'); }
/* */

Waarbij de PNG in de background gebruikt dient te worden, en de property WIDTH is heel belangrijk!!

-We use ‘/* \*/’ to hide the filter from Mac IE
-We use ‘* html’ to make it IE specific
-We set the background on the DIV to ‘none’ to overwrite the non-IE settings
-Then apply the filter.
All you should need to do is to replace the ’src’ path and select you ’sizingMethod’. In this case we are using sizingMethod=’scale’ which displays top left and stretches the image to fill the dimensions of the element to which it is applied. You could also use sizingMethod=’crop’ which will display our image in the top left position non-tiled at it’s original size.

in IE werkt een link klikken niet meer, heeft te maken met HasLayout
http://www.satzansatz.de/cssd/tmp/alphatransparency.html

Geplaatst in css, html, ie. Leave a Comment »

BACKGROUND-IMAGE renderbug in FF / IE7 (HEIGHT probleem)

Blijft kutten, maar deze regels doen wonderen voor de top-div;

min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */

Oh, en html+body dienen height:100% te hebben.

Geplaatst in css, html. Leave a Comment »

Popup window via javascript in volledige breedte/hoogte van scherm

javascript:

function popup(url) {
scherm = window.open(url);
scherm.resizeTo(screen.availWidth,screen.availHeight); hitec.moveTo(0,0);
}

html:

<a href="javascript:popup('index.html');">

Waarbij de toevoeging van de ‘window.open’ aan de variabele ’scherm’ het allerbelangrijkste is!

Remarks in css/html

Wanneer je een cssfile doorzoekt waar die ene geremarkte regel nou ook maar weer stond, voeg dan een teken voor de naam die niet op die manier in de code voorkomt bv het =teken.

vb.

css

/* =table data */
table {…}

/* =koppen */
h1 {…}
h2 {…}

Geplaatst in css, html. Leave a Comment »