Hi im just starting out and i have a small problem, for some reason i cant get the header and the menuholder to align, the menuholder appears slightly below the header, i need it to be inside the header
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
position: fixed;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
z-index: 5;
}
#menuholder {
height:50px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
thanks for any feedback.
Is this what you have in mind?
<div id="header">
<div id="menuholder">
This is my menu
</div>
</div>
#header {
max-height: 50px;
width: 100%;
background: url(../img/bgpattern.png) repeat-x;
box-shadow: 0px 0px 10px 5px rgb(139, 141, 143);
}
#menuholder {
text-align: center;
padding: 15px 0;
margin: 0 auto;
}
Related
I am trying to create a Card in HTML/CSS, that looks like:
BUT, what I want exactly is that the background, instead of being just grey like it is, is an image instead.
Here is what I've tried: JsFiddle
HTML:
<div class="card">
<img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" class='image'>
<div class="container">
<h3>John Doe</h3>
<p>Architect & Engineer</p>
</div>
</div>
CSS:
.card {
border: 1px solid #dadada;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.2s;
width: 50%;
}
.card h3 {
padding: 2px;
margin: 8px 0;
}
.image {
width:100%;
clip-path: polygon(0 0, 100% 0, 100% 42%, 0 23%);
}
As you can see it works, but the problem is that there's space in between the image and the 'John Doe'.
I would like to know how to remove the space between the image and the John Doe.
Thanks
Here is a simple solution with css transform.
.wrapper {
position: relative;
width: 280px;
height: 350px;
background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg') 0 0 no-repeat;
background-size: cover;
overflow: hidden;
}
.box {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background: #cdcdcd;
}
.content {
position: absolute;
z-index: 10;
padding: 15px;
box-sizing: border-box;
}
.folder {
position: absolute;
top: -20px;
left: -10px;
width: 120%;
height: 60px;
background: #cdcdcd;
transform: rotate(8deg);
}
<div class="wrapper">
<div class="box">
<div class="content">Here is my content.</div>
<div class="folder"></div>
</div>
</div>
You can add the following to your css:
.container {
position: absolute;
top: 150px;
}
You will see that your card's height is influenced. You can the just give your card a height that you desire, like this:
.card {
height: 300px //this is your prefered height
}
.card {
border: 1px solid #dadada;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.2s;
width: 50%;
height:200px;
position:relative;
}
.card h3 {
padding: 2px;
margin: 8px 0;
/* line-height: 20px !important;
font-size: 18px !important;
font-weight: 500 !important; */
}
.card:hover {
box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card .container {
padding: 2px 14px;
position: absolute;
top: 45%;
}
.card p {
margin: 14px 0;
}
.card img {
position:absolute
}
//that's all..
Rely on background and you will have better support and less code:
.card {
border: 1px solid #dadada;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.2s;
padding:100px 10px 5px;
width: 50%;
background:
linear-gradient(to bottom left,transparent 49.5%,#fff 50%) 0 50px/100% 100px,
linear-gradient(#fff,#fff) bottom/100% calc(100% - 150px),
url(https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg) top/100% auto no-repeat;
background-repeat:no-repeat;
}
.card h3 {
padding: 2px;
margin: 8px 0;
}
<div class="card">
<h3>John Doe</h3>
<p>Architect & Engineer</p>
</div>
I have problem with z-index value in child element.
Structure looks like this:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
}
#box {
position: relative;
z-index: 10;
width: 40%;
height: 38vh;
background-color: #44a9ff;
float: right;
color: white;
display: block;
overflow: hidden;
}
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="main">
<div id="box">
</div>
</div>
Element #nav has z-index 2, because there is box shadow in the bottom. #main has z-index 1, because when is higher, shadow is not visible. And than there is #box, which has z index 3, because I need it to cover shadow from #nav. But it probably has value of z-index from #main, so it doesn't cover it. How could I fix this please?
Try taking #box out of #main and setting it absolute above with right & top coordinates:
#header {
position: relative;
z-index: 2;
width: 100%;
height: 15vh;
display: block;
margin: 0 auto;
background-color: white;
color: #44a9ff;
padding: 0;
overflow: hidden;
border-bottom: 3px solid #44a9ff;
-webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75);
}
#main {
position: relative;
z-index: 1;
width: 100%;
height: 75vh;
display: block;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: url('img/main_bg.jpg') no-repeat center center;
background-size: cover;
border-bottom: 3px solid #44a9ff;
background: green;
}
#box {
/* set it absolute */
position: absolute;
/* tweak coordinates to your benefit */
right: 8px;
top: 19vh;
z-index: 3;
width: 40%;
height: 38vh;
background-color: #44a9ff;
color: white;
display: block;
overflow: hidden;
}
<div id="header">
<div id="nav">
<ul>
<li>..
</li>
<li>..
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="box"></div>
try moving #box out of #main and give it a custom css code to get it to the right position
<div id="nav">
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div id="box">
</div>
<div id="main">
</div>
My target output want same as like blow image.
My CSS and HTML:
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
After write my code input left side showing properly but the right side not showing properly. From my knowledge right side need show 15px padding. But I can't understand what wrong with my code.
Two possible solutions:
First, you could add box-sizing: border-box to your styles. As it is, your header is set to match the entire width of its container, and then the padding is applied outside that, which is the default behaviour for box-sizing, and which makes the padding extend outside the limits of the container.
Some more reading on css-tricks.com.
You also need to adjust the height to allow for the new box model (total height now includes the height of the padding) - here's your updated code:
header {
box-sizing: border-box;
height: 70px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
Option 2: if you prefer to keep the default box model, you can use a calculated width to compensate for the padding: set the width of header to calc(100% - 30px) (be careful to keep the spaces around the - if you choose this option).
This solution is for you.
body{
margin:0;
padding:0;
}
header{
height: 40px;
display:block;
background: #00A6E3;
border-radius: 0 0 10px 10px;
padding:15px 15px 15px 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
z-index: 5;
}
header .todoitem{
height: 100%;
width:100%;
display:block;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder{
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
You can do something like this, too.
header {
height: 70px;
width: 100%;
position:fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-sizing:border-box;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
I have used box-sizing:border-box so padding is included in total width, and increased height of header, accordingly... Main problem was that your padding actually increased width of header - so header width was over 100% (100% + padding).
More about box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
header {
height: 40px;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
Try removing float:left, and add text-align:center to header, and text-align:left to .todoitem, then add margin values to .todoitem to position it where you want.
Width:100% and padding:2px;
doesn't goes well, It never does. Either reduce width to 98% or add padding as padding :15px 0;
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px 0;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
What I would like to do is to add position: fixed; to the following container but have it centered when compared to the header and footer
#OuterGallery {
margin: -6px auto 0px auto;
width: 960px;
height: 675px;
padding: 0px 0px 20px 0px;
}
Here is the header code:
#HeaderBar {
width: 100%;
background-image: url(../image-core/header.png);
background-position: 0px 0px;
background-repeat: repeat-x;
height: 80px;
margin: 0px;
border: 0px solid #FFF;
position: absolute; z-index: 100;
}
it has been designed so that when you scroll down the header disappears
Finally hear is the footer
#Footer {
background-color:transparent;
position:fixed;
width:100%;
bottom:0;
display:none;
z-index:10000;
background-image: url(../image-core/footer.png);
border-top: 5px solid #e0c495;
-moz-box-shadow: -0px -1px 5px #000;
-webkit-box-shadow: -0px -1px 5px #000;
box-shadow: -0px -1px 5px #000;
background-color: #000;
background-position: 0px 0px;
height: 35px;
Thank you very much for the help you can provide
I have the following markup.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
</div>
</div>
</div>
</body>
</html>
With the following CSS
body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}
div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("nav_bg.png");
background-repeat: no-repeat;
background-position: center 219px;
}
div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
}
div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
}
The nav_bg.png is this
And I get white unshadowed space in the bottom left and right
If I change the code to this
div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px 0px rgba(0, 0, 0, 0.8);
}
I get additional shadow on left and right sides as this.
And If I remove background-color and border-shadow from the div#navigation as follows.
div#navigation
{
height: 50px;
margin-bottom: 200px;
}
I get this
Sorry I messesd up the question real bad before.
You could also just make the div little wider so it would reach to the sides.
If you could show the code, I could show you how.
EDIT:
Just add minus margin to left and right to navigation and add width so it would reach the sides what you need
margin: 0 -20px 200px;
width: 947px;
EDIT2:
If this does not work then there is something that you are not showing or you're doing it wrong.
body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}
div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("oBecq.png");
background-repeat: no-repeat;
background-position: center 219px;
}
div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
height: 500px;
}
div#navigation
{
height: 50px;
margin: 0 -10px 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
top: 219px;
position: relative;
width: 950px;
}
This is because you have the shadow spread property set to -4px (the fourth number)
Set it to 0 and it will appear as you wish.
box-shadow: 0 10px 2px 0px rgba(0, 0, 0, 0.8);
http://jsfiddle.net/Kyle_Sevenoaks/evd4K/