0
I have a question that kills me when it comes to creating websites, I made a quick example here, after doing some research and none of it makes me doubt, I’m not sure I’m on the right track, but I made a quick, simple page, but to illustrate my question will serve. My question is whether it is wrong, or indifferent to set my page size this way, and if there is any more effective way to adjust to the screen size of the computer that will view, follow here the HTML and CSS, I would like a attention to CSS, if using MARGIN-TOP, ABSOLUTE, RELATIVE, TOP, LEFT, are being used correctness? If you have any tips, or even a book, article, something that can guide me in these concepts, I would appreciate!
Follow HTML and CSS:
.container {
width:100%;
height:100%;
}
div.topo {
margin-top:-8px;
margin-left: -8px ;
position:fixed;
width:100%;
height:150px;
background-color: #fe5f55;
z-index: 5;
}
div.topo h1{
position: relative;
top:-35px;
font-size:70px;
text-align:center;
font-family:consolas;
}
div.menu {
position: relative;
top:-70px;
}
div.menu ul{
position:relative;
width: 100%;
margin-left:-55px;
font-size:25px;
top:0px;
text-align:center;
}
div.menu li{
display: inline;
list-style: none;
border: #600 1px solid;
}
div.menu ul li a{
text-decoration:none;
font-family: consolas;
padding:30px;
color:black;
}
div.menu ul li a:hover{
color:blue;
}
div.lateral {
top:150px;
left:0px;
height:100%;
width:230px;
position: fixed;
background-color: yellow;
}
div.lateral h2{
text-align:center;
font-size:30px;
text-decoration: underline;
}
div.conteudo {
margin-top: -17px;
position: relative;
width:1119px;
height:700px;
top:142px;
left:222px;
background-color: black;
}
div.titulo {
position: relative;
width: 100%;
height: 100%;
font-size: 25px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Big News</title>
<meta chartset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="container">
<div class="topo">
<h1>Big News</h1>
<div class="menu">
<ul>
<li><a href="">Início</a></li>
<li><a href="">Notícias</a></li>
<li><a href="">Downloads</a></li>
</ul>
</div>
</div><!-- Fim do topo -->
<div class="lateral">
<h2>Updates</h2>
</div><!-- Fim da lateral -->
<div class="conteudo">
<div class="titulo">
<p> Aqui se encontra todo conteúdo da página, as laterais e o topo do site são fixos. </p>
</div><!-- Fim do titulo -->
</div><!-- Fim do conteúdo -->
</div><!-- Fim do container -->
</body>
</html>
Search for "responsiveness" and HTML5 (semantics). Your site will look much better and adapted to today.
– Sam