I have created this website. And now, I would like to center text on those two images in header. Relevent code is here
<div class="header">
<img src="css/title578145459.png" class="headerImage left"/>
<img src="css/title756941752.png" class="headerImage right"/>
<span class="headerText">Ubytovna Stavařov Přerov</span>
</div>
and CSS
.headerImage {
width: 50%;
height: 100%;
}
.header {
position: relative;
height: 190px;
text-align: center;
padding-top: 5px;
opacity: 0.8;
}
.headerText {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
color: yellow;
font: normal 3em sling;
font-style: oblique;
}
I tried to set different values to top and bottom attributes, also I've tried to set padding and margin but neither of these have worked. Thanks for any tips.
Your z-index on .headerText should be positive. Using Chrome dev tools I was able to see the text using this:
.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}
Try this
.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}
Related
I'm creating layered images right now but i need to somehow get text over each layered image. Every time I try adding it, it keeps just sitting next to the image itself. I can't get the positioning down.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
<div id="container">
<div>
<img class="imageOne" src="https://www.fillmurray.com/380/150/">
</div>
<div>
<img class="imageTwo" src="https://www.fillmurray.com/260/155/">
</div>
<div>
<img class="imageThree" src="https://www.fillmurray.com/270/100/">
</div>
</div>
I created a jsfiddle to see what it looks like with the images layered here:
https://jsfiddle.net/k1rpycq2/
I would use pseudo-selector to display text over the images, but the div element that contains the image must be of the same width as the image.
Do note that I had to switch the class attribute to the parent div element.
[edit] I don't like writing text in CSS so I used a data-attribute instead on the pseudo-element.
content: attr(data-caption);
#container {
position: relative;
/*width: 65%;*/
top: 0;
left: 0;
}
.imageOne {
display: inline-block;
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
.imageOne::before,
.imageTwo::before,
.imageThree::before {
content: attr(data-caption);
position: absolute;
top: 50%;
left: 0px;
right: 0px;
display: block;
transform: translateY(-50%);
padding: 0.5rem;
background-color: rgba(255,255,255,0.7);
font-family: Verdana;
text-transform: uppercase;
letter-spacing: 9px;
text-align: center;
}
<div id="container">
<div class="imageOne" data-caption="These">
<img src="https://picsum.photos/200/200">
</div>
<div class="imageTwo" data-caption="Beautiful">
<img src="https://picsum.photos/200/80">
</div>
<div class="imageThree" data-caption="Images">
<img src="https://picsum.photos/200/100">
</div>
</div>
What you can do, is to put the images as background in the targeted div elements using background-image and then positon your text in the div:
HTML
<div id="container">
<div>
text # 1
</div>
<div>
text # 2
</div>
<div>
text # 3
</div>
</div>
CSS
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
background-image:url(/image1-380x150.jpg);
background-size:contain;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
background-image:url(/image2-260x155.jpg);
background-size:contain;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
background-image:url(/image3-270x100.jpg);
background-size:contain;
}
What we need to do here is work with how position:relative and position:absolute interact. Anything which is absolute is positioned absolutely in relation to the nearest ancestor with postition:relative
Using this, create a bounding div to layer your figures. Then use the figure tag with position:absolute positioning the figcaption within that using position:absolute.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
[class^="image"] figure {
position: relative;
}
[class^="image"] figure>figcaption {
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 0.8)
}
<div id="container">
<div class="imageOne">
<figure>
<img src="https://www.fillmurray.com/g/380/150/">
<figcaption>Bill One</figcaption>
</figure>
</div>
<div class="imageTwo">
<figure>
<img src="https://www.fillmurray.com/260/155/">
<figcaption>Bill Two</figcaption>
</figure>
</div>
<div class="imageThree">
<figure>
<img src="https://www.fillmurray.com/270/100/">
<figcaption>Bill Three</figcaption>
</figure>
</div>
</div>
What I am specifically looking to do, is have the blue block and red block scale with the webpage, but also remain in place without shifting up and down like they are now.
Here is a gif demonstrating that it does what I want somewhat when scaling diagonally, but scaling either vertically or horizontally results in off positioning.
Imgur link to demo gif
Here is the HTML
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock"></center>
</div>
Here is the CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
Try this hope it's helpful for you.
CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 39vh;
left: 76%;
width: 40vw;
height: 10vw;
}
#divOnTop { z-index: 1000;
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img id="divOnTop" src="blueBlock.png" class="blueBlock"></center>
</div>
Then here it as as an answer
.blockDisplay {
background-color: #444;
overflow: hidden;
position: relative;
}
.greenBlock {
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
<div class="blockDisplay">
<center>
<img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock">
</center>
</div>
I am using the following div:-
<div style="position:absolute:z-index:150;top: 0; left: 0;width:100%;height:100%;text-align:center;background-color:black;opacity:0.4;"></div>
But its displaying nothing.
You have a typo in your inline CSS. You've written position:absolute:z-index:150; while it should be position:absolute; z-index:150;. So change that colon to a semicolon.
div {
position: absolute;
z-index: 150;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
opacity: 0.4;
}
<div></div>
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
There is structure. ad is positioned relative. And the all other divs in div.ad positioned absolute.
top-left, bottom-left, top-right, bottom-right styles looking as it should. But "inside", "left", "right", "top", and "bottom" styles not working.
left, right dont have specific heights and top, bottom dont have specific widths and inside dont have both bec div.ad's height and width expandable.
Its working on IE 7,8,9 Opera 10.50+, Chrome and Firefox
Modern browser screenshot http://i56.tinypic.com/2ia8tj5.png
IE6 Screenshot http://i54.tinypic.com/2yozvar.png
<div class="ad">
<div class="bottom"></div>
<div class="top-left"></div>
<div class="left"></div>
<div class="bottom-left"></div>
<div class="top"></div>
<div class="inside"></div>
<div class="top-right"></div>
<div class="right"></div>
<div class="bottom-right"></div>
</div>
.ad {
color: #606060;
position: relative;
padding: 12px;
min-height: 55px;
min-width: 246px;
margin: 0 0 10px 0;
}
/*Side Start*/
.top {
top: 0;
left: 11px;
right: 10px;
position: absolute;
height: 11px;
}
.right {
top: 11px;
right: 0;
bottom: 9px;
position: absolute;
width: 10px;
}
.bottom {
bottom: 0;
left: 11px;
right: 10px;
position: absolute;
height: 9px;
}
.left {
left: 0;
top: 11px;
bottom: 9px;
position: absolute;
width: 11px;
}
/*Side End*/
.inside {
position: absolute;
background-color: #f7f6f6;
top: 11px;
right: 10px;
bottom: 9px;
left: 11px;
}
/*Corners Start*/
.top-left {
top: 0;
left: 0;
position: absolute;
background-image: url('/images/DiseaseAds/border-top-left.png');
background-repeat: no-repeat;
width: 11px;
height: 11px;
}
.top-right {
right: 0;
top: 0;
position: absolute;
width: 10px;
height: 11px;
}
.bottom-left {
bottom: 0;
left: 0;
position: absolute;
width: 11px;
height: 9px;
}
.bottom-right {
bottom: 0;
right: 0;
position: absolute;
width: 10px;
height: 9px;
}
/*Corners End*/
IE6 doesn't support both left and right on an element, or both top and bottom. You can achieve the same result using a CSS expression, but it is slow and requires scripting to be enabled:
left: 11px;
width: expression((this.parentNode.offsetWidth - 11 - 10) + 'px');
You can use a "sliding doors" technique to get an image-based top or bottom border without as many elements and without script; in short the left hand-corner and top are the background of the main div and the right-hand side is the background of a small absolutely positioned div.
Replace min-height and min-width properties with height and width. IE6 doesn't support min-* and max-* properties so .ad currently doesn't have any dimensions set. This will also give .ad an "layout" what means that you'll be able to position its children with right and bottom properties correctly.