Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
Related
I have my code set up so when you hover over the H2 an image is revealed. Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. However, upon mouseover, the text is still being moved down to make room for the image.
I need the text to stay fixed in the same position and the background image to just appear upon hover without nudging the h2.
You can view the test here:
http://www.rorywolfseydel.com/test3-2
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #ffffff;
z-index: 12;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #ffffff;
}
h2.three:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #ffffff;
}
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. This is an incorrect assumption on how z-index works.
z-index is stacking order of elements, having a higher or lower z-index does not mean that elements with a higher z-index will automatically appear on top of each other. You need to use position for that.
For instance, two elements with different z-index values, but with position relative, are positioned relative to one another - meaning the elements affect each other's positioning, even if one has a higher or lower z-index.
Here's a simple example:
.top {
height: 200px;
background: purple;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.top:hover {
z-index: 3;
}
.bottom {
height: 300px;
background: yellow;
position: relative;
z-index: 2;
}
<div class="top">
</div>
<div class="bottom">
</div>
As you can see, the elements have different z-index values, but the position is relative. If you hover the top div, you can see the box-shadow overlapping the bottom div, but the position of the elements does not change in regards to top, right, bottom, left - only the stacking order.
Now for your specific example:
Here we use position: absolute to take the img element out of the document flow, allowing you to take advantage of z-index. Since the image is now out of document flow, it no longer affects any other element around it.
The snippet below is a very simple demonstration with the position changed on the image. It probably doesn't look how you want it to, but it's a starting point.
Couple other things:
The <center> tag is obsolete. You should use text-align: center on the h2 instead.
Depending on your end goal for how you want it to look, I would consider moving the image out of the h2 tags and wrapping the h2 and img in a containing element (e.g. div). This will allow for better control over the placement of the image once it's visible.
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #000;
z-index: 12;
text-align: center;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #000;
}
h2.three:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #000;
}
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="">
</h2>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
<!DOCTYPE html>
<html>
<head>
<style>
.artisthover {
display: none
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2.two:hover img {
display:inline ;
}
h2.three:hover img {
display:inline ;
}
</style>
</head>
<body>
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
</body>
</html>
Well, to set z-index on the image, the position has to be absolute for the image to stay the same, as well as the display of the outer element be inline....
I have been working on a new homepage for my website, but
I can't figure out why text moves up and down when I resize
my browser.
My CSS Code:
.welcome {
width: 100%;
height: 60px;
background-color: #4CAF50;
margin-top: -4px;
}
.welcome h1 {
font-family: 'Lato', sans-serif;
color: white;
font-size: 40px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 15px;
}
.welcome p {
color: white;
overflow: hidden;
float: left;
position: relative;
top: -50em;
}
#welcome-background {
width: 100%;
height: auto;
max-height: 1000px;
margin-top: -16px;
min-height: 500px;
}
If you see any other CSS error's please let me know
My HTML:
<div class="welcome">
<h1 style="float:left;">About Us</h1>
<img id="welcome-background" style="" src="/new_homepage/img/black-bg.png">
<p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p>
</div>
Your paragraph uses relative positioning, which means it is still in the flow of the document. Because it comes after an image, its vertical position changes as the height of the image changes.
Instead. put the image and paragraph inside of a wrapper element that is positioned relatively, then position the paragraph with absolute positioning.
This could look something like this:
HTML:
<div id="welcome-wrapper">
<img id="welcome-background" src="...">
<p>Hardwire Studios' is...</p>
</div>
CSS:
#welcome-wrapper {
position: relative;
}
#welcome-wrapper p {
position: absolute;
top: 10em;
}
I'm trying to get a child DIV to have its padding set relative to its fixed parent DIV.
To demonstrate the problem, I've put together a quick JSFiddle - http://jsfiddle.net/mdxsegLt/
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
max-height: 12.5%;
margin-bottom: 20px;
width: 100%;
left: auto;
right: auto;
z-index: 1030;
background-color: green;
}
.padding-percentage {
position: relative;
width: 50px;
max-width: 30%;
/*padding: 14px;*/
padding-top: 20%;
background-color: red;
}
<div class="top-fixed">
<div class="padding-percentage">test</div>
</div>
In that example, I'd like the red DIV to be contained entirely within the green, using 20% of the green DIVs height for the padding, not the entire page.
First things first... lets drop the ALL CAPS element names. It's bad practice these days. I think you were overdoing it a bit with your CSS declarations and by NOT nesting the text properly by wrapping it in a span or p tag. You shouldn't just have floating text that's not wrapped in a p or span tag. Wrapping it in such tags allows you to further customize like I did in my fiddle.
UPDATE
I think I actually get what you're trying to do.
CSS:
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
width: 100%;
background-color: green;
}
.padding-percentage {
height: 100%;
width: 50px;
background-color: red;
}
.padding {
margin-top: 0px;
padding-top: 20px;
}
HTML:
<div class="top-fixed">
<div class="padding-percentage">
<p class="padding">TEST</p>
</div>
</div>
LINK TO FIDDLE
Looks like you needed to adjust the CSS and add a class to the "test" text by tossing it an a p tag.
Check out my fiddle and hope it helps you!
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}