I am trying to make a simple splash page for an event, but each time I try to load the page on a mobile device it would take forever to load, then it would freeze.
At fist I thought it could be due to the background picture being extremely large. (memory wise) So I re saved the pic at a lower quality.
That cut down the load time a lot, but the mobile sites still freeze up.
I have a custom font, (Could that be the problem?)
Here is my HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>The Apocalypse Is HERE!</title>
<!-- Custom CSS for the 'Full' Template -->
<link href="css/newStyle.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});</script>
</head>
<body>
<div id="mainWrapper">
<div id="topWrapper">
<div id="zombieWrap"><center>The Zombie Apocalypse Is Here!</center>
</div>
<center>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/tb0Op6cpY2s" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<center>
<div id="bottomWrapper">
<div class="leftWrapper">Click Here For Tickets</div>
<div class = "rightWrapper">Click Here For the Richmond Underground Home Page</div>
</div>
</center>
</div>
</div>
</body>
Here is the CSS
/* GLOBAL STYLES
-------------------------------------------------- */
#font-face
{
font-family: 'zombieF';
src: url('zombieFont.ttf');
}
/*------------------------------------------------------------------------------------------NON MOBILE=================*/
body{
background-color:black;
background: url(wall.jpg);
background-size:50%,50%;
background-repeat: repeat;
}
#mainWrapper{
margin-top:2.5em;
margin-left: 10%;
margin-right: 10%;
}
#topWrapper{
width:100%;
}
#videoWrapper{
margin-top:1em;
}
#zombieWrap{
font-family: zombieF;
font-size: 50px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
#video{
max-width: 400px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
-moz-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
font-family: zombieF;
font-size: 25px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
.leftWrapper{
width:50%;
float:left;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: white;
}
.leftWrapper:hover { -moz-box-shadow: 0 0 10px #white; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
.rightWrapper{
width:50%;
float:right;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
#media only screen and (max-width: 500px){
.rightWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
padding-top:15px;
}
.leftWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
}
#zombieWrap{
border-top:5px;
font-family: zombieF;
font-size: 30px;
color:red;
}
#mainWrapper{
height:100%;
margin-left: 10%;
margin-right: 10%;
}
#containingBlock {
width:50%;
}
video { width: 50% !important; height: auto !important; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Maybe I am missing something. Anyone Have any suggestions?
Related
I have call to action bar, inside it there is a h1 tag for slogan and a p tag with a link for actual call to action. I can not marging them properly h1 tag ride on p tag.
SCREENSHOT
HTML
<div id="call-to-act">
<h1>We are Andia, a super cool design agency.We design beautiful websites, logos and prints. Your project is safe with us.</h1>
<p>Contact Us</p>
</div> <!-- end of call-to-action -->
CSS:
div#call-to-act {
background: #fff;
width: 100%;
height: 100px;
position: relative;
margin: 50px auto;
-webkit-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
width: 80%;
}
div#call-to-act p {
height: 100%;
}
div#call-to-act a.call2act {
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:44px;
line-height:44px;
width:120px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
position: absolute;
right: 20px;
top: 20px;
}
You can use position: absolute; right: 0; top: 50%; to put the button on the right side 50% from the top, then transform: translateY(-50%) to move the button up half of it's own width to center it vertically. Then apply padding-right: 130px to the parent to make room for the 120px wide button.
* {
margin: 0;
padding: 0;
}
div#call-to-act {
background: #fff;
width: 100%;
min-height: 46px;
position: relative;
margin: 50px auto;
-webkit-box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
box-shadow: inset 10px 10px 72px -28px rgba(0, 0, 0, 0.75);
width: 80%;
box-sizing: border-box;
padding-right: 130px;
}
div#call-to-act p {}
div#call-to-act a.call2act {
text-indent: 0;
border: 1px solid #dcdcdc;
display: inline-block;
color: #777777;
font-family: arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 44px;
line-height: 44px;
width: 120px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div id="call-to-act">
<h1>We are Andia, a super cool design agency.We design beautiful websites, logos and prints. Your project is safe with us.</h1>
<p>Contact Us</p>
</div>
<!-- end of call-to-action -->
I have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
I have a banner right above a navigation menu. The two have their own container divs going horizontally across the screen. I have box shadows on both of them to make it look like outer glow. The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. Is there any way that I can modify my code to make it look like the shadows are one? Thanks for your time.
http://i.imgur.com/dJ69OyV.gif
My HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapperOuter">
<header>
<div id="bannerContainer">
<div id="banner">
<h1>Scott <span class="green">H.</span> Lacey</h1>
<p>Web Developer <span class="green">♠</span> Photographer <span class="green">♠</span> Musician</p>
</div>
</div>
<div id="toolbarContainer">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Services</li>
<li>Resume</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="toolbar">
<div id="social">
<label>Connect With</label>
<ul>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div id="search">
<form action="#" method="POST">
<input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
</form>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
span.green {
color: #66cc00;
}
body {
background: url(../img/bodyBackground.gif) repeat-x #000;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 1em;
color: #666666;
}
a {
color: #66cc00;
text-decoration: none;
border-bottom: 1px dotted #66cc00;
}
a:hover {
color: #666666;
}
#wrapperOuter {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
#bannerContainer {
background: url(../img/themeSprite.gif) 0 0px;
height: 148px;
border-bottom: 1px solid #333;
margin: 0;
padding: 0;
}
#banner {
background-image: url(../img/themeSprite.gif);
background-position: 0px -210px;
height: 148px;
margin: 0px auto;
width: 960px;
border-width: 0px 1px;
border-color: #666;
border-style: solid;
background-repeat: repeat-x;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
text-align: center;
}
#banner h1 {
margin: 0px;
padding-top: 25px;
}
#banner p {
color; #999;
}
#toolbarContainer {
background-color: #222;
border-bottom: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
margin: 0px;
padding: 0px;
}
nav {
background-image: url(../img/themeSprite.gif);
background-position: 0px -153px;
margin: 0px;
padding: 0px;
width: 960px;
margin: 0px auto;
height: 52px;
border: 1px solid #000;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
display: inline;
border-left: 1px solid #333;
border-right: 1px solid #666;
height: 52px;
box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
display: block;
margin: 0px;
border-bottom: 0;
color: #333;
height: 52px;
padding: 15px 25px;
}
#toolbar {
width: 960px;
margin: 0px auto;
padding: 15px 0;
overflow: auto;
}
#social {
float: left;
}
#social label {
float: left;
display: block;
padding-right: 10px;
}
#social ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#social ul li {
float: left;
display: inline;
margin: 0px 5px;
padding: 0;
}
#social ul li a {
color: #666;
border: 0;
font-size: 18px;
}
#search {
float: right;
}
#search input {
background: #333;
border: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
color: #666;
padding: 10px;
}
Take the drop shadows off of .bannerContainer and .toolbarContainer, then place a div around the outside of both of those and add the drop shadow there. You will have to put the <div id="toolbar"> outside of this div too.
The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. Right now you have 2 elements which are going to be stacked on one another.
<html>
<head></head>
<style>
.main {
width: 100%;
}
.box1 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: red;
display: inline-block;
}
.box1inner {
margin: auto;
width: 70%;
height: 50px;
background: blue;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: orange;
display: inline-block;
}
.box2wrapper {
margin: auto;
width: 70%;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2inner {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">
<div class="box1inner">
</div>
<div class="box1inner">
</div>
</div>
<div class="box2">
<div class="box2wrapper">
<div class="box2inner">
</div>
<div class="box2inner">
</div>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I have a menu with a background img in hover.
Only with crhome, i dont see the menu voices when I load the page.
Following, if I go with the mouse to select the voice, appears the menu voices with the img's background, and remains.
I dont have this problem with firefox.
That's the CSS code:
#header {
width: 100%;
text-align: left;
display: block;
height: 60px;
margin: auto ;
width: 100%;
font-size: 130%;
z-index: 10px;
background-color: white;
border-bottom: 1px solid lightgray;
}
#header .main_menu {
height: 100%;
margin: 0 auto;
text-align: center;
width: 700px;
padding-top: 7.5px;
z-index:100;
}
#header .main_menu .normal {
display: inline-block;
width: 100px;
font-weight: bolder;
border-radius: 20px;
padding: 10px 0px;
height: 14px;
border: 2px solid white;
}
.main_menu .logo_main_menu{
display: inline-block;
width: 140px;
font-weight: bolder;
border-radius: 10px;
padding: 14px 0px;
height: 11.5px;
border: 2px solid white;
}
.main_menu .logo_main_menu:hover ,#header .here_home {
color: transparent;
background: url("../images/logo_tapling.png") ;
background-size: 140px;
}
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
color: white;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}
.free_img_2{
display: none;position: relative;height: 100px;margin-bottom: -100px;
float: right;right: 146px;z-index: 20;
}
.free_img{
position: relative; height: 100px;margin-bottom: -100px;
float: right;top:-5px;right: -8px;
}
#header .main_menu .normal a:hover {
}
.can_bg{
border: 2px white solid;
}
#header .normal .active ,#header .normal .main_menu a:hover
{
}
#mainmenu2{
z-index: 10;
position: relative;
/*top:60px;*/
/*left:50%;*/
/*margin-left: -235px;*/
/*right: auto;*/
/*margin:62px auto ;*/
}
#mainmenu2{
display: none;
border-left:2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
-moz-box-shadow: 2px 8px 6px -3px black ;
-ms-box-shadow: 2px 8px 6px -3px black ;
-webkit-box-shadow:2px 8px 6px -3px black;
box-shadow: 2px 8px 6px -3px black;
border-radius:0px 0px 10px 10px;
border-radius: 0 0 10px 10px;
color:black;
padding: 5px 0;
text-align:center;
font-weight:900;
background: url("../images/bg_tapling.png") ;
}
#mainmenu2 ul{
margin: 0px;
padding: 0px;
}
#mainmenu2 li a{
color: white;
text-shadow: none;
}
#mainmenu2 li a:hover{
color: green;
}
#mainmenu2 li .active{
color: lightgreen;
}
#mainmenu2 li{
width: 40%;
text-align: center;
margin: 2.5px auto ;
padding: 10px;
-moz-box-shadow:inset 0px 1px 0px 0px black;
-ms-box-shadow:inset 0px 1px 0px 0px black;
-webkit-box-shadow:inset 0px 1px 0px 0px black;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,
#ededed),color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #ededed 5%, #000000 100% );
background:-ms-linear-gradient( center top, #ededed 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
endColorstr='#000000');
background-color:black;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
/*border:1px solid #dcdcdc;*/
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
/*padding-right: 2.5%;*/
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
#mainmenu2 li:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,
#dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',
endColorstr='#ededed');
background-color:#dfdfdf;
}
.logo {
float: left;
margin: 0;
padding: 5px auto;
height: 100%;
}
.logo img {
height: 56px;
}
#header .menu {
width: 434px;
margin: 0 auto;
}
.menu{
display: none;
}
And this is HTML:
<div id="header">
<div class="menu">
<div class="logo">
<a href="<?=URL?>" >
<img src="<?php echo URL; ?>theme/<?= $this->_theme ? >/images/logo_tapling.png" />
</a>
<div class="separatore"></div>
</div>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</div>
<div class="main_menu">
<a href="<?=URL?>classifica" class="normal <?=$classifica?> ">Classifica
</a>
<a href="<?=URL?>regole" class="normal <?=$regole?>">
Regole
</a>
<a href="<?=URL?>" class="logo_main_menu <?=$home?> " >
Tapling
</a>
Faq
Contatti
</div>
</div>
Tnx so much!
change this
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
color: white;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}
to this
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}
I'm using the Nathan Smith Grid System and everything I wrap with the "container_12" class has a white background. What I want is it to be transparent.
Example: http://jsfiddle.net/JordanSimps/RZvxn/1/
HTML:
<!-- Beginning of the blue top header -->
<div class="top-header-wrap">
<div class="container_12">
<div class="top-header">
<div class="grid_2">
<img class="hover" src="http://www.dubstepcast.com/images/phone.png" /> (586) 997-9490
</div>
<div class="grid_3">
<img src="http://www.dubstepcast.com/images/mail.png" /> info#experienceheritage.org
</div>
<div id="social">
<div class="grid_7">
<ul>
<li id="twitter"><img id="twitter" src="http://www.dubstepcast.com/images/twitter.png" /></li>
<li id="pinterest"><img id="pinterest" src="http://www.dubstepcast.com/images/pinterest.png" /></li>
<li id="facebook"><img id="facebook" src="http://www.dubstepcast.com/images/facebook.png" /></li>
<li id="google"><img id="google" src="http://www.dubstepcast.com/images/google.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of the blue top header -->
<!-- Beginning of the second header - Logo & Navigation buttons -->
<div class="container_12">
<div class="bottom-header">
<!-- LOGO BEGINS HERE -->
<div class="grid_2">
<p><img class="logo" src="http://www.dubstepcast.com/images/logo2.png" /></p>
</div>
<!-- LOGO ENDS HERE -->
<!-- NAVIGATION BUTTONS BEGIN HERE -->
<div class="grid_8 prefix_2">
<ul class='navbar navbar-horizontal'>
<a href="#" id="panel-1" class="drop-shadow raised">
Home
</a>
<a href="#" id="panel-2">
FAQ's
</a>
<a href="#" id="panel-3">
Invite
</a>
<a href="#" id="panel-4">
Contact
</a>
</ul>
</div>
<!-- NAVIGATION BUTTONS END HERE -->
</div>
</div>
<!-- End of the second header - Logo & Navigation buttons -->
CSS:
#charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://www.dubstepcast.com/images/bg.jpg');
background-repeat: repeat-x repeat-y;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
padding-top: 20px;
text-align: center;
}
h2 {
padding-top: 20px;
text-align: center;
}
p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
/* HEADER */
/* TOP HEADER */
.top-header {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
background: #11A1B1;
height: 43px;
padding-top: 15px;
}
.top-header a {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.top-header a:hover {
color: #D3582D;
text-decoration: none;
}
.top-header-wrap {
border-top: solid 3px #32BED0;
background: #11A1B1;
height: 58px;
}
/* SOCIAL ICONS */
#social {
height: 35px;
}
#social li {
display: inline;
}
/* TWITTER */
#social ul #twitter a {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
#social ul #twitter a:hover {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
/* PINTEREST */
#social ul #pinterest a {
background-image: url('http://www.dubstepcast.com/images/pinterest.png');
width: 18px;
height: 18px;
}
#social ul #pinterest a:hover {
background-image: url('http://www.dubstepcast.com/images/pinterest_active.png');
width: 18px;
height: 18px;
}
/* FACEBOOK */
#social {
text-align: right;
}
#social ul #facebook a {
background-image: url('http://www.dubstepcast.com/images/facebook.png');
width: 18px;
height: 18px;
}
#social ul #facebook a:hover {
background-image: url('http://www.dubstepcast.com/images/facebook_active.png');
width: 18px;
height: 18px;
}
/* GOOGLE */
#social ul #google a {
background-image: url('http://www.dubstepcast.com/images/google.png');
width: 18px;
height: 18px;
}
#social ul #google a:hover {
background-image: url('http://www.dubstepcast.com/images/google_active.png');
width: 18px;
height: 18px;
}
/* BOTTOM HEADER */
.bottom-header {
margin-top: 10px;
height: 155px;
}
.bottom-header img {
margin-top: 25px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/*
* Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
* http://devsmash.com/projects/navbar
*
* Copyright 2013 Jeremy Martin (jmar777)
* Contributors: Duke Speer (Duke3D)
* Released under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
.navbar {
height: 100px;
display: block;
list-style-type: none;
list-style: none;
position: relative;
margin: 55px 0 0 25px;
padding: 0;
}
.navbar > a {
font-weight: 400;
font-family: "Helvetica";
letter-spacing: 1px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
-moz-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
font-size: 16px;
width: 125px;
height: 18px;
margin-left: 5px;
float: left;
text-align: center;
padding: 25px 0 30px 0;
}
.navbar > a p {
font-family: "Helvetica";
font-weight: lighter;
color: #11A1B1;
margin-top: 4px;
font-size: 10px;
letter-spacing: normal;
}
.navbar > a:hover p {
color: #11A1B1;
}
.navbar > a:hover {
color: #D3582D;
}
.navbar > * {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
}
.navbar.navbar-processed > * {
margin: 0;
position: absolute;
}
.navbar-horizontal > * {
float: left;
}
.navbar-horizontal > :first-child {
margin-left: 0;
}
.navbar-vertical > :first-child {
margin-top: 0;
}
#panel-1 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-2 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-3 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-4 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
/* GIVES THE DROP-SHADOW ON THE NAVIGATION BUTTONS MORE OF A REALISTIC LOOK */
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
According to your jsfiddle the following CSS rules are being applied to container_12 in the demo.css file
.container_12, .container_16, .container_24 {
background-color: #fff; /* Makes the background white */
background-repeat: repeat-y;
margin-bottom: 20px;
}
So you can either remove these or overwrite them with
.container_12 {
background: none
}
add this to css
.container_12{
background: transparent;
}
as per firebug, this is line 2 of demo.css
.container_12, .container_16, .container_24 {
background-color: #FFFFFF;
background-repeat: repeat-y;
margin-bottom: 20px;
}
so use
#div.container_12 {
background-color: transparent;
}
to override it with greater specificity
You have background-color: #fff; set in demo.css
Change it to background-color: transparent;