I have two horizontal lines on top of each other and I want to put a image on top of those lines, but I am not able to achieve this with CSS. The image gets hidden behind the horizontal lines.
JSFiddle
here is the image
my HTML
<div class="creambar"></div>
<div class="graybar silhouette"></div>
my CSS
graybar { height: 20px; background-color: #343434; width: 100%; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); }
.creambar { height: 5px; background-color: #d4c293; width: 100%; }
Is something like this that you want?
.creambar {
border-bottom: 20px solid #343434;
border-top: 4px solid #d4c293;
bottom: -69px;
position: relative;
width: 100%;
}
.graybar {
border-bottom: 20px solid #343434;
background: url("http://i.stack.imgur.com/3xbAl.png") 0 0 no-repeat;
height: 62px;
position: relative;
}
<div class="creambar"></div>
<div class="graybar"></div>
See Full Page.
Change the z-index. The z-index of the image you want to show should have the highest value.
.graybar .silhouette z-index should be higher than the z-index of .graybar.
.graybar { height: 20px; background-color: #343434; width: 100%; z-index:1;}
.graybar.silhouette { background: url("graphics/panr_silhouette_2.png"); z-index:3; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; z-index:1; }
Try this. I simply changed the z-index For one to be on top of the other. You can read more on the z-index property here
<div class="creambar"></div>
<div class="graybar silhouette"></div>
CSS
graybar { height: 20px; background-color: #343434; width: 100%;position:relative;z-index:1; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); position:relative;z-index:99; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; position:relative;z-index:1; }
Related
I am trying to make an image circular but it does not look to be a perfect circle after-all, here is a snippet of my code and a link showing the result
#aboutme{
padding: 150px;
}
#aboutme img{
border-radius: 50%;
border: 0;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
This is what happens: https://gyazo.com/92f967809fc4dea91a8a5cbaabf8d087
Padding is included in the calculation, as is everything inside the border-box. Using margin instead of padding, it won't be inside the border-box, resolving your issue.
For a perfect circle to form, you need the width to equal to the height, so the hackie way of border-radius: 50%; for shaping circle would work properly.
img {
border-radius: 50%;
border: 1px solid;
}
.perfect {
width: 150px;
height: 150px;
}
.weird1 {
width: 150px;
height: 83px;
}
.weird2 {
width: 80px;
height: 150px;
}
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>
/* I don't know why my code won't show my back ground. Please help
header {
z-index: 1;
position: relative;
background: #fff;
padding-bottom: 15px; {
header .banner {
background: url("http://www.hhbeautysupply.com/modules/blockbanne/img/2ff10e96da748ecea3b41289ad8dfb39.jpg") repeat-x #891C21;}
}
}
Your element .banner needs height and width rules.
Further: Your css is not properly formatted (unless you are using a preprocessor like sass) it should look like this:
header {
z-index: 1;
position: relative;
background: #fff;
padding-bottom: 15px;
}
header .banner {
background: url("http://www.hhbeautysupply.com/modules/blockbanne/img/2ff10e96da748ecea3b41289ad8dfb39.jpg") repeat-x #891C21;
//height and width rules
}
DEMO
div {
background: red;
padding: 10px;
}
.foo {
background: url("http://lorempixel.com/400/200/") repeat #891C21;
height: 200px;
width: 100%;
}
<div>
<div class="foo"></div>
</div>
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
I've added a negative margin to the logo of my site and it appears fine in all browsers I've tested to this point. See here:
The problem is it's not displaying right in Safari desktop. See here:
The HTML is as follows:
<hgroup id="logo_container">
<div id="logo_inside_container">
<h1 id="site-title"><img src="/wp-content/uploads/logo.png" alt="612 Vineyard - Berryville, VA"/></h1>
</div>
</hgroup>
The CSS is as follows:
#site-title {
margin-top: -30px;
display: block;
padding: 0;
width: 190px;
height: 143px;
float: left;
}
#site-title img {
width: 190px;
height: 143px;
}
#logo_container {
display: block;
width: 100%;
height: 100%;
margin: -29px 0 0 !important;
background: url('/wp-content/uploads/logo_stripe_bg.png') 0 41px repeat-x;
}
#logo_inside_container {
display: block;
width: 860px;
height: 143px;
margin: 0 auto;
background: url('/wp-content/uploads/logo_stripe.png') 0 41px no-repeat;
}
I found a way to add browser specific classes to my body class here: http://codebyte.dev7studios.com/post/4180628671/add-browser-to-body-class-in-wordpress
Simply changed #site-title { margin-top: -30px; } to .safari #site-title { margin-top: 0; }
Hope this helps someone!
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.