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 */
}
Related
I'm trying to put an image inside a button like this: example
The code I have so far is:
<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b> <div><img src="img/pla.png" style="width: 25px; height: 25.7px; margin-left: 220px; margin-top: -50px;"> </div></button>
You could create the icon using CSS instead. This would allow you to apply transitions / animations etc.
.buttoni {
width: 270px;
height: 46.9px;
position: relative;
transition: .2s ease-in-out;
cursor: pointer;
border: 0;
}
.buttoni:before,
.buttoni:after {
position: absolute;
content: '';
transition: .2s ease-in-out;
}
.buttoni:before {
background: #29d4a2;
border-radius: 50%;
width: 25px;
height: 25px;
right: 15px;
top: 10px;
}
.buttoni:after {
width: 0;
height: 0;
display: block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #FFF;
transform: rotate(-90deg);
right: 20px;
top: 19px;
}
.buttoni:hover {
background: #29d4a2;
}
.buttoni:hover:before {
background: blue;
}
<button class="buttoni">Earn Money Helping <b>People</b>
</button>
You can try this:
<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b><img src="img/pla.png" style="position: relative; float: right; width: 25px;"></button>
Adjust the height as needed for the image.
Are you just trying to learn HTML/CSS, I'd suggest putting the styling into a stylesheet rather than inline.
Well, if you want to do it using html
<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b><img src="img/pla.png" style="width: 25px; height: 25.7px; margin-left: 220px; margin-top: -50px;"></button>
Do not call div inside button because it is an erroneous form, since the button supports the insertion of images by default
In case you want to do it using CSS
This should do do what you want, assuming your button image is 16 by 16 pixels.
.buttoni {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.
#outer-circle {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
padding: 100px;
background: #fff;
border: 15px solid red;
color: red;
text-align: center;
font: 32px Arial, sans-serif;
}
#inner-circle {
position: absolute;
background: red;
border-radius: 50%;
height: 250px;
width: 250px;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
Here is JSFiddle:
https://jsfiddle.net/thirtydot/dQR9T/2637/
I want to put it in the slick slider classes + make it inside slider (not above/below it)
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css
Anyone have idea how to do that to look like on the picture?
In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.
Any help would be much appreciated!
set the navbar over the slider with position absolute, and float:left on the circles.
I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%. Here comes the problem, the height 100% just gets the height of the browser window so when I scroll down on the page it remains at the top. How can I set its height to full page height not browser's?
Fiddle.
HTML:
<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
<button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
<textarea rows="5">Write a short experience about yourself</textarea>
<textarea rows="5">Write what do you want in return</textarea>
<button id="send_offer">Send Offer</button>
</div>
CSS:
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: absolute;
top: 0;
left: 0;
}
#offer_help {
background-color: #eee;
border: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
display: none;
width: 400px;
height: 250px;
position: fixed;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
}
.offer_a_help textarea {
width: 90%;
padding: 2px;
font-family: Calibri;
}
.offer_a_help textarea:first-child {
margin-top: 20px;
}
.offer_a_help button {
float: right;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
background-color: #ddd;
padding: 5px;
border-radius: 3px;
}
How can I set its height to full page height not browser's?
position: absolute takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed and you will see better results.
Use position:fixed.
http://jsfiddle.net/ryJEW/2/
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}