Two problem plaguing me for a few hours now. I want to get my menu text to left align and also would like to increase the text size sub cats in the menu
http://www.acuity-sports.com/
Any help on what I need to edit would be great.
Here is my .css for the header
#yt_menuwrap { background: url(../images/bkg_main_nav.png) left 53px repeat-x; margin- top: -51px; }
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: 0 auto; }
#yt_mainnav_mobi select { margin:0; }
#menu_split { clear: left; }
.header-top { height: 78px; /* position: relative; z-index:3; */ }
.main-top{ }
.main-top .herader-top{ background:none; }
.header-logo { position:absolute; top:0; }
.header-logo a { position:relative; width:auto; height:auto; }
.header-bottom { height: 70px; /* position:relative; z-index: 4; */ box-shadow: 0 0 3px 2px #CCC; }
.header-cirlce{ position:relative; text-align:center; height:0px; z-index:1; display:none; }
.header-cirlce .inner-circle{ width:193px; height:57px; display:inline-block; position:relative; overflow:hidden; }
.header-cirlce .inner-circle .header-circle-logo{
position:absolute;
width:210px;
height:210px;
border-radius:225px;
background-position:21% 54%;
box-shadow:3px 0px 7px 0 #000000;
z-index:1;
left:-10px;top:-160px;
}
.header-cirlce .inner-circle .header-circle-content{
position:absolute;
bottom:14px;
left:5px;
width:180px;
height:50px;
display:inline-block;
z-index:2;
background:url(../images/bg-circle-logo.png) no-repeat center center transparent;
}
I fixed it thank god..
I had to edit my theme.css
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: 0 auto; }
and remove the 0 auto;
to this
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: }
Related
For the life of me, I cannot figure out why this code can't work. I am trying to set up a personal website and before I put my content in place, I want to have all of the areas setup and have it be responsive. I want a 3x3 grid of boxes where I can display my work (div id = container), but every time I introduce the ninth div block specifically (p9), the arrangement breaks for seemingly no reason. Here's the code for the desktop layout:
body{
background-color:#FFB51E;
width:100%;
height:1000px;
position:absolute;
}
/* unvisited link */
a:link {
text-decoration:none;
background-color: #2A56C4;
color:#fff;
padding:15px;
border-radius:26px;
}
/* visited link */
a:visited {
color: fff;
}
/* mouse over link */
a:hover {
background-color:#FF581E;
}
/* selected link */
a:active {
color:#FF581E;
background-color:fff;
}
#header{
width:80%;
height:160px;
margin: 0 auto;
position:relative;
display:block;
}
.left{
color:#fff;
text-align: left;
margin-top:25px;
margin-bottom:15px;
font-size:36px;
position:relative;
float:left;
width:310px;
display:block;
}
.right{
text-align:right;
width:300px;
float:right;
padding-top:5px;
margin-bottom:15px;
font-size:24px;
position:relative;
float:right;
z-index:2;
}
.works{
text-align:center;
position:relative;
float:left;
left:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.about{
text-align:center;
position:relative;
float:right;
right:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.border{
background-color:none;
width:100%;
height:85px;
margin:0 auto;
border:none;
border-bottom: 6px solid #000;
float:none;
position:relative;
}
/*body stuff*/
#container{
position:static;
display:block;
margin:0 auto;
font-size:0px;
margin-top: -10px;
width:80%;
height:550px;
}
.p1{
background-color: aliceblue;
color:000;
font-size:12px;
width:230px;
z-index: 1;
float:left;
margin: 0px;
padding:0px;
}
.p2{
background-color: red;
width:230px;
z-index: 1;
float:left;
padding:0px;
}
.p3{
background-color: blue;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin:0px;
}
.p4{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p5{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p6{
background-color: brown;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin-top: 20px;
}
.p7{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p8{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p9{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
I'm about five minutes from drop kicking my laptop out the window, so any kind of help would be greatly appreciated! Let me know if you need code for the html as well.
Something to get you started. I don't have the HTML you use so I focused on the container.
I defined it as a flexbox which makes it responsive. Each item has a width of 33% and a height of 30px (for demo purpose).
/*body stuff*/
#container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-top: -10px;
width: 80%;
}
[class^="p"] {
width: 33%;
height: 30px;
}
.p1 {
background-color: aliceblue;
}
.p2 {
background-color: red;
}
.p3 {
background-color: blue;
}
.p4 {
background-color: purple;
}
.p5 {
background-color: green;
}
.p6 {
background-color: brown;
}
.p7 {
background-color: yellow;
}
.p8 {
background-color: red;
}
.p9 {
background-color: green;
}
<div id="container">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
</div>
First: I just added this CSS rule at the bottom (to overwrite the other rules) and now it works as desired:
#container > div {
width: 230px;
margin-top: 20px;
}
https://jsfiddle.net/bhzw7o60/1/
Second: For elements that have common parameters (like your floated elements which all have the same width, size and margin-top) you should use a * common* class for all of them and additional seperate classes for the individual elements which only contain the differing properties. My above rule does this for width and margin-top. You could also add the height to it, and only define the background-color in the individual classes. BTW: z-index does nothing in this case, you can delete that from all the rules.
I use a CSS-Grid with 12 colums and now I need pull and push class's. Can someone help me to extend my grid with push an pull class.
What I've got:
.row { margin:0 auto; width:1200px; overflow:hidden; }
.row .row { margin:0 -20px 0 -20px; width:auto; display:inline-block; }
.grid_1 { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_2 { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_3 { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_4 { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_5 { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_6 { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_7 { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_8 { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_9 { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_10 { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_11 { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_12 { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.offset_1 { margin-left:120px; }
.offset_2 { margin-left:220px; }
.offset_3 { margin-left:320px; }
.offset_4 { margin-left:420px; }
.offset_5 { margin-left:520px; }
.offset_6 { margin-left:620px; }
.offset_7 { margin-left:720px; }
.offset_8 { margin-left:820px; }
.offset_9 { margin-left:920px; }
.offset_10 { margin-left:1020px; }
.offset_11 { margin-left:1120px; }
Got it.
So if someone need.
/* Push & Pull */
.push_1 { left: 100px; position:relative; }
.push_2 { left: 200px; position:relative; }
.push_3 { left: 300px; position:relative; }
.push_4 { left: 400px; position:relative; }
.push_5 { left: 500px; position:relative; }
.push_6 { left: 600px; position:relative; }
.push_7 { left: 700px; position:relative; }
.push_8 { left: 760px; position:relative; }
.push_9 { left: 860px; position:relative; }
.push_10 { left: 960px; position:relative; }
.push_11 { left: 1100px; position:relative; }
.push_12 { left: 1200px; position:relative; }
.pull_1 { left: -100px; position:relative; }
.pull_2 { left: -200px; position:relative; }
.pull_3 { left: -300px; position:relative; }
.pull_4 { left: -400px; position:relative; }
.pull_5 { left: -500px; position:relative; }
.pull_6 { left: -600px; position:relative; }
.pull_7 { left: -700px; position:relative; }
.pull_8 { left: -800px; position:relative; }
.pull_9 { left: -900px; position:relative; }
.pull_10 { left: -1000px; position:relative; }
.pull_11 { left: -1100px; position:relative; }
.pull_12 { left: -1200px; position:relative; }
I am making a responsive site sandbox.mercomcorp.com. In landscape mode the only page that moves horizontally is the home page. At one point nothing moved so I am guessing it is something on the homepage that may be over the width:100; I have tried everything overflow:hidden overflow-x:hidden none of that is working. Attched is my css
#phone {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-15px; margin-left:115px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
color: #5a5858;
float: left;
min-height:260px;
width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
color: #5A5858;
float: left;
min-height:260px;
width: 680px;
margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}
/*regular site css*/
.container
{
/*text-align:left;
display:inline-block;
width:100%;
height:auto;
overflow: hidden; */
background-color:white;
display:inline-block;
height:100%;
width: 100%;
/*border: solid 1px #aaa;*/
text-align: left;
font-size: 1em;
/*letter-spacing:px; */
/*white-space: nowrap; */
/*line-height: 12px; */
}
.square
{
/*margin:auto;
width:20%;
text-align:left;
display:inline-block;
float:left;*/
width:19.5%;
margin:auto;
/* border: solid 1px #ccc; */
display: inline-block;
vertical-align:middle;
}
.words
{
background-color:#990913; color:white;
/*display:inline-block;*/
width:12.85em;height:15em;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66/*phone numbers*/
{
/*background-color:purple;*/
position:relative;
top:-10px;
margin-left:105px;
}
#block-67
{
padding-top:5%;
}
#block-52
{
padding-top:15px;
}
a.linktext
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext2
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.corporateoffice
{
color:#464646;
font-size:20px;
}
.officetext
{
color:#464646;
}
#media screen and (min-width: 770px)
{
.hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/*#media screen and (min-width: 768px)and (orientation:portrait)
{
.container
{
height:100%;
width:100%;
text-align:center;
background-color:white;
display:inline-block;
}
.square
{
margin:auto;
width:15em!important;
text-align:center;
display:inline-block;
}
.words
{
width:100%;
}
a.linktext
{
color:#464646 !important; font-size:17px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:17px; text-decoration:underlined;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
#block-65
{
margin:-65 0 0 0 ;
position:absolute;
left:75px;
}
#block-66
{
background:blue;
position:absolute;
top:484px;
}
}
*/
#media only screen and (max-width: 500px)and (orientation:landscape)/*iphone 4*/{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em !important;
text-align:left;
}
.fb
{
position:relative;
/*top:-80px!important;*/
/*right:20px;*/
background:white;
z-index:3;
}
.words
{
width:100%;
height:203px!important;
text-align:center;
}
/*.topfooter
{
color:blue!important;
}*/
.botfooter
{
float:right;
position:absolute;
top:20px;
right:-225px!important;
}
.officetext
{
font-size:12px!important;
}
.coporateoffice
{
font-size:14px!important;
}
#employees
{
width:100%;
margin:0 ;
padding: 0;
}
.contact1{
position:absolute;
top:2050px!important;
margin-top:0px;
/*margin-top:100px!important;*/
}
}
#media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/
{
#wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/
{
width:auto;
overflow: hidden;
maxwidth:auto;
padding :0.5em;
}
.hide img /*logo*/
{
width:68%;
height: 185px;
/*display: block;*/
margin: auto !important;
}
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:20em;
text-align:left;
/* display:inline-block;*/
}
.words
{
width:100%;
font-size:16px;
height:145px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66
{
width:100%
display:inline;
font-weight:bold;
posititon:absolute;
left:-25px;
top:5px;
letter-spacing:2px;
white-space:nowrap;
font:OpenSans-Semibold;
}
.phonenav
{
font-size:20px!important;
line-height:200%;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
width:300px;
float:right;
}
/*.officetext
{
position:absolute;
top:500%;
width:100%;
font-size:20px;
white-space:nowrap;
color:red;
}*/
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink {
text-align: center;
}
#block-38
{
margin:0;
position:absolute;
top:1625px;
width:100%;
}
.corporateoffice
{
font-color:black!important;
font-size:20px!important;
white-space:nowrap !important;
}
.officetext
{
font-size:18px!important;
}
/* .fb
{
position:absolute;
left:2px;
text-align:right;
background:white;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
.fb-hide
{
position:absolute;
left:2px;
text-align:right;
background:white;
/* background-color:white;
padding:right:40px;
position:absolute
z-index:-1;
*/
}
#block-67
{
display:inline-block;
background-color:white!important;
position:relative;
left:235px;
top:20px;
z-index:2;
}
/*.fb
{
background:white;
}
*/
a.linktext
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
.block-type-hwr-contact #hwr-contact-27 .hwr-form-title {
line-height:90%;
}
.topfooter
{
margin:0 0 0 0 ;
position:absolute;
top:80px!important;
background:transparent
}
.botfooter
{
margin:0 0 0 0;
float:right;
position:absolute;
top:1px;
right:-330px;
background:transparent;
}
.contact {
position:absolute;
top:640px;
margin-top:100px!important;
}
}
#media only screen (device-height : 568px) and (device-width : 320px)and (-webkit-min-device pixel-ratio: 2)and (orientation : landscape)/*iphone 5*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:15em;
text-align:left;
/* display:inline-block;*/
}
.botfooter
{
float:right;
position:absolute;
top:2px;
right:20px;
}
}
#media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/
{
.hide/*logo*/
{
margin-top:10%;
margin-bottom:2px;
display:block;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:100%;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
color:white;
font-size:18px;
text-align:center;
background-color:#990913;
width:100%;
height:150px;
}
.title
{
width:100%;
}
#block-73 li.widget
{
margin-top:30%;
}
#block-66
{
position: relative;
top: 55px;
padding-left:60%;
font-weight:bold !important;
z-index:2;
line-height:4px;
}
.phonenum
{
background-color:white;
/*padding:right:40px;*/
position:absolute;
top:-3px;
z-index:-1;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:120px;
width:140px;
float:right;
}
.centerlink {
text-align: center;
}
.footer
{
color:black!important;
font-size:20px;
}
.fb
{
background:white;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
float:right;
}
}
Disable horizontal scrolling is quite easy. Just add the following CSS:
html, body {
width: 100%;
overflow-x: hidden;
}
You have to add this styles to the html and body tag to work in all browsers.
The problem is the fixed width of 680px you assigned to .footerlogos. Just change it from 680px to auto.
You could solve this with Javascript as well!
document.getElementById('body').style.overflowX = 'hidden';
For some reason, every image on my website will load but my background image. It was working, I didn't change anything to do with that, and now it's not. And can't for the life of me work out what I've done wrong. I think I've been looking at it for too long. (The image is named correctly and is stored in the root directory)
The website can be found at http://www.deadendwebcomic.com/index.html
My css is as follows:
body {
background-image:url('background.jpg');
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
color:000;
font-size:12px;
}
h1
{
font-size:30px;
padding-bottom:10px;
padding-top:0;
}
h2
{
font-size:16px;
font-style:italic;
}
h3
{
font-size:14px;
font-weight:bold;
font-style:italic;
margin-bottom:0px;
padding-bottom:0px;
display:inline;
}
table
{
border:0px;
}
td
{
padding-bottom:0px;
margin-bottom:0px;
padding-right:15px;
vertical-align:bottom;
}
#topnavigation
{
border:0;
float:left;
position:fixed;
top:150px;
left:300px;
height:80px;
width:800px;
margin:0 auto;
}
#leftnavigation
{
border:0;
float:left;
position:fixed;
top:320px;
left:100px;
height:580px;
width:180px;
margin:0 auto;
padding:0;
}
#container
{
background: url("creamtexture.jpg");
border:0;
float:left;
position:fixed;
top:320px;
left:310px;
height:557px;
width:773px;
margin:0 auto;
padding:0;
}
#content
{
background:none;
border:0;
float:left;
position:fixed;
top:320px;
left:315px;
height:500px;
width:730px;
margin:0 auto;
padding:20px;
}
#comicnav
{
border:0;
float:left;
position:fixed;
top:820px;
left:300px;
height:500px;
width:775px;
margin:0 auto;
padding:0;
}
#horline
{
background: url("horline.gif");
width:853px;
height:21px;
float:left;
}
#verline
{
background: url("verline.gif");
height:580px;
width:23px;
float:right;
}
#home
{
background: url("home.png");
height:205px;
width:205px;
position:fixed;
top:101px;
left:80px;
border:0;
}
img
{
border:0;
}
.about
{
display:block;
width:137px;
height:90px;
background: url("about.gif") bottom;
}
.about:hover
{
background-position: top;
}
.aboutactive
{
display:block;
width:137px;
height:90px;
background: url("aboutactive.gif") bottom;
}
.aboutactive:hover
{
background-position: top;
}
.characters
{
display:block;
width:191px;
height:110px;
background: url("characters.gif") bottom;
float:left;
}
.characters:hover
{
background-position: top;
}
.charactersactive
{
display:block;
width:191px;
height:110px;
background: url("charactersactive.gif") bottom;
float:left;
}
.charactersactive:hover
{
background-position: top;
}
.contact
{
display:block;
width:137px;
height:90px;
background: url("contact.gif") bottom;
}
.contact:hover
{
background-position: top;
}
.contactactive
{
display:block;
width:137px;
height:90px;
background: url("contactactive.gif") bottom;
}
.contactactive:hover
{
background-position: top;
}
.deadend
{
display:block;
width:160px;
height:110px;
background: url("deadend.gif") bottom;
float:left;
}
.deadend:hover
{
background-position: top;
}
.deadendactive
{
display:block;
width:160px;
height:110px;
background: url("deadendactive.gif") bottom;
float:left;
}
.deadendactive:hover
{
background-position: top;
}
.launchparty
{
display:block;
width:207px;
height:110px;
background: url("launchparty.gif") bottom;
float:left;
}
.launchparty:hover
{
background-position: top;
}
.launchpartyactive
{
display:block;
width:207px;
height:110px;
background: url("launchpartyactive.gif") bottom;
float:left;
}
.launchpartyactive:hover
{
background-position: top;
}
.purchase
{
display:block;
width:169px;
height:110px;
background: url("purchase.gif") bottom;
float:left;
}
.purchase:hover
{
background-position: top;
}
.purchaseactive
{
display:block;
width:169px;
height:110px;
background: url("purchaseactive.gif") bottom;
float:left;
}
.purchaseactive:hover
{
background-position: top;
}
.turnback
{
display:block;
width:258px;
height:50px;
background: url("turnback.gif") bottom;
float:left;
}
.turnback:hover
{
background-position:top;
}
.latest
{
display:block;
width:258px;
height:50px;
background: url("latest.gif") bottom;
float:left;
text-align:center;
}
.latest:hover
{
background-position:top;
}
.keepgoing
{
display:block;
width:258px;
height:50px;
background: url("keepgoing.gif") bottom;
float:left;
}
.keepgoing:hover
{
background-position:top;
}
The path to your image is relative to the css file - so unless your image is in the same directory as the css file then it wont load (as per your example)
A good tool for debugging these issues is Firebug in Firefox or Fiddler.
Is your CSS file in a folder?
The image references in your CSS file are relative to the location of the CSS file, not the location of your HTML page.
Using ../background.jpg may be all you need to do.
Try:
background-image: url(/background.jpg);
This unequivocally references the image in the document root.
remove background-image from #home
because you define background image for both body & #home.
Your html is look like this
<body id="home" class="log wsite-page-index">
that's why #home image override your body image
remove background property for #home and than try and also check the path of the images in your css
alternatively, you could set #home to this:
#home {
background: url("theme/background.jpg");
height: 205px;
width: 205px;
position: fixed;
top: 101px;
left: 80px;
border: 0;
}
Hope this helps,
Tom
So i have a slideshow, here's the css to start with:
#slideshow {
position:relative;
height:300px;
width: 477px;
border: 1px solid #FFF;
float: left;
margin-bottom: 30px;
margin-left: 20px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
And then i have a box, that i want to be on top of the slideshow.. but right now its under the slideshow, even if its position absolute..
#regForm {
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
opacity: 0.75;
-moz-opacity: 0.75; /* older Gecko-based browsers */
filter:alpha(opacity=75); /* For IE6&7 */
}
How should i positioning it right so the div box comes on top of the slideshow and not under?
Add z-index:11; to the #regForm style declaration.