I'm trying to keep things centered in the browser without it stretching my divs and moving my videos..
when I stretch my browser it moves my images and objects around..
I want to keep objects inside the divs & have everything stay in place..
Is that possible using just css or do I have to use flexbox and java?
I've posted a image on whats going on and here is the coding for it all..
I'm sure it needs a little code cleaning..
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #333333;
width:90%;
height:660px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:left;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:right;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 96%;
margin:auto;
padding: 10px;
border: 2px solid black;
border-radius: 5px;
}
.mnu { overflow:hidden; background-color:#F8F8F8; padding:2px; line-height:1.5em; cursor:pointer; }
.mnu a { display:block; cursor:pointer; width:100%; padding:0 2px 0 1px; margin:0; }
.mnu a:link { color:#000000; text-decoration:none; }
.mnu a:visited { color:#000000; text-decoration:none; }
.mnu a:hover { color:#000000; text-decoration:none; background-color:#F0F0F0; }
.mnu a:active { color:#000000; text-decoration:none; background-color:#EAEAEA; }
.fil { position:absolute; left:0; top:0; width:100%; height:100%; }
.ptr { cursor:pointer; }
.opr { filter:alpha(opacity=100); }
.trn { opacity:0; filter:alpha(opacity=0); }
.smf { -ms-interpolation-mode:bicubic; }
.sol { background-color:blue; }
.bmk { border-style:dashed; border-width:0 0 1px 0; }
.ctr { position:relative; margin-left:auto; margin-right:auto; text-align:left; }
.ctt { text-align:center; }
.abs { position:absolute; }
.aut { overflow:auto; }
.hid { overflow:hidden; }
.scr { overflow:scroll; }
.vis { overflow:visible; }
.inv { visibility:hidden; }
.cms { }
.col { background-color:transparent; clear:left; float:left; }
.cor { background-color:transparent; clear:right; float:right; }
.required { }
.nvo { }
.bgremove { background-image:none; }
.nml { }
.hd1,h1 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:18px; text-align:center; }
.hd2,h2 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:15px; }
.hd3,h3 { font-weight:bold; }
.mnus { padding:0px; border-width:2px; border-style:outset; background-color:#CEE5F2; text-align:center; }
.mnus a:hover { color:#FFFFFF; background-color:#000080; }
.mnus a:active { color:#FFFFFF; background-color:#0000CC; }
.pnl { border-width:1px; border-style:solid; border-color:#8DC7EB; background-color:#CEE5F2; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="created" content="Tue, 19 Feb 2019 02:15:52 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<main>
<div class="divl">Music<br> Here Is A List Of Music</div>
<div class="divr">Producers<br> Here Is A List Of Producers</div>
<div class="divc">Videos<br><div id="lays581qvlpb">
<div id="pict581wjphg" class="hid abs" style="left:1199px; top:300px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='visible';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581wjphgi" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict581nqvmq" class="hid abs" style="left:1199px; top:399px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='visible';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581nqvmqi" class="fil smf" src="img-2.png" alt="">
</div>
<div id="pict583yfwki" class="hid abs" style="left:1199px; top:498px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='visible';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict583yfwkii" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict583fdwaz" class="hid abs" style="left:1199px; top:597px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='visible';">
<img id="pict583fdwazi" class="fil smf" src="img-2.png" alt="">
</div>
</div>
<div id="lays585jmqnb">
<div id="ytub586qorjf" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/Lzkbf9wrMcQ?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585mobib" style="visibility:hidden">
<div id="ytub586vzlff" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/9SI2xE0ixws?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585cwgno" style="visibility:hidden">
<div id="ytub587seayk" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/U5LgnJI1FfI?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585tvnws" style="visibility:hidden">
<div id="ytub587wsjnq" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/C9jH6mK_wUg?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div></div>
</main>
<div style="clear:both;"></div>
</div>[![enter image description here][1]][1]
</body>
</html>
Related
As mentioned in the title I am making a website for school, and part way through creating it I discovered that when I displayed the page on a screen with a different resolution that the elements on my site do not line up correctly. I am fairly new to html/css and am stuck at how to fix this. Any advice or help would be greatly appreciated.
This is the body section of my html file:
<a href='index.html'>
<img src="Images\Logo\Logopng.png" alt="Explore Germany"/>
</a> <!-- Inserting Logo at top of page -->
<div id="whitespace">
<a> <img id="twitt" src="Images\images\twitter_web.png"> </a>
<a> <img id="email" src="Images\images\email_web.png"> </a>
</div>
<nav>
<div id="top" class = "line black"></div> <!-- This is the black line just above the links at top of page -->
<ul> <!-- A list with links to external pages for my header -->
<li><a id="menu" href="why.html">Why Germany?</a></li>
<li><a id="menu" href="where.html">Where In Germany?</a></li>
<li><a id="menu" href="language.html">German Language</a></li>
<li><div class="box grey"></div></li>
</ul>
<div id="bottom" class = "line black"></div> <!-- This is the black line just below the links at top of page -->
</nav>
</header>
<img id="map" src="Images\images\Map.png">
<img class="Icon" id="Hamburg" src="Images\images\Icon.png"> <div id="Hamburg_Name">Hamburg</div>
<img class="Icon" id="Berlin" src="Images\images\Icon.png"> <div id="Berlin_Name">Berlin</div>
<img class="Icon" id="Dresden" src="Images\images\Icon.png"> <div id="Dresden_Name">Dresden</div>
<img class="Icon" id="Dusseldorf" src="Images\images\Icon.png"> <div id="Dusseldorf_Name">Dusseldorf</div>
<img class="Icon" id="Cologne" src="Images\images\Icon.png"> <div id="Cologne_Name">Cologne</div>
<img class="Icon" id="Frankfurt" src="Images\images\Icon.png"> <div id="Frankfurt_Name">Frankfurt</div>
<img class="Icon" id="Munich" src="Images\images\Icon.png"> <div id="Munich_Name">Munich</div>
<div id="info">
<div id="name">Click on an Icon on the<br> map to learn more about that city</div>
<div id="info1"></div>
<img src="" id="cityImg">
<div id="head"></div>
<div id="info2"></div>
</div>
<div id="foot" class="footer black"> <!-- This is for the black box at the bottom which is the footer -->
<nav>
<ul>
<li><a id="wfooter" href="index.html">Home</a></li> <!-- This is a list of the links and lines in the footer -->
<li><a id="wfooter" href="why.html">Why Germany</a></li>
<li><a id="wfooter" href="where.html">Where In Germany</a></li>
<li><a id="wfooter" href="language.html">German Language</a></li>
<li><a id="wfooter2"><i>#Copyright Jack Ryan 2017 Contact: jryan#student.christscollege.com<i></a></li>
</ul>
</nav>
</div>
</body>
And this is my css file:
body {
width: 800px;
height:1200px;
margin:0 auto;
vertical-align: middle;
height:100%;
}
p {
font-size: 15%
font:;
}
header img {
vertical-align: middle;
margin-left: 350px;
margin-top:15px;
max-height: 100px;
max-width:100px;
}
#gate {
max-width: 800px;
margin-left: 0px;
position:relative;
bottom:16px;
}
html {
width:100%;
height:100%;
background-color:black;
}
ul {
list-style-type:none;
margin-left:-40px;
padding: none;
overflow: hidden;
}
#menu {
margin-left:93px;
max-width: 800px;
float:left;
display: block;
padding:12px;
background-color:#dddddd;
text-align: center;
text-decoration: none;
font-family: "Proxima Nova";
color:black;
margin-top:0px;
}
#menu:hover {
background-color: #cccccc;
}
.box {
width:800px;
height: 40px;
}
.grey {
background:#dddddd;
}
.line {
width:800px;
height:2px;
}
.black {
background:#000000;
}
#top {
position:relative;
bottom:-18px;
}
#bottom {
position:relative;
bottom:16px;
}
.back {
width:800px;
height:1225px;
}
.backwhere {
width:800px;
height:935px;
}
.darkgrey {
background:#fefdfd;
}
.side {
position:absolute;
width:10px;
height:10px;
}
.footer {
width:775px;
height:150px;
margin-left:12.5px;
border-radius:12.5px;
}
#body {
width:775px;
margin-left:12.5px;
}
#footer {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:10px;
color:white;
margin-left:5px;
}
#footer2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
}
#footer:hover {
color:lightgray;
}
#twitt {
position:relative;
margin-left:750px;
top:-125px;
}
#email {
position:relative;
margin-left:695px;
top:-186px;
}
#whitespace {
height:0px;
}
#map {
position:absolute;
left: 270px;
margin-left:0px;
max-height:85%;
max-width:85%;
}
#hamburg {
position:absolute;
top:280px;
left:480px;
}
#hamburg_name {
position:absolute;
top:280px;
left:500px;
font-family:"Proxima Nova";
}
#Berlin {
position:absolute;
top:350px;
left:620px;
}
#Berlin_Name {
position:absolute;
top:350px;
left:640px;
font-family:"Proxima Nova";
}
#Dresden {
position:absolute;
top:425px;
left:640px;
}
#Dresden_name {
position:absolute;
top:425px;
left:660px;
font-family:"Proxima Nova";
}
#Dusseldorf {
position:absolute;
top:435px;
left:360px;
}
#Dusseldorf_name {
position:absolute;
top:435px;
left:380px;
font-family:"Proxima Nova";
}
#Cologne {
position:absolute;
top:460px;
left:380px;
}
#Cologne_name {
position:absolute;
top:460px;
left:400px;
font-family:"Proxima Nova";
}
#Frankfurt {
position:absolute;
top:510px;
left:455px;
}
#Frankfurt_name {
position:absolute;
top:510px;
left:475px;
font-family:"Proxima Nova";
}
#Munich {
position:absolute;
top:620px;
left:550px;
}
#Munich_name {
position:absolute;
top:620px;
left:570px;
font-family:"Proxima Nova";
}
.Icon{
height: 20px;
width: 20px;
}
#info{
position: absolute;
top: 200px;
left: 730px;
background-color: #e6e6e6;
height: 550px;
width: 325px;
border-radius:12.5px;
}
#Name {
font-family:"Proxima Nova";
font-size:25px;
position: absolute;
left:20px;
top:10px;
}
#info1 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:40px;
}
#info2 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:320px;
}
#cityImg {
position:absolute;
top:120px;
left:15px;
max-width:300px;
max-height:200px;
}
#head {
font-family:"Proxima Nova";
font-size:25px;
position:absolute;
left:15px;
top:290px;
}
#foot {
position:absolute;
top:760px;
}
#wfooter {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:-5px;
color:white;
margin-left:5px;
}
#wfooter2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
top:-10px;
}
h1 {
font-family: "Proxima Nova";
color:black;
position:absolute;
font-weight:lighter;
top:175px;
left:300px;
z-index:1;
}
h2 {
font-family: "Proxima Nova";
font-style:normal;
color:black;
font-weight:lighter;
font-size:16px;
position:absolute;
top:220px;
left:300px;
max-width:700px;
z-index:1;
}
#Central_Why {
border-radius:15px;
border:3px solid black;
max-width:775px;
position:absolute;
top:300px;
left:285px;
z-index:0;
border-color:black;
}
#Why_Body {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:630px;
font-weight:lighter;
}
#Oktoberfest {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:690px;
font-weight:lighter;
}
there are a few solutions. a simple one would be #media queries. these ask the browser what size it is and then give it different instructions depending on size
for example adding
#media screen and (min-width: 480px) {
body {
width: 600px;
height:1000px;
}
}
now your screen will load a different height and width depending on screen size. you can read more here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here is a set of sizes to work to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
there will always be differences on uses screens so you have to build anticipating that, so test it on lots by resizing your browser or if oyu get more into webdesign using a site like this: http://quirktools.com/screenfly/
also, i'm sorry about all the downvotes. the community here aren't really newbie friendly. its an amazing resource, but more where experienced (/semi experienced) developers come to support each other.. i guess that culture has developed so it doesn't become like a school for teaching basics.
speaking as someone who closed more than one account because my questions we not well received, i'd suggest googling for a forum or slack group specifically for people starting out to get advice and help, there are plenty of devs out there eager to help those just starting out
I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
people. my links do not work properly on firefox, but on chrome they are good. I've tried all the tips from here, but nothing helped. I can't find the issue. I tried to delete #position:relative#, also I've tried to change #z-index#. I don't understand because in chrome it works very well, but Firefox.
table
{
border-collapse: collapse;
border-spacing: 0;
}
a
{
text-decoration:none;
color:black;
transition-duration:1s;
}
body,div
{
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
/*-------Resets above-----*/
/*-----Styles for Html website-----*/
#wrapper
{
width: 100%;
height:100%;
background:linear-gradient(#6699ff,#99ccff,#ccffff);
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
#logo
{
font-size: 40px;
font-weight:bold;
font-family:Impact, Charcoal, sans-serif;
font-style:italic;
width:1200px;
height:70px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
.button
{
position: relative;
margin-top: 380px;
margin-left:1100px;
width:150px;
height:75px;
z-index:1;
background-image:url('images/new_year_background');
border-radius:20px;
border:2px solid #33ff99;
font-size: 20px;
transition-duration: 1s;
cursor: pointer;
text-decoration:none;
}
.button:hover
{
background-color:#33ffff;
}
.button a:hover
{
cursor: pointer;
color:white;
}
/*--------navigation and buttons-----------*/
nav
{
position: relative;
margin-top:30px;
margin-right:75px;
z-index:1;
}
.menu1
{
margin-left:auto;
margin-right:auto;
width:1350px;
}
.button1
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:10px 0 0 10px;
}
.button3
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:0 10px 10px 0;
}
.button2
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
}
.button1:hover
{
background-color:#99ff66;
}
.button1 a:hover
{
color:white;
}
.button2:hover
{
background-color:#99ff66;
}
.button2 a:hover
{
color:white;
}
.button3:hover
{
background-color:#99ff66;
}
.button3 a:hover
{
color:white;
}
/*------End of the navigation-----*/
#first
{
border-radius:20px;
position: relative;
width: 1300px;
height:500px;
background-image:url('images/symphony.png');
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid #3366ff;
}
#sec
{
color:red;
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/new_year_background.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#tre
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/swirl_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#quad
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/logo_x_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#fiv
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/ignasi_pattern_s.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sex
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/confectionary.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sev
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/restaurant.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
border: 2px solid #3366ff;
}
footer h3
{
width:100%;
text-align:center;
}
<!doctype html>
<html>
<head>
<title>My Guide to Success</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="wrapper">
<div class="menu1">
<nav>
<button class="button3">Fith</button>
<button class="button2">Fourth</button>
<button class="button2">Third</button>
<button class="button2">Second</button>
<button class="button1">First</button>
</nav>
</div>
<div id="logo"><h1>My Guide To Success</h1></div>
<div id="first"><button class="button"><h2>Next Step</h2></button></div>
<div id="sec"><button class="button"><h2>Next Step</h2></button></div>
<div id="tre"><button class="button"><h2>Next Step</h2></button></div>
<div id="quad"><button class="button"><h2>Next Step</h2></button></div>
<div id="fiv"><button class="button"><h2>Next Step</h2></button></div>
<div id="sex"><button class="button"><h2>Next Step</h2></button></div>
<div id="sev"><button class="button">To Top</button></div>
</div>
</body>
<footer>
<h3>Copyright © Marin KapranoFF - 2016</h3>
</footer>
</html>
Anchors inside buttons behave differently in Firefox. I'd recommend removing the <button> wrapper and styling the anchor with CSS:
<div id="first">
<h2>Next Step</h2>
</div>
You generally don't need to place a button inside an anchor, the anchor already handles a click event to navigate you to the href.
//<![CDATA[
$(document).ready(function(){
$("#accordion li").click(function(e){
e.stopPropagation();
var subList = $(this).find('> ul');
if(subList.length) subList.slideToggle(300);
});
});
//]]>
html {
margin:0;
padding:0
}
body {
font-family: Tahoma, Geneva, sans-serif;
line-height: 1.6em;
color:#000;
text-align:justify;
background-image: url('../inc/pg/3.png'), url('../inc/pg/4.png');
background-repeat: no-repeat;
background-position:left bottom, right bottom;
background-attachment:fixed;
}
P {
font-size: 0.875em;
color:#000;
font-family:Tahoma;
}
h1 {
font: Verdana, Arial, sans-serif;
font-size: 1.875em;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
word-spacing: normal;
}
h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12 {
font:normal 15px Verdana, Arial, sans-serif;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
}
div#container {
overflow: hidden;
min-width:600px;
width:1200px;
margin:0px auto;
border: 10px double #005cc6;
}
div#banner {
padding:10px;
background: url('header.png') no-repeat center center;
height:400px;
position:relative;
}
div#nav_main {
position: absolute;
left: 50px;
width: 1180px;
bottom: 5px;
}
div#social {
position: absolute;
float:right;
}
div#image {
background-image: url('http://oi61.tinypic.com/aakub6.jpg');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
div#uscite {
padding:30px 20px;
position:absolute;
right:0;
border:0px;
height:35%;
width:20%;
}
div#jp {
text-align: center;
width:50%;
height:100%;
float:left;
border:0px;
}
div#it {
text-align: center;
width:50%;
height:100%;
float:right;
border:0px;
}
div#navigation_left {
float: left;
width:22%;
}
div#navigation_right {
float: right;
width:20%;
}
div#content {
padding: 16px 10px;
overflow:auto;
margin-left:17%;
margin-right:17%;
}
div#footer {
clear:both;
padding:10px;
border:1px solid #444444;
background: url('footer.png') no-repeat center center;
height:70px;
}
div#back_top {
padding:10px;
float:right;
border:0px;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 0.875em;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
div#language {
padding-top:10px
}
#nav_main div {
display:inline-block;
}
.blockspoiler {
padding:7px;
background-color:#ffde00;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler2 {
padding:7px;
background-color:#c86565;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler3 {
padding:7px;
background-color:#8991db;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.nav_main {
background:url(../img/nav_main.png);
}
.nav {
heigh:100%;
width:100%;
}
.home {
background-position: -0px -0px;
width: 111px;
height: 40px;
background-repeat:no-repeat;
}
.staff {
background-position: -0px -50px;
width: 126px;
height: 40px;
background-repeat:no-repeat;
}
.forum {
background-position: -0px -100px;
width: 136px;
height: 40px;
background-repeat:no-repeat;
}
.disclaimer {
background-position: -0px -150px;
width: 243px;
height: 40px;
background-repeat:no-repeat;
}
.secret {
background-position: -0px -200px;
width: 257px;
height: 38px;
background-repeat:no-repeat;
}
.bandiere {
background:url(../img/flag.png);
}
.flag {
height:100%;
width:100%;
}
.flag_en {
background-position:-0px -0px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_es {
background-position:-0px -58px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_fr {
background-position:-0px -116px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_de {
background-position:-0px -174px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_jp {
background-position:-0px -232px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.icon {
background:url(../img/icone.png);
}
.advice {
height:100%;
width:100%;
}
.chrome {
background-position:-0px -0px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.firefox {
background-position:-0px -80px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.facebook {
background-position:-0px -160px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.twitter {
background-position:-0px -240px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.affiliazioni {
background:url(../img/gemellati.png);
}
.gemellati {
height:100%;
width:100%;
}
.banner_1 {
background-position:-0px -0px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_2 {
background-position:-0px -41px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_3 {
background-position:-0px -82px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_4 {
background-position:-0px -123px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_5 {
background-position:-0px -164px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_6 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.affiliazioni2 {
background:url(../img/net.png);
}
.net {
height:100%;
width:100%;
}
.banner_7 {
background-position: -0px -0px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_8 {
background-position: -0px -41px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_9 {
background-position:-0px -82px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_10 {
background-position:-0px -123px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_11 {
background-position:-0px -164px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_12 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_13 {
background-position:-0px -246px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_14 {
background-position:-0px -287px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_15 {
background-position:-0px -328px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_16 {
background-position:-0px -369px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_17 {
background-position:-0px -410px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_18 {
background-position:-0px -451px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_19 {
background-position:-0px -492px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_20 {
background-position:-0px -533px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_21 {
background-position:-0px -574px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_22 {
background-position:-0px -615px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full Metal Panic Italy - Home</title>
<meta http-equiv="Content-Language" content="it" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="full, metal, panic, fmp, fumoffu, the second raid, spoiler, mithril, amalgam, sigma" />
<meta name="description" content="Full Metal Panic Italy, sito ufficiale italiano di Full Metal Panic con spoiler, informazioni, curiosità e molto altro! Fanart, immagini, download e schede tecniche" />
<link rel="stylesheet" type="text/css" href="../inc/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../inc/js/prototype.js"></script>
<script type="text/javascript" src="../inc/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../inc/js/lightbox.js"></script>
<link rel="stylesheet" href="../inc/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="../img/favicon.ico" />
<style type="text/css">
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
</style>
</head>
<body>
<div id="container">
<div id="banner"><div id="uscite"><div id="jp"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite jappo</div>
<div id="it"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite ita</div></div>
<div id="social">
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Facebook" alt="Facebook" />
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Twuitter" alt="Twitter" />
</div>
<div id="image">
<script language="Javascript">
<!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<img src='../inc/pg/1.png' height='350' width='204' alt='' />"
image[number++] = "<img src='../inc/pg/2.png' height='350' width='232' alt='' />"
image[number++] = "<img src='../inc/pg/3.png' height='350' width='176' alt='' />"
image[number++] = "<img src='../inc/pg/4.png' height='350' width='270' alt='' />"
image[number++] = "<img src='../inc/pg/5.png' height='350' width='290' alt='' />"
increment = Math.floor(Math.random() * number);
//-->
</script>
<script language="JavaScript">
document.write(image[increment]);
</script>
</div>
<div id="nav_main">
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav home" border="0" title="Home" alt="Home" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav staff" border="0" title="Staff" alt="Staff" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav forum" border="0" title="Forum" alt="Forum" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav disclaimer" border="0" title="Dislaimer" alt="Dislaimer" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav secret" border="0" title="Top Secret" alt="Top Secret" /></div>
</div>
</div>
<div id="navigation_left"><div id="language" align="center">
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_en" title="English Translation" alt="English Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_es" title="Spanish Translation" alt="Spanish Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_fr" title="French Translation" alt="French Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_de" title="German Translation" alt="German Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_jp" title="Japanese Translation" alt="Japanese Translation"/>
</div>
<ul id="accordion">
<li><div id="image" align="center"><img src="http://oi61.tinypic.com/2pq45ys.jpg" height="" width="" alt="Storia"/></div>
<ul>
<li>Full Metal Panic!</li><li>Full Metal Panic? Fumoffu</li><li>Full Metal Panic! TSR</li><li>Riassunti Episodi</li><li>Manga</li><li>Lista Manga</li><li>Romanzi</li><li>Sigma</li><li>Overload</li><li>Comic Mission</li><li>Another</li><li>SDNED</li><li>Zero</li><li>Riassunti Manga</li><li>Riassunti Romanzi</li> </ul>
</li>
<li><div align="center"><img src="../img/spoiler.png" height="" width="" alt="Spoiler" /></div>
<ul>
<li>Infanzia di Sousuke</li><li>Infanzia di Tessa</li><li>Infanzia di Kurz</li><li>Michel Lemon</li><li>Le Origini</li><li>Fine della Mirthril</li><li>Yamsuk 11</li> </ul>
</li>
<li><div align="center"><img src="../img/gallery.png" height="" width="" alt="Gallery" align="center"/></div>
<ul>
<li>FanArt</li><li>Wallpapers</li><li>Animated</li><li>Avatar</li><li>Cosplay</li> </ul>
</li>
<li><div align="center"><img src="../img/interviste.png" height="" width="" alt="Interviste" align="center"/></div>
<ul>
<li>Perla Liberatori</li><li>Leslie La Penna</li><li>Valerio Manenti | J-Pop</li> </ul>
</li>
<li><div align="center"><img src="../img/other.png" height="" width="" alt="Other" align="center"/></div>
<ul>
<li>F.A.Q. e Curiosità</li><li>Titoli Episodi</li><li>Mithril</li><li>Isola Merida</li><li>Terroristi</li><li>Personaggi</li><li>Whispered</li><li>Black Tecnology</li><li>Arm Slave</li><li>Equipaggiamenti AS</li><li>Tuatha De Danaan</li><li>Palladio</li><li>Armi</li><li>Lambda Driver</li><li>Shouji Gatoh</li><li>Shiki Douji</li><li>Doppiaggio Italiano</li><li>Doppiaggio</li><li>Frasi Celebri</li><li>D.O.M.S</li><li>Luoghi</li><li>Viaggio a Canicatti</li><li>Retsu Tateo</li><li>Film Vs Anime</li> </ul>
</li>
</ul>
</div>
<div id="navigation_right"><ul id="accordion">
<li><div align="center"><img src="../img/multimedia.png" height="" width="" alt="Multimedia" /></div>
<ul>
<li>Soundtrack</li><li>Lyric</li><li>Videosigle</li><li>Trailers</li><li>Music Video</li><li>Skin Winamp</li><li>Nostro Live Action</li><li>DVD/VHS</li><li>Mikuni Shimokawa</li><li>Toshihiko Sahashi</li><li>Tema Google Chrome</li><li>Tema Firefox</li><li>App Smartphone</li> <li>Link1
<ul>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer"><div id="back_top"><img src="#"></div></div>
</div>
</body>
<script type="text/javascript" src="../inc/menu/menu.js"></script>
</html>
I have an accordion menu (jquery) where every category is between li I want put an image as background to every category and to do so I used a div
I need to center the background-image of the div with another image between div like this:
So I want that this:
goes on this.
I tried to move the background but was been cut because goes out li or move the foreground
but moves both of them.
<div style="background: url('../img/bg.png'); height:80px; right:20px; up:40px" align="center"><img src="../img/storia.png" height="" width="" alt="Storia"/></div>
I tried with another approach:
CSS:
div#image {
background-image: url('../img/bg.png');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
HTML:
<div id="image" align="center"><img src="../img/text.png" /></div>
but this is the result
Here all codes:
HTML
<ul id="accordion">
<li><div id="image" align="center"><img src="../img/text.png" /></div>
<ul>
<?php
isset($_GET["page"]) ? $page=$_GET["page"] : $page="home";
$links=array(
"link" => "Text",
);
foreach($links as $href=>$text){
if($page!=$links){
echo '<li>'.$text.'</li>';
}else{echo $text;}
}
?>
</ul>
</li>
</ul>
CSS:
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
Could you help me?
You can use:
li {
position:absolute;
margin-right: ? px;
margin-top: ? px;
}
Have you tried adjusting the line height in the CSS to ensure it has the same height as the background image? Example below
#mynav li {
line-height: 100px;
background: url(100pximage.png) left no-repeat;
}
This is what I have issuse, I have this one:
CSS
.contentbox img {
max-width:100% !important;
height:auto;
display:block;
padding-top:100px;
}
.viewer-v3.lightbox {
padding-top:2%;
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.contentbox {
height: 100%;
overflow: auto;
width:100%;
float:left;
}
.borderLightbox
{
border:#cccccc;
border-width:2%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
/*
Here edit widht of lightBox
*/
width: 40%;
/*
#end
*/
height: 93%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
overflow: visible;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
width:96%;
float:left;
padding-top:5px;;
padding-bottom:5px;
padding-left:2%;
padding-right:2%;
}
.titleLightbox
{
color:#27aae4;
width:96%;
float:left;
padding-top:5px;
padding-bottom:5px;
padding-left:2%;
padding-right:2%;
}
.titleLinkLightbox
{
float:left;
}
.filetypeLightbox
{
float:left;
width:100%;
text-align:left;
color:#a5a5a5;
}
.closeLightbox
{
float:right;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 318px 0;
background-size: cover;
height:24px;
width:24px;
}
.printLightbox
{
float:left;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 0px 0;
background-size: cover;
height:24px;
width:24px;
}
.zoomLightbox
{
float:right;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 61px 0;
background-size: cover;
height:24px;
width:26px;
}
.actionsPageLightbox
{
float:left;
margin-left:auto;
margin-right:auto;
width:50%;
border:#cccccc;
border-width:1px;
border-top-style:none;
border-right-style:solid;
border-bottom-style :none;
border-left-style:solid;
margin-left:10%;
padding-left:2%;
pading-right
}
.prevLightbox
{
float:left;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 245px 0;
background-size: cover;
height:24px;
width:24px;
}
.nextLightbox
{
float:left;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 198px 0;
background-size: cover;
height:24px;
width:24px;
}
.minusLightbox
{
float:left;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 160px 0;
background-size: cover;
height:24px;
width:24px;
}
.plusLightbox
{
float:left;
text-decoration:none;
display:block;
background-image:url(lightboxIcons.png);
background-position: 112px 0;
background-size: cover;
height:24px;
width:24px;
}
.inputLightbox
{
float:left;
width:5%;
}
.currentPageLightbox
{
float:left;
}
and here is HTML
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
<div class="titleLightbox">
<span class="titleLinkLightbox">
FileDeleteImeg.jpg
</span>
<a class="closeLightbox" href="#"></a>
<span class="filetypeLightbox">Adobe Views file</span>
</div>
<div class="actionsLightbox">
<a class="printLightbox" href="#"></a>
<div class="actionsPageLightbox">
<a class="prevLightbox" href="#"></a>
<input type="text" name="LastName" class="inputLightbox">
<span class="currentPageLightbox">/ 12</span>
<a class="nextLightbox" href="#"></a>
<a class="minusLightbox" href="#"></a>
<a class="plusLightbox" href="#"></a>
</div>
<a class="zoomLightbox" href="#"></a>
</div>
</div>
<div class="contentbox">
<img src="http://fc08.deviantart.net/fs51/f/2009/281/e/2/Paint_Tool_SAI_tutorial_IS_BIG_by_Left_Right_Wrong.png">
</div>
</div>
</div>
This is mine problem, i have scroll on the image and working ok, but the scrool is getting under header element that is fixed, even to prevenet that i have addded margines to picture to be under header, mine question is how to put scroll bas under the fixed header, does anyone have solution?
here is a fiddle, abaout mine problem, you see scrool bar is going under the fixed header, any solution?
http://jsfiddle.net/Fmh5p/
You can change the value of padding-top on the image to the border-top on contentbox, to make it work with the scroll use this:
.contentbox {
border-top:100px solid transparent;
box-sizing:border-box;
}
Check this Demo Fiddle
Note : The property box-sizing helps to keep the real 100% height of the container, note that this property only works on IE>=8