I want the site to have three different formats depending on the width of the browser window. Two of my media queries display correctly. The third one however, does not. For some reason, the images inside the divs increase in height a lot and push all of the text out of the div. The only thing that should change about the images is the width. It's weird because the width and margins of the divs display fine so I know the media query is doing something. It's just that the content inside the divs isn't displaying correctly. This all happens when the browser is above 1000px in width.
<!DOCTYPE>
<html>
<link rel="stylesheet" href="index.css">
<head>
<title>Resi</title>
</head>
<body>
<div id="nav">
<ul>
<strong><li style="font-size:26">RESI</li></strong>
<li>Rent</li>
<li>List Apartment</li>
<li>Contact</li>
<li>Help</li>
<li>Account</li>
<div id="logindiv">
<li id="signup">Sign In</li>
</div>
</ul>
</div>
<img src="http://www.ojc.edu/futurestudents/housingandfood/images/D13_Wunsch01.jpg" alt="college dorm" width = 960px height=470px>
<div id="search">
<h6 style="color:white" id="searchheader">Resi. Your alternative to dorming.</h6>
<input class="search-bar" type="text" name="search" placeholder="Search For Your School, Neighborhood, or City..."> <input type="button" value="Search">
</div>
<div class="reasons_1">
<img class="pics" src="http://scottsdalefurnishedapartment.com/wp-content/uploads/2013/10/specialedition.jpg">
<h3>Get more out of your dorm</h3>
<p>fdsg zfdga gzszv bzsgfA fdzsbgf zgszza gazff</p>
<p class="learn">Learn more ▶</p>
</div>
<div class="reasons_1">
<img class="pics" src="https://g.foolcdn.com/editorial/images/130138/college_large.jpg" >
<h3>Save money</h3>
<p>szhg sfzv hsgfhazf ghfghx fghx dxhfd fgsz gxsg zsfgsz</p>
<p class="learn">Learn more ▶</p>
</div>
<div class= "reasons_1">
<img class="pics" src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2012/7/16/1/CI-Dormify_dorm-room-teens-talking-on-sofa_s4x3.jpg.rend.hgtvcom.231.174.jpeg">
<h3>Freedom without the worry</h3>
<p>szfgzgzdf fg sdfgd gfgfgz g fzsg gfg zgfg zz df hj hj </p>
<p class="learn">Learn more ▶</p>
</div>
<div id="footer">
<h2>Terms and conditions</h2>
</div>
</body>
So that's the html and here's the css
body {
width:100%;
margin: 0 auto;
background-color:#f7f7f7;
min-width: 636px;
}
div{
margin: 5px auto;
}
h1{
margin: 0px;
line-height: 70px;
}
#nav{
background-color: #00AAA0;
margin: 0 auto;
width: 100%;
height: 40;
}
li{
float: left;
font-family: sans-serif;
font-size: 16px;
padding: 0px 15px;
display: inline;
line-height: 40px;
height: 40px;
color: white;
}
ul{
margin: 0px;
margin-left: -50px
}
#signup{
float:right;
color: black;
height: 30px;
line-height: 30px;
}
#logindiv,#logindiv:hover{
float:right;
background-color:white;
margin: 5px 15px;
height: 30px;
width: 80px;
cursor: pointer;
}
img{
margin: 0px;
width: 100%;
height:
}
#search{
margin: 0 auto;
width: 600px;
height: 80px;
position: relative;
left: 0px;
bottom: 130px;
margin-bottom: -85px;
}
#search input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
margin-left: 5px;
}
input[type=button], input[type=button]:hover {
position:relative;
left:-6px;
bottom: 1px;
background-color:#FF7A5A;
color:white;
cursor: pointer;
height: 30px;
border: hidden;
width: 90px;
font-size: 16px;
margin-top: 5px;
}
.search-bar{
margin: 5px auto;
width: 500px;
height: 30px;
font-size: 16px;
}
#searchheader{
font-size: 30px;
}
h2,h6{
margin: 5px auto;
width:500px;
text-align: center;
font-family: sans-serif;
}
.reasons_1{
float: left;
background-color:white;
margin: 15px;
width: 31%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 1500px) and (min-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 2%;
width: 29%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
#media only screen and (max-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-left: 5%;
width: 40%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 700px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 14%;
margin-right: 14%;
width: 70%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
.pics{
height:190px;
width:100%;
}
h3{
font-family: sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 16px;
line-height: 1.5;
font-family: Circular, Helvetica, Arial, sans-serif;
font-weight: 300;
margin-left: 10px;
margin-right: 10px;
}
#footer{
height: 250px;
background-color: #00AAA0;
color: white;
clear: both;
width: 100%
}
.learn{
position: absolute;
left: 165px;
top: 300px;
}
a{
color: #FF7A5A;
}
Also, this is my first site so any advice on how to make it look better would be appreciated.
This might be because of width you are giving to class reasons_1
Your doctype at the top can't just say doctype
Use
under
you need to close the html
Look here for the DOCTYPE and ending HTML code
use these sites these sites to validate you code
edit: I can't post html code. :(
Related
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>
Here is the demo code
<div class="container">
<div class="header">
<img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
<span class="text">Title Here</span>
</div>
</div>
I am trying to put the "Title" in center and then place the logo, next to it in the left side of it.
The title name would be dynamic so it should always be at the center irrespective of length
Try
this demo
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align: center;
position: relative;
}
Change CSS
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
float:left;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align:center;
position: relative;
}
http://jsfiddle.net/d902fzyn/
Is this how you want it to be?
.container {
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
position: relative;
}
.logo {
width: 55px;
vertical-align: bottom;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align: center;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class="container">
<div class="header">
<img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" />
<span class="text">Title Here</span>
</div>
</div>
I am a beginner to HTML and CSS. I am trying to make a very basic webpage in HTML.
I am facing an issue. When I resize browser, the position of navigation items automatically change. Is there any way to fix there position?
#font-face { font-family: sansation; src: url('sanslight.ttf'); }
body{
margin: 0;
padding: 0;
overflow: auto;
background-color: #f8f8f8;
font-family: sansation;
color:white;
}
/* ---------Header-------------*/
.container{
max-width: 920px;
width: 100%;
margin: auto;
overflow: hidden;
padding:10px 21px;
border-bottom: 2px solid darkgrey;
background-color: white;
}
.topnav {
float: right;
overflow: hidden;
margin-top: 4px;
}
.topnav a{
color: white;
display: inline-block;
line-height: normal;
margin-left: 15px;
text-decoration: none;
padding: 10px 20px;
background-color: #ff9900;
}
.topnav a:hover{
background-color: #ffad33;
font-style: italic;
border: none;
padding-bottom: 6px;
border-bottom: 4px solid #e68a00;
}
.topnav a.active{
padding-bottom: 6px;
font-weight: 600;
background-color: #ff9900;
font-style: normal;
border-bottom: 4px solid #e68a00;
}
.logo{
margin-top: 2px;
}
/*-------CONTENT-------*/
.slideshow{
max-width: 960px;
height: 100%;
width: 100%;
border: 2px solid darkgrey;
margin-left: auto;
margin-right: auto;
margin-top: 21px;
}
h2{
width: 923px;
line-height: 25px;
padding: 10px 21px;
letter-spacing: 1px;
margin-left: auto;
margin-right: auto;
background: #ff9900;
}
.doctor{
color:black;
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
text-align: center;
overflow: hidden;
background: white;
border-width: 2px;
}
.doctor tr{
font-size: 14px;
text-align: center;
}
.demo ,table ,td{
color: darkgray;
max-width: 960px;
width: 33%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
padding: inherit;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Online Doctor Support</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="images/logo.png" style="width:150px;height:auto;">
<div class="topnav">
<a class="active" href="#">Home</a>
About
Review
Contact
</div>
</div></div>
</header>
<div class="slideshow">
<img src="images/ste.png">
</div>
<h2>Welcome!</h2>
<table class="doctor">
<tr>
<th><img src="images/doctor.png" style="width:150px;height:150px"></th>
<th><img src="images/doctor1.png" style="width:150px;height:150px"></th>
<th><img src="images/doctor3.png" style="width:150px;height:150px"></th>
</tr>
<tr>
<td><font size="35px">Doctor1</font></td>
<td><font size="35px">Doctor2</font></td>
<td><font size="35px">Doctor3</font></td>
</tr>
</table>
<table class="demo">
<tr>
<td>Description</td>
<td>Description</td>
<td>Description</td>
</tr>
</table>
</body>
</html>
I am really sorry if there are mistakes in my codding ;)
Here is how my page look when I resize browser : http://i.imgur.com/Eb3BnXx.jpg
This is because you've given a width of 100% to .container.
If you do not want the elements to change position on window resize, consider giving a fixed width to your container (This is not recommended though and goes against responsive design principles).
Once it is fixed on desktop browser, then perhaps you can look into Responsive Web Design (using #media queries) to support all sorts of screens and resolutions.
#font-face { font-family: sansation; src: url('sanslight.ttf'); }
body{
margin: 0;
padding: 0;
overflow: auto;
background-color: #f8f8f8;
font-family: sansation;
color:white;
}
/* ---------Header-------------*/
.container{
max-width: 920px;
width: 100%;
margin: auto;
overflow: hidden;
padding:10px 21px;
border-bottom: 2px solid darkgrey;
background-color: white;
}
.topnav {
float: right;
overflow: hidden;
margin-top: 4px;
}
.topnav a{
color: white;
display: inline-block;
line-height: normal;
margin-left: 15px;
text-decoration: none;
padding: 10px 20px;
background-color: #ff9900;
}
.topnav a:hover{
background-color: #ffad33;
font-style: italic;
border: none;
padding-bottom: 6px;
border-bottom: 4px solid #e68a00;
}
.topnav a.active{
padding-bottom: 6px;
font-weight: 600;
background-color: #ff9900;
font-style: normal;
border-bottom: 4px solid #e68a00;
}
.logo{
margin-top: 2px;
}
/*-------CONTENT-------*/
.slideshow{
max-width: 960px;
height: 100%;
width: 100%;
border: 2px solid darkgrey;
margin-left: auto;
margin-right: auto;
margin-top: 21px;
}
h2{
width: 923px;
line-height: 25px;
padding: 10px 21px;
letter-spacing: 1px;
margin-left: auto;
margin-right: auto;
background: #ff9900;
}
.doctor{
color:black;
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
text-align: center;
overflow: hidden;
background: white;
border-width: 2px;
}
.doctor tr{
font-size: 14px;
text-align: center;
}
.demo ,table ,td{
color: darkgray;
max-width: 960px;
width: 33%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
padding: inherit;
text-align: center;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
p {
min-height: 100px;
}
}
You write to css these type to add media query and design Your Page as Your wish
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;
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/