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;
}
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'm trying to make a portfolio page. I've created a section with divs nested inside. The first two on the top of the section were set to relative and they work. I've tried to set the rest to relative and they show on top of the first two divs. Help!
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img{
float: left;
width: 100%;
margin-right: 10px;
position: absolute;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img{
float: left;
width: 100%;
position: absolute;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {
}
#playlist p {
}
<section id="portfolio">
<div id="blog">
<img src="assets/images/icon1.jpg">
<p>Blog</p>
</div>
<div id="hangman">
<img src="assets/images/icon2.jpg">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="assets/images/icon3.jpg">
<p>Playlist</p>
</div>
<div id="maps">
<img src="assets/images/icon4.jpg">
<p>Map Page</p>
</div>
<div id="pets">
<img src="assets/images/icon5.jpg">
<p>Pets</p>
</div>
</section>
The positon:absolute on your img tags in blog and hangman divs was causing this problem. Postion:absolute element do not pick height so thats why everything was overlapping.
Here is your updated code:
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img {
float: left;
width: 100%;
margin-right: 10px;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img {
float: left;
width: 100%;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {}
#playlist p {}
<section id="portfolio">
<div id="blog">
<img src="https://dummyimage.com/600x400/000/fff&text=blog">
<p>Blog</p>
</div>
<div id="hangman">
<img src="https://dummyimage.com/600x400/f00/fff&text=hangman">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="https://dummyimage.com/600x400/0f0/fff&text=playlist">
<p>Playlist</p>
</div>
<div id="maps">
<img src="https://dummyimage.com/600x400/00f/fff&text=maps">
<p>Map Page</p>
</div>
<div id="pets">
<img src="https://dummyimage.com/600x400/ff0/fff&text=pets">
<p>Pets</p>
</div>
</section>
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;
}
My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.
I want div in div height set auto.
http://bit.ly/rubikss1
at the bottom of the div inside is coming out. I want the bottom div to extend to.
Please Help!
body,html{height:100%}
.wrapper{
width: 700px;
height: 100%;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: 100%;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: 100%;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}
My css.
How i do set auto height two div? Please give help?
I think that is what you want:
body,html{height:100%}
.wrapper{
width: 700px;
height: auto;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: auto;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: auto;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}