I started learning CSS3 and got a problem, i want to create 4 black boxes(divs), and put them on in one line, 3 of them work properly, but 4th is moving to new line, what am i doing wrong?
My guess would be that its because of the 10px margin, but i dont know how to do it properly.
* {
margin: 0px;
padding: 0px; }
body {
font-family: Roboto, sans-serif;
box-sizing: border-box; }
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto; }
#block1 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block2 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block3 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block4 {
width: 25%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
<body>
<div id="wrapper">
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
</div> </body>
body {
font-family: Roboto, sans-serif; box-sizing: border-box;
}
#wrapper {
width: 1000px;
margin: 0 auto;
}
#block1 {
width: calc(25% - 10px);
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block2 {
width: calc(25% - 10px);
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block3 {
width: calc(25% - 10px);
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
#block4 {
width: calc(25% - 10px);
height: 100px;
background-color: black;
float: left;
margin-right: 10px;
}
<div id="wrapper">
<div id="block1">
Stuff1
</div>
<div id="block2">
Stuff2
</div>
<div id="block3">
Stuff3
</div>
<div id="block4">
Stuff4
</div>
</div>
You need to substract your margin-right value from your width, otherwise it adds up to more than 100% width.
Try
width: calc(25% - 10px);
height: 100px;
background-color: black;
float: left;
margin-right: 10px; }
Or try reducing your % by 1%.
#block4 {
width: 24%;
height: 100px;
background-color: black;
float: left;
margin-right: 10px;
}
Related
(ignore the fact that items in the header are in different language) Hyperlink of header's items doesn't work. I don't know how to fix it. When I put a cursor on a div my cursor doesn't change to a hand. It looks like website doesn't see my div? Or something like that? I've no idea. I send HTML/CSS code.
body {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
background-color: #DEDEDE;
padding: 0;
margin: 0;
}
#container {
margin-left: auto;
margin-right: auto;
height: 1700px;
}
#header {
width: 800px;
padding-top: 20px;
margin-left: 550px;
margin-right: auto;
float: left;
}
#photo {
height: 980px;
width: 1864px;
background-color: white;
float: left;
background-image: url(domek.jpg);
background-size: cover;
box-shadow: 10px 5px 15px 0px grey;
}
#oferta {
font-size: 25px;
width: 150px;
float: left;
}
#rezerwacja {
font-size: 25px;
width: 150px;
float: left;
}
#atrakcje {
padding-left: 40px;
font-size: 25px;
width: 150px;
float: left;
}
#kontakt {
font-size: 25px;
width: 150px;
float: left;
}
#galeria {
font-size: 25px;
width: 150px;
float: left;
}
<div id="photo" style="position:relative;"></div>
<div id="header" style="position:absolute;">
<div style="clear: both;"></div>
<div id="oferta" style="color: white;">Oferta</div>
<div id="kontakt">Kontakt</div>
<div id="rezerwacja">Rezerwacja</div>
<div id="atrakcje">Atrakcje</div>
<div id="galeria">Galeria</div>
</div>
I want to put my "why you should buy from us" on top of the large grey container but don't know how to as when I centre the text the containers all shift downwards preventing the text to overlap, does anyone know a fix to this?
#whybuy {
color: #ffcc00;
font-size: 40px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
}
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
margin-top: 200px;
}
#box1 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 425px;
}
#box2 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
#box3 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
<h1 id="whybuy">WHY BUY FROM US</h1>
<div id="largebox">
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</div>
This will put your text on the largebox.
#whybuy {
color: #ffcc00;
font-size: 40px;
position: absolute;
width: 100%
text-align: center;
z-index: 1;
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
display: relative
}
#box1 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 425px;
}
#box2 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
#box3 {
height: 450px;
width: 300px;
background-color: #232323;
float: left;
margin-left: 325px;
}
check the margin for #largebox; it has margin-top: 200px;
#largebox {
width: 1890px;
height: 475px;
background-color: #2c2c2c;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
//margin-top: 200px;
}
I need to make a flip animation of one block of color in my HTML page. It has to flip 360 deg. Here is my HTML and CSS codes. I am new at this, so I don't know where to even start. If someone could try to do that and explain how it works.
body{
margin:0;
max-width:1680px;
height:100vh;
}
.zydra{
background-color: #00BFFF;
width:30%;
height:50%;
float: left;
}
.zalia{
background-color: #228B22;
width: 70%;
height: 10%;
float: left;
}
.geltona{
background-color: #FFFF00;
width: 35%;
height: 10%;
float: right;
}
.melyna{
background-color: #000080;
width: 35%;
height: 10%;
float: left;
}
.oranzine{
background-color: #FFA500;
width: 70%;
height: 30%;
float: left;
}
.ruda{
background-color: #8B4513;
width: 15%;
height: 40%;
float: left;
}
.raudona{
background-color: #FF0000;
width: 35%;
height: 40%;
float: left;
}
.balta{
background-color: white;
width: 50%;
height: 40%;
float: right;
text-align: center;
}
.juoda{
background-color: black;
width: 100%;
height: 10%;
float: left;
}
#media only screen and (max-width: 768px) and (max-height: 1024px){
body{
margin:0;
max-width: 768px;
max-height: 1024px;
}
.zydra{
background-color: #00BFFF;
width: 50%;
height: 50%;
float: left;
}
.zalia{
background-color: #228B22;
width: 50%;
height: 10%;
float: right;
}
.melyna{
background-color: #000080;
width: 50%;
height: 10%;
float: right;
}
.geltona{
display: none;
}
.oranzine{
background-color: #FFA500;
width: 50%;
height: 30%;
float: right;
}
.ruda{
display: none;
}
.raudona{
background-color: #FF0000;
width: 40%;
height: 40%;
float: left;
}
.balta{
background-color: white;
width: 60%;
height: 40%;
float: right;
text-align: center;
}
.juoda{
background-color: black;
width: 100%;
height: 10%;
float: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Kursinis darbas
</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<meta name="viewport" content="width=device-width" content="initial-scale=1">
</head>
<body>
<div class="zydra"></div>
<div class="zalia"></div>
<div class="geltona"></div>
<div class="melyna"></div>
<div class="oranzine"></div>
<div class="ruda"></div>
<div id="balta" class="balta" onmouseover="pirmaT()" onmouseout="pirmaN()" ><span id="pirma">Tekstas</span></div>
<div class="raudona"></div>
<div class="juoda"></div>
<script>
function pirmaT(){
document.getElementById("pirma").style.color = "white";
document.getElementById("balta").style.backgroundColor = "black";
}
function pirmaN(){
document.getElementById("trecia").style.color = "black";
document.getElementById("balta").style.backgroundColor = "white";
}
</script>
</body>
</html>
You can use jquery and animate.css !
Here is how to implement animate.css in your html !
Here is how to make only one flip :
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
Replace #yourElement by your tag id name :
$('#yourElement').animateCss('flip');
$('#balta').animateCss('flip');
And in your html, you can init jquery like that
<script>
$('#balta').mouseover(function(){
$('#balta').animateCss('flip');
});
</script>
Here you go - everything in CSS, no JS needed
#keyframes spin { 100% { transform:rotate(360deg); } }
body{
margin:0;
max-width:1680px;
height:100vh;
}
.zydra{
background-color: #00BFFF;
width:30%;
height:50%;
float: left;
}
.zalia{
background-color: #228B22;
width: 70%;
height: 10%;
float: left;
}
.geltona{
background-color: #FFFF00;
width: 35%;
height: 10%;
float: right;
}
.melyna{
background-color: #000080;
width: 35%;
height: 10%;
float: left;
}
.melyna:hover {
animation:spin 4s linear; }
.oranzine{
background-color: #FFA500;
width: 70%;
height: 30%;
float: left;
}
.ruda{
background-color: #8B4513;
width: 15%;
height: 40%;
float: left;
}
.raudona{
background-color: #FF0000;
width: 35%;
height: 40%;
float: left;
}
.balta{
background-color: white;
width: 50%;
height: 40%;
float: right;
text-align: center;
}
.juoda{
background-color: black;
width: 100%;
height: 10%;
float: left;
}
#media only screen and (max-width: 768px) and (max-height: 1024px){
body{
margin:0;
max-width: 768px;
max-height: 1024px;
}
.zydra{
background-color: #00BFFF;
width: 50%;
height: 50%;
float: left;
}
.zalia{
background-color: #228B22;
width: 50%;
height: 10%;
float: right;
}
.melyna{
background-color: #000080;
width: 50%;
height: 10%;
float: right;
}
.geltona{
display: none;
}
.oranzine{
background-color: #FFA500;
width: 50%;
height: 30%;
float: right;
}
.ruda{
display: none;
}
.raudona{
background-color: #FF0000;
width: 40%;
height: 40%;
float: left;
}
.balta{
background-color: white;
width: 60%;
height: 40%;
float: right;
text-align: center;
}
.balta:hover span {
color: white;
}
.balta:hover {
background: black;
}
.juoda{
background-color: black;
width: 100%;
height: 10%;
float: left;
}
}
<body>
<div class="zydra"></div>
<div class="zalia"></div>
<div class="geltona"></div>
<div class="melyna"><span>text</span></div>
<div class="oranzine"></div>
<div class="ruda"></div>
<div id="balta" class="balta"><span id="pirma">Tekstas</span></div>
<div class="raudona"></div>
<div class="juoda"></div>
</body>
I am trying to put text over an image, but when I give the text parametr left: it's cut in half.
HTML:
<div class="c-subcat-item">
<div class="pro-img-wrap">
<div class="pro-img-wrap-in">
<div class="img-middle-center">
<a class="img-middle-wrap" href="/Wines/Product/1417">
<img src="/Images/bottle-red.jpg" alt="Produkt">
</a>
</div>
</div>
</div>
<div class="subcat-item-details">
<div class="product-desc-container">
<div class="">
<a class="item-name" href="/Wines/Product/1417">Avilla</a>
<div class="clearfix"></div>
<div class="item-our-price">
<span class="item-sold-out">Chwilowo niedostępny</span>
</div>
<div class="item-detail-price">
<span class="item-price-value">45,00 zł </span>
</div>
</div>
<div class="div-empty-margin"></div>
</div>
<div class="clearfix"></div>
<span class="item-more">
<a class="item-more" href="/Wines/Product/1417">Zobacz więcej</a>
</span>
<div class="div-empty-margin"></div>
<div class="add-to-cart">
</div>
</div>
</div>
CSS:
body {
background-color: #fffff7;
color: #666;
font-family: 'Roboto Condensed',sans-serif;
font-size: 10px;
height: 100%;
margin: 0;}
html, body, .page-wrapper {
width: 100%;
min-width: 1024px;
margin-left: auto;
margin-right: auto;}
.page-wrapper {
height: 100%;
}
.page-content-wrapper {
min-height: 100%;
text-align: center;
}
.main {
display: inline-block;
margin: 20px auto 0;
margin-bottom: 61px;
position: relative;
text-align: left;
width: 965px;
}
.wrapper {
float: left;
margin-bottom: 20px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.content-main-wrapper1 {
float: left;
width: 100%;
}
.content-main-wrapper2 {
float: left;
position: relative;
right: 767px;
width: 100%;
}
.content-wo-padding {
float: left;
left: 768px;
position: relative;
width: 726px;
}
.pro-img-wrap {
float: left;
}
.c-subcat-item {
float: left;
padding: 20px;
position: relative;
width: 726px;
}
.pro-img-wrap-in {
border: 1px solid #e8e5e5;
float: left;
height: 240px;
overflow: hidden;
width: 160px;
display: table;
}
.img-middle-center {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
display: table-cell;
float: none;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
.subcat-item-details {
float: right;
height: 242px;
width: 544px;
position: relative;
}
.product-desc-container {
overflow: hidden;
position: relative;
}
h2.item-name, a.item-name {
color: #333;
float: left;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin: 2px 0 5px 0;
padding: 0;
width: 100%;
text-transform: uppercase;
}
.clearfix {
clear: both;
}
.item-our-price {
float: left;
margin-top: 10px;
width: 100%;
}
.item-our-price span.item-sold-out {
position: relative;
color: #f00;
background-color: #fff;
padding: 10px;
border: solid 1px #f00;
font-size: 1.3em;
cursor: default;
left: -60px;
}
You can check it here
Remove overflow: hidden; from class .product-desc-container
body {
background-color: #fffff7;
color: #666;
font-family: 'Roboto Condensed',sans-serif;
font-size: 10px;
height: 100%;
margin: 0;}
html, body, .page-wrapper {
width: 100%;
min-width: 1024px;
margin-left: auto;
margin-right: auto;}
.page-wrapper {
height: 100%;
}
.page-content-wrapper {
min-height: 100%;
text-align: center;
}
.main {
display: inline-block;
margin: 20px auto 0;
margin-bottom: 61px;
position: relative;
text-align: left;
width: 965px;
}
.wrapper {
float: left;
margin-bottom: 20px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.content-main-wrapper1 {
float: left;
width: 100%;
}
.content-main-wrapper2 {
float: left;
position: relative;
right: 767px;
width: 100%;
}
.content-wo-padding {
float: left;
left: 768px;
position: relative;
width: 726px;
}
.pro-img-wrap {
float: left;
}
.c-subcat-item {
float: left;
padding: 20px;
position: relative;
width: 726px;
}
.pro-img-wrap-in {
border: 1px solid #e8e5e5;
float: left;
height: 240px;
overflow: hidden;
width: 160px;
display: table;
}
.img-middle-center {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
display: table-cell;
float: none;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
.subcat-item-details {
float: right;
height: 242px;
width: 544px;
position: relative;
}
.product-desc-container {
position: relative;
}
h2.item-name, a.item-name {
color: #333;
float: left;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin: 2px 0 5px 0;
padding: 0;
width: 100%;
text-transform: uppercase;
}
.clearfix {
clear: both;
}
.item-our-price {
float: left;
margin-top: 10px;
width: 100%;
}
.item-our-price span.item-sold-out {
position: relative;
color: #f00;
background-color: #fff;
padding: 10px;
border: solid 1px #f00;
font-size: 1.3em;
cursor: default;
left: -60px;
}
<div class="c-subcat-item">
<div class="pro-img-wrap">
<div class="pro-img-wrap-in">
<div class="img-middle-center">
<a class="img-middle-wrap" href="/Wines/Product/1417"> <img src="/Images/bottle-red.jpg" alt="Produkt">
</a>
</div>
</div>
</div>
<div class="subcat-item-details">
<div class="product-desc-container">
<div class="">
<a class="item-name" href="/Wines/Product/1417">Avilla</a>
<div class="clearfix"></div>
<div class="item-our-price">
<span class="item-sold-out">Chwilowo niedostępny</span>
</div>
<div class="item-detail-price">
<span class="item-price-value">45,00 zł </span>
</div>
</div>
<div class="div-empty-margin"></div>
</div>
<div class="clearfix"></div>
<span class="item-more">
<a class="item-more" href="/Wines/Product/1417">Zobacz więcej</a>
</span>
<div class="div-empty-margin"></div>
<div class="add-to-cart">
</div>
</div>
</div>
Remove overflow:hidden from .product-desc-container that's the reason for the text not visible over the image
remove overflow:hidden from .product-desc-container
see here : jsfiddle
code
.product-desc-container {
/* overflow: hidden; */
position: relative;
}
Example: https://jsfiddle.net/La9jd2y7/
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
I need div 3 to go below div 2, so the left of div 4 pushed up against 2 and 3.
Result: http://i.imgur.com/N8VZ4HO.png
Thanks.
Try this:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 50px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.two >div {
height: 25px;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">
<div>2</div>
<div>3</div>
</div>
<div class="four">4</div>
So, as you notice I've changed the HTML to place the 2 and 3 inside the .two. That way you have 3 columns, and 2 and 3 are inside the middle column. No need for 4 columns.
Here is Demo
HTML:
<div class="one">1</div>
<div class="box">
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>
CSS:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.box{
float: left;
width:25px
}
https://jsfiddle.net/La9jd2y7/3/
Try this:
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
margin-top: 25px;
margin-left: -25px;
}
DEMO
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.two+.three{
margin-top: 25px;
margin-left: -25px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>