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>
Related
I've made this model using six div's inside a container div. It works fine just as it is, but I would need to make it responsive to be compliant with WCAG 2.1. I've tried to use flexbox and grid but don't really figure out what would be the best way to achieve responsiveness on the model. I would only need one break point which puts all the divs on on column with the main topi on the top and the sub topics in descending order like the examples I made in powerpoint:
This is my code:
.container {
display: relative;
width: 700px;
height: 400px;
background-color: #BEE5F4;
}
.subTopics {
width: 250px;
height: 100px;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
}
p {
padding: 10px;
}
#subTopic1 {
position: absolute;
left: 25px;
top: 50px;
}
#subTopic2 {
position: absolute;
left: 425px;
top: 50px;
text-align: right;
}
#subTopic3 {
position: absolute;
left: 25px;
top: 250px;
}
#subTopic4 {
position: absolute;
left: 425px;
top: 250px;
text-align: right;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 225px;
top: 75px;
text-align: center;
color: #000000;
font-weight: 700;
position: absolute;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
.circeBack {
width: 290px;
height: 290px;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
position: absolute;
left: 205px;
top: 55px;
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<div class="container">
<div class="subTopics" id="subTopic1">
<a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2">
<a href="">
<p>Sub topic 2</p>
</a>
</div>
<div class="subTopics" id="subTopic3">
<a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4">
<a href="">
<p>Sub topic 4</p>
</a>
</div>
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic">
<a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>
Is this what you're looking for? You'll have to view it in full screen mode and then play around with the screen width.
I added the dashed borders just so that you can see what's going on. This is something I often do during development, I find it helps me visualise the layout.
Thanks!
body {
background-color: #BEE5F4;
overflow-x: hidden;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.row {
position: relative;
display: flex;
flex-grow: 1;
border: 1px dashed red;
padding: 5px;
margin: 5px;
align-content: center;
justify-content: center;
}
.subTopics {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
margin: 30px;
}
.circle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.circeBack {
position: relative;
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #000000;
font-weight: 700;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
#media only screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.row-desktop {
display: none;
}
.row-mobile {
display: flex;
align-items: center;
}
.subTopics {
margin: 30px 0px 30px 0px;
min-height: 100px;
}
}
#media only screen and (min-width: 701px) {
.row-desktop {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row row-mobile row-desktop">
<div class="circle-container">
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic"><a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic1"><a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2"><a href="">
<p>Sub topic 2</p>
</a>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic3"><a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4"><a href="">
<p>Sub topic 4</p>
</a>
</div>
</div>
</div>
</body>
</html>
I have a problem with unwanted gap between ul and div. Maybe you know solution?
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
This problem occurred after inline-block adding. I searched for solutions, but what I have found that was for horizontal gaps (I have fixed it by adding font-size: 0; in parent tab). Maybe there is some solution for vertical gaps?
in #content add float:left; margin-top:0;
Remove the font-size:0
and edit margin to this
#tabs li {
margin: 0 0;
}
you gave it 0.5em which is causing the space between them
Hope it helps
You added padding to the content div which caused this effect
Here's a fiddle where I changed the padding to 0 2em instead
https://jsfiddle.net/6r0x3n0e/
#content {
background: #fff;
padding: 0 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
Hope this helps
Set padding to the following: padding:0em 2em 2em 2em;
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 0em 2em 2em 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
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 want to create a page like in image
Problem:
Main box Shadow not coming as in image.
I have tried with my own HTMl and CSS code.
Here is fiddle
http://jsfiddle.net/EE6hU/
HTML
<div class='wrapper' id='id_wrapper'>
<div class='main'> <span class='online_survey'>Online Survey</span>
<div class='login_box'>
<div class='login'>
<form>
<div class='label'>username</div>
<input type='text' name='username' class='loginInput' placeholder='moderator' />
<div style='clear:both'></div>
<div class='label'>password</div>
<input type='password' name='password' class='loginInput' placeholder='*********' />
<div style="clear:both"></div>
<input type='checkbox' name='remember' class='check' />
<div class='remember'>Remember me</div>
<input type='submit' name='submit' class='submit_button' value='submit' />
</form>
</div>
<div class='forget_pass'><a href='#'>Forget Password</a>
</div>
</div>
</div>
</div>
CSS
.wrapper {
background:#313131;
height:645px;
}
.main {
margin: 0 auto;
position: relative;
top: 20%;
width: 500px;
}
.online_survey {
bottom: 10px;
color: #FFFFFF;
font-size: 20px;
margin-left: 15px;
position: relative;
}
.user_name {
}
.login_box {
background: none repeat scroll 0 0 #7D7D7D;
border: 1px solid #98B2C9;
border-radius: 20px;
padding: 8px;
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
}
.loginInput {
background:#313131;
border-radius: 5px;
float: left;
height: 30px;
width: 200px;
margin: 5px;
padding:5px;
color:#ffffff;
}
.label {
float: left;
height: 30px;
width: 140px;
}
.login {
padding: 30px;
}
.forget_pass a {
color: white;
text-decoration:none;
}
.submit_button {
}
.check {
float: left;
margin-left: 140px;
margin-right: 5px;
}
ge.
Stacking shadows of various sizes might get you close.
http://jsfiddle.net/isherwood/EE6hU/1
.login_box {
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75),
0 0 150px rgba(255,255,255,0.5),
0 0 250px rgba(255,255,255,0.5);
}
I may have to eat my own words. Here's a way to get the narrower white shadow in your image:
http://jsfiddle.net/isherwood/EE6hU/4
.login_box {
...
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
margin: 0 -150px;
}
.login_box_shadow {
overflow: visible;
border-radius: 20px;
box-shadow: 0 0 150px rgba(255, 255, 255, 0.5),
0 0 250px rgba(255, 255, 255, 0.5);
margin: 0 150px;
}
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;