I'm making a home automation website, I have an image that looks like a garage door; I'm using the images as buttons and I'm placing them in a table to help sort them. Now When I resize the .garage_door and make it width: 20%; there's still whitespace to it's right as if it was full size. I've tried everything including adjusting the padding and the margins.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
.controls {
padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
position: relative;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: center;
right: 35px;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
.table_controls {
border: 2px solid black;
position: relative;
right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Use the following CSS and there are some repeated css for table_controls in your code. Remove the unwanted css.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
padding-top: 5px;
position: relative;
height: 90px;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: right;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header>
<a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Related
I can not get a solution – after testing some hours. Maybe anybody can help me.
The mobile menu opens correct, but does not close when clicking the close-button or the dark background.
On all devices, Android, Windows, Mac, on every Browser it works very fine. Only on iOS (Safari), the close-function does not react.
Anybody has a solution for this problem?
Thank you very much!
#head-top-inner-right {
float: left;
padding-left: 12px;
}
#nav-container {
position: fixed;
height: 100vh;
width: 100%;
pointer-events: auto !important;
}
#nav-container .bg {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 100% !important;
visibility: hidden;
opacity: 0;
transition: .3s;
background: #000;
}
#nav-container:focus-within .bg {
visibility: visible;
opacity: .6;
}
#nav-container * {
visibility: visible;
}
.button {
position: relative !important;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-appearance: none;
border: 0;
background: #fff;
border: 1px solid #E6E6E6;
border-radius: 0;
height: 50px;
width: 30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
cursor: pointer;
pointer-events: auto;
margin-left: 25px;
margin-right: 0px;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: right;
}
.icon-bar {
display: block;
width: 100%;
height: 1.5px;
background: #1C5292;
transition: .3s;
cursor: pointer;
}
.icon-bar + .icon-bar {
margin-top: 5px;
}
#nav-container:focus-within .button {
pointer-events: none;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
transform: translate3d(0,6.5px,0) rotate(45deg);
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
opacity: 0;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6.5px,0) rotate(-45deg);
cursor: pointer;
}
#head{
display: none;
}
#head-mobile{
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
max-width: 100%;
height: auto;
text-align: left;
margin: 0px auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow: hidden;
display: block;
}
#nav-content {
margin-top: -10px;
margin-left: -10px;
padding: 20px;
width: 67%;
max-width: 300px;
position: absolute;
top: 0;
left: 0;
height: 100% !important;
background: #fff;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateX(-100%);
transition: transform .3s;
will-change: transform;
contain: content;
overflow: visible;
}
#nav-content a:link {
font-weight: 500;
font-size: 16px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
display: block;
}
#nav-content-spacer{
height: 1px;
width: 100%;
background-color: #E6E6E6;
display: block;
}
.small {
display: flex;
align-self: center;
}
.small a {
font-size: 12px;
font-weight: 400;
color: #888;
}
.small a + a {
margin-left: 15px;
}
#nav-container:focus-within #nav-content {
transform: none;
}
<style>
</style>
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mobilemenu.css">
</head>
<body>
<div id="wrapper">
<div id="head-top">
<div id="head-top-inner">
<div id="head-top-inner-left"></div>
<div id="head-top-inner-right"></div>
</div>
</div>
<div id="head-mobile">
<div id="nav-container">
<div class="bg"></div>
<span style="margin-right: 17px !important; display: block;"><div class="button" tabindex="0">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div></span>
<div id="nav-content" tabindex="0">
<h3 class="menu-title">Navigation</h3>
1
<span id="nav-content-spacer"></span>
2
<span id="nav-content-spacer"></span>
3
<span id="nav-content-spacer"></span>
4
<span id="nav-content-spacer"></span>
5
</div>
</div>
<div id="head-inner-left">
Logo
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
So let say i have three images same height and width a, b, c. I want a to come in front with full size after than b with a bit small and left part should be covered behind a . and then c smaller than b left part cover by b right side.
i tried using positioning in these boxes like absolute, relative , fixed but in vain
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<center>
<div class="rcorners1">
<div class="text"><h1>Digital Card Details</h1></div>
</div>
<div class="rcorners2">
<div class="left-wrapper">
<img class="image1" src="./images/Page1.jpg" alt="failed" />
<img class="image2" src="./images/Page2.jpg" alt="failed" />
<img class="image3" src="./images/Page3.jpg" alt="failed" />
</div>
<!-- -->
</div>
</center>
</body>
</html>
.css
.rcorners1 {
border-radius: 70px;
/* background: #73ad21; */
background-image: url(./images/Background.jpg);
padding: 20px;
/* flex: auto; */
width: 950px;
height: 250px;
}
.rcorners2 {
border-radius: 25px;
background: white;
border: 1px solid brown;
/* border: brown; */
/* background-image: url(./images/Background.jpg); */
padding: 20px;
/* float: none; */
/* position: absolute; */
margin-top: -150px;
/* flex: auto; */
width: 800px;
height: 400px;
}
.text {
color: white;
}
.leftWrapper {
float: left;
width: 32%;
height: 650px;
}
.image1 {
position: fixed;
width: 260px;
padding: auto;
height: 380px;
margin: 1px;
/* padding: 4px; */
border: 4px solid white;
margin-left: -200px;
outline-style: groove;
outline-color: brown;
}
.image2 {
/* position: absolute; */
border: 4px solid white;
width: 220px;
height: 320px;
top: 30px;
left: 30px;
/* padding: auto; */
outline-style: groove;
outline-color: brown;
/* outline-width: 12px; */
/* border: 1px green solid; */
margin-bottom: 38px;
margin-left: -100px;
}
.image3 {
width: 150px;
/* position: relative; */
outline-style: groove;
border: 4px solid white;
/* outline-color: brown; */
height: 220px;
top: 30px;
left: 30px;
padding: auto;
margin-bottom: 100px;
/* margin-left: px; */
}
Output -
Output
But i want something like
Expected
This is starting to look like your "expected": https://codepen.io/kodmunki/pen/wvyJPbV
<div class="continer">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
.container {
position: relative;
}
.a,.b,.c {
position: absolute;
border: 1px solid #000;
}
.a {
width: 100px;
height: 100px;
background-color: #ff0000aa;
z-index: 3;
}
.b {
top: 20px;
left: 65px;
width: 75px;
height: 75px;
background-color: #ffff00aa;
z-index: 2;
}
.c {
top: 30px;
left: 125px;
width: 50px;
height: 50px;
background-color: #ff00ffaa;
z-index: 1;
}
I am using Node and Puppeteer to generate a PDF that uses a handlebars template. All is working as expected.
My only question is: how does one add border padding to the document, so that, if the document runs over multiple pages, the content doesn't go right up to the very edge of the page? Is there a style element I can use?
See my handlebars template below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Result Template</title>
<style>
.container {
margin: auto;
padding: 30px;
font-size: 13px;
line-height: 13px;
font-family: 'Helvetica Neue', 'Helvetica';
color: #555;
}
.top-heading {
margin-bottom: -20px;
color: red;
}
.box {
width: 100%;
}
.table-box {
width: 100%;
table-layout: fixed;
}
.left-box {
float: left;
min-width: 25%;
max-width: 25%;
margin-top: -20px;
}
.right-box {
float: right;
min-width: 75%;
max-width: 75%;
}
.one-quarter {
border: #ccc thin solid;
max-width: 25%;
}
.half {
border: #ccc thin solid;
max-width: 50%;
}
.three-quarter {
border: #ccc thin solid;
min-width: 75%;
max-width: 75%;
}
.full {
border: #ccc thin solid;
max-width: 100%;
}
.highlighted {
font-weight: bold;
}
.flat-line {
border: none;
height: 1px;
background-color: #ccc;
}
.header {
clear: both;
margin-top: 120px;
text-align: center;
}
.centered {
text-align: center;
}
.details-cell {
padding: 0 8px;
}
.notes-table {
margin-top: 20px;
min-width: 100%;
}
.goal-heading {
font-weight: bold;
text-align: center;
}
.signature {
margin-top: 10px;
min-width: 100px;
max-width: 100px;
height: auto;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class="container">
<table>
// Other code
</table>
</div>
</body>
</html>
You can access styling for the page like so:
#page {
margin: 10px 0;
}
So by adding the above to the handlebars template you're able to add the desired 10px of margin to the top and bottom of the document.
When I tried to position the button to the bottom left, it worked but when I go to one of the buttons and go back it has all of the buttons there but one? the other one I need to scroll down to see please help
HTML
<!Doctype html>
<html>
<head>
<title>Forsaken </title>
<link href="main.css" rel="stlesheet" type="text/css">
</head>
<body>
<button><img class="#topleft" src="icon1.jpg " width="100%" alt="Teams" ></button>
<button><img class="#topright" src="icon2.jpg " width="100%" alt="store" ></button>
<button><img class="#bottomleft" src="icon4.jpg " width="100%" alt="sponsors" ></button>
<button><img class="#bottomright" src="icon3.jpg " width="100%" alt="aboutus" ></button>
</body>
</html>
CSS
#topleft {
position: fixed;
top: 0px;
left: 0px;
}
#topright {
position: fixed;
top: 0px;
right: 0px;
}
#left {
position: fixed;
left: 0px;
}
#right {
position: fixed;
right: 0px;
}
div {
border-style:solid;
border-width:0px;
border-color:#000000;
}
#yes {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
#no {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
p.s All the other buttons are working but the About Us one.
Try this:
.topLeft{
position: absolute;
top:0;
left:0;
}
.topRight{
position: absolute;
top:0;
right: 0;
}
.bottomLeft{
position: absolute;
bottom: 0;
left: 0;
}
.bottomRight{
position: absolute;
bottom: 0;
right:0;
}
<button class="topLeft">Click Me</button>
<button class="topRight">Click Me</button>
<button class="bottomLeft">Click Me</button>
<button class="bottomRight">Click Me</button>
Working Codepen
Note
Do not use hashtags inside a class declaretion, it's bad practice (hashtags used to catch id's).
That's why your code did not worked.
Reply if there are any issues..
Im working on website (from psd. to HTML/CSS).
How i can auto match website to resolution of people who watch my website?
PSD template has 1600px width and I set this same width for HTML.
My personal reolution of screen is 1920 x 1080 px, so website for me is not displayed corretly. (browser doesnt stretch website to my resolution)
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="slider">
<div id="stripe">pasek</div>
<div id="mainpic">obrazek
<div id="podpis">podpis obrazka</div>
</div>
</div>
<div id="content">
<div id="boxes">
<div class="box">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<img src="pictures/minibox.png" class="boxPicture">
<p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
<img src="pictures/przycisk.png" class="przycisk">
</div>
<div class="box">b</div>
<div id="box_c">c</div>
</div>
</div>
<div id="przerywnik"></div>
<footer></footer>
</div>
</body>
</html>
My CSS file:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}
footer{
height: 173px;
width: 1600px;
background: #333333;
}
How i can fix this?
Edit all
width:1600px;
in your css code to
width:100%;
Edit this on your code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
By:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
EDIT:
Here are the code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 60%;
min-width:940px;
height: 343px;
margin-top:22px;
margin-left:-30%;
left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}
footer{
height: 173px;
width: 100%;
background: #333333;
}
I think would best be suited to the answer here with a given explanation to your problems: How to fit your website for all or at lest most screen resolutions?