Having difficulties centering input and text with borders - html

I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}

your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input

Related

CSS: Skewed button using pseudo position: absolute

I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?

How to make a line wrap in CSS?

I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears. I'm using ::after pseudo-element for it.
Here is my HTML:
Gigs
Here is my CSS:
a[data-tool-tip] {
position: relative;
color: #ffffff;
}
a[data-tool-tip]::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: .5em;
border-radius: .5em;
bottom: 100%;
left: 0;
}
The result coming out has a lot of line breaks. It is showing as below:
Products
are
called
as Gigs
on Fiverr
When I use white-space: no-wrap; then it whole becomes one line.
I WANT IT TO BE IN 2 LINES.
What Should I Do?
Thank You.
I'm seeing just one posibility is to had a fixed width to the ::after element like this :
a[data-tool-tip] {
position: relative;
color: black;
}
a[data-tool-tip]:hover::after {
position: absolute;
width: 80px;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: 0.5em;
border-radius: 0.5em;
bottom: 100%;
left: 0;
}
I put the width to 80px to be on 2 lines
But I don't unterstand why thewhite-space: nowrap haven't work on your side (it will be one line with it unless you add a max-width size on it and use white-space: pre-wrap)
You will either have to set the width of the tooltip-elements or use a different approach.
a[data-tool-tip] {
position: relative;
top: 2em;
font-size: 200%;
}
a[data-tool-tip]:hover::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: 'Playfair Display';
padding: 1em;
font-size: .5em;
border-radius: .5em;
min-width: 10em;
bottom: 100%;
left: 0;
}
Gigs

How do I center a button within it's div class

I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}

Create Button with toggle and text with a single element

I'm trying to create a button out of a single html element. The button needs to have a toggle slider and the text needs to be aligned vertically and horizontally. So I thought I can make use of :before element to help me make that happen. Here is what I have tried:
div {
width: 140px;
height: 40px;
background-color: #B3B3B3;
color: #FFF;
float: left;
clear: both;
border-radius: 5px;
font-size: 12px;
}
div:before {
content: '';
display: block;
width: 20px;
height: 36px;
background-color: #4D4D4D;
position: relative;
left: 2px;
top: 2px;
float: left;
border-radius: 5px;
}
<div>Text Value</div>
I have 2 problems with the above code:
I can't position the text how I want and I have tried using text-align and position to move it around.
I am using a float, which means that it will affect behavior of other elements around it, and I really don't want that.
Is what I want possible with a single element?
Here is the JS Fiddle: https://jsfiddle.net/m3q5Lcjy/
EDIT: The centered text should not be centered on the whole element, but on the light gray area.
This is how I would do this:
Array.from(document.querySelectorAll('.toggler')).forEach((item) => {
item.addEventListener('click', e => {
item.classList.toggle('active');
})
});
.toggler {
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
padding-left: 24px;
width: 140px;
min-height: 40px;
background-color: #B3B3B3;
color: #FFF;
border-radius: 5px;
font-size: 12px;
text-align: center;
cursor: pointer;
transition: padding .25s ease;
}
.toggler.active {
padding: 0 24px 0 0;
}
.toggler:before {
content: '';
display: block;
width: 20px;
background-color: #4D4D4D;
position: absolute;
bottom: 2px;
left: 2px;
top: 2px;
border-radius: 5px;
/* transition to make it look smoother */
transition: left .4s ease;
z-index: 1;
}
.toggler.active:before {
left: calc(100% - 22px);
}
<div class="toggler">Text Value</div>
<hr />
<div class="toggler active">Text Value realllllyy long</div>
<hr />
<div class="toggler">Text Value really far too long for this tiny, tiny, ohhh so tiny button. I recommend using shorter text though, but it won't break not even if you have like 10 or more lines.</div>
If anything about this implementation is unclear, feel free to ask.
Use flexbox to center your text vertically and horizontally. Then use absolute positioning on your pseudo element. Make sure parent element has relative positioning applied so absolute positioned pseudo stays within the parent.
div {
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
padding-left: 24px; /* 20px for :before width, 4px for :before offset */
width: 140px;
height: 40px;
background-color: #B3B3B3;
color: #FFF;
border-radius: 5px;
font-size: 12px;
}
div:before {
content: '';
display: block;
width: 20px;
height: 36px;
background-color: #4D4D4D;
position: absolute;
left: 2px;
top: 2px;
border-radius: 5px;
}
<div>Text Value</div>
You could place the text in a paragraph.
<div class="thediv">
<p class="theText">
enter text here
</p>
</div>
.thediv{
Your own style.
}
.theText{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
I don't see why you would want it be in one element.
If you do want that, you should give the div a padding.
div{
background-color: #B3B3B3;
color: #FFF;
float: left;
border-radius: 5px;
font-size: 12px;
padding: 20px 70px;
}

border-image remove the background color and center of each side

I want to remove the background color of border-image and position the border-image to center of each side of my div. Any idea how I can do this?
Here is my JSFiddle.net
HTML:
<div>WELCOME</div>
CSS:
div {
background-color: #99FF00;
text-align:center;
font-family: arial;
color: #454545;
font-size: 20px;
width: 200px;
height: 100px;
line-height:100px;
margin: 50px 50px;
outline: 4px solid #000000;
border: 30px solid #FF0000;
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
}
I want to achieve this:
Any help would be very much appreciated. Thanks!
Here is a working fiddle: http://jsfiddle.net/chajadan/f1pnws6v/8/
The following lines were getting in the way of the border-color change, if you remove them you'll see the border as you wanted:
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
Then I refactored the code to display the same images with divs. I used this reference to vertically align the side images: How to vertically align an image inside div
There is quite possible extraneous css and/or elements present. I didn't clean it down.
I've played around a bit and come up with this FIDDLE.
If you look at the border-images definitions, the key is that the images are 'corner' images, and you can just repeat them over the middle section.
So in the fiddle, I just put the green text in the middle and absolutely positioned some ASCII diamonds. - not very elegant.
CSS
.holder {
outline: 6px solid gray;
border: 1px solid gray;
width: 200px;
height: 100px;
position: relative;
}
.diamond1 {
font-size: 40px;
position: absolute;
top: -12px;
left: 50%;
}
.diamond2 {
font-size: 40px;
position: absolute;
bottom: -10px;
left: 50%;
}
.diamond3 {
font-size: 40px;
position: absolute;
top: 20px;
left: -1px;
}
.diamond4 {
font-size: 40px;
position: absolute;
top: 20px;
right: -1px;
}
.textspan {
display: block;
border: 1px solid green;
background-color: green;
margin: 25px auto;
color: white;
height: 48px;
width: 160px;
text-align: center;
line-height: 48px;
}
You can try placing a div inside another div. The inner div contains the green-colored background. You can also use table
Instead of having the images as border-images, why not have them background-images on some divs that are absolutely positioned?
Below is the CSS explaining the divs with background images of diamonds that are absolutely positioned.
div.greenBox {
background-color: #fff;
color: #454545;
font-family: arial;
font-size: 20px;
height: 160px;
line-height: 100px;
margin: 50px;
outline: 4px solid #000000;
position: relative;
text-align: center;
width: 280px;
}
div.whiteBox {
background-color: #99ff00;
display: block;
height: 90px;
position: absolute;
right: 38px;
top: 30px;
width: 200px;
}
div.diamond1, div.diamond2, div.diamond3, div.diamond4 {
background:url('http://i58.tinypic.com/2chuwrd_th.png') no-repeat;
display:block;
width:30px;
height:30px;
}
.diamond1 {
position: absolute;
right: 46%;
top: 0;
}
.diamond2 {
position: absolute;
top: 40%;
}
.diamond3 {
bottom: 0;
position: absolute;
right: 46%;
}
.diamond4 {
position: absolute;
right: 0;
top: 44%;
}
and here is the html markup
<div class="greenBox">
<div class="diamond1"></div><div class="diamond2"></div>
<div class="whiteBox">
WELCOME
</div>
<div class="diamond3"></div><div class="diamond4"></div>
</div>