Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
So I Have a black and white picture as my background, and I'm making the contact page for my site. Everything is going smooth the only problem is I want to make a transparent button that has a white border around it like on http://yokedesign.com.au/contact/ any ideas?
You just need to make the background-color: transparent of the button:
Fiddle: http://jsfiddle.net/TQ357/
Then, you could make the border transparent as well if you wanted it to be completely blended in with the background.
The particular example you cited is an anchor tag with a border added to it. It has been styled using inline css, which is not best-practice, but could easily be moved to an external css file. Most of the big browsers include developer tools either bundled or as a plugin. With these tools you can right-click and inspect an element on the page and see the html and styles applied.
Looks like your example uses an <a> anchor with CSS styling and a JS handler. Here's some CSS:
a.contact-submit {
border: 1px solid #FFF;
padding: 5px 10px;
float: right;
color: #FFF;
}
And the anchor (let's say you're using jQuery):
<form id="form-name">
SEND
</form>
<script type="text/javascript">
$(document).ready(function() {
$('.contact-submit').click(function(e) {
e.preventDefault();
$('#form-name').submit();
});
});
</script>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have no HTML or CSS experience but trying to figure out what exactly this line of code means
<div class="overflow-100">
It has an affect on how wording appears on our portal and not sure if it's limiting words to 100 characters, 100 pixels or something else
overflow-100 is a user defined class that css selectors can target. Without seeing selector/s targeting overflow-100 we have no idea what declarations it applies. Open the document in the browser, open dev tools (f12), inspect element (ctrl+shift+c) and hover over the div with the class overflow-100. In the styles tab find a rule with a selector overflow-100 and you will see css declarations it applies. Googling for those rules will give you a understanding of the effects of the overflow-100 class.
Class names are purely user data. Neither HTML nor CSS assign any special meaning to them so they don't accomplish anything by default.
Their purpose is to assign custom information that can be leveraged later from other tools (JavaScript, CSS, accesibility tools, web crawlers...).
Here's a quick and dirty showcase:
document.querySelectorAll("div").forEach(function(box){
box.classList.forEach(function(className){
let fragments = className.split(/^foo-(\d+)$/);
if (fragments.length === 3) {
box.innerHTML += ` <strong>Type ${fragments[1]}</strong>`;
}
})
});
div {
border: 1px solid orange;
}
.foo-100 {
width: 100px;
}
.foo-200 {
width: 200px;
}
<div class="foo-100 something-else">Hello, World!</div>
<div class="foo-200">Hello, World!</div>
To help figure out what your application is currently doing with them you can use the browser developer tools. For instance, here:
document.querySelectorAll("div.bar").forEach(function(box){
addEventListener("click", function(){
alert("You've clicked on bar");
})
});
div.bar {
color: green;
}
<div class="foo">Hello, World!</div>
<div class="bar">Click me!</div>
... you learn you have an event listener and an inline style (please note anyway that this example is an Stack Overflow snippet, which is more complex that regular code):
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I can't remove text decoration from my website, precisely on two places: my site title, and on Contact Page.
I tried to do it with classes, I also copied CSS path from Inspect element mode in Opera and transfered it and modified it into wordpress editor.
But nothing happend. Also tried to do it with all <a> tags using a{} in CSS.
Some help would be nice. Thanks in advance guys!
It looks like the text-decoration has been removed, but there is a border-bottom: 1px dotted #333 applied to the site title and the social media icons on the contact page. Are you confusing the two?
If you remove the border-bottom, the dotted line styling goes away.
It is not text decoration what is making your site like this. It is border. Add these lines to your stylesheet (in wordpress editor):
.site-title a {
border: 0;
}
If you also want to remove (under)line from social networks add this:
.drustvenemreze a {
border: 0;
}
You have text-decoration:none set in your CSS for <a> tags, but you also have a border-bottom: 1px dotted #333;
I believe that is what is making it appear that the links you reference still have text-decoration applied. If you get rid of the border-bottom, you should be good.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What is this? Button or Select ? How do like this by HTML and CSS ? Thank
This is most probably a styled select element. Take a look at this tutorial http://css-tricks.com/dropdown-default-styling/
This can be a simple div with 3 elements in it.
1) The image - with the top and the bottom arrow.
2) The ul tag - when clicked on the image, the ul's get displayed.
3) The label - when any of the li's is selected, its value is copied to the label
you can do thing like this with simple div. something like that
<div id="button"><span>Location</span></div>
#button
{
width: 100px;
height: 40px;
background-color: grey;
border-radius:15px;
position:relative;
}
#button>span
{
position:absolute;
top:10px;
left: 10px;
}
I actually made a plugin that lets you do this here is a link; just download the files include the script and css run
$('document').ready(function(){
$('select').niceselect();
})
and you can then style it however you want using css.
http://projects.authenticstyle.co.uk/niceselect/
This is a Select element.
Check this Example : dropdown list
advice how to solve that kind of problems
IF you are using Chrome,Firefox... you can right click on any element on page then inspect element
and see HTML CSS even JS for that element
Read more about Chrome Developer tools
https://developers.google.com/chrome-developer-tools/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.