More Anton Ygartua Work

Home

  • Welcome to my site

    Hi my name is Anton Ygartua, I'm a freelance Web Designer based in London UK. I love to create & build web sites from the ground up. Here you can find some of my latest work. I'll be updating this site with articles and interesting stuff.

  • Fluid 2 Column layout - CSS trick

    Last week I started building a new admin system for a product that will soon be launching called Solid Delivery. Solid Delivery is an email marketing system that tracks emails, provides clients with full statistics and enables agencies to prepare email blasts with ease. The campaigns are then professionally sent through Solid Delivery account manager.

    When starting the site I wanted to ensure it was entirely fluid so that depending on how wide your browser is it will fit the screen.

    In this example I have 2 columns called id="leftCol" and id="rightCol" my rightCol will not be resizable as its a menu bar.

    Structure HTMl:

    <div id="wrapper">
    <div id="rightCol"> </div>
    <div id="leftCol"> </div>
    </div>

    CSS:

    #content
    {
    width:95%;
    margin:0 auto;
    }

    #leftCol
    {
    margin-right:300px;
    margin-left:25px;
    }
    #rightCol
    {
    float:right;
    margin-right:25px;
    width:240px;
    }

    Notice how the #leftCol has no width. This is to ensure that it will resize with the content which is set to a percentage rather than pixels.

  • Conforming with XHTML (strict) standards and target="_blank"

    Ok so target="_blank" has nothing to do with presentation so if you have your doc type set to 1.0 Strict it wont pass validation. So the question is how do we get around this little problem. One way is a bit of javascript. Below are a few steps to follow to get those pages validating again.

    First replace all those target="_blank" with rel="external" Once you have done that then create a new file named external.js where we will copy paste the following javascipt:

    function externalLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i=0; i<anchors.length; i++) {
    var anchor = anchors[i];
    if (anchor.getAttribute("href") &&
    anchor.getAttribute("rel") == "external")
    anchor.target = "_blank";
    }
    }
    window.onload = externalLinks;

    Save that file in the root directory and last but not least is to add the following line within head tags.

    <head>
    <script type="text/javascript" src="/external.js">
    </script>
    </head>

Bloombla post

Anton Ygartua Designer in New York
First time back to New York since I was 12 and loved it. [read story]
Anton Bloombla Anton Bloombla
Anton web designer reporting from in Spain
Sitges, sun, beach and night [read story]
Anton Bloombla Anton web designer reporting from in Spain