Help needed with code


Joined
Mar 7, 2021
Messages
13
Reaction score
0
Hello, I need to know what creates the differences between these two codes :
Thank you guys !

CODE 1 (HTML) :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
</div>
</section>
<div class="container">
<section id="main">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ad autem commodi soluta corporis est, esse alias, exercitationem, perspiciatis perferendis consectetur. Qui eaque atque harum laborum vero sit, ipsum ab!</p>
</section>
<aside id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, vitae! Maiores ducimus totam consequuntur quaerat a expedita et similique, perferendis eius esse eaque</p>
</aside>
</div>
<footer id="main-footer">
<p>Copyright &copy; 2017 My Website</p>
</footer>
</body>
</html>

CODE 2 (HTML) :

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</header>

<nav id="navbar">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

<section id="showcase">
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</h1>
</div>
</section>

<div class="container">
<section id="main">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<aside id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud </p>
</aside>
</div>

<footer id="main-footer">
<p>Copyright &copy; 2017 My Website</p>
</footer>
</body>
</html>

CODE 1 (CSS) :

body{
background-color: #f4f4f4;
color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
}

.container{
width: 80%;
margin: auto;
overflow: hidden;
}

#main-header{
background-color: coral;
color: white;
}

#navbar{
background-color: #333;
color: #fff;
}

#navbar ul{
padding: 0;
list-style: none;
}

#navbar li{
display: inline;
}

#navbar a{
color: #f4f4f4;
text-decoration: none;
font-size: 18px;
padding-right: 15px;
}

#showcase{
background-image: url("../images/showcase.jpg");
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
}

#showcase h1{
color: #fff;
font-size: 50px;
line-height: 1.6em;
padding-top: 30px;
}

#main{
float: left;
width: 70%;
padding: 0 30px;
box-sizing: border-box;
}

#sidebar{
float: right;
width: 30%;
background-color: #333;
color: #fff;
padding: 10px;
box-sizing: border-box;
}

#main-footer{
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 40px;

}

@media(max-widith:600px){
#main{
width: 100%;
float: none;
}

#sidebar{
width: 100%;
float: none;
}
}

CODE 2 (CSS) :

body{
background-color:#f4f4f4;
color:#555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}

.container{
width:80%;
margin:auto;
overflow:hidden;
}

#main-header{
background-color:coral;
color:#fff;
}

#navbar{
background-color:#333;
color:#fff;
}

#navbar ul{
padding:0;
list-style: none;
}

#navbar li{
display:inline;
}

#navbar a{
color:#fff;
text-decoration: none;
font-size:18px;
padding-right:15px;
}

#showcase{
background-image:url('../images/showcase.jpg');
background-position:center right;
min-height:300px;
margin-bottom:30px;
text-align: center;
}

#showcase h1{
color:#fff;
font-size:50px;
line-height: 1.6em;
padding-top:30px;
}

#main{
float:left;
width:70%;
padding:0 30px;
box-sizing: border-box;
}

#sidebar{
float:right;
width:30%;
background: #333;
color:#fff;
padding:10px;
box-sizing: border-box;
}

#main-footer{
background: #333;
color:#fff;
text-align: center;
padding:20px;
margin-top:40px;
}

@media(max-width:600px){
#main{
width:100%;
float:none;
}

#sidebar{
width:100%;
float:none;
}
}



Thanks to you guys if you are able to help me !
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
163
Reaction score
24
Your going to be more specific as to what you want. I have to guess that your wondering about the height of your DIVs. That's what DIVs do, they grow or shrink in the vertical direction to accommodate the text unless you restrict it, like setting a limit to the height as you did to the width. When the text of one file is changed for the text of the other they look the same.

PS you should have
Code:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the HEAD of all your HTML code.

PS. I suggest you learn GridCss
 
Joined
Mar 7, 2021
Messages
13
Reaction score
0
Your going to be more specific as to what you want. I have to guess that your wondering about the height of your DIVs. That's what DIVs do, they grow or shrink in the vertical direction to accommodate the text unless you restrict it, like setting a limit to the height as you did to the width. When the text of one file is changed for the text of the other they look the same.

PS you should have
Code:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the HEAD of all your HTML code.

PS. I suggest you learn GridCss
Ok thank you i will !
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top