I want to make a donation box as a div, but I want it to move with the page as you scroll without changing its position or staying in its old place (i.e. position: fixed). I gave the div positioning yet it wont move for some reason, it just gets pushed away when a page gets longer.
<head>
<style>
#donationbutton {
color: blue;
background-color: yellow;
font-weight: bold;
width: 100px;
padding:10px;
text-align: center;
border: 2px solid black;
border-radius: 25px;
position: relative;
}
</style>
</head>
<body>
<a href="something" style="text-decoration: none;">
<div id="donationbutton">
DONATE
</div>
</a>
</body>
`
you need to use position: fixed instead of position: relative if you want it to stay in place
#donationbutton {
color: blue;
background-color: yellow;
font-weight: bold;
width: 100px;
padding:10px;
text-align: center;
border: 2px solid black;
border-radius: 25px;
position: fixed; <---------
}
EXAMPLE
Just understand that position: fixed removes the element from the flow of the document so it won't behave like a normal block element
position: fixed
is what youre looking for: http://jsfiddle.net/swm53ran/69/
Related
In my project, I have a button in the body of my div. When I resize the window, the button mysteriously disappears. I have searched for other solutions, however none have worked for me.
Here is my code:
.section-1 {
width: 100%;
height: 100vh;
position: relative;
background: url("https://udodjfjfjfoeoeo.com.dekffrfr") no-repeat center center/cover;
}
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
left: -680px;
}
<div class="section-1">
<div class="overlay-1"></div>
<button class="main-signup-btn">Sign up now, uue</button>
</div>
Anybody know the issue? Thank you.
In your css .main-signup-btn you absolutely positioned the button to -680px which sends the button offscreen. remove the - and use only 680px and your button will appear somewhere near the center or a little to the right depending on your screen width. you can completely remove the left: -680px; completely and see i positioned normal at the beginning of the div / screen. You can try this
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
/* left: -680px; */ /* This line is sending the button offscreen to the left, change the value or remove completely */
}
I'd like to have text appear on the top of a div that has a border that also has a white background so you don't see the border line going through the text. I've tried adding z-index to the text but I believe since position: relative it doesn't matter. I'm also open to other suggestions as to how to accomplish and would prefer not to use a fieldset and legend.
Fiddle
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You have the right idea about setting a z-index. However, note that in order for a z-index to apply, you need to specify a position property other than the default of static. That will have your #why element sit on top. From here, it's just a matter of giving it a fixed width (along with margin: 0 auto for alignment) so that the rest of the border gets shown.
This can be seen in the following:
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
position: relative;
z-index: 1000;
width: 250px;
margin: 0 auto;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
Note that the width property denotes just how much of the border is shown - feel free to adapt to suit! If you want it to perfectly wrap around the text, I'd recommend using a <span> tag instead of a <div>.
Actually, you don't need to use absolute or z index something.
The div#why is block, you dont want to make it block, instead make it inline-block so it consume it's normal width, not 100%.
The problem now is how you can center the div#why, i used position:relative, and transformX.
Cheers!
#large-div-text {
padding: 20px;
border: 1px solid rgba(64,189,233,0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
display: inline-block;
transform: translateX(-50%);
left: 50%;
position: relative;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You must use a position attribute for z-index to work. And you can use a span element to set the background of the text. The span is an inline element ulike div, and will change its width depending on the content.
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
z-index: 0;
}
#why {
text-align: center;
z-index: 1000;
position: relative;
}
.whitebg {
background-color: white;
padding: 0.5em;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
You can simply add some margin
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
margin: 10px;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
This question has been asked here before, yes. But none of the answers seem to work for me and what I am trying to do.
I need a div to display across the entire browser. So far, I have this.
HTML
<body>
<div id="header">My Website</div>
<div id="games">Video Games</div>
</body>
CSS
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
So, top:0, left:0, and position:absolute are what get my div to span across the entire page. What's the problem?
My #games div is hidden behind my #header div. I am relatively new to html and css, and when I started learning divs, they would display right next to each other or right below and on top one another.
When I take out position:absolute, the #games div drops below the #header div, but then the header div only goes to the edge of the page's left and right side, and the top. I want it to go all the way to the edge, with no space in between the div and the browser sides, AND have my #games div naturally display underneath.
Note that I know that I can adjust the #games div's top-margin, but I wanted to know if there was a way to have it naturally sit underneath the #header div.
What can I do to make it so that my #games div is not naturally hidden behind the #header div, and sits just below?
My suggestion is to do it like this DEMO:
body {
margin: 0;
}
#header {
height: 80px;
background-color: black;
color: white;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
<body>
<div id="main_wrap">
<div id="header">My Website</div>
<div id="games">Video Games</div>
</div>
</body>
CSS
body{
margin: 0px;
padding: 0px;
}
#main_wrap {
background-color: gray;
width: 100%;
}
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
position: absolute; This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page.
so it means in your CSS you not really need to use position:absolute because by default when you will put div in html document it will start from top, left.
Note: you should think about using position:absolute in worst case scenario and if still need to use please make sure parent div should be position:relative.
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
/* top: 0;
left: 0;
position: absolute;*/
}
Here's an image showing what I'm trying to pull off.
So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).
I need something that is fluid in relation to the text itself...the overall width can't be fixed.
This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
You can do it in different ways.
One way would be setting border around the text, after keeping text inside header tags or div with font settings.
Refer the suggestions in the following link:
Add centered text to the middle of a <hr/>-like line
Try this: Demo
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
For headings you need to define container's width
Your html code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
your css code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
jsFiddle
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>