OpEn3D
Reputation: 3
Html and css background color
I am doing private project and I don't know how to set background color of the article for the whole width of the page, not just around the text, like in screen1.
.logo
{
text-align: center;
font-size: 40px;
margin-top: 40px;
margin-bottom: 30px;
letter-spacing: 5px;
text-transform: uppercase;
color: #ddd;
font-weight: 700px;
}
nav
{
background-color: #1c74b2;
text-align: center;
width: 100%;
}
body
{
background-color: #2F3336;
color: #efefef;
}
.menu
{
padding-top: 13px;
padding-bottom: 13px;
color: #efefef;
list-style-type: none;
margin: 0;
font-size: 18px;
min-height: 40px;
line-height: 200%;
width: 100%;
}
.menu > li
{
display: inline-block;
border-right: 1px dashed #0a2b42;
padding-right: 20px;
padding-left: 20px;
width: 145px;
}
.menu > li:last-child
{
border-right: 1px dashed #0a2b42;
}
.menu > li:first-child
{
border-left: 1px dashed #0a2b42;
}
.menu a
{
text-decoration: none;
color: #fff;
transition: transform .2s ease-in-out;
}
.menu a:hover
{
color: #0a2b42;
transform: scale(1.2);
}
h1
{
font-size: 40px;
font-weight: 500px;
color: #39a5f1;
margin-top: 40px;
margin-bottom: 20px;
}
.one
{
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.two
{
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.footer
{
width: 100%;
min-height: 50px;
background-color: #1c74b2;
text-align: center;
font-size: 16px;
padding: 17px;
margin: 0px;
}
#Lorem
{
background-color: #191d21;
}<!DOCTYPE html>
<html>
<head>
<title>STRONA GŁÓWNA</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Comaptible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="styleindex.css">
</head>
<body>
<header>
<h1 class="logo">DRUGA WOJNA ŚWIATOWA</h1>
<nav>
<ul class="menu">
<li><a href="#">Strona Główna</li></a>
<li><a href="#">Fronty wojny</li></a>
<li><a href="#">Nowe technologie</li></a>
<li><a href="#">Mapy polityczne</li></a>
<li><a href="#">Materiały źródłowe</li></a>
<li><a href="./strona1.html">Logowanie</li></a>
<li><a href="#">Kontakt</li></a>
</ul>
</nav>
</header>
<main>
<section>
<div class="one">
<header>
<h1>INTRODUCTION</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.
</p>
</header>
</div>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</section>
</main>
<footer>
<div class="footer">
<p>II WOJNA ŚWIATOWA © wszelkie prawa zastrzeżone. Dzięki za odwiedzenie i zapraszam ponownie.</p>
</div>
</footer>
</body>
</html>Upvotes: 0
Views: 60
Answers (3)
bron
Reputation: 1548
Use this css to get the full width while the content is still in the middle.
main > section {
width: 100%;
background-color: #191d21;
margin-bottom: 125px;
}
.one, .two {
width: 100%;
max-width: 950px;
margin 0 auto;
text-align: center;
}
<main>
<section>
<div class="one">
....
</div>
</section>
<section>
<div class="two">
....
</div>
</section>
</main>
Upvotes: 0
MTBthePRO
Reputation: 520
It is simple, width: 100% will stretch the div across the whole page.
.one {
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
.two {
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
Additional, you need to remove padding and margin upon loading the page
html, body {
margin:0;
padding:0;
}
Upvotes: 0
Ashiqur Rahman
Reputation: 60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.two {
background-color: #f0f0f0;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
#Lorem {
background-color: #f0f0f0;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
</style>
</head>
<body>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et
luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In
vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex
tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae
ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum
bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt
felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</body>
</html>
use this one i hope your problem will be solved
Upvotes: 1