I'm creating a webpage and set margin
margin: 120px auto 0 auto;
unfortunately the div which is above my div is also changing margin
You can see it here.
You are setting absolute position to .bckr-image, add top: 0px; if you don't want margin.
.header is empty pushing .row down, is this intended?
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.bckr-image
{
margin: 0 auto 0 auto;
background-image:url(http://www.w3schools.com/html/pic_mountain.jpg);
/*linear-gradient(white, #ADD8E6);
background-repeat: no-repeat, no-repeat;*/
background-repeat: no-repeat;
background-size: cover;
background-position: top, bottom;
z-index:-1;
filter: blur(5px);
position: absolute;
top: 0px;
height: 100%;
width: 100%;
}
.container
{
background-image: url(http://www.w3schools.com/html/pic_mountain.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 80%;
z-index:0;
margin: auto;
}
.header {
margin: 120px auto 0 auto;
height: 350px;
color: #ffffff;
padding: 100px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<body>
<div class="bckr-image"></div>
<div class="container">
<div class="header"></div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>My:)</li>
<li>Zdjęcia</li>
<li>Prezenty</li>
<li>Mapa</li>
<li>Kontakt</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
Temporary solution:
add this css:
body{
padding-top:0.001em;
}
Related
I have the folling html and css. I cannot use flex-box and would like to keep my website design using the 12 column design. The issue is that the image fills up 90px of the row, although, the next column with the links only takes up 54 px. How can I force the size of both columns to be the same? Ive tried making it table display and using inline, although I have had very little success.
.topnav{
background-color: #dddddd;
width: 100%;
float:none;
}
.topnav img{
max-height: 100%;
}
.topnav a{
padding: 20px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: none;
color: #000000;
height: 100%;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
With the following html:
<html>
<head>
<link rel="stylesheet" href="myblog.css">
</head>
<body>
<div class="topnav">
<div class="row">
<div class="col-1 col-s-1">
<img src="Untitled.png" width="60" height="60">
</div>
<div class="col-9 col-s-9" style="text-align: right;">
<a href="http://localhost/matter/myblog.html">
Home
</a>
<a>
Interests
</a>
</div>
</div>
</div>
</body>
</html>```
I have set up a simple page with a rensponsive css grid that I read in this article on w3schools:
https://www.w3schools.com/css/css_rwd_grid.asp
The scaling on width works fine.
I have two things I am not able to sort out:
I've set up a max width on the page of 960px and when I make the viewport smaller the width scales fine, but for the buttons I have up at the top I want them to have a height of 125px when the page is at its max width and then scale down proportionaly with the width.
For the dummy2 and dummy3 buttons I want them to have 50% of the height in that grid row.
Her is a jsfiddle of what I got:
https://jsfiddle.net/nyehc0g9/
Heres the code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
margin: 0 auto;
max-width: 960px;
}
body {
background-color: black;
}
*
{
box-sizing: border-box;
}
.row::after
{
content: "";
clear: both;
display: table;
}
[class*="col-"]
{
float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.button
{
background-color: grey;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border:none;
outline: white solid;
width: 100%;
}
img {
width: 100%;
height: auto;
}
.button-0
{
width: 100%;
height: 125px;
}
.button-1
{
width: 100%;
height:50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="row">
<div class="col-3"><button class="button button-0" href="">Dummy0</button></div>
<div class="col-6"><button class="button button-0" onclick="javascript:history.go(0)">Refresh page</button></div>
<div class="col-3"><button class="button button-0">Dummy1</button></div>
</div>
<div class="row">
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
<div class="col-2">
<button class="button button-1" href="">Dummy2</button>
<button class="button button-1" href="">Dummy3</button>
</div>
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
</div>
</body>
</html>
Just add
.button-0{
height: 9vw;
max-height: 125px;
}
.row{
display: flex;
display: -webkit-flex;
}
Should do the trick! Adjust the height: 9vw to whatever you think is optimal while scaling down.
/* Responsive Styling */
* {
box-sizing: border-box;
}
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* Body CSS */
/* Header */
#header {
height: 70px;
background-color:white;
border-top: solid 5px #324f8e;
border-bottom: solid 2px #d5dae7;
}
.logo {
background-image: url('images/logo.png');
background-repeat: no-repeat;
margin: 15px;
float: left;
width: 100%;
height: auto;
}
.search {
backr
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div class="col-5 logo"></div>
<input type="search" class="col-2 search" placeholder="Search..." /></div>
<div class="ool-2 account"></div>
<div class="ool-1 notification"></div>
<div class="ool-2 logout"></div>
</div>
</body>
</html>
I can't seem to make the search be in the header container after the logo. I want it all to be in line for the header bar. I'm trying to use the Grid system, it's something small I suppose, but as a newbie, it's not clicking to me.
Also having issues with the logo, it seems to cut off slightly on the bottom, tried to a few different things with height, no luck on that either.
Thanks in advance.
Add this code to your header:
display: grid;
grid-template-columns: repeat(x, 1fr);
Change the x by the number of elements you want in a single line.
This article could be helpful:
CSS Grid Guide
I've been working on a full width with fixed height (image expand on hover "overflow hidden")
Not sure what I'm doing wrong, I can't seem to connect #media and I'm having problems with the 6th image loading the wrong direction.
Hopefully someone can point me in the right direction.
#items {
width:300px;
display: inline;
}
.itemHolder {
float:left;
width:16.6%;
height:600px;
overflow:hidden;
position:relative;
}
.item {
position:center;
top:0;
left:0;
z-index:1;
width:100%;
background:#FFF;
position: relative;
}
.itemHolder:hover {
overflow:visible;
position:center;
}
.itemHolder:hover .item {
z-index:2;
}
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<div class="col- col-12">
<div id="items">
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029084/image5.jpg?1489029084" alt="">
</div>
</div>
</div>
</div>
This should solve the issue and work better on all browsers.
.items {
min-height: 600px;
overflow: hidden;
display: flex;
}
.item {
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
align-items: center;
transition: flex 0.7s;
background-size: cover;
background-position: center;
flex: 1;
justify-content: center;
}
.item1 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071);
}
.item2 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077);
}
.item3 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}
.item4 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087);
}
.item5 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}
/* Flex Items */
.item>* {
flex: 1 0 auto;
}
.item:hover {
flex: 4;
}
<div class="items">
<div class="item item1">
</div>
<div class="item item2">
</div>
<div class="item item3">
</div>
<div class="item item4">
</div>
<div class="item item5">
</div>
</div>
I have been building a website, and everything has worked as expected until I suddenly could not get anything to display on the same line even though similar code has worked before on this website. The site is also displaying images differently even though it's the same image and div CSS. I am building out on Drupal with HTML and CSS. My HTML code is
<div class="foodblock col-m-3 col-3"><div class="spicy-avocado-lime">SPICY AVOCADO & LIME</div>
<div class="textblock"></div></div>
<div class="foodblock col-m-3 col-3"><div class ="toasted-almond-ginger">TOASTED ALMOND & GINGER</div>
<div class="textblock"></div></div>
<div class="foodblock col-m-3 col-3"><div class="local-apple-bacon-bowl">LOCAL APPLE & BACON BOWL</div>
<div class="textblock"></div></div>
<div class="foodblock col-m-3 col-3"><div class="power-bowl">POWER BOWL</div><div class="textblock"></div></div>
My css is:
.foodblock{
float: left;
clear: both;
margin: 15px;
height: 300px;
}
.textblock{
float: left;
}
.spicy-avocado-lime{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
}
.toasted-almond-ginger{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
}
.local-apple-bacon-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
}
.power-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
}/*for mobile phones: */
[class*="col-"]{
width:100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8%;}
.col-m-2 {width: 16%;}
.col-m-2-5 {width: 21.55%;}
.col-m-3 {width: 24%;}
.col-m-4 {width: 32.5%;}
.col-m-5 {width: 40%;}
.col-m-6 {width: 48%;}
.col-m-7 {width: 56%;}
.col-m-8 {width: 65.7%;}
.col-m-9 {width: 72%;}
.col-m-10 {width: 80%;}
.col-m-11 {width: 88%;}
.col-m-12 {width: 96%;}
}
#media only screen and (min-width: 768px){
/*for mobile desktop: */
.col-1 {width: 8%;}
.col-2-5 {width: 21.55%;}
.col-2 {width: 16%;}
.col-3 {width: 24%;}
.col-4 {width: 32.5%;}
.col-5 {width: 40%;}
.col-6 {width: 48%;}
.col-7 {width: 56%;}
.col-8 {width: 65.7%;}
.col-9 {width: 72%;}
.col-10 {width: 80%;}
.col-11 {width: 88%;}
.col-12 {width: 96%;}
}
Remove clear:both; property from the .foodblock selector in your css. That will display your cols inline.