SLeitgeb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Vlastností float můžete určovat na kterou stranu mateřského elementu se element zarovnává.
Oblastem na stránce můžete stanovit jejich rozměry, pozici a zarovnání.

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="main">
        <div id="left">
            <h1>Or is it?</h1>
            <p>You've already familiar with paragraphs.</p>
            <ul>
                <li>And you've</li>
                <li class="middle">used some</li>
                <li>unordered lists</li>
            </ul>
            <ol>
                <li>Did you know</li>
                <li class="middle">there were</li>
                <li>ordered lists as well?</li>
            </ol>
            <!-- left -->
        </div>
        <div id="right">
            <h2>What if we put this somewhere around here?</h2>
            <p>Sometimes you might want to display tabular data:</p>
            <table>
                <tr>
                    <td>so</td>
                    <td>they</td>
                    <td>can</td>
                </tr>
                <tr>
                    <td>deliver</td>
                    <td>your</td>
                    <td>message</td>
                </tr>
                <tr>
                    <td colspan=3>easily</td>
                </tr>
            </table>
            <div>Use divs to structure the page.
                <div>You can nest them if you want. Actually, you can nest <span class="emphasis">a lot of elements.</span>
                </div>
            </div>
            <!-- right -->
        </div>
        <!-- main -->
    </div>
</body>
</html>

## style.css
html {
    font: 12px/24px Arial, "Trebuchet MS";
}

body {
    background: #ccc;
}

h1 {
    color: blue;
}

h2 {
    /*margin-top: 25px;*/
    margin-left: 25px
}

table {
    border-collapse: collapse;
}

table tr td {
    border: 1px solid white;
    padding: 5px;
    text-align: center;
}

p {
    border-top: 1px solid rgb(121, 66, 107);
    color: red;
}

.emphasis {
    color: green;
    font-style: italic;
    font-weight: bold;
}

.middle {
    color: yellow;
}

#main {
    width: 750px;
}

#left {
    float: left;
    width: 300px;
}

#right {
    float: right;
    width: 450px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Page title</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
	</head>
	<body>
	<div id="main">
	<div id="left">
	<h1>Or is it?</h1>
	<p>You've already familiar with paragraphs.</p>
	<ul>
	<li>And you've</li>
	<li class="middle">used some</li>
	<li>unordered lists</li>
	</ul>
	<ol>
	<li>Did you know</li>
	<li class="middle">there were</li>
	<li>ordered lists as well?</li>
	</ol>
	<!-- left -->
	</div>
	<div id="right">
	<h2>What if we put this somewhere around here?</h2>
	<p>Sometimes you might want to display tabular data:</p>
	<table>
	<tr>
	<td>so</td>
	<td>they</td>
	<td>can</td>
	</tr>
	<tr>
	<td>deliver</td>
	<td>your</td>
	<td>message</td>
	</tr>
	<tr>
	<td colspan=3>easily</td>
	</tr>
	</table>
	<div>Use divs to structure the page.
	<div>You can nest them if you want. Actually, you can nest <span class="emphasis">a lot of elements.</span>
	</div>
	</div>
	<!-- right -->
	</div>
	<!-- main -->
	</div>
	</body>
	</html>
	html {
	font: 12px/24px Arial, "Trebuchet MS";
	}

	body {
	background: #ccc;
	}

	h1 {
	color: blue;
	}

	h2 {
	/margin-top: 25px;/
	margin-left: 25px
	}

	table {
	border-collapse: collapse;
	}

	table tr td {
	border: 1px solid white;
	padding: 5px;
	text-align: center;
	}

	p {
	border-top: 1px solid rgb(121, 66, 107);
	color: red;
	}

	.emphasis {
	color: green;
	font-style: italic;
	font-weight: bold;
	}

	.middle {
	color: yellow;
	}

	#main {
	width: 750px;
	}

	#left {
	float: left;
	width: 300px;
	}

	#right {
	float: right;
	width: 450px;
	}