Angry Browsers

Brilliant, I have my design and I'm ready to go. I've sliced my photoshop mock up into useful gifs and I'm ready to code I'm on linux so my working browser is firefox which is handy because because there lots of useful plugins, here few I swear by: -

• Fire Bug - Great tool to show javascript error, post & gets, css ... the list goes on


• Web Developer Tool Bar - This Has Everythink you will ever need when developing a web site structurally and cosmetically

So I'm ready, Firefox is ready and my IDE (sorry note pad fan boys) is ready. I'm using Intellij Idea which is mainly java IDE but the html/css/javascript support is pretty spectacular. I am going to have 3 core files index.html I'm not going to patronise you(in england its s not z stupid spell checker) by telling you what a html file does, structure.css which hold the structural css code and lookandfeel.css surely thats self explanatory.

I've decided to abstract the structure and style of the site as it makes easier to manipulate in development.

I have four different sections in the design the topbar which holds various links I want to display and a search box..

Top Bar



Ok so lets look at the html I'm going be using:

<div class="top-nav" id="topnav">
        <div id="toplinks" class="top-links">
            <ul id="toplinkstt">
                <li class="title">Useful Links ...</li>
                <li>
                    <a title="My blog on crossbrowser development"
                       href="http://angrybrowsers.blogspot.com">
                       Angry Browsers</a>
                </li>
                <li><a title="Where I go for tech news"
                       href="http://news.zdnet.com">
                       ZDNET News</a>
                </li>
                <li><a title="My IDE of choice"
                       href="http://www.jetbrains.com/idea/index.html">
                       Intellij Idea</a>
                </li>
                <li><a title="Ideal place for trac and svn hosting"
                       href="http://www.assembla.com/">Assembla</a>
                </li>
            </ul>
        </div>
        <div id="topsearch" class="top-search">
            <input type="text" class="round2"/>
        </div>
    </div>

So there's the basic html you can see I've used a unordered list <ul> for the links the default behaviour for list is normally vertical elements with bullets e.g.

• list item 1


• list item 2


• list item 3

However thats not what I want it to so I've added some custom css to change the behavior of the list

/** from lookandfeel.css **/

.top-links ul {
    display: inline;
    margin: 0;
    padding: 0;
}

.top-links li {
    list-style: none;
    display: inline;
    padding-right: 20px;
}

By setting the <UL> to display:inline and the <li> to display:inline; list-style:none it renders the list to be in a straight line thus giving us the desired effect. Although I for see issues later when it comes to ie and safari but for now works in firefox so meh!

You may also the very cool round search box with the pretty looking glass, heres css code:

.top-search .round {
    margin-left: 150px;
    -moz-border-radius: 10px;
    padding-left: 20px;
    background-image: url("../images/search.gif");
    background-repeat: no-repeat;
}

For some reason again I can't see this working in ie/safari is this I haven't done before so its going need a bit of thinking and a post :)

The Header

An important of any website as it tells the sites in big bold letters and it has a catchy slogan that makes go wow! and makes you think why the hell didn't I do a marketing degree anyways this is what looks like:



Heres the html code:

<div class="header-back" id="header-container">
        <div class="inner-hdst" id="inner-header">
            <div class="logo" id="logo">&nbsp;</div>
            <div id="languageselector" class="language-selector">
                <p>
                    What takes your fancy?
                </p>
                <ul>
                    <li class="selected"><a href="#asp">ASP.NET</a></li>
                    <li><a href="#jsp">JSP</a></li>
                    <li style="border-right:none"><a href="#php">PHP</a></li>
                </ul>
            </div>
        </div>
    </div>

As you can see I'm using similar rendered unordered lists apart from that its pretty standard stuff. However using floated divs and past experience says not all browsers like floated elements (ie springs to mind) preliminary here's the css

/** from structure.css **/

#header-container {
    width:100%;
    height:101px;
}

#inner-header {
    margin-left:32%;
    width:60%;
    height:187px;
}

#logo {
    float:left;
    width:442px;
    height:101px;
    margin-right:20%;
}

#languageselector {
    float:left;
}

As you can see I'm also using margins to help position elements will this cause me issues in future not sure we shall see :) NEXT ...

Navigation Bar

Firstly I haven't decided how I'm going to do the nav bar I've always struggled to be definitive on look and feel of the navigation components. Structurally I've gone for an unordered list again that has stripped of the style and displayed inline. Html look down :p

    <div id="navbar" class="nav-bar">
        <ul>
            <li><a href="#test">hello</a></li>
        </ul>
    </div>

Main Text Content Area And Footer

The main content area is based upon a two column design therefore requires us to use once again floating divs like I said this is this is likely to cause issue cross browser but that isn't a concern right now, here's the code:

<div id="content" class="contentst">
        <div id="leftcol" class="left_col">
        </div>
        <div id="rightcol1" class="right_col">
        </div>
        <div id="rightcol2" class="right_col">              
        </div>                              
</div>
<div id="footer" class="footerst"></div<

and the CSS:

//from structure.css
#content {
    margin:auto;
}
#leftcol {
    float:left;
    width:70%;
    height:60%;
}
#rightcol1 {
    float:right;
    margin-right:5px;
    width:26%;
    height:29%;
    margin-bottom:16px;
}
#rightcol2 {
    float:right;
    margin-right:5px;
    width:26%;
    height:29%;
}
#footer {
    width:100%;
    height:187px;
}
#dividerbottom {
    width:100%;
    height:4px;
}

So thats then ... hold up thats not right the footers decided it actually wants to be a header, have a look:



Well that's not right so why is that happening? Well if you have a series floating elements e.g. the content area proceeding divs will not recognise and inherit the height/width of the floating divs, therefore causing our footer to have inclinations towards becoming a header. So how can we fix this, we can use a css property to basically "ello mate these divs above need there space so why don't you go below them" this property is called clear which does this for us as we can set the clear property to "both" enable us show the footer in its desired place. I've done this by adding a div below the main content divs with a class that holds the clear property, code below:

 <div id="cleardiv" class="clear-div">&nbsp;</div>
//from lookandfeel.css
.clear-div {
    clear: both;
}

So we fixed that issue and we've finished the initial code so lets go on to the real content of this blog lets make it cross browser compatible, heres the finished product

• View the html source code here


• View the structure.css source code here


• View the lookandfeel.css source code here