Help needed with code

M

morn1ng

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 !
 
sunfighter

sunfighter

Joined
Nov 27, 2019
Messages
163
Reaction score
28
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
 
M

morn1ng

Joined
Mar 7, 2021
Messages
13
Reaction score
0
sunfighter said:
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
Click to expand...
Ok thank you i will !
 

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

Similar Threads

Justify-content not working 1
Need help with code on website (noob) 2
Help with code 0
Buttons lining up 1
How to make a flex box inherit its parent (container) background. 0
Help with my responsive home page 2
Having difficulty with the layout of these images / video for this web page 2
Help needed with thank you message 5

Members online

Total: 138 (members: 3, guests: 135)
Robots: 43

Forum statistics

Threads
473,874
Messages
2,569,924
Members
46,178
Latest member
KathleneBe

Latest Threads

Top