I changed some left padding in the ::placeholder pseudo-element and am experiencing some trouble getting the input text aligned with the placeholder.
The problem: The distance from the icon needs to be identical on both input text and placeholder text. The input text is flush up against the icon but the placeholder is in the correct position.
A demonstration of the problem and my code is below:
A link to my fiddle: https://jsfiddle.net/4jh52b18/1/
Source code:
CSS:
#search-overlay {
position:absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
.search-overlay__wrapper {
max-width: 752px;
margin: 0 auto;
margin-top: 160px;
}
.search-overlay__search-bar {
width: 720px;
margin: 0 auto;
font-size: 35px;
font-family: sans-serif;
color: black;
padding: 20px;
border: none;
border-bottom: 1px solid gray;
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/28403-200.png") left no-repeat;
background-size: 20px;
&::placeholder {
padding-left: 25px;
}
#media (max-width: 980px) {
width: 100%;
margin: 0 auto
}
}
.search-overlay__close {
display: inline;
vertical-align: middle;
#media (max-width: 980px;) {
position: absolute;
top: 0;
right: 0;
padding: 24px;
}
}
}
HTML:
<div id="search-overlay">
<div class="search-overlay__wrapper">
<input type="text" name="search" placeholder="Search" class="search-overlay__search-bar" value="">
<a class="search-overlay__close" href="#"> <img src="images/overlay-close.png" alt=""> </a>
</div>
</div>
In the live jsfiddle example, you'll see that the input text doesn't align with the placeholder when they need to be aligned in the same spot. What is the attribute to be able to do this? I tried adding a padding-left directly on the input but that didn't work as expected.
In your SCSS (line 23-25), modify/remove the following:
&::placeholder {
padding-left: 25px;
}
The reason why it didn't work is because & in SCSS replaces the current selector. Therefore &::placeholder translates into:
#search-overlay .search-overlay__search-bar::placeholder {...}
Most likely, you used a weaker selector and it didn't apply.
Related
I have a modal window which has an absolutely positioned black div that covers the entire viewport whenever the modal window is open. For some reason though this window doesn't cover a certain element even though it goes over it. Everything else is covered by the black screen just fine so I have no idea why this specific element doesn't.
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
The element that is not being covered:
<div class="form-container">
<form class='send-message'>
<input class='message-input' placeholder="Type a message">
</form>
</div>
And the CSS of that element:
.form-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative;
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
With small chunk of css I can only guess (css is a cascade and is hereditary)
.form-container {
position: relative; /* remove this */
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative; /* remove this */
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
If for whatever reasons this is not possible or it doesn't work - replace div elements but I don't know if this will work in every browser ...
<div class="form-container">
<form class='send-message'> <input class='message-input' placeholder="Type a message"> </form>
</div>
<div class="black-screen">black</div>
If the problem persists, use Validator w3c to find out how bad it is
... in fact, use Validator no matter what
I have the below code to make a login form but i cant get the checkbox label to be like always against the edge of the text area. I always sits to the right of the text area. I cant get it to be dependant on the div it is in. On inspection it sits outside the div.
Different things i have tried have included giving the label a left value but this messes it up when the screen size changes.
I want something like this
Here is a jsfiddle if this is easier
function showHidePassword() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
body {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container1 {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
margin: 15% 30%;
}
.signup {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
opacity: 0.96;
}
.container1 .new-body {
background: #f2f2f2;
}
.signup .new-body {
background: #f2f2f2;
}
.signup .row {
padding-top: 5px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 65%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
.col-70,
input[type=submit] {
width: 95%;
margin-top: 0;
}
}
.passw {
cursor: pointer;
width: 30px;
height: 20px;
}
.col-75 label {
padding-top: 16px;
position: absolute;
z-index: 100;
}
<form>
<div class="row">
<div class="col-25">
<label for="pass">Password</label>
</div>
<div class="col-75">
<input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>
<label for="passShowIcon" id="showHide"><input name="passShowIcon" type="checkbox" class="passw" onclick="showHidePassword();">
<span class=" "></span></label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
If you wanted to make sure the checkbox appears inside the text input. You could wrap both input fields with a relative class, and then apply absolute positioning to the checkbox.
Like so:
https://jsfiddle.net/x0o46g7a/2/
.wrapper {
position: relative;
}
.text {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: -8px;
right: -8px;
}
Something to note:
I would recommend adding some padding-right to your text input, to make sure it's text does not overlap/underlap the absolute positioned checkbox.
Based on your code, add the following rules in your css.
float: right to .col-75 instead of float left
right: 0 to .col-75 label
those will ensure that checkbox will remain inside the input field.
How can I add an image inside this search box? I'd like the image to be positioned inside and to the left of the palceholder text...
Here is the fiddle
HTML:
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search"/>
<img class="search-pic"src="img/search-icon.png"/>
</div>
</div>
</div>
thanks
Add this to your CSS which will position the image inside the input field.
.search-wrapper {
position: relative;
}
.search-wrapper img {
position: absolute;
top: 0px;
left: 0px;
}
Then you just need to use padding and change the top and left values to move everything about so it fits nicely and nothing is overlapped.
You might also need to set a width and height to the image so it's not too big for the input field.
You can solve it like this:
#mixin searchbar-font {}
#mixin searchbar-styles {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
#mixin search-bar-input {
border: none;
outline: none;
}
.search-input {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
.search-wrapper {
position: relative;
background: white;
display: flex;
align-items: center;
.search-input {
#include searchbar-font;
#include searchbar-styles;
}
.search-submit {
#include search-bar-input;
}
}
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<img class="search-pic" src="img/search-icon.png" />
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
</div>
</div>
</div>
Attached Fiddle
Technically you need to set your parent tag's position to relative, then set the image inside's position to absolute. Then you can overlay the image on your Input field. Also, one more thing to remember is you might want to set you z-index. Just in case, your image does not get behind of your input field. Make sure you are giving enough space to for your image by setting the input's padding left to somewhere around your image's width.
.search-wrapper{
.search-input{
padding-left: {image.width}px;
}
img{
position:absolute; left:0; top:0;
}
}
This should do the work.
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>a
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
we have images in our site as below
at the bottom of the image we are displaying text , we want to give background shadow for that text as below :
.fanbook-img img {
width: 100% !important;
}
img {
display: block;
}
, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
HTML -
<div id="img"><div id="text"><p>text </p></div><div>
CSS-
#img{
background-image: url('');
}
#text{
background-color: rgba(?,?,?,0.5);
padding: 10px 10px;
margin: 0 ;
}
The text and whole thing needs to be in some html element, for example the HTML
<p>text</p>
which will then get the CSS
p {
display: block;
padding: [vertical padding] [horizontal padding];
background: [background color, in rgba];
}
The display: block makes it full-width and makes it take padding. Just to give you an example of working CSS, here are so sample values:
p {
display: block;
padding: 20px 40px;
background: rgba(255,255,255,.5);
}
The background is an rgba ("red green blue alpha") value in order to give you transparency. Hex values, the other common way of writing colors for the web (they look like "#ff00ff"), don't support transparency. r, g, and b are 0 (none) to 255 (full), and a is 0 (transparent) to 1 (opaque); the example is half-opaque white (rgba(0,0,0,.5) would be half-opaque black).
Note that the p in p {...} in the CSS is targeting the <p>..</p> in the HTML - if you were wrapping the text in some other element, you'd use that in the CSS instead. Targeting a "bare" selector can be risky, because those styles will apply to every instance of it. To be safer, can also target a class or id, instead of the element name. For example
HTML
<p class="text-with-transparent-background">
text
</p>
CSS
.text-with-transparent-background {
...(styles as above)...
}
A class can be reused multiple times on a single page. An id (HTML <elementname id="yourcustomidname">...</elementname>, CSS #yourcustomidname {...styles...}) can only be used once per page
You need to make some changes in your css. See teh below css code .
.fanbook-name {
background: rgba(255, 255, 255, 0.5); /* add this */
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
.fanbook-name b {
/* bottom: 25px; */
color: #000;
font-size: 12px;
/* position: relative; */
text-transform: capitalize;
}
.fanbook-image li {
float: left;
margin-bottom: 1%; /* change this */
margin-left: 0.5%;
margin-right: 0.5%;
position: relative; /* add this */
width: 24%;
}
I hope it will helps you.
<div class="fanbook-img">
<a href="http://sb.kidsdial.com/white-marble-2-samsung-galaxy-j7-phone-case.html">
<div class="">texttext texttext texttext texttext texttext texttext</div>
<img style="width:250px;height:250px;text-align:center;" src="http://sb.kidsdial.com/media/FanBook/iQdzXDrvEU.jpg">
</a>
</div>
.fanbook-img > a {
position: relative;
width: 100%;
}
.fanbook-img div {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #ffffff;
height: auto;
left: 0;
margin: 0 auto;
padding: 10px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 99;
}
when i change resolution of my display text on my top bar is changing
Can somebody help me to fix it?
Normaly:
http://funedit.com/imgedit/soubory/small_10348459921396544905.jpg?x
With changed resolution, or with smaller borowser window:
http://funedit.com/imgedit/soubory/small_19550755301396544822.jpg
My Html:
<body>
<div class="top-panel">
<div id="center"> <a class="top-button" href="#"></a>
<span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
<span class="panel">Registruj sa zdarma nebo</span>
<input type="text">
<input type="text">
<input type="image" id="login-button" src="images/login_button.png" alt="Submit">
<div class="warningimg"></div><div class="warning"> NIGHT CUP 2014 - Sledujte priamy prenos! </div>
<div class="main">
<div class="logobg">
<a class="logo" href="#"></a>
<input class="searchinput" type="text">
<input class="searchsubmit" type="image">
<div class="news"></div>
</div>
</div>
</div>
</div>
</body>
My CSS:
body {
background-image:url('images/background.png');
background-repeat: no-repeat;
background-color:#cccccc;
background-size 100%;
margin: 0 auto;
font-family: Arial;
font-size: 13px;
position: relative;
background-position: 50% 0;
background-attachment: fixed;
}
#center {
width: 1030px;
margin: 0 auto;
/*display: inline-block; */
}
.top-panel {
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
display: block;
}
a.top-button {
background-image: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: inline-block;
margin-left: 20px;
}
.text {
color: #9c9c9c;
padding: 0px 10px;
}
.panel {
color: #6ab1ed;
padding: 0px 390px;
}
input{
vertical-align:top;
display: inline-block;
height: 21px;
width: 97px;
line-height: 25px;
text-align: center;
position: relative; left: 550px; top: 4px;
}
span{
position: absolute;
display: inline-block;
height: 35px;
line-height: 35px;
text-align: center;
}
span b{
font-weight:bold;
}
#login-button{
/*background-image: url("images/login_button.png"); uz je to v HTML*/
height: 27px;
width: 81px;
line-height: 27px;
display: inline-block;
position: relative; left: 550px; top: 4px;
}
If somebody want to see the site LIVE its here: funedit.com/andurit/new/
Thank you all for reading this:)
a quick fix would be:
.panel {
color: #6AB1ED;
line-height: 1;
padding: 0 390px;
width: 150px;
}
span {line-height: 35px} is the reason for the big line spacing; and an absence of white-space: nowrap; is why it's breaking into lines. However, the main problem is that, when resized, there simply isn't enough space for all that stuff. This is due to the massive padding left and right of the .panel. Rather than use padding to position the item, you should try to arrange your nav items through floated divs, or text-align.
Set the min-width to something like:
.panel {
color: #6ab1ed;
padding: 0px 390px;
min-width: 160px;
}
Fiddle
.panel {
color: #6AB1ED;
padding: 0 350px;
width: 200px;
}
U can decide font size for different window size.Actually problem is when u resize size of text is remaining same and hence overflowing hence u can change below font-size: parameter according to ur need.This also works for mobile screen also.
#media all and (min-width: 400px) {
.panel {
font-size: 8px;
}
}
#media all and (min-width: 600px) {
.panel {
font-size: 16px;
}
}
Or
u can use jquery resize function for whole page refer this auto resize text (font size) when resizing window?
OR
Directly use inbuilt jQuery plugin like FitText (http://fittextjs.com/). It automatically sizes text to fit the width of the parent element.
Another jQuery plugin with the same goal is BigText(http://www.zachleat.com/web/bigtext-makes-text-big/).
DEMO bigtext
<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
$('#bigtext').bigtext();
As u can see u just have to call a small function full implementation is in there website its just small snippet there are lot of use of that.