hey there!
Will you please tell me what's the wrong with the page, why my js is not adding anything into my page. Here is the link https://jsbin.com/noxulotuna/edit?html,js,output
Will you please tell me what's the wrong with the page, why my js is not adding anything into my page. Here is the link https://jsbin.com/noxulotuna/edit?html,js,output
I have corrected the li element name mistake, but still doesnt work on my machine.
let tobeAdded = `<div>
<p>I am paragraph 1st.</p>
<p>I am paragraph 2nd.</p>
</div>`;
ul.insertAdjacentElement("beforebegin", tobeAdded);
tobeAdded is a string not element, that's probably causing a problem, haven't dug deep into it though
Hi guys, I’m having a problem with fixed navbar’s anchor tags linking to local IDs. The scroll jumps further into the sections, since the top of the page is hidden by the fixed navbar. I tried setting the ‘top’ of the body to push it downwards but with no success. I appreciate any input from you.
@yafiwebdev - looks like this article talks specifically about your problem.
https://css-tricks.com/hash-tag-links-padding/
https://css-tricks.com/hash-tag-links-padding/
what is this job attribute I have never heard of something
hello, i just finished my first challenger about tribute page, can you guy give me some recommends
https://codepen.io/huyhoang8398/pen/GRgxrOL
https://codepen.io/huyhoang8398/pen/GRgxrOL
and should we use boostrap or some UI framework to do these challenger?
@huyhoang8398 very nice :thumbsup: . My input for you is:
- I see you use
idfor styling, usually, we useclass, since the class can be used by many elements. Not saying that you can't do this withid, but id is unique. - for the border you can use short border notation, so like
border: 1px solid black.
Hi , I am struggling to understand why mouseover or click does not work on a nested element , but instead it the event happens on a far parent/grandparent element. BTW this happens only on IE11 . Chrome works fine.
here is the html:
here is the html:
<button type="button" class="a-button-nostyle m-country-select">
<img class="a-image icon-flag">
<span>Germany</span>
<div data-component="MDropdownFilter" class="m-dropdown-filter country-dropdown has-error is-open" data-component-id="jjj534jk34j5">
<input placeholder="Germany" class="a-input filter" type="text" required="">
<ul>
<li class="ul-container">
<ul class="options">
<li class="a-option" aria-selected="true">
<a href="/content/p11/page.countryselector.de_DE.de_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.htmltarget="_self" class="a-link is-multilanguage internal-link">German</a>
</li>
<li class="a-option">
<a href="/content/page.countryselector.en_DE.en_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.html%3FdebugClientLibs%3Dtrue" target="_self" class="a-link is-multilanguage internal-link">English</a>
</li>
</ul>
</li>
</ul>
</div>
</button>
i am hovering over ul-container or a-option etc. but it shows the hover on the root button element
is there a proposal/rfp/rfc (including deprecated one) for javascript module bare imports? like
import 'React' and similar? I cannot find anything in my searching of github/tc39 and more general searches. Thanks. Found https://gist.github.com/jkrems/769a8cd8806f7f57903b641c74b5f08a#Future
Hello guys, Could anyone please review my Survey Form front-end projects. Your help would be appreciated.
Link
Link
Hello. I am trying to use flex box. I have set display Flex to my nav section. I am then trying to justify-content: flex-end to my button, however it doesn't seem to be working.
https://codepen.io/nnoy01/pen/GRJqgoz
If anyone can tell me what I have wrong, would appreciate it. Its very basic code
@sjames1958gm Right now you have it applied to the
.container element
I applied it to the
<nav> and it looks like this. Not sure if that's what you wanted, but it is aligned to the flex-end
It should work if you literally just change the
.container code block in your CSS to nav. Alternatively, you can just apply the .container to your nav element and remove the <div> altogether.
@Nooy90 Let me know if that solves your issue
@sjames1958gm my bad!
Hi all, I'm used to software development but feel like a complete noob when it comes to CSS. I'm trying to slowly build my own site on the side while working through the FCC courses, and currently I've gotten close to making these ribbon buttons that I want but they could use some fine-tuning / some advice from someone more experienced on tips / better practices I'm likely overlooking.
Here's the codepen I'm practicing in: https://codepen.io/flowmid/pen/RwPGvrm
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?
Can someone please help me? I have been searching the net for a solution, watching YouTube tutorials and still can't find a solution. The list items/text just does not want to align to the left, between the Starting price and button. https://codepen.io/mdezigned/pen/KKpqqmz?editors=1100
@Mdezigned This is the default CSS style for an unorder list element, <ul>.
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;
// <ul> default styles
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
// from https://www.w3schools.com/cssref/css_default_values.asp
@Mdezigned Quickest solution to any problem like this:
Learn how to use Chrome DevTools
Whenever I have a problem related to styling, CSS, or Javascript, the solution is almost always solved by popping over to Chrome DevTools. Namely, the "Select An Element To Inspect" saves my life all the time. I'll attach a GIF to show you how your problem could have been solved in less than 5 seconds using DevTools.
If you see in the GIF above, I click the "Select an element to inspect" in the top left-hand corner. The button looks like a mouse-pointer with a box around it.
After that, I hover over the element in question
You can see that, to the left of the element, there's a big green box. This indicates that there's a padding-left of 40px preventing it from aligning correctly. Green indicates padding while yellow/orange indicates margin.
Also, you can see directly above the element there's a little info-box that pops up. This shows you most of the styling info related to that specific element.
Specifically, it shows you that element has a padding-left of 40px
To open Chrome DevTools you press: Ctrl+Shift+i". This opens it up for you, most likely at the bottom. I have it set up so that it opens up in a different window. This makes it so that it doesn't obstruct my view depending on where I place it on the screen, but that's up to you.
While learning ANYTHING related to Web Development, DevTools is your best friend. When you're learning HTML/CSS, it allows you to inspect your elements visually. You can also make quick edits. While learning JavaScript, it lets you play around with your code and quickly experiment without having to console.log() everything. It gives you a MASSIVE leg up and will save you years over time.