Mida õppisin: kuidas teha nii, et veebilehe jalus (footer) ei oleks jalus; kuidas teha nii, et veebilehte sisse suumides ei lükkaks seda väga kortsu.
index.php
<!DOCTYPE html>
<html lang="et">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disain</title>
<link rel="stylesheet" href="../css/disain.css">
</head>
<body>
<div id="all">
<div id="header">
<h1>TITLE</h1>
</div>
<div id="left">
<h3>Menu</h3>
<a target="_blank" href="https://www.facebook.com/">Facebook</a><br>
<a target="_blank" href="https://twitter.com/">Twitter</a>
</div>
<div id="right">
<p>
text
</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
disain.css
*{
font-family:sans-serif;
}
body{
background-color:#2aeafc;
height:100%;
}
#all{
background-color:white;
margin: 5px 5px 5px 5px;
border: 1px solid black;
min-width: 90%;
min-height:100%;
border-collapse:collapse;
display: table;
position:relative;
}
#header{
/*min-width:97%;*/
height: 10%;
margin: 2px;
/*border: 1px solid green;*/
position:static;
}
#left{
margin-top: 2px;
margin-left: 1px;
/*border: 1px solid blue;*/
float: left;
width: 7%;
min-height: 10%;
text-align:center;
}
#right{
margin: 2px 2px 2px 2px;
/*border: 1px solid blue;*/
float: right;
width: 82%;
min-height:10%;
text-align:justify;
}
#footer{
height: 10%;
/*background-color:green;*/
margin: 2px;
/*border: 1px solid #fc902a;*/
bottom: 0;
display:table-row;
text-align:center;
/*position:static;*/
}
h1{
text-align:center;
}
a{
text-decoration:none;
}
No comments:
Post a Comment