Ž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>

<div class="nadpis">
<h1>YouAreNoob.eu </h1> 
</div>
<div class="ikonky">  
<a class="ikonaFB" href="http://www.seznam.cz"></a> 
<a class="ikonaYT" href="http://www.seznam.cz"></a>
<a class="ikonaSTEAM" href="http://www.seznam.cz"></a>
</div>

</header>

<div class="skorapka">

<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 2</h2>
<ul>
  <li><a href="#">Survivor</a></li>
  <li><a href="#">Versus</a></li>
  <li><a href="#">Objective</a></li>
</ul>
</div>

<div class="rubrika">
<h2>Plants vs Zombies</h2>
<ul>
  <li><a href="#">Garden Ops</a></li>
  <li><a href="#">Versus</a></li>
  <li><a href="#">Other</a></li>
</ul>
</div>

</nav>

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

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

<p>Lorem ipsum dolor sit amet consectetuer pretium <br>id sit gravida dolor. Nulla massa convallis et elit quis nunc mauris diam Phasellus pellentesque. Dui congue lacinia Sed nascetur.</p>
<p>Sed libero ligula faucibus mauris dui orci ultrices <br>pretium non magna. Odio ac sed et eget amet Pellentesque Aliquam nibh in quis. Tempus Maecenas quis.</p>
<p>Ut netus Sed wisi convallis turpis Sed sem mauris consec<br>tetuer elit. Congue sed semper cursus faucibus Sed hac a consequat vitae ac. Nunc Ut orci leo eu.</p>

</div>

</div>
</div>

</div>

<footer>
<div><p>© 2016 • vladce Tyran [CZ] • Všchna práva vyhrazena • web je zatím v raném stádiu vývoje!</p></div>
</footer>

HTML

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

/* CSS Document */

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

header * {
  margin: 0;
  padding: 0;
}

body {
  background: yellow;
}

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

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

body {
  background: white; /*#E8E8E8; */ 
  background-image: url("../obr/podobal/gr7.bmp"), url("../obr/podobal/gr2.png");
  background-position: 0% 0%, 1920px 0%;
  background-repeat: repeat-y, repeat;  
}

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

header h1 {
  display: inline-block;
  margin: 0;
  /* zatím smažu padding: 20px; */ 
}

.nadpis {
  position: absolute;
  top: 25px; 
  float: left;
}

.ikonky {
  float: right;
}

/* ======= IKONKY ====== */
header .ikonaSTEAM  {
  display: inline-block;
  width: 55px;
  height: 55px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  background: white url("../obr/ikonky/steam.png") 50% 50% no-repeat;
}

header .ikonaSTEAM:hover {
  background:black url("../obr/ikonky/steam2.png") 50% 50% no-repeat;
}

header .ikonaYT{
  display: inline-block;
  width: 55px;
  height: 55px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  background: white url("../obr/ikonky/youtube-logo.png") 50% 50% no-repeat;
}

header .ikonaYT:hover {
  background:black url("../obr/ikonky/youtube-logo2.png") 50% 50% no-repeat;
}

header .ikonaFB {
  display: inline-block;
  width: 55px;
  height: 55px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  background: white url("../obr/ikonky/facebook.png") 50% 50% no-repeat;
}

header .ikonaFB:hover {
  background:black url("../obr/ikonky/facebook2.png") 50% 50% no-repeat;
}

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

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: 45px;
}

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

nav .rubrika ul li a:hover {
  color: E9E9E9;
}
nav .rubrika ul li:hover {
  list-style-image: url('../obr/podobal/fast45.png');
  padding-left: 3px;
}

/* ============================================================================
   Obaly
   ==========================================================================*/

.skorapka {  
  overflow: hidden;
  clear: both;
  background-image: url("../obr/podobal/gr7.bmp"), url("../obr/podobal/gr2.png");
  background-position: 0% 0%, 1920px 0%;
  background-repeat: repeat-y, repeat;    
}

/* nav sem dávám pro lepší orientaci znovu */
nav {
  width: 250px;
  float: left;
  padding: 20px 0 20px 0; 
  background: #313131;
  background-repeat: repeat;
  color: white;
  border-right: 5px solid orange;
}

.obal {
  /*width: calc(100% - 260px);      */
  width: 100%;
  float: right;
  margin-left: -250px;
  padding-left: 260px;  
  
  /*smazat*/
  
}

.podobal {
  background: orange url("../obr/podobal/gr6.gif");   
  color: black;
  
 
}

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

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

/* ============================================================================
   Zápatí - to nej nakonec
   ==========================================================================*/
footer {
  
  padding-left: 260px;
          
}

footer div {
  border-top: 1px solid #C0C0C0;
  padding: 25px 25px 25px 0;
  text-align: center;
}

footer div p {
  text-shadow: 2px 2px 4px #000;
}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS