I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.
Related
I imagine this is going to be a bit of a difficult problem, but I'm curious how I can use CSS (potentially animations) to modify bootstrap to have functionality similar to this:
I've found a few different examples, but they only really help with getting a material design-esque look, like this:
Any suggestions on how to implement this? I'm stuck
This might help you. Check the jsfiddle https://jsfiddle.net/xo5gdp8r/
span {
position: absolute;
z-index: 1;
top: 5px;
color: red;
background: #fff;
left: 15px;
padding: 0 10px;
}
input {
margin: 15px 10px;
border: 1px solid red;
padding: 10px;
width: 200px;
}
You need to wrap it inside a div and provide position as relative to the div.
I would also say something similar
your HTML should look
<div class="form-group">
<div class="error-message">is required field.</div>
<input class="form-control" required placeholder="Input field" />
</div>
CSS should be :
.form-group .error-message{
display:none;
}
.form-group.required .form-control{
border-color:red;
}
.form-group.required .error-message{
display:inline-block;
color:red;
position:absolute;
background-color:#fff;
margin-top: -10px;
margin-left: 20px;
}
and JS can be :
(function(){
$('.form-control[required]').on('blur',function(){
if(!$(this).val()){
$(this).parent().addClass('required');
}
});
})();
You can see it in action : https://codepen.io/FaridNaderi/pen/EXQzJK
I'm working on a really simple little bit of CSS, where the cursor changes to a pointer when the mouse moves over it.
I've been looking at this code for hours, and I can't figure out why the cursor will not change to a pointer. When I move over the div, it changes briefly and then changes back to arrow.
It's probably something really simple, but I just cannot see it.
.holder{
width:1000px;
overflow: auto;
margin: 0 auto;
font-family: 'Abel';
padding-left: 50px;
padding-top: 50px;
position: relative;
}
.action_pod{
float:left;
border-radius: 10px;
border: 1px solid #777;
font-family: 'Abel';
margin: 10px;
overflow: hidden;
padding:2px;
cursor:pointer;
}
.act_pod{
background-color: #cf9b63;
color: #fff;
width:100%;
border-radius: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 1em;
text-align: center;
cursor: pointer;
}
a:link{
text-decoration: none;
color:inherit;
cursor: pointer;
}
a:visited{
text-decoration: none;
color:inherit;
cursor:pointer;
}
<div class="holder">
<div class="action_pod">
<div class="act_pod">
add new raw season
</div>
</div>
</div>
update: Thanks for all the suggestions. I've tried them all and so far nothing has worked. I'm wondering if there's something hinky in my browser now...
update 2: Looks like its an error on my Mac somehow, as no links on any website make the cursor become a pointer. Surprised my question got marked down as I was only seeking help on an issue I was having and gave all the info I had as I went along.
update 3: Apparently it's an issue with running Photoshop CC on Mac at the same time. Found the solution here if anyone has the same problem in the future. https://apple.stackexchange.com/questions/151370/my-cursor-is-wrong-in-certain-apps-safari-chrome-mail
You should use
divName:hover {
cursor: pointer;
}
Add the CSS to the parent div
holder:hover {
cursor: pointer;
}
Remove all the cursor:pointer; bits you have right now in your code, and add this to your css:
.act_pod:hover{
cursor: pointer;
}
It's really simple try this.
body{cursor:default;}.holder a:hover{cursor:pointer;}
Remove All Cursors In Other Div's Classes
And Add This Property In Your Class
.holder:hover{
........
cursor:pointer;
}
I am trying to achieve the following using bootstrap button and custom css. I am not sure how to add a separation with a button and have two sets of labels within it. So far, I am able to create a button with label in it.
Working codeply demo
DEMO
You can do this with mark-up (html) only:
<button>
<h4>Titel</h4>
<hr/>
<span>More</span>
</button>
But this will look a bit weird so by adding some css make it look better.
button span {
font-size: 0.7em;
}
button hr {
margin: 2px;
}
Try this,
Demo
.productButton.selected {
background-color: rgb(0, 146, 143);
color: #FFF;
}
.productBtnText{
font-size:25px;
border-radius:0;
width:100%;
border-bottom:2px solid #000;
}
.productButton{
border:2px solid #000;
margin:0px;
padding:0;
height: 100px;
width: 200px;
font-size: 15px;
white-space: normal;
position: relative;
}
I have two image links generated like so, Here is the HTML
<ul>
<li><a class="BigLinks" href="My_Name.pdf" id="Resume" style="position: absolute; top: 264px;!important left: 17px; !important color: #0005FF"></a></li>
<li><a class="BigLinks" href="espn.com" id="Personal_Projects" style="position:absolute; top: 51em; left: 49em; color: #0005FF"></a></li>
</ul>
</div>
Here is the CSS code..
#Resume{
background-image: url(Resume_Button.png);
display: block;
border: .25em solid #FF0004;
height: 300px;
overflow: hidden;
text-indent: 200%; For Removing the hyperlink (Not Clean)
white-space:nowrap;
width: 509px;
padding-top: 5em;
padding-bottom: 5em;
}
#Resume:hover{
display:block;
border: 1em solid #FF0004;
height:15em;
overflow:hidden;
text-indent:200%; For Removing the hyperlink (Not Clean)
white-space:nowrap;
width:31em;
padding-top:5em;
padding-bottom:5em;
}
#Personal_Projects{
background-image:url(android-logo2.png);
display: block;
border: 0.25em solid #FF0004;
height:15em;
overflow:hidden;
text-indent:200%; For Removing the hyperlink (Not Clean)
white-space:nowrap;
width:31em;
padding-top:5em;
padding-bottom:5em;
}
#Personal_Projects:hover{
display: block;
border:1em solid #FF0004;
height:15em
overflow:hidden;
text-indent:200%
white-space:nowrap;
width:31em;
}
My problem is that I would like the two buttons to not be in the optimal position regardless of the size of a screen. AKA I would like the image position to be responsive no hard coded. With the way I coded it now it looks goo on my laptop screen however not on my larger TV screen.
A few problems there. Not 100% clear on what you're asking, but getting rid of the position: absolute declarations in the style attribute will reintroduce your links into the flow of the document.
Second, you're going to have difficulty getting a good result if you mix px and ems. The two don't always play nicely together.
Also, what are you trying to do with the text-indent/white-space/overflow declarations?
I am working on a site with has responsive design i am facing rendering issue with forms fields on different devices & browsers.
for Firefox on phone and Tab (Android) It renders form fields differently either they come with rounded edges or gradient style.
How can i make them look same like simple rectangle with border.
CSS with i had applied is
input
{
box-sizing: border-box;
-moz-user-input:none;
-moz-user-select:none;
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
line-height:30px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}
select {
border: 1px solid #ccc;
font-size: 13px;
height: 36px;
line-height:36px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}
I tried could of open but it still come differently.
I have setup example on jsfiddle Frame only Editable version
These form fields come with show or gradient inside fields. How can i remove all that and make it like simple with with border of 1px
Try adding:
input:focus, select:focus {
outline: none;
}
input, select{
-webkit-appearance: none;
border-radius:0;
background-image: none;
background-color:transparent;
}