Am I resizing and setting the HTML page "correctly"?

Question

Am I resizing and setting the HTML page "correctly"?

Asked 5 years, 7 months ago

Viewed 80 times

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>

2

Search for "responsiveness" and HTML5 (semantics). Your site will look much better and adapted to today.

– Sam

2018/11/20 at 03:16

2 answers

Browser other questions tagged html css3

You are not signed in. Login or sign up in order to post.

by João • 69 points · Answer 1 · 2018-11-20T13:40:53+00:00

Dude, avoid making alignments using these "magic" numbers in px, because that way your site will only be correctly aligned to the screen size you made the development, except if you use media queries, but it’s still complicated... It is currently important that the site maintain 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. Follow some links where you can study and ask questions:

https://getbootstrap.com/docs/4.1/layout/overview/

https://www.w3schools.com/css/css_rwd_intro.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

And if you want to delve deeper after learning about responsiveness, I recommend studying how to please the end user by learning something about UI and UX. Basic explanation of UI and UX: https://www.raffcom.com.br/blog/qual-a-diferenca-entre-ux-e-ui/

Study well, never be overcome by frustration and good luck :)

by Iago Cavalcante • **104** points · Answer 2 · 2018-11-20T10:07:23+00:00

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 of writing layouts with css, 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 the 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, as things should be:

https://codepen.io/cumboandrea/pen/Dtuho