Živá ukázka

Výsledek

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/fonty.css" />
    <link rel="stylesheet" href="css/hlavni.css" />
  </head>
  <body>

<header>
<h1>YouAreNoob.eu </h1>
</header>

<div class="skorapka">

<div class="podmenu">
tohle je podmenu
</div>

<div class="hlavni">
tohle je to hlavní
</div>

</div>
</div>
<nav>     
tohle je menu

<div class="rubrika">
<h2>Left 4 Dead 2</h2>
<ul>
  <li><a href="#">Charger airlines</a></li>
  <li><a href="#">Kampaň</a></li>
  <li><a href="#">Scavenge</a></li>
  <li><a href="#">Best of ever</a></li>
  <li><a href="#">Funny</a></li>
  <li><a href="#">Other</a></li>
</ul>
</div>

<div class="rubrika">
<h2>Killing Floor</h2>
</div>

</nav>  
</div>

<footer>
© 2016 • vladce Tyran [CZ] • web je zatím v raném stádiu vývoje!
</footer>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
  word-wrap: break-word;
  font-family: ubuntu, "Times New Roman"; 
}

body {
  background: yellow;
}

/* =================
===  CLEARFIX   ====
==================*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1; /* pro ie 6 a 7 */
}

/* CSS Document */

body {
  background: white; /*#E8E8E8; */ 
}

/* ============================================================================
   Záhlaví
   ==========================================================================*/
header {
  width: 100%;
  background: white url("../obr/podobal/gr3.png");
  color: black;
  border-top: 2px solid #C0C0C0;
  border-bottom: 2px solid #C0C0C0;
}

header h1 {
  display: inline-block;
  margin: 0;
  padding: 20px; 
}

/* ============================================================================
   Hlavní menu
   ==========================================================================*/
nav {
  width: 250px;
  float: left;  
  background: #313131;
  background-repeat: repeat;
  color: white;
  border-right: 5px solid orange;
  
  /*smazat*/
  height: 500px;
}

nav .rubrika {
  margin: 10px 0 10px 0;
}

nav .rubrika h2 {
  background: #313131 url("../obr/podobal/gr4.png");
  color: #888;
  padding: 3px 3px 3px 9px;
  margin-bottom: 3px;
}

nav .rubrika ul {
  list-style-image: url('../obr/podobal/fast44.png');  
  padding-left: 35px;
}

nav .rubrika ul a {
  text-decoration: none;
  font-family: sans-serif, "ubuntu light", ubuntu, Arial, "Segoe UI", ubuntu, Verdana;
  font-size: 17px;
  line-height: 1.8;     
  color: #545454; 
}

nav .rubrika ul li a:hover {
  color: white;
}

/*
nav .rubrika h2 {
  display: inline-block;
  padding: 3px 3px 0 3px;
  background: #1779C2;
}
  
nav .rubrika {
  border-bottom: 3px solid #1779C2;
  margin: 10px 0 10px 0;
}
*/

/* ============================================================================
   Obaly
   ==========================================================================*/
.skorapka {
  width: 100%;
  overflow: hidden;
  clear: both; 
}

.obal {
  width: 100%;
  float: right;
  margin-left: -250px;
  padding-left: 250px;
  
  /*smazat*/
  height: 500px;
}

.podobal {
  background: orange url("../obr/podobal/gr2.png");
  color: black;
  
  height: 500px;
}

/* ============================================================================
   Podmenu  
   ==========================================================================*/
.podmenu {
  background: #CC66FF url("../obr/podobal/gr2.png");
}

/* ============================================================================
   Střeva
   ==========================================================================*/
.hlavni {
  background: #660066 url("../obr/podobal/gr2.png");
}

/* ============================================================================
   Zápatí - to nej nakonec
   ==========================================================================*/
footer {
  background: white;
}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS