Übung CSS Tab-Navigation

dabblet.css

/**
 * Übung CSS Tab-Navigation
 */


/* Platzierung der Tab-Navigation */
#tab-box {
    border: 2px solid #000;
    width: 50%;
    margin: 0 auto;
    padding: 8px 32px;
}

/* Positionierung der Tabs */
#tab-box {
    position: relative;
    margin-top: 64px;
}
#tab-box > p:last-child {
    position: absolute;
    top: -32px;
    left: 16px;
    margin: 0;
}
a, a:link, a:visited, a:hover, a:active {
    display: inline-block;
    padding: 4px 16px;
}​

dabblet.html

<div id="tab-box">
    <div id="content-alpha">
        <p>Accelerator photo sharing business school drop out ramen hustle crush it revenue traction platforms. Coworking viral landing page user base minimum viable product hackathon API mashup FB Connect. Main differentiators business model micro economics marketplace equity augmented reality human computer interaction.</p>
    </div>
    <div id="content-beta">
        <p>Tablet publishing HTML5 mobile first really simple syndication meetups white board walls. User experience iterate algorithm gamification semantic web value add market research stealth. Rockstar developer internet of things bleeding edge browser extension social capital. Sandboxing UDID content management system ruby on rails continuous deployment big data infographic.</p>
    </div>
    <div id="content-gamma">
        <p>User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor. </p>
    </div>
    <p>
        <a href="#content-alpha">Alpha</a>
        <a href="#content-beta">Beta</a>
        <a href="#content-gamma">Gamma</a>
    </p>
</div>​

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}