I am trying to have it so users can log in into my website using fb etc. For some reason, the text gets hidden behind the buttons in my existing code. I am not sure what's wrong since the text used to show up where it needed to be up until I changed the background of the buttons and added social icons to them. Could you please help?
Here is the relevant code:
HTML:
<a class="alt-sign-in facebook">Login with facebook</a>
<a class="alt-sign-in google">Login with google</a>
<a class="alt-sign-in twitter">Login with twitter</a>
<form>
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" name="submit">
</form>
<button id="computer-button">Start</button>
</div>
CSS:
#import url('http://weloveiconfonts.com/api/?family=entypo');
#import url('http://weloveiconfonts.com/api/?family=zocial');
html, body {
height: 100%;
background: #ddd;
}
.alt-sign-in {
position: relative;
display:block;
height: 40px;
width: 300px;
margin: 10px 0px auto auto;
padding: 5px;
font: 700 16px/40px'Quattrocento Sans', sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align:center;
line-height: 40px;
color: #555;
border-radius: 2px;
background: linear-gradient(to bottom, white 40%, lightgrey);
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
cursor: pointer;
box-sizing: border-box;
}
.alt-sign-in:before {
color:white;
position:relative;
top: -5px;
left: -5px;
display:block;
box-sizing: border-box;
height: 40px;
width: 45px;
font: 20px/40px entypo;
text-align: center;
color: #fff;
border-radius: 2px 0 0 2px;
}
http://jsfiddle.net/prettysweet/Dv9rC/24/
Thank you so much!
The code you have posted seems to be an incomplete, or older version.
But by judging from your jsfiddle link, I suggest to change the following;
.alt-sign-in {
/* removed: box-sizing: border-box; */
}
.alt-sign-in:before {
position:absolute;
top: 5px;
left: 5px;
}
see http://jsfiddle.net/Dv9rC/27/
I think you have floating element problem. If you add these lines to your css code, it'll be OK.
.alt-sign-in.facebook:before {
...
float: left;
}
.alt-sign-in.google:before {
...
float: left;
}
.alt-sign-in.twitter:before {
...
float: left;
}
Bonus Edit: After adding all of these codes, just add form tag to your CSS document for top margin.
form{
margin-top:15px;
}
Related
I do not have access to the HTML file, I can only use CSS.
I have:
input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}
<input type="submit" value="Register" id="btn" class="submit-btn">
I want to change the value of this HTML button using CSS.
I found some code online, but it didn't seem to work.
I tried:
input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}
input.submit-btn{
text-indent: 200%;
color: transparent;
}
input.submit-btn::after{
content: "Submit";
text-indent: 0;
}
<input type="submit" value="Register" id="btn" class="submit-btn">
I have been able to successfully not display the word REGISTER. However, I haven't been able to display the word SUBMIT inside the button.
All I want is to replace the text/value of this button.
Please let me know how to do this using CSS only
Input tags do not support ::after and ::before pseudo element
try this code
.submit-container {
position: relative;
display: inline-block;
}
.submit-btn {
background-color: black;
color: transparent;
border: none;
padding: 15px 35px;
border-radius: 5px;
}
.submit-container::before {
content: 'SUBMIT';
display: block;
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="submit-container">
<input type="submit" value="Register" id="btn" class="submit-btn">
</div>
Just remove this code, it will work
input.submit-btn {
text-indent: 200%;
color: transparent;
}
I have the following HTML:
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img
class="Section__item__image"
width="120px"
src="/static/images/test.jpeg"
>
<i class="Section__item__icon icon-right-nav-workflow"/>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
And this is my style using scss:
.Section {
&__item{
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
&:hover {
background-color: #E3F4FE;
cursor: pointer;
}
&__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
&__image {
padding-top: 5px;
float: left;
}
&__icon {
float: right;
font-size: 40px;
}
&__text {
float: left;
}
}
}
The result is the following:
And what I need to get is the following:
I need the text to be under the image and where you see a "red" line in the right the text can't go further, if text is bigger then wrap text.
Also if you see right icon has to be positioned exactly on the same top level as the image.
Any clue?
There's loads of ways to do this (flexbox, grid, tables, absolute positioning). The oldschool way would be a clearfix but really you should avoid floats altogether. The simplest solution to what you have so far is to remove ALL of the float's; make the div that holds the image and the icon position:relative; and set the icon to position:absolute; top:0; right:0;.
.Section__item {
border: #EEF3F7 solid 1px;
padding: 10px;
min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
width:400px;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__imagewrap {
position: relative;
}
.Section__item__image {
margin-top: 5px;
}
.Section__item__icon {
font-size: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
}
.Section__item__text {}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div class="Section__item__imagewrap">
<img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
<i class="Section__item__icon icon-right-nav-workflow">i</i>
</div>
<div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>
Uh... don't use float? Or rather, only use float on the one thing you want to break out of normal flow, which is the icon.
PS: <i> is not an autoclosing tag, so writing <i /> is incorrect even if browsers will likely ignore your mistake. Also, putting padding on an image doesn't seem right, I switched to margin-top in this code.
.Section__item {
display: inline-block; /* so it doesn't take full width of the snippet */
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__image {
margin-top: 5px;
vertical-align: top;
}
.Section__item__icon {
font-size: 40px;
float: right;
}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img class="Section__item__image" width="120" height="120">
<i class="Section__item__icon icon-right-nav-workflow">Icon</i>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
I have 2 words in a circular submit button that I want stacked on top of each other instead of side by side. I tried "word-wrap:break-word;", but this coding is width and height contingent.
I'd rather not create an image for the submit button as I'm sure there is a way to achieve this with CSS. Thank you for any help!
It's a Mail Chimp sign up form
HTML
<div class="clear"><input type="submit" value="Get It!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
CSS
.button {
font-family: 'Lobster', Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 1px 1px #000;
font-size: 1.8em;
letter-spacing: .03em;
color: #fff;
background-color: #f8a8a1;
border: 2px solid #f8a8a1;
padding: 0em 0.3em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 50px;
display: inline-block;
margin: 0;
height:74px;
width:74px;
word-wrap:break-word;
position: absolute;
margin: -1em 0em;
line-height:1em;
}
Setting word-spacing equal to the width of the container will do this for you.
button {
font-size: 1em;
width: 200px;
word-spacing: 200px;
}
http://jsfiddle.net/x2y4m78k/
You can use a br tag in it: JS Fiddle
<button>Stack<br>words</button>
HTML
<button class="myButton">
<p class="word-one">TopWord</p>
<p class="word-two">BottomWord</p>
</button>
CSS
.myButton{
position:relative;
width:50px; /*whatever dimensions you want*/
height:50px;
}
.word-one{
position:absolute;
top:0px;
left:10px;
}
.word-two{
position:absolute;
top:20px;
left:10px;
}
If you need to use CSS over HTML, and do not want it to be width & height contingent, the only way that I can think of doing this is using the :before and :after pseudo elements.
One thing I am not too sure about is how to center those elements, so you will have to play around a bit
#submit {
height: 50px;
width: 250px;
position: relative;
}
#submit:before {
content: "Top Row";
position: absolute;
top: 0;
left: 0;
}
#submit:after {
content: "Bottom Row";
position: absolute;
bottom: 0;
left: 0;
}
<button id="submit"></button>
I do adaptive search form. Search field should take 100% width of the parent div (the width of the parent div will change depending on the resolution of the device). The button "Search" should always be at the right of the field, do not shift down.
A working version.
But there's a problem: The text "Search now" (placeholder) too close to the edge of the field and I can't move it to the right. In other examples, it moves by the set value for the field padding. But if I change the padding — field itself is shifted to the left, but I only need to move the text!
#searchfield {
padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}
Try adding text-align:center for id searchfield or add box-sizing: border-box; declaration.
try with any one of below examples, it will move the placeholder to right as you expected, these will support Ie lower versions too.
Example1 (using box-sizing:border-box declaration)
#searchfield {
padding: 10px 0 13px 0px;
box-sizing: border-box;
}
Example2 (using text-align:center declaration)
#searchfield {
text-align:center;
}
You can still use padding to move the placeholder text, with the flavor of box-sizing: border-box; declaration.
box-sizing: border-box; make user-agents include padding/border to the width/height of the box.
#searchfield {
width: 100%;
border: 1px solid #ccc;
padding: 10px 0 13px 10px;
box-sizing: border-box;
/* other declarations... */
}
Vendor prefixes omitted due to brevity.
#sidebar {
width: 20%;
background: #ccc;
height: 300px;
padding: 20px;
}
#search {
width: 100%;
height: 50px;
position: relative;}
#searchfield {
width: 100%;
border: 1px solid #ccc;
margin: 0;
padding: 12px 0 13px 10px;
box-sizing: border-box;
position: absolute;
right: 0;
}
#searchsubmit {
width: 60px;
height: 41px;
background: red 0 0;
border: 0;
overflow: hidden;
cursor: pointer;
right: 0;
position: absolute;
}
<html>
<body>
<div id="sidebar">
<div id="search">
<form id="searchform" method="get" action="/index.php" _lpchecked="1">
<input type="text" name="s" id="searchfield" placeholder="Search now">
<input type="submit" id="searchsubmit" value="Search">
</form>
</div>
</div>
</body>
</html>
It's worth mentioning that border-box is supported in IE8+ as well as modern web browsers.
This could do the trick for you. It solved the issue I was having.
Tried on firefox and chrome
.random-class-name{
text-indent: 10px;
}
Text written inside the input is indented as well.
No need to use position absolute. try this code:
<html>
<body>
<div id="sidebar">
<div id="search">
<form id="searchform" method="get" action="/index.php" _lpchecked="1">
<input type="text" name="s" id="searchfield" placeholder="Search now">
<input type="submit" id="searchsubmit" value="Search">
</form>
</div>
</div>
</body>
</html>
#sidebar {
width: 20%;
background: #ccc;
height: 300px;
padding: 20px;
}
#search {
width: 100%;
height: 50px;
position: relative;}
#searchfield {
width: calc(100% - 60px);
border: 1px solid #ccc;
margin: 0;
padding: 10px 0 13px 20px; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right!
position: absolute;*/
right: 0;
float:left;
box-sizing:border-box;
}
#searchsubmit {
width: 60px;
height: 41px;
background: red 0 0;
border: 0;
overflow: hidden;
cursor: pointer;
right: 0;
float:left;
box-sizing:border-box;
}
live demo on code pen
Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:
CSS
.aFlyOut{
padding: 10px;
bottom: 0px;
border: 1px solid #a6adb3;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
}
.aFlyoutCollapse
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutExpand
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutButton{
height: 12px;
float: right;
width: 38px;
cursor: hand;
padding-right: 4px;
}
.aFlyout{
float: right;
background-color: #FFFFFF;
border:1px solid #a5acb2;
right: 6px;
#right: 8px;
padding: 0px;
}
.aFlyoutHeader{
padding: 4px 6px 3px 0;
background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
color: #FFFFFF;
text-indent: 23px;
font-size: 11px;
font-weight: bold;
}
.aFlyoutLinkWrapper{
padding:5px;
}
.aFlyoutLinkWrapper a{
padding: 5px;
color: #010356;
font-size: 11px;
display: block;
text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
color: #0060ff;
background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
text-indent: 12px;
#text-indent: 10px;
}
HTML
<div class="aFlyoutButton" id="aFlyoutLink">
<!-- Action Flyout Action Button -->
<div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
<div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()">
<!-- Action Flyout Action Header -->
<div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
<!-- Action Flyout Links Panel -->
<div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
</div>
</div>
When i mouse hover it shows:
However, it should be as:
Document mode quirks means that you're essentially running a pre-IE6 rendering engine. A good solution to solve this is to add a doctype to the top of your HTML document. This will put the browser in standards mode by default, and will allow your position:relative; to work as expected.
The simplest doctype is the HTML5 one:
<!DOCTYPE html>
Put that on line 1 of your HTML. There is no way to force standards mode via CSS.
Thanks everyone, it has been resolved; please see following code reference. I've changed position from relative to absolute and set top & height to fix the positioning.
.aFlyOut{
position: absolute;
top: 28px;
height: 70px;
}