I've created an <a> element (links to Javascript) but I'm designing it as a button.
×
The CSS:
#closebtn {
border-radius: 100%;
position: absolute;
font-size: 50px;
text-align: center;
width: 48px;
height: 48px;
top: 100px;
right: 45px;
padding: 5px;
}
#closebtn:hover {
background-color: #5c564f;
color: #FFF6EA;
padding: 3px;
border: 2px solid #FFF6EA;
}
Right now I've got it centered horizontally with text-align, but it's still stuck to the top of the circle. Any way to get the X to be centered in the dead middle of the circular "button"?
I've tried justify-element, but I guess what's stumping me is that I'm ultimately working with <a> and not <button> or <div>. There's probably a simple solution - I'm just not seeing it.
You may set it's display as flex, and then set align-items and justify-content to center. This will make the X in center.
However as stated by #konekoya, the alignment is affected by the font size, so the X will not be like 100% in the dead middle (except if you adjust the font size).
#closebtn {
display: flex;
border-radius: 100%;
position: absolute;
font-size: 50px;
align-items: center;
justify-content:center;
width: 48px;
height: 48px;
top: 100px;
right: 45px;
padding: 5px;
text-decoration: none;
}
#closebtn:hover {
background-color: #5c564f;
color: #FFF6EA;
padding: 3px;
border: 2px solid #FFF6EA;
}
×
Related
When the screen is full screen the elements are ok, but when i make the screen smaller, or the content of the div is bigger than the div itself they just go out of it. How do I make the div the size of the whole scrollable window, or maybe make the div fit its content without spilling.
.main {
vertical-align: top;
position: absolute;
background: white;
border-radius: 25px;
padding: 20px;
top: 50%;
left: 50%;
height: 80vh;
opacity: 70%;
margin: auto;
width: 90%;
border: 1px solid black;
padding: 10px;
transform: translate(-50%, -45%);
}
.main .year2018 .allMembers {
margin-top: 40px;
margin-bottom: 40px;
margin-left: 50px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
position: relative;
top: -40px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<div class="search-pos">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.
This what happens:
Image / Imgur
As you can witness the button doesn't stay inside the bar itself like it should.
Like Dejan.S I did not get what is the problem.
Be carreful you put a top in a relative class .search-pos, it doesnt work !
I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class
https://codepen.io/auxb/pen/WNQjjyp?editors=1100
(I replace the font icon by a img but is the same)
Tell me if this code satisfied you !
For what i understand you need to change your css a little bit.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
height:40px;
position: relative;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
display:flex;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
Let me know, if this solution helps you.
Try putting the code that handles the hover after the specified elements:
.search-box:hover>.search-txt
should come after
.search-txt
also
.search-box:hover>.search-btn
should come after
.search-btn
Hope that helps in ensuring the hover effects work as expected.
Also there is no CSS property such as float: center;
I need to make html/css/javascript website responsive.
I read a lot about using percentages instead of pixels. But the thing is, I already used 250+ px's in my css. Is there any way to fix this without changing them all into percentages and using the #media query?
Some examples of my code:
.main-image {
height: 100px;
}
footer {
position: fixed;
height: 50px;
}
.dropdown-content {
list-style-type: upper-roman;
margin: 0;
padding: 40px;
}
nav a.admin_page {
float: right;
font-size: 1.5em;
padding: 14px 30px;
border: none;
}
.text {
color: #f2f2f2;
font-size: 20px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 50%;
margin-left: 300px;
text-align: center;
background-color: #80af2b;
}
As you can see I used a lot of px's for different. Is there any easy way to fix this?
I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?
Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>
I have to develop a webpage with three div elements with varying widths. I am using the below snippet to do so .
page1.html
<div id="wrapper">
<div id="left_pane>Left Pane</div>
<div id="main_pane">Main Pane</div>
<div id="right_pane>Right Pane</div>
</div>
page1.css
#wrapper{
font-size: 20px;
letter-spacing: 0px;
white-space: nowrap;
line-height: 12px;
/*overflow: hidden;*/
width: 100%;
}
#left_pane{
width: 10%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#main_pane{
width: 70%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#right_pane{
width: 20%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
The problem is that while this works fine, in the main pane I have source of dynamic content and when it increases I want other divs to increase there size as well, but none of them are increasing with increase in content. Can anyone please help me with the same ?
( I also tried using display:table-cell but for that I cannot specify the separate width, as I want each div to be of a specified width )
Thanks and Regards
Just remove the white-space: nowrap; and add word-wrap: break-word;
#wrapper{
font-size: 20px;
letter-spacing: 0px;
line-height: 18px;
width: 100%;
word-wrap: break-word;
}
Check this Demo