#sidebar input[type=text], input[type=password] {
margin-left: 13px;
height: 22px;
width: 129px;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #d9e4ea;
font-size: 13px;
position: relative;
z-index: 2;
}
input[type=submit] {
margin: 0;
width: 101px;
height: 16px;
background: url(images/img06.png) no-repeat left top;
border: none;
position: absolute;
z-index: 1;
cursor:pointer;
}
I have two input types and I want the submit button to be behind the text input and to be centered on the y axis respectively to the first object (text input). I can't manage to center it correctly. I can do it by adjusting margins but then I get different result in every browser and so it's not exactly in the center.
http://jsfiddle.net/7hbq5/10/
To vertically center an absolutely positioned element with known height inside it's parent container is an easy task and guaranteed to work cross browser:
.centeredVertically {
position: absolute;
height: 16px;
top: 50%; /* push down by 50% of the height of the container */
margin-top: -8px; /* bring it back up by half of it's height */
}
Make sure you add position: relative to your form so that it becomes the context for your submit button. See the fiddle:
http://jsfiddle.net/7hbq5/11/
I think you want align the divs on y axis. If you have width of the both input boxes predetermined, just use position absolute for both and give left and top on both the divs.
See the fiddle
http://jsfiddle.net/7hbq5/12/
input[type=password] {
height: 22px;
width: 129px;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(0,0,0,0.4);
font-size: 13px;
position: absolute;
z-index: 2;
top:0;
left:0;
}
input[type=submit] {
position: absolute;
left:14px;
top:3px;
width: 101px;
height: 16px;
border: none;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background-color: #ff672a;
position: absolute;
z-index: 1;
cursor:pointer;
}
put position relative on the parent div to start a new BFC. (the children are absolute wrt the div)
Related
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;
}
Below is my solution for a pseudo element to ignore the padding, but it feels kind of "hacky" because I used negative margin on the pseudo element.
Is this solution is OK?
I also tried to use left: 0; top: 0;, but then I got my pseudo element positioned relative to the body of the page, not the element. Why?
CSS:
.block-header {
background-color: #3A658B;
height: 30px;
width: 100%;
line-height: 30px;
color: white;
font-size: 18px;
border-radius: 3px;
padding-left: 10px;
}
.block-header::before {
content: '';
position: absolute;
margin-left: -10px;
height: 30px;
width: 10px;
background-color: #1E3552;
border-radius: 3px 0px 0px 3px;
}
Using left: 0 is fine. That's the right method.
Except you haven't specified position: relative on the .block-header element.
Consider this:
A pseudo-element is considered a child of its DOM element.
An absolutely-positioned element is positioned relative to its nearest positioned ancestor.
When there is no positioned ancestor, the abspos element is positioned relative to the initial container (i.e., the HTML element / viewport).
.block-header {
background-color: #3A658B;
height: 30px;
line-height: 30px;
color: white;
font-size: 18px;
border-radius: 3px;
padding-left: 10px;
position: relative; /* NEW */
}
.block-header::before {
left: 0; /* NEW */
content: '';
position: absolute;
height: 30px;
width: 10px;
background-color: #1E3552;
border-radius: 3px 0px 0px 3px;
}
<div class="block-header">test</div>
See MDN for more information.
My problem is that I cannot horizontally center a triangle pointer.
Well, I can center the pointer for some window sizes, but when I shrink or extend the window it places it in the wrong place again.
What am I missing?
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: 48%;
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
You have your arrow centered with left:48%. This positions the arrow near the center of the container based on the arrow element's left edge.
In other words, assume you used left:50% (which is the correct way to go), this doesn't center the arrow element in the container. It actually centers the left edge of the element in the container.
In the image below a marker is centered on the page using text-align:center.
For comparison, see your arrow centered with left:50%.
The element is positioned center-right. This misalignment becomes more noticeable as the window gets smaller.
As a result, it is common to see centered, absolutely positioned elements use the transform property:
.triangle {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
The transform rule tells the triangle to shift itself back by 50% of its width. This makes it perfectly centered on the line. Now it emulates text-align:center.
In translate(-50%,0), the first value targets the x-axis (horizontal), the other applies to the y-axis. An equivalent rule would be transform:translateX(-50%) (there's also transform:translateY()).
As an aside, here's how to center an element both horizontally and
vertically using this method:
.triangle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Note: If you were using right: 50% or bottom: 50%, the respective translate values would be 50% (not negative).
In this particular question, however, an issue arises because transform:rotate(45deg) is also in the declaration block. Adding a second transform means the first one is ignored (per the cascade).
So, as a solution, try this:
.container::before {
left: 50%;
transform: translate(-50%,0) rotate(45deg);
}
By chaining functions together, multiple functions can be applied.
Just note that order matters. If translate and rotate were reversed, the triangle would first rotate 45 degrees and then shift -50% along the rotated axis, breaking the layout. So make sure that translate goes first. (Thanks #Oriol for pointing this out in the comments.)
Here's the full code:
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container::before {
top: -33px;
left: 50%;
transform: translate(-50%,0) rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
jsFiddle
You could potentially use the new CSS3 calc() function which allows you to do arithmetic to figure out the center point.
To get your center point, the calculation will have to be:
50% - (56px / 2)
So this ends up being
50% - 28px
Putting this into the calc() function should then figure it out within the browser and position it perfectly in the center.
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: calc(50% - 28px);
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}
<div class="container container-decor">great distance</div>
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
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle