Related
I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="ad-1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="ad-2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="ad-3"></div>
<div class="ad-4"></div>
<div class="ad-5"></div>
<div class="ad-6"></div>
</div>
as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.
After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="number1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="number2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="number3"></div>
<div class="number4"></div>
<div class="number5"></div>
<div class="number6"></div>
</div>
The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a layout where the uneven sized elements will be "1 - 2 / 3 - 4" on desktop, and stacked one under the other on the mobile. I've tried to do that with floats, and I'm partially there. However, the gap between the elements 2 and 4 is too large... Is there a way to reduce this somehow, maybe with the other approach perhaps?
Please check the full-page preview, thanks a lot for any input!
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
section {
}
section:nth-child(odd) {
float: left;
width: 66%;
}
section:nth-child(even) {
float: right;
width: 33%;
}
footer {
clear: both;
}
#media(max-width: 992px) {
section:nth-child(odd) {
float: none;
width: 100%;
}
section:nth-child(even) {
float: none;
width: 100%;
}
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<footer>
footer
</footer>
If you can use grid and change the starting order of your html elements, you can make them stack how you want on desktop, and then use a media query to change to flex and have them 100% width and ordered correctly for mobile
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: grid;
grid-template-columns: 66% 33%;
column-gap: 1%;
}
#media(max-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
.column {
display: contents;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>
I guess you don't need grid and can just use flex:
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: flex;
justify-content: space-between;
}
.column:first-child {
width: 66%;
}
.column:last-child {
width: 33%;
}
#media(max-width: 992px) {
.wrap {
flex-wrap: wrap;
}
.column {
display: contents;
width: 100%;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>
You could work only on a media query min-width: 992px.
On your .wrap element, add display: flex and flex-wrap: wrap. flex-wrap will allow your children to go to the next line.
.wrap {
display: flex;
flex-wrap: wrap;
}
Then, define the width of your children.
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
#media(min-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
}
/* For demo only */
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
I'm new in web programming and I'm actually learning html and css and I have a problem applying background color in some parts of my web page.
Can someone help me to apply the background color in the header as I've done in my footer. Don't know why it is not working on the header.I've tried to set the same background color to the childs of the header but it is a dirt solution and does not look nice.
Thanks.
index.html
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
style.css
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
Everything inside the header is position: fixed, so it is taken out of normal flow.
Since there is nothing inside the header which is in normal flow, there is nothing to cause the header to have any height.
Since it is zero pixels tall, you can't see any background.
If you want the elements inside the header to be side-by-side, lay them out using flexbox instead of positioning.
You must set a height to the header
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
height:100px;;
background-color: #CECDCC;
overflow:hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
Your problem solve .
body {
margin: 0 0 0 0 ;
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
height:10%;
}
.logo {
position: fixed;
width: 25%;
margin:0
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:20%;
float: right;
margin-right:10px;
/*margin-top:20px;*/
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
.logo{
background-image:url('https://picsum.photos/id/1011/300/30');
background-repeat: no-repeat;
color:white;
}
#inside-logo{
position: absolute;
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<header>
<div id="inside-logo">
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search">
</form>
</div>
<div class="cart">
<img class="cartImg" src="https://picsum.photos/id/1011/30/30" alt="cartImage">
</div>
</div>
</header>
<aside class="lateralMenu">
</aside>
<p>
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
</p>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
</body>
</html>
I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !
Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/
I don't know how to wrap all the text and not just one single line, If you have any idea how to change this I will gratefully thank you
http://jsfiddle.net/dkanem13/1/
<h1>I need to change this:</h1>
<div class="hi1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem perspiciatis similique eligendi quas quo reprehenderit ullam. Commodi repellendus distinctio similique voluptate sint debitis est eos minus eaque enim excepturi perspiciatis Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit eveniet consequatur itaque ipsa hic est adipisci pariatur exercitationem mole Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius amet perferendis sint accusamus!stias mollitia debitis quae commodi ut a facilis alias dolorum doloribus!
</p>
</div>
<h1>to This:</h1>
<div class="hi2">
<p>Lorem ipsum dolor sit amet, consectetur adipisici Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ipsam eaque consequatur eligendi ullam soluta esse eius sapiente recusandae nostrum. ng Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis odio fuga nisi incidunt.elit. Aliquam expedita praesentium quo ratione? Nisi maxime reprehenderit debitis ex aspernatur itaque voluptate dicta neque vel eos quia repudiandae culpa harum bla bla bla cbla ullam...</p>
</div>
<h1>and this is what happend</h1>
<div class="hi3">
<p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus expedita ex perspiciatis magni in architecto totam ut nam vel soluta deleniti rerum eos molestiae commodi laborum accusamus culpa? Porro corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia ex fuga quibusdam eius voluptates odio pariatur maiores ipsa saepe tempore autem facilis voluptatum dignissimos suscipit architecto iste! Enim adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ipsum est rerum quis consequatur nostrum possimus cupiditate dolor aspernatur modi numquam dolore culpa sunt iste ea voluptatibus doloremque accusamus reiciendis!.
</p>
</div>
div{
width:250px;
height: 250px;
background: yellow;
margin: 85px 15px;
}
.hi1{background: tomato;}
.hi2{background: royalblue;}
.p{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;}
white-space: nowrap is preventing it from going to the next line. In fact, that's exactly what it's intended to do.
http://www.w3schools.com/cssref/pr_text_white-space.asp
EDIT: If you want to make text not overflow, consider where you are adding that property. You want the container not to overflow, not the text. So add overflow: hidden or text-overflow: ellipsis to your div, not to the p tag.
http://www.w3schools.com/cssref/pr_pos_overflow.asp