I'm very new to HTML/CSS, and I just can't figure out why my button won't go into my div (which is called box). I've tried using both .box .btn, and .box button (and about a million other things with switching up IDs and moving pieces around), and nothing is working.
Please help!
Here's my HTML:
<body>
<div class="wrap">
<div id="Nav">
<p> Library </p>
<ul>
<li><img src="img/glyph.jpg" alt="glyph"></li>
<li><img src="img/glyph.jpg" alt="glyph"></li>
<li><img src="img/glyph.jpg" alt="glyph"></li>
</ul>
</div>
<div class="box" id="Box1">
<div class="header1"><span class="time">3 Hours</span></div>
<div class="btn"><button type=button>Intermediate</button></div>
</div>
<div class="box" id="Box2">
<div class="header2"><span class="time">2 Hours</span></div>
<div class="btn"><button type=button>Intermediate</button></div>
</div>
<div class="box" id="Box3">
<div class="header3"><span class="time">97.4 Hours</span></div>
<div class="btn"><button type=button>Intermediate</button></div>
</div>
<div class="box" id="Box4">
<div class="header4"><span class="time">Like, Forever Hours</span>
</div>
<div class="btn"><button type=button>Intermediate</button></div>
</div>
</div>
</body>
and my CSS:
body,
html {
margin: 0;
padding: 0;
color: #000;
background: #FFFFFF;
}
.wrap {
height: 800px;
width: 1110px;
margin: 100px;
background-color: #EDEFF0;
}
#Nav {
height: 70px;
width: 1070px;
margin: 15px;
padding: 0;
background-color: #EDEFF0;
border-bottom-style:inset;
border-color: #C7C9C9;
}
#Nav p {
width: 70px;
height: 20px;
margin-top: 27.5px;
float: left;
font-size: 20px;
font-family: sans-serif;
color:#374048;
}
#Nav ul {
list-style-type: none;
display: inline;
}
#Nav li {
float: right;
margin: 30px 5px 0px 5px;
}
.box {
height: 300px;
width: 500px;
border-style: solid;
border: 0px .5px 2px .5px;
border-color: #C7C9C9;
border-radius: 4px;
padding: 0;
}
#Box1 {
float:right;
background-color: #FFFFFF;
margin: 15px 25px 15px 12.5px;
}
#Box1 .header1 {
height: 60px;
width: inherit;
padding: 0;
margin: 0px 0px 240px 0px;
background-color: #FF81AD;
}
#Box2 {
float:left;
background-color: #FFFFFF;
margin: 15px 12.5px 15px 25px;
}
#Box2 .header2 {
height: 60px;
width: inherit;
padding: 0;
margin: 0px 0px 240px 0px;
background-color: #009E77;
}
#Box3 {
float:right;
background-color: #FFFFFF;
margin: 15px 25px 15px 12.5px;
}
#Box3 .header3 {
height: 60px;
width: inherit;
padding: 0;
margin: 0px 0px 240px 0px;
background-color: #009E77;
}
#Box4 {
float:left;
background-color: #FFFFFF;
margin: 15px 12.5px 15px 25px;
}
#Box4 .header4 {
height: 60px;
width: inherit;
padding: 0;
margin: 0px 0px 240px 0px;
background-color: #8685CB;
}
.box .time {
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
float: right;
margin-right: 30px;
margin-top: 22px;
}
button {
background-color: #C7C9C9;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
display: inline;
font-size: 12px;
}
.box .btn {
height: 35px;
width: 100px;
margin: 0px 0px 100px 140px;
}
It is because you have high number of margin. Decrease it, button will display inside div.
Current margin: 0 0 240px; change it to margin: 0 0 200px;.
And for same css don't use different class make one common class for all four div.
like, In given fiddle.
.hdiv{
height: 60px;
width: inherit;
padding: 0;
margin: 0px 0px 200px 0px;
}
Working Fiddle
Related
I am creating two HTML files, which would have the same H1 as title inside of a div.
Now, they have the same styling, as I check them out in Chrome Dev tools, one of them is positiong with 20 pixels so the right then the other one in the other HTML file.
Can someone explain this to me, please?
Does it matter if I have different elements below the H1's in the different HTML files? Would that make it differ at all?
I'll give the code on CodePen.io for both with styling, offline the difference is visible, I can't tell if it is online. Please check it out.
I am having trouble with the position of ".center-felso" class.
HTML file 1 , HTML file 2
HTML and CSS file 1 code:
/*HTML file 1 CSS code*/
#import url('https://fonts.googleapis.com/css2?family=Newsreader&display=swap');
body {
background-color: #ad5805;
/*#bd7819*/
font-family: 'Newsreader', serif;
}
/*Szavak linkjenek dekoracioja es szine*/
a {
text-decoration: none;
color: #176300;
transition: color 1s ease;
}
a:visited {
text-decoration: none;
color: #176300;
}
a:hover {
text-decoration: underline;
color: #000a7a;
}
/*felso szovegdoboz*/
.center-felso {
max-width: 100%;
width: 650px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
/*felso szovegdoboz szovege*/
h1 {
font-size: 42px;
font-weight: bold;
color: #41015d;
}
/*Szavak listajanak kulseje*/
.lista {
max-width: 100%;
width: 650px;
margin-left: auto;
margin-right: auto;
}
.fomenu {
max-width: 100%;
width: 350px;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 25px;
}
/*also szovegdoboz*/
.center-also {
max-width: 100%;
width: 650px;
text-align: center;
margin: 50px auto 0px auto;
}
<div class="center-felso">
<h1>Szótár Prodzsekt</h1>
<h1>Kandabula emlékére</h1>
</div>
<div class="fomenu">
Főmenü
</div>
<div class="lista">
<ul>
<li>
<p>
andalog
</p>
</li>
</ul>
</div>
<div class="fomenu">
Főmenü
</div>
And the HTML and CSS file 2 code:
#import url('https://fonts.googleapis.com/css2?family=Newsreader&display=swap');
body {
background-color: #ad5805;
/*#ad5805*/
font-family: 'Newsreader', serif;
}
/*felso szovegdoboz*/
.center-felso {
max-width: 100%;
width: 650px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
/*also szovegdoboz*/
.center-also {
width: 100%;
width: 650px;
text-align: center;
margin: 50px auto 0px auto;
}
/*felso szovegdoboz szovege*/
h1 {
font-size: 42px;
font-weight: bold;
color: #41015d;
}
/*FlexBox*/
.abc {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
}
/*Hivatkozas vagy link szine*/
a {
text-decoration: none;
color: #176300;
transition: color 1s ease;
/*Added transition instead of animation, works just right*/
}
a:visited {
text-decoration: none;
color: #176300;
}
a:hover {
text-decoration: underline;
color: #000a7a;
}
/*Elso sor betuhalmaz(flex-wrap)*/
.a {
padding: 10px 25px 10px 25px;
font-size: 132px;
}
.b {
padding: 10px 25px 10px 25px;
font-size: 42px;
}
.c {
padding: 10px 25px 10px 25px;
font-size: 82px;
}
.d {
padding: 10px 25px 10px 25px;
font-size: 108px;
}
.e {
padding: 10px 25px 10px 25px;
font-size: 42px;
}
.f {
padding: 10px 25px 10px 25px;
font-size: 66px;
}
/*Masodik betuhalmaz(flex-wrap)*/
.g {
padding: 10px 25px 10px 25px;
font-size: 95px;
}
.h {
padding: 10px 25px 10px 25px;
font-size: 84px;
}
.i {
padding: 10px 25px 10px 25px;
font-size: 38px;
}
.j {
padding: 10px 25px 10px 25px;
font-size: 129px;
}
.k {
padding: 10px 25px 10px 25px;
font-size: 55px;
}
.l {
padding: 10px 25px 10px 25px;
font-size: 90px;
}
.m {
padding: 10px 25px 10px 25px;
font-size: 55px;
}
.n {
padding: 10px 25px 10px 25px;
font-size: 105px;
}
/*Harmadik betuhalmaz(flex-wrap)*/
.o {
padding: 10px 25px 10px 25px;
font-size: 108px;
}
.q {
padding: 10px 25px 10px 25px;
font-size: 35px;
}
.p {
padding: 10px 25px 10px 25px;
font-size: 77px;
}
.r {
padding: 10px 25px 10px 25px;
font-size: 50px;
}
.s {
padding: 10px 25px 10px 25px;
font-size: 92px;
}
.t {
padding: 10px 25px 10px 25px;
font-size: 85px;
}
/*Negyedik betuhalmaz(flex-wrap)*/
.u {
padding: 10px 25px 10px 25px;
font-size: 96px;
}
.v {
padding: 10px 25px 10px 25px;
font-size: 66px;
}
.x {
padding: 10px 25px 10px 25px;
font-size: 36px;
}
.y {
padding: 10px 25px 10px 25px;
font-size: 76px;
}
.z {
padding: 10px 25px 10px 25px;
font-size: 46px;
}
<div class="center-felso">
<h1>Szótár Prodzsekt</h1>
<h1>Kandabula emlékére</h1>
</div>
<div>
<div class="abc">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C,Cs</div>
<div class="d">D,Dz,Dzs</div>
<div class="e">E, É</div>
<div class="f">F</div>
</div>
<div class="abc">
<div class="g">G,Gy</div>
<div class="h">H</div>
<div class="i">I, Í</div>
<div class="j">J</div>
<div class="k">K</div>
<div class="l">L,Ly</div>
<div class="m">M</div>
<div class="n">N,Ny</div>
</div>
<div class="abc">
<div class="o">O,Ó,Ö,Ő</div>
<div class="q">Q</div>
<div class="p">P</div>
<div class="r">R</div>
<div class="s">S,Sz</div>
<div class="t">T,Ty</div>
</div>
<div class="abc">
<div class="u">U,Ú,Ü,Ű</div>
<div class="v">V,W</div>
<div class="x">X</div>
<div class="y">Y</div>
<div class="z">Z,Zs</div>
</div>
</div>
I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
I would like to put my text on the right side of the darker box. I want the AAAAAAAAAAAAAA' above the dark box to be on the right side. I tried it by writing it in an another container but it pushes the dark box down. Thank you!
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>
You can use flex on the parent to put them in a row, then use order: -1 on the darker box to put it visually on the left of the text.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px;
display: flex;
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
order: -1;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>
You should put float:right in your p element
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px;
/*add this*/
float:right;
}
Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block
Short story: my footer doesn't react to margin-top, i've tried many various way (well it actualy works on very big numbers, which shows that margin is led from previous element, the image container).Here's the code:
HTML (i've removed content obiviously, and didn't attach head section, which is before content):
<div id="content">
<h1 id="top">header</h1>
<div id="billboard">
<div id="buttony">
buttons
</div>
</div>
<div class="pasek">
</div>
<h2 class="naglowek">Najnowsze prace:</h2>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb1.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb2.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
<div class="photo"><div class="heading"><span>text</span></div><img src="img/thumb3.jpg" alt="smu"/><div class="caption"><span>text</span></div></div>
</div>
<div id="footer">
<div id="footerwrap">
<div class="footerblock"><h3 id="nav">header</h3>
<ol>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ol>
</div>
<div class="footerblock"><h3 id="info">header</h3><p>some content </p>
</div>
<div class="footerblock"><h3 id="plus">header</h3>
<p class="links"><a target="_blank" href="http://www.smashingmagazine.com">Smashing Magazine</a></p>
<p class="links"><a target="_blank" href="http://www.w3schools.com">W3 Schools</a></p>
<p class="links"><a target="_blank" href="http://www.w3.org">W3 Consortium</a></p>
</div>
</div>
</div>
Here's the CSS part:
div#content{
width: 960px;
margin: 0 auto;
}
div#content h1#top{
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 56px;
text-align: center;
color: #333333;
padding: 0 0 10px;
margin: 20px auto;
border-bottom: 4px #d4d4d4 dashed;
}
div#content h1#top span{
color: #c24b4b;
}
div#content div.pasek{
width: 960px;
height: 30px;
background-image: url('img/pasek.jpg');
margin: 10px 0;
}
div#content div#billboard{
width: 960px;
height: 500px;
background-color: #ffffff;
background-image: url('img/bb.jpg');
background-repeat: no-repeat;
}
div#content div#billboard img{
max-width: 100%;
max-height: 100%;
}
div#content div#billboard a:first-of-type{
margin-right: 40px;
}
div#content div#billboard div#buttony{
width: 565px;
position: relative;
top: 380px;
left: 321px;
}
div#content h2.naglowek{
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 36px;
color: #191a1c;
padding: 5px 55px;
margin: 20px auto;
border-bottom: 2px #d4d4d4 dashed;
background: url('img/tools.jpg') no-repeat;
}
/* jQuery podpisy*/
div.photo{
margin: 0 7px 7px;
position: relative;
overflow: hidden;
float: left;
width: 292px;
height: 292px;
border: 4px #212226 solid;
}
div.photo div.heading, div.photo div.caption {
position: absolute;
background-color: #0e0e0f;
height: 30px;
width: 300px;
color: white;
text-align: center;
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
}
div.photo div.heading{
padding-top: 10px;
top: -40px;
}
div.photo div.heading span{
font-size: 20px;
display: block;
margin-top: -2px;
}
div.photo div.caption{
padding-top: 10px;
bottom: -40px;
}
div.photo div.caption span{
color: #d3d3d3;
font-size: 11px;
display: block;
padding: 0 10px;
}
/* jQuery podpisy koniec*/
/* CONTENT END*/
/* FOOTER */
div#footer{
clear: both;
margin-top: 60px;
color: #636363;
font-size: 14px;
height: 300px;
background-color: #131415;
background-image: url('img/pasek2.jpg');
background-repeat: repeat-x;
}
div#footer div#footerwrap{
width: 960px;
margin: 0 auto;
}
div#footer div.footerblock{
float: left;
width: 320px;
margin-top: 40px;
}
div.footerblock h3{
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
letter-spacing: 0.1em;
text-align: center;
font-size: 24px;
color: white;
padding-top: 15px;
height: 39px;
}
div.footerblock h3#nav{
background: url('img/world.jpg') no-repeat 25px;
}
div.footerblock h3#info{
background: url('img/info.jpg') no-repeat 25px;
}
div.footerblock h3#plus{
background: url('img/chat.jpg') no-repeat 25px;
}
div.footerblock li{
font-size: 18px;
padding: 15px 0 10px 40px;
margin: 0 20px;
background: url('img/flash.jpg') no-repeat 10px;
border-bottom: 1px white solid;
}
div.footerblock a:hover{
color: #808080;
}
div.footerblock p{
margin: 20px;
line-height: 20px;
}
div.footerblock p.links{
background: url('img/cloud.jpg') no-repeat 10px 0;
margin: 17px 20px;
}
div.footerblock p a{
font-size: 16px;
color: #636363;
padding-left: 45px;
padding-bottom: 6px;
display: block;
border-bottom: 1px #636363 solid;
}
Wasn't sure which parts of css to drop since as long as suspected parts changes didn't work for me it could be anything i guess. If it's too much please tell i'll drop unnecessary parts.
Here is what you need to do.
Put all the div.photo divs in a one display-block container with height specified. See here http://jsfiddle.net/pXRj3/