Can't understand why,despite having the same width:450px and margin:0 auto, width of .menu and width of .blog is different. See my code:
body {
border-top:4px solid #F55D2D;
background: white;
margin:0 auto;
font-family: 'Mako', sans-serif;
}
header {
width:450px;
text-align:center;
margin:0 auto;
}
.menu {
width:450px;
margin: 0 auto;
background:green;
}
.menu li {
display:inline;
padding:5px 15px;
}
.blog {
width: 450px;
margin:0 auto;
background:green;
}
.post {
/*border: 1px solid grey;*/
margin: 20px auto;
height:125px;
padding:0 10px;
border-radius:4px;
color:black;
transition: height 0.5s;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
position:relative;
}
.post::after {
background:url(Photos/intro3cropped.jpg);
content: "";
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
<body>
<header>
<h1 class="title">XYZ EVENTS</h1>
<ul class="menu">
<li class="menuAll">ALL EVENTS</li>
<li class="menuConcert">CONCERTS</li>
<li class="menuTheatre">THEATRE</li>
<li class="menuFestival">FESTIVALS</li>
</ul>
</header>
<div class="blog">
<div class="post concert">
<h4>Concert 1</h4>
<p>Where: XYZ Arena</p>
<p>When: XYZ h</p>
<small>(Click to expand)</small>
<p class="descr">
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</div>
Why .blog is thinner than .menu? Thanks!
Because your menu is a list item and list items have default padding applied. See the example below for the same code but with the padding on the ul element removed.
body {
border-top:4px solid #F55D2D;
background: white;
margin:0 auto;
font-family: 'Mako', sans-serif;
}
header {
width:450px;
text-align:center;
margin:0 auto;
}
.menu {
width:450px;
margin: 0 auto;
background:green;
padding:0;
}
.menu li {
display:inline;
padding:5px 15px;
}
.blog {
width: 450px;
margin:0 auto;
background:green;
}
.post {
/*border: 1px solid grey;*/
margin: 20px auto;
height:125px;
padding:0 10px;
border-radius:4px;
color:black;
transition: height 0.5s;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
position:relative;
}
.post::after {
background:url(Photos/intro3cropped.jpg);
content: "";
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
<body>
<header>
<h1 class="title">XYZ EVENTS</h1>
<ul class="menu">
<li class="menuAll">ALL EVENTS</li>
<li class="menuConcert">CONCERTS</li>
<li class="menuTheatre">THEATRE</li>
<li class="menuFestival">FESTIVALS</li>
</ul>
</header>
<div class="blog">
<div class="post concert">
<h4>Concert 1</h4>
<p>Where: XYZ Arena</p>
<p>When: XYZ h</p>
<small>(Click to expand)</small>
<p class="descr">
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</div>
Another option is to set box-sizing:border-box; on the ul element instead of removing the padding.
body {
border-top:4px solid #F55D2D;
background: white;
margin:0 auto;
font-family: 'Mako', sans-serif;
}
header {
width:450px;
text-align:center;
margin:0 auto;
}
.menu {
width:450px;
margin: 0 auto;
background:green;
box-sizing:border-box;;
}
.menu li {
display:inline;
padding:5px 15px;
}
.blog {
width: 450px;
margin:0 auto;
background:green;
}
.post {
/*border: 1px solid grey;*/
margin: 20px auto;
height:125px;
padding:0 10px;
border-radius:4px;
color:black;
transition: height 0.5s;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
position:relative;
}
.post::after {
background:url(Photos/intro3cropped.jpg);
content: "";
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
<body>
<header>
<h1 class="title">XYZ EVENTS</h1>
<ul class="menu">
<li class="menuAll">ALL EVENTS</li>
<li class="menuConcert">CONCERTS</li>
<li class="menuTheatre">THEATRE</li>
<li class="menuFestival">FESTIVALS</li>
</ul>
</header>
<div class="blog">
<div class="post concert">
<h4>Concert 1</h4>
<p>Where: XYZ Arena</p>
<p>When: XYZ h</p>
<small>(Click to expand)</small>
<p class="descr">
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</div>
Because the menu element is an ul and by default, it has a padding, in webkit browser for example, the following styles are applied:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
and since the padding is part of the width, just add padding: 0 to .menu, that's one of the reasons why people use normalize.css or reset.css.
Related
I just want that background image would be zoomed, but it covers the header, and overflow: hidden doesn't work
https://jsfiddle.net/space2froggy/7t95nvLy/2/ here is my code.
HTML
<header>
<div class="logo">
<img src="resources/logo/logo.svg" class="logo-img" alt="Logo">
</div>
<div class="main-nav">
<ul>
<li>About me</li>
<li>Relationships</li>
<li>Requirements</li>
<li>Users</li>
<li>Sign Up</li>
</ul>
</div>
<div class="settings">
<div class="user-data">
<h6>Superstar</h6>
<p>superstar#gmail.com</p>
</div>
<img src="resources/img/user-superstar-2x.jpg" class="photo-small" alt="User Photo">
<img src="resources/icons/sign-out.svg" alt="Sign Out" class="sign-out">
</div>
</header>
<section class="board">
<h1>Test assignment for Frontend Developer Position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
Sign Up
</section>
CSS
.board {
background-image: url(img/bg-1.jpg);
background-size: cover;
background-position: center;
transform: scale(2);
overflow: hidden;
}
Remove transform: scale(2); from the css then it shows fine.
.board {
background-image: url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
}
{
margin: 0;
padding: 0;
box-sizing: border-box; /* always at start */
}
html {
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
text-rendering: optimizeLegibility; /*IMP!!!*/
line-height: 145%;
max-width: 2560px;
}
header {
max-width: 1140px;
margin: 15px auto;
}
header > * {
display: inline-block;
}
header a {
text-decoration: none;
color: #171717;
}
.logo {
width: 15%;
}
.logo-img {
width: 150px;
height: auto;
}
.main-nav {
font-size: 15px;
margin-left: 10%;
}
.main-nav ul li {
float: left;
list-style: none;
padding: 0 15px;
}
.settings {
float: right;
line-height: 80%;
}
.settings > * { /* to all ONLY child els */
float: left;
display: inline-block;
}
.photo-small {
width: 40px;
height: auto;
border-radius: 50%;
}
.user-data {
padding: 0 10px;
}
.settings h6 {
float: right;
}
.settings p {
font-size: 12px;
color: #a0a0a0;
}
.photo-small {
margin: -5px 5px;
}
.sign-out {
margin: 5px 10px;
}
/*//////////////////////////*/
/*////////---BOARD---////////*/
/*//////////////////////////*/
h1 {
margin: 0;
}
<header>
<div class="logo">
<img src="resources/logo/logo.svg" class="logo-img" alt="Logo">
</div>
<div class="main-nav">
<ul>
<li>About me</li>
<li>Relationships</li>
<li>Requirements</li>
<li>Users</li>
<li>Sign Up</li>
</ul>
</div>
<div class="settings">
<div class="user-data">
<h6>Superstar</h6>
<p>superstar#gmail.com</p>
</div>
<img src="resources/img/user-superstar-2x.jpg" class="photo-small" alt="User Photo">
<img src="resources/icons/sign-out.svg" alt="Sign Out" class="sign-out">
</div>
</header>
<section class="board">
<h1>Test assignment for Frontend Developer Position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
Sign Up
</section>
I have a problem.
I have made a basic layout, the problem is that the height:100% of sidebar and wrapper don't adapt themselves to real height.
Basically this is the layout
<div class="sidebar collapse">
<div class="sidebar-header">
<div class="user"></div>
</div>
<hr>
<div class="sidebar-menu">
<h5>Menù</h5>
Contenuti
<div class="submenu">
Menù
Barra laterale
Footer
</div>
Configurazione
</div>
</div>
<div class="wrapper">
<i class="fas fa-ellipsis-v"></i>
<div class="page-title box">
Title
</div>
<div class="page-content box">
Content
</div>
</div>
And this is part of the css
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%; }
.sidebar {
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
#media (min-width: 800px) {
.sidebar {
left: 0 !important; } }
#media (max-width: 800px) {
.collapse {
left: -250px; } }
.wrapper {
background: #EEE;
position: absolute;
width: calc(100% - 250px);
height: 100%;
top: 0;
right: 0;
padding: 20px; }
#media (max-width: 800px) {
.wrapper {
width: 100%; } }
.wrapper .box {
background: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
I made this pen hoping to explain better the problem.... :)
https://codepen.io/globdug/pen/errbMY
I think you should use flex for your design instead of absolutely positioning your divs.
See my version on codepen
https://codepen.io/anon/pen/GddzNw
<body>
<div class="container">
<div class="sidebar collapse">
<div class="sidebar-header">
<img src="http://via.placeholder.com/300x300" alt="...">
<div class="user">User</div>
</div>
<hr>
<div class="sidebar-menu">
<h5>Menù</h5>
Contenuti
<div class="submenu">
Menù
Barra laterale
Footer
</div>
Configurazione
</div>
</div>
<div class="wrapper">
<i class="fas fa-ellipsis-v"></i>
<div class="page-title box">
Title
</div>
<div class="page-content box">
<h1>Lorem ipsum dolor</h1><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> 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><br /><br />
<h2>Lorem ipsum dolor</h2><br /><br />
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong> 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><ul><li>Lorem ipsum dolor sit amet</li><li>consectetur adipiscing elit</li></ul><h3>Lorem ipsum dolor</h3><ol><li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li><li>Ut enim ad minim veniam</li></ol><h4>Lorem ipsum dolor</h4><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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><br />
</div>
</div>
</div>
</body>
</html>
CSS
$sidebar-width: 250px;
$padding: 20px;
// colori
$primary: #ff9800;
$primary-l1: #ffad33;
$primary-l2: #ffc266;
$primary-l3: #ffd699;
$primary-l4: #ffebcc;
$primary-l5: #fff9f0;
$primary-d1: #e68a00;
$primary-d2: #cc7a00;
$primary-d3: #b36b00;
$primary-d4: #995c00;
$primary-d5: #804d00;
// sfondi
$bg-dark: #333;
$bg-light: #FFF;
$bg-wrapper: #EEE;
// colori testi
$text-on-dark: $primary-l5;
$text-on-light: $primary-d5;
// breakpoints
$breakpoint: 800px;
#mixin box-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*{
transition: all 0.2s ease-out;
}
html,body{
margin: 0px;
padding:0px;
width:100%;
height:100%;
}
body{
font-family: "Ubuntu", Arial, sans-serif;
font-size:16px;
}
.container {
display: flex;
}
h1, h2, h3, h4, h5, h6{
margin:0px;
margin-bottom: $padding;
padding:0px;
}
h1{ font-size: 30px }
h2{ font-size: 26px }
h3{ font-size: 24px }
h4{ font-size: 22px }
h5{ font-size: 20px }
h6{ font-size: 18px }
hr{
padding:0px;
margin:$padding 0px;
border:0px;
border-bottom:1px solid #666;
opacity: 0.2;
}
.sidebar{
width:$sidebar-width;
height:100%;
background: $bg-light;
#include box-shadow;
}
.collapse{
#media (max-width:$breakpoint){
left:- $sidebar-width;
}
}
.wrapper{
background:$bg-wrapper;
width: calc(100% - #{$sidebar-width});
height: 100%;
padding:$padding;
#media (max-width:$breakpoint){
width:100%;
}
.box{
background:#fff;
padding:$padding;
margin-bottom:$padding;
#include box-shadow;
}
}
.page-title{
font-size:1.2em;
font-weight:500;
&:first-letter{
color:$primary;
}
}
.page-toggle{
display:none;
font-size:1.2em;
color:$primary;
&:hover{
color:#000;
background:$primary;
}
}
#media (max-width:$breakpoint){
.page-title{
display:block;
margin-left:50px + $padding;
}
.page-toggle{
width:50px;
text-align:center;
float:left;
display:inline-block;
}
}
.sidebar-header{
padding:$padding 0px 0px;
text-align: center;
img{
margin:0px auto 5px;
width:50px;
height:auto;
border:0px;
border-radius:50%;
display:block;
}
.user{
letter-spacing:2px;
font-variant:small-caps;
text-transform: capitalize;
font-size:1.2em;
font-weight:700;
&::first-letter{
color:$primary;
}
}
}
.sidebar-menu{
h5{
padding:0px $padding;
}
a{
padding:10px $padding;
display:block;
color:#000;
text-decoration: none;
font-weight: 500;
&:hover{
background:$primary;
&::before{
color:#000;
}
}
&::before{
font-family:"Font Awesome 5 Free";
font-weight:900;
padding-right:10px;
color:$primary;
}
}
>.link-active{
background: $primary;
font-size:1.1em;
&::before{
color:#000 !important;
}
}
}
.submenu{
display:none;
font-size:0.9em;
background:$primary-l4;
a{
padding:3px $padding;
&:hover{
background:$primary-l1;
}
&::before{
content:"\f105";
margin-left:3px;
padding-right:13px;
}
}
}
.icon-conten::before{ content:"\f15c"; }
.icon-config::before{ content:"\f013"; }
I have two rows of background image and content. Both are displaying properly on the desktop. I need to display in a single column on the mobile device.
I am confused what should I use on the mobile device.
Please check out the images.
Would you help me out in this?
I am getting the output in the desktop
I need a output in the mobile device
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: relative;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
<div class="example1_bg banner_bg">
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<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>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
<div class="example1_bg banner_bg">
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<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>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
You need to change your structure for it so it works well as you desire and you will require media queries as well.
Wrap both the content as siblings instead of parent and child inside a super class (container) as shown.
Initially since they have absolute positioning with respect to container, they'll show as expected.
When the screen is resized use media query as such and change the position to relative. (Setting to relative allows them to have their natural behaviour and not overlap and you can adjust the top,left,bottom,right positioning as required)
#media only screen and (max-width:600px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: absolute;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
#media only screen and (max-width:700px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
}
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<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>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<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>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
Im not at my pc atm. I'm sure I have code for this. But w3school has good examples in a css3 tag https://www.w3schools.com/css/css3_flexbox.asp
You could wrap them individually in a div. So background and content in their own div. Then same again for the other two. And have both background and content divs float left. Then set the container div to margin-left: 0 auto, and margin-right: 0 auto.
Or in an code
<div class="container">
<div class="background"></div>
<div class="content"></div>
</div>
.container{ margin-right:auto;
margin-left:auto;
height: 1%;
overflow: hidden;
}
.background { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}
.content { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work.
Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the text remain in the same place (so aka filling in the sides with the same background colour) But can't even seem to get the header to stretch to 100% no matter what i do.
Please help me! My code for both index.html and stylesheet.css is below:
INDEX.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Computer Company </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header class="mainheader">
<nav><ul>
<li class="active">Home</li>
<li>Solutions & Services
<ul>
<li>Internet</li>
<li>Networking</li>
<li>Website</li>
<li>Home Computers</li>
<li>Servers</li>
</ul>
</li>
<li>Team
<ul>
<li>Founder</li>
<li>Graphics</li>
</ul></li>
<li>Contact</li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<body class="body">
<header class="images">
<img class="first-image" src="images/logo.jpg">
<img class="second-image" src="images/logo.jpg">
<img class="third-image" src="images/logo.jpg">
<img class="fourth-image" src="images/logo.jpg">
<img class="fifth-image" src="images/logo.jpg">
<img class="sixth-image" src="images/logo.jpg">
</header>
<div class="maincontent">
<div class="content">
<article class="top-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</content>
</article>
<article class="bottom-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2> Latest Updates </h2>
<div id="twitter-widget-settings">
<a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by #JoelwMale</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</article>
</aside>
<footer class="main-footer">
<p> © 2015 Computer Company</p>
<ul>
<li class="footermedia"><img src="images/social/twitter.png"/></li>
<li class="footermedia"><img src="images/social/linkedin.png"/></li>
<li class="footermedia"><img src="images/social/facebook.png"/></li>
</ul>
</footer>
CSS
/*
Business Website
Author: Joel Male;
Date Started: 20/06/2015;
Date Finished: **;
*/
body {
background-image: url("images/bg.png");
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
margin: 0 auto; /* Centers the page */
width: 70%;
clear: both; /* Nothing floats on the page */
}
.companyname {
width: 0 auto;
height: 30px;
margin-bottom: 5%;
}
.companyname h1 {
font-size: 60px;
margin-top: 0;
}
.mainheader img {
width: 100%;
height: 300px;
margin-top: 2%;
}
.mainheader {
width: 100%;.
height: 80px;
}
.mainheader nav {
width: 100%;
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
padding-left: 0px; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul li:hover ul {
display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
}
/* HIDE THE UL */
.mainheader nav ul ul {
display: none;
position: absolute;
background-color: #666;
}
.mainheader nav ul ul li {
display: block;
float: none;
min-width: 178px;
}
.mainheader nav ul ul li:hover {
background-color: #CF5C3F;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader p {
float: right;
margin-top: 10px;
padding-right: 10px;
color: #FFF;
}
.mainheader p b {
text-decoration: underline;
}
.images {
height: 30%;
padding-top: 2%;
display: block;
}
.images .first-image {
width: 33%;
}
.images .second-image {
width: 33%;
}
.images .third-image {
width: 33%;
}
.images .fourth-image {
width: 33%;
}
.images .fifth-image {
width: 33%;
}
.images .sixth-image {
width: 33%;
}
.maincontent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
margin-top: 3px;
margin-bottom: 3px;
}
.top-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2.8%;
}
.bottom-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0 2% 3%;
padding: 0% 3%;
}
.top-sidebar h2 {
margin-top: 6px;
margin-bottom: 6px;
}
.top-sidebar .twitter-timeline {
height: 796px;
width: 100%!important;
}
.top-sidebar .twitter-widget-settings {
height: 600px;
}
.main-footer {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
margin: 2%;
}
.main-footer p {
padding-top: 3px;
padding-left: 25px;
float: left;
width: 40%;
margin: 10px auto;
color: #FFF;
}
.main-footer a {
color: #FFF;
}
.main-footer ul {
list-style: none;
margin-top: 2px;
}
.main-footer ul .footermedia {
float: right;
padding-right: 5px;
}
.main-footer ul .footermedia img {
margin-top: 0px;
width: 40px;
height: 40px;
}
.main-footer ul .footermedia a {
padding: 0 0;
width: 40px;
height: 40px;
}
.main-footer ul .footer-media a:hover {
background-color: #666;
}
#media only screen and (min-width: 150px) and (max-width: 600px)
{
.body {
width: 90%;
font-size: 95%;
}
.mainheader img {
width: 30%;
}
.mainheader nav {
background: #666;
height: 200px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainheader nav li {
width: 100%;
margin-left: 0 auto;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainheader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 100%;
float: left;
margin-top: 2%;
}
.top-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottom-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2px;
}
}
Hopefully I formatted everything correctly. Thank you!
Put your header inside the body.
And don't apply styles to the body but use a container.
+ You should have one single header in your page.
<body>
<header>
<nav><ul>
<li class="active">Home</li>
<li>Solutions & Services
<ul>
<li>Internet</li>
<li>Networking</li>
<li>Website</li>
<li>Home Computers</li>
<li>Servers</li>
</ul>
</li>
<li>Team
<ul>
<li>Founder</li>
<li>Graphics</li>
</ul></li>
<li>Contact</li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<div class="container">
<div class="images">
<img class="first-image" src="images/logo.jpg">
<img class="second-image" src="images/logo.jpg">
<img class="third-image" src="images/logo.jpg">
<img class="fourth-image" src="images/logo.jpg">
<img class="fifth-image" src="images/logo.jpg">
<img class="sixth-image" src="images/logo.jpg">
</div>
<div class="maincontent">
<div class="content">
<article class="top-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</content>
</article>
<article class="bottom-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2> Latest Updates </h2>
<div id="twitter-widget-settings">
<a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by #JoelwMale</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</article>
</aside>
<footer class="main-footer">
<p> © 2015 Computer Company</p>
<ul>
<li class="footermedia"><img src="images/social/twitter.png"/></li>
<li class="footermedia"><img src="images/social/linkedin.png"/></li>
<li class="footermedia"><img src="images/social/facebook.png"/></li>
</ul>
</footer>
</container>
</body>
in CSS
header{
width:100%;
}
.container{
width:70%;
margin:0 auto;
}
When I add .article img { float:right; } the image goes out of the div article and i am not getting the desired result I want. I want to align the image within grey box and to the right.
Here it is what I achieve.
What I am getting is the image is aligned outside the main container.
{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<img src="http://placekitten.com/g/300/300"></img>
</div>
</div>
</div>
This can be easily solved by adding a clear element at the end:
<div class="clear"></div>
the css:
.clear {
clear: both;
}
example:
.clear {
clear: both;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<img src="http://placekitten.com/g/300/300">
<div class="clear"></div>
</div>
</div>
</div>