I'm resizing and defining the HTML page in a "right" way?

Question

I'm resizing and defining the HTML page in a "right" way?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a question that kills me when creating websites, I did a quick example here, after doing some research and none of this doubt, I'm not sure if I'm on the right path, but I made a quick, simple page but to exemplify my doubt will serve. My question is whether it is wrong, or indifferent to define the size of my page in this way, and if there is any more effective way to adjust to the screen size of the computer you are viewing, here is the HTML and CSS, I would like to pay attention to the CSS, if the use of MARGIN-TOP, ABSOLUTE, RELATIVE, TOP, LEFT, are being used correction? If you have any tips, or even a book, article, something that can guide me in these concepts, thank you!

Follow the 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>

html css3

asked by anonymous 20.11.2018 / 03:05

2 answers

Compiler does not detect signal functions get id in FullCalendar

score 0 · Answer 1

As the colleague commented, you are writing html in an outdated way, to improve understanding, you need to study responsiveness, semantic web, and new techniques for writing css layouts using flexbox or gridlayout.

The html looks like this:

<html>
     <head>
       <title>Estructura basica Semantica en HTML5 y CSS3</title>
       <meta charset="utf-8" />
       <meta name="description" content="Estructura basica Semantica en HTML5 y 
          CSS3 con Responsive Design" />
       <!--<link rel="stylesheet" href="css/style.css" />-->
     </head>
     <body>
       <h1>Estructura básica Semántica en HTML5 y CSS3</h1>
       <div class="content">
      
         <header>
           &lt;header&gt;
         </header>
      
         <nav>
           &lt;nav&gt;
         </nav>
      
         <section id="content">
           <section id="principal">
             &lt;section&gt;
             <article>
               &lt;article&gt;
             </article>
           </section>
           <aside>
             &lt;aside&gt;
           </aside>
         </section>
    
         <footer>
           &lt;footer&gt;
         </footer>
       </div>
     </body>
    </html>

and css like this:

/*
 * Il concetto imporatnte è che prima va fatto il css per il mobile
 * e poi con i MEDIA QUERY fare il css per il resto.
*/

* {
  margin:0;
  padding:0;
}
body {
  font-size:62.5%;
  background:#212121;
  color:white;
  font-family: Helvetica;
}
.content {
  max-width: 960px;
  margin:0 auto;
  font-size:2.5em;
}

h1 {
  color:#f60;
  text-align: center;
  margin: 0.25em auto;
  font-size:2em;
}
header, 
nav,
footer {
  background-color: #ed4c62;
  border-radius: .5em;
  margin: 0.5em auto;
  
  padding: 0.25em;
  text-align: center;
}
#content {
  margin: 0 auto;
  
  padding: 0;
  text-align: center;
}
#principal,
aside {
  background-color: #ed4c62;
  border-radius: .5em;
  display: inline-block;
  margin: 0 auto;
  min-height: 200px;
  padding: .25em 0;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
article {
  background-color: #ebc555;
  border-radius: .5em;
  min-height: 140px;
  padding: .25em;
  margin:0 1em;
}
aside {
  margin-top:0.5em;
}

/* MEDIA QUERY */
@media screen and (min-width: 44em) {
  h1 {
    font-size:5em;
  }
  #principal {
    width: 70%;
  }
  aside {
    width: 29%;
    margin-top:0;
  }
}

This link is visually well-defined, how things should be:

link

score 0 · Answer 2

Dude, avoid doing alignments using these "magic" numbers in px, because that way your site will only stay correctly aligned to the size of the screen you made the development, unless you use media queries, but it's still tricky. .. It is currently important that the site maintains its appearance on most devices at least. I leave as a suggestion you study the bootstrap grids system for example, which is powerful if well used. Here are some links where you can study and ask questions:

link

And if you want to dig deeper after learning about responsiveness, I recommend studying how to please the end user by learning something about UI and UX. Basic explanation of what UI and UX is all about: link

Good studies, never be overcome by frustration and good luck:)