Is there any way that I could position everything such that the items (such as text/pictures) can overlay?
For example:
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image</div>
<div class="class2">text</div>
<div class="class3">text</div>
</body>
I want the class 2 text and class 3 to be displayed over the image. However, in this format, they just appear below the image.
I tried putting the class 2 and class 3 inside of class 1
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</body>
However, I found this very troublesome. Everytime I add a new thing into class 1, the whole page will move.
Even though position: relative; and position: absolute; solves this it won't work if I try to display an element over the whole page itself (outside of class 1 - goes to the bottom of the page). I am trying to have something like this https://www.w3schools.com/howto/howto_js_alert.asp appear over my whole page.
Tried setting the with position: relative; and the alert message box as 'position: absolute;` but this didn't do anything. Could someone please give some suggestions? Thanks a lot!
I'm not sure to understand what you need but maybe your need is something like that :
.class1 {
position: relative;
background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
background-size: contain;
background-repeat: no-repeat; height: 100px;
width: 100px;
}
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">
<div class="class2">text2</div>
<div class="class3">text3</div>
</div>
</body>
Yeah , like this.
HTML
<div class="container">
<div class="class1">image</div> //use an img tag here
<div class="text-container">
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
color: white;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You need to set you content at bottom of the page the try the solution, it is for bottom right poistion
.class1{
position: absolute;
right: 0;
bottom: 0;
}
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
Related
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I am using a wordpress and working with a theme. The theme host does not let me insert html directly into the files or let me use ftp. The only way I can do this is by using CSS. I am trying to make it so that a slideshow is at the very top of the page. The theme by default makes the website logo appear at the top which i don't want.
Here is the html
<div id="page" class="site">
<header id="masthead" class="site-header" role="banner">
</header>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<article id="post-2" class="post-2">
<header class="entry-header">
<h1>hello</h1>
</header>
<div class="entry-content">
<div class="metaslider">
</div>
</div>
</article>
</div>
</div>
</div>
I need to make it so that the div with class metaslider comes before everything else in the page. More specifically, metaslider comes before the masthead header element. I tried using position: realtive; top: -500px; but it just overlaps the logo which is not what i want, i want to push the masthead down and put metaslider on top of it.
Try this
#page {
position: absolute;
top: 50px;
}
</style>
Let me know if this does work
I used the following style information and the metaslider div was moved to the top for me.
.entry-header {
position: relative;
margin-top: 220px;
}
.metaslider {
background: rebeccapurple;
height: 200px;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
Please note that since I made the metaslider absolute, I had to give it a width and height to compensate for empty content and the case may very well vary for you.
To test for the rest of the content I replicated the entry-header as entry-body and all seems to be aligned well so far.
Here is my updated HTML and CSS:
<style>
.entry-header {
position: relative;
margin-top: 220px;
}
.metaslider {
background: rebeccapurple;
height: 200px;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
</style>
<div id="page" class="site">
<header id="masthead" class="site-header" role="banner">
</header>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<article id="post-2" class="post-2">
<header class="entry-header">
<h1>hello</h1>
</header>
<div class="entry-content">
<div class="metaslider">
</div>
<header class="entry-body">
<h1>hi</h1>
</header>
</div>
</article>
</div>
</div>
</div>
I have a button inside the header menu , That header contains the logo & social media icons & that button.
I want to make that button fixed , So that when I scroll it's always at the top of the screen.
Let's say I have the following html code:
.menu{background:#ddd}
.logo,
.social-media,
.sticky-container{
display:inline-block;
width:30%
}
.logo{background:#000}
.social-media{background:#080}
.sticky-container{background:#333}
.logo,
.sticky-container{color:#fff}
<div class="main_container">
<div class="wrapper">
<div class="menu">
<div class="logo">Logo</div>
<div class="social-media">
<div class="facebook">Facebook</div>
<div class="youtube">Youtube</div>
<div class="twitter">Twitter</div>
</div>
<div class="sticky-container">
<a class="sticky-element">Button</a>
</div>
</div>
</div>
</div>
I want the button with class sticky-element that is inside sticky-container to be sticky.
Set position: fixed; for your sticky-container class.
Here's the jsfiddle: https://jsfiddle.net/30shhy3L/2/
Edit:
From comments, as you have mentioned your real site at https://logosperformance.com, just change the css of [data-css="tve-u-163a8211f58"] element as following:
[data-css="tve-u-163a8211f58"] {
float: right;
z-index: 3;
position: fixed;
margin-top: -2px !important;
margin-bottom: 0px !important;
}
I'm using bootstrap and right now I have a banner image below my navbar with a title header over it. It works fine but now I'm not sure how to get content below my image. For example, the content div is overlapping the image and not going below it like a block element.
Do I need to use an img tag instead of using the css background property?
HTML
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div class="img-banner">
</div>
<div class="container">
<h1>TITLE</h1>
<div class="content">
<p>new section/block of text</p>
</div>
</div>
CSS
.img-banner {
height: 800px;
background: url('../img/background.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
position: absolute;
width: 100%;
top: 0;
z-index: -1;
}
Try position:relative instead of position:absolute for the img-banner. I think this is the fix.
HTML:
<div class="shortList" id="unselShortList">
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
CSS:
#unselShortList {
background-color: red;
overflow: scroll;
height: 150px;
position: relative;
}
#submit {
position: absolute;
}
jsfiddle: http://jsfiddle.net/iyogesh/4sxNg/
'OK' Hyperlink is coming inside div.
How can I move 'OK' link out of scrolled div and show it after div using CSS without changing html structure?
Check this fiddle
add a parent element
<div id="unselShortList">
<div class="shortList" >
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
</div>
CSS
#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}
Simple answer:
You CANT
(unfortunately)
Because you've specified overflow on the parent container, you cannot position child content outside of its limits. You can see the effect of this here (without) vs here (with)
In this case you will need to implement a change in your HTML, or look at other styling options- such as overlaying the button in the top right of the div or using javascript to reposition/add an element into the DOM
try:
#submit {
position: fixed;
}