Posts by Chun • 7,440 points
183 posts
-
3
votes3
answers586
viewsA: How to apply CSS to HTML element before and after a text?
Yes, there is. You can do this using the selector :nth-child(). Here is an example below: i {color:black; font-size: 25px;} i:nth-child(2) {color: red;} a {text-decoration: none;} <a href="#">…
-
17
votes1
answer1431
viewsA: Difference between pseudo-class (colon :) and pseudo-element (double colon :: ) in CSS
Pseudo-classes are used to select elements that cannot be expressed otherwise than using attributes such as: id's, classes (or any other type of information available through the DOM). For example:…
-
3
votes3
answers113
viewsA: Is it possible to create predefined css values?
You can do this by creating specific classes for it. For example, in your CSS create a class with the name preto, and with the value hex black: .preto {color:#000;} and in HTML just call the class…
-
4
votes1
answer222
viewsA: Footer Fixed - Z Index
Now let’s see if we can understand something: The estate z-index, determines the "stacking level" of an HTML element. The "stacking level" - Refers to the position of the element on the Z axis (as…
-
6
votes1
answer26349
viewsA: Responsive image alignment with Bootstrap
This happens because the class .img-responsive adds the property - display:block; in the image. To solve this and make an element with display:block; be aligned to the center you will have to add to…
-
2
votes2
answers486
viewsA: How to set an image at the bottom of the page?
If the CSS file is in the path: webapp/resources/styles.css And the image is in the way: webapp/resources/libimagens/bg.png The right way to the property background-image will be: background-image:…
-
13
votes2
answers51084
viewsA: Sliding effect on anchor links
Unfortunately this is not possible to be done using CSS, to achieve this desired effect you will need to use Javascript/jQuery. Here’s an example below of how you can do this using jQuery, and you…
-
1
votes5
answers1153
viewsA: If the image is large vertically, height: 100%, if it is large horizontally, width: 100%?
If you’re trying to do that using the tag <img>, you can do that unspecifying one altura or largura for the image, but setting the following values: max-width:100%; max-height:100%; And to…
-
1
votes1
answer2028
viewsA: Button action after clicked - jQuery
Well, from what I understand, you want to create a "slider" effect to show/hide a div when a button is clicked. Then you can do it as follows: $(document).ready(function(){ // Se tiveres outro botão…
-
0
votes2
answers82
viewsA: Add additional column in row
To add divs online, just add the property - float:left; to classes Parent (or in this case, every column) you want to be in line. For example: .colunaGrande { float:left; /* Propriedade adicionada à…
-
5
votes2
answers1004
viewsA: How to put » and « in :before?
You can do this using: \00BB. For example: ul.breadcumb > li:after{ content: "\00BB"; } <ul class="breadcumb"> <li>item 1</li> <li>item 2</li> <li>item…
-
8
votes2
answers6742
viewsA: How to change the color of the icon in Materialize?
You can wear something like: <i class="material-icons" style="color:#000;">menu</i> Or if you want to change the icon color using a class as in the example you mentioned in the question,…
-
2
votes1
answer756
viewsA: Stay Style of Hover When Opening a Dropdown Submenu
This is achievable with a small change in your CSS code. First we’ll apply a class to the main list so that it is easier to work with it and to point out more precisely what we want to modify or…
-
1
votes1
answer364
viewsA: Align form elements to the center?
You can do this by creating a class, for example - alinhamentoCentro(or whatever you want to call it) and give it the following styles: .alinhamentoCentro {margin: 15px auto;}. Then just apply this…
-
1
votes1
answer405
viewsA: Standardize color of textarea letters with placeholder
This is most likely because you’re applying the font-weight:bold; in the placeholder and in the textarea no, which will make the text stronger in the placeholder. The font-size: 14px; could also…
-
5
votes2
answers3417
viewsA: Change CSS when scrolling the page
You can do it using a if/else together with the scrollTop() jQuery, as in the example of this code below: // O código abaixo deverá ser implementado dentro de uma tag <script> caso…
-
1
votes2
answers191
viewsA: Full Calendar is passing the footer of the site
It would be necessary to even see an online example of this in operation to see and indicate a concrete solution, or what is generating this problem, however I have two solutions to help you with…
-
3
votes2
answers386
viewsA: a:Stop working with :visited or :link
The a:hover only works for unlisted links, as we are pointing the styles to the element only a. In other words - When declaring CSS as in the sample code snippet below, we are just applying…
-
1
votes2
answers756
viewsA: Site home screen - structure
As @re22 said, for the image to take the full screen/screen size, you can use the property background-size: cover; and for the background image to be fixed as we do scroll of a page/website, uses -…
-
0
votes4
answers4452
viewsA: Navbar Collapse does not work!
I tried to recreate an online jsFiddle code above your question, but I don’t quite understand what your goal is or what you’re trying to create, but to create a dropdown list with Bootstrap, just…
-
1
votes1
answer282
viewsA: Slide gallery one image at a time with Bxslider
The answer to that is in the code itself jquery that you published in your question, and is even mentioned in the sample page from the link you added, right after the HTML code on this sample page.…
-
2
votes1
answer977
viewsA: How to "crop/slice" the image layout with HTML and CSS?
Basically this is a div parent square-shaped which is rotated to 45 degrees, and that a new div child, which will contain the image as background-image which will be round to -45 degrees to return…
-
1
votes1
answer230
viewsA: Table alignment
That’s because no width is being applied to td. I answered a few days ago similar question with this. You can use this same hack to solve this problem. This will calculate and adjust the width of td…
-
1
votes2
answers1946
viewsA: Customization of buttons
Well, answering the question the way she is now - The disabled as its name says, it is only to disable/disable a/input/etc button. To make the button disappear when it is disabled, you would need to…
-
3
votes1
answer957
viewsA: How to Style Current Page Navigation Link
If you’re creating page by page, you can use that advantage to do so. For example, let’s imagine that we have 2 pages: index.html and sobre.html, and we want to highlight the link of the current…
-
2
votes3
answers2842
viewsA: Responsive horizontal list that adjusts to 100% of parent div width
Well, from what I understand the question, what you’re trying to do here is create share buttons for the social networks mentioned in the question, and that these adjust to 100% of the total size of…
-
2
votes2
answers50
viewsA: I’m unable to accommodate three images online
Just add display: inline-block; to class: produtos-conteudo-ponta .produtos-conteudo-ponta { display: inline-block; } Updating To add more spacing between images you can use the property - margin.…
-
1
votes2
answers96
viewsA: Is it possible to go back to the old Facebook box?
I’m afraid that’s not possible, because the old Like Box was completely disabled with the launch of Graph API v2.3 and replaced by Page Plugin. The Page Plugin Basically it’s a new improved version…
-
5
votes2
answers791
viewsA: How to create anchored links and darken all the rest of the page’s content except the intended section?
These links are called - Links Ancora To create links anchorage so that it is possible for a user to "jump" to a specific section of a page, uses id's in these sections, for example: <a…
-
0
votes4
answers1973
viewsA: How to make a list item show/hide a DIV when clicked?
You can do this using the slideToggle() jQuery. For example: $(document).ready(function(){ $("#toggle").click(function(){ $(".mostrar").slideToggle(); }); }); .mostrar{ display: none; border: 1px…
-
3
votes1
answer118
viewsA: How to create a temporary post that automatically deletes after a while
There is a plugin for this called: Post Expirator The plugin Post Expirator allows the user to set expiration dates (or expiration dates) for both, posts and pages. In addition to this option, you…
-
1
votes3
answers2845
viewsA: How to make ?
@Jorgeb. is right, you have copied this code, also brought the spaces together in Markup. The problem is even in HTML code, if you rewrite the code line by line, or simply select the…
-
3
votes1
answer467
viewsQ: Input Range that increases text size
I’m trying to create a <input type="range"> which increases and/or decreases the size of the text as we move it left or right. So far so good, I was able to create this effect, but now I…
-
3
votes2
answers555
viewsA: Facebook Open Graph of the link of the post of my site does not appear description and thumbnail is small
For images to appear large as in the second example mentioned in your question, use images that have at least 1200 x 630 pixels for better display on high resolution devices. The minimum size…
-
1
votes1
answer793
viewsA: Dynamic menu with dropdown
You can do this using the component dropdown Bootstrap to add menus dropdown, which are operated by a toggle (that is, open and close from a click) without having to write a single line of…
-
2
votes1
answer2703
viewsA: Content passes above the "header" when scrolling page;
You have to add one z-index to the header so this problem doesn’t happen. For example: header { width: 100%; background-color: #009688; height: 65px; color: white; position: fixed; top: 0; z-index:…
-
1
votes5
answers17869
viewsA: How to align the Left fields of an Html table?
Text is already left aligned by default. However if you want to align all text within the table to left you can use the following: <table cellspacing="6" style="text-align:left;"> ...…
-
17
votes1
answer1818
viewsQ: Meta tags for Social Networks
We know that it is necessary to implement specific meta tags in <head> of our websites to optimize content sharing on social networks such as Twitter, Google+, Pinterest and Facebook. For this…
-
26
votes1
answer1818
viewsA: Meta tags for Social Networks
Knowing exactly what social media meta tags to include can be confusing, even for experienced webmasters. There is a variety of structures to consider, supported by most social platforms: Twitter…
-
1
votes2
answers108
viewsA: Product Share from Virtual Store to Facebook
This was because at the time there was a bug in url scrapper facebook. The reason why the presentation images (og:image) were not appearing in the publications along with the rest of the information…
-
3
votes2
answers469
viewsA: How to get 40px X 40px of the entire image?
Using the image as background-image, for example: This is the image we’ll be working on in this example: And the code to show only 40px of the image above will be: .minhaImagem { background-image:…
-
3
votes1
answer1598
viewsQ: Custom Like and Share Button Counter for Social Networks Twitter and Facebook
How to get the total number of likes and shares of a URL, on platforms Twitter and Facebook? There are several websites where you can see buttons share/partilhar/compartilhar custom Facebook and…
-
3
votes1
answer1598
viewsA: Custom Like and Share Button Counter for Social Networks Twitter and Facebook
Well, for this we will use here a little Javascript to achieve the desired: First let’s create a variable - pageUrl which will contain the link to URL Then we will create a function that will…
-
1
votes1
answer313
viewsA: Float does not work properly and overlap
That’s because they should be used media queries for lower resolution displays to remove attributes such as: position:absolute;, float:left/right; and heights as for example height:450px; that make…
-
2
votes1
answer3036
viewsA: CSS animation "Flinging" or shaking
I’ve been testing this on jsFiddle and managed to remove much of this unwanted effect from the blinking image by removing the value opacity of animation @-webkit-keyframes fadeInUp {0% {opacity:…
-
1
votes1
answer301
viewsA: Are there HTML text editing tags "preferred" by google search robots?
Google says nothing about this aspect, but it will contribute nothing to SEO. The most important things to consider is page structure (use tags correctly, H1 for headers, sections, etc...), meta…
-
7
votes1
answer3081
viewsA: How to customize buttons for social networks?
This can be done as follows: Here in this example we will be using the font-awesome for demo but then you can swap and use images instead of using the font-awesome if you prefer, to avoid uploading…
-
0
votes5
answers364
viewsA: Hierarchy between CSS styles
As I mentioned in my above-mentioned comment in your question, I don’t think your HTML hierarchy should be implemented in that way. Because from what I understand, what you’re trying to do here is…
-
5
votes2
answers2326
viewsA: Set link image with Facebook Meta-tags Open Graph
In order for images to appear correctly on Facebook, it is necessary to use meta tags. In this case for Facebook, a special set of meta tags as @Maicon has already mentioned, calls from Open Graph…
-
10
votes2
answers17280
views