I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
Related
I have a div container which contains 3 different divs. I want to place inner divs in a row.
Here is html code:
This is what it should look like.
.partners {
display: inline-block;
display: flex;
flex-direction: row;
width: 100%
}
<div class="partners">
<div>
<img src="media/handshake.png" alt="handshake" class="handshake">
<h1>10+</h1>
<p>partners investing their time and effort to support our mission</p>
</div>
<div>
<img src="media/social-care.png" alt="social care" class="social-care">
<h1>150+</h1>
<p>members working hard to be able to support our mission</p>
</div>
<div>
<img src="media/respect.png" alt="respect" class="respect">
<h1>243+</h1>
<p>donors supporting our community and making impossible possible</p>
</div>
</div>
But the last inner div goes beyond the screen and when I inspect the page it shows that "partners" div contains only first and second inner divs.
How can I solve this?
This is what it looks like when I inspect.The third one is not included in "partners" div
This often happen if you forget to close a tag in html.
Please check the rest of your code to be sure you didn't forget to close any tag. You also can use online unclosed html tags checker like this one :
https://www.aliciaramirez.com/closing-tags-checker/
Did you tried to use something like metroui or even bootstrap ?
I.E.:
With metroUI you can use the grid system to do exactly what you want, see :
https://metroui.org.ua/grid.html#_media_columns
Here is a link explaining how to include metroui in your project :
https://metroui.org.ua/intro.html#_quick_start
This will fix your problem.
.partners{
justify-content:space-around;
display: flex;
width: 100%;
}
.partners div{
width:30%;
}
ypu can set up a max width to the children divs, using like .partners div { width: 30% } and to add some space between them, you can also use .partners { justify-content: space-between; } tip: display inline-block is canceled when you put another display: flex above, try use only flex
I am really new to HTML and CSS (SCSS in this case), and am having issues getting an Image to display properly on a localhost page I have been experimenting on. I will post my HTML lines, as well as my SCSS lines below. Maybe you guys can tell me what I am doing wrong so I can move ahead.
I have tried linking just the project folder directory path, all the way up to the WHOLE path through my computer to the image. I have quadruple checked the names on the files and the image as well. I believe it is probably just a Syntax error.
<!--HTML LINES:-->
<div id="Center.Logo">
<img src="sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.images\center-logo.png"
alt="Center Circle" style=" width: 250px; height: 250px;"> <!--Desired image -->
</div>
/* SCSS LINES: */
#Center.Logo {
img{
margin: auto;
align-content: center;
}
}
I expect the image to display in the CENTER of the page, instead, it simply gives me the ALT tag next to a little picture icon on the bottom left of the page.
I think your selector should be #Center.Logo in your code it's look like #center.Logo
And if you want looks like it centered try this
And if you can't getting images try working around with your project structure.
<img src="../assets/img/centered-logo.jpg"> etc not whole path or something.
The first thing I noticed is you use a dot inside the name of your id.
This is a problem, since in css the dot is part of a class selector.
The Rule #CSS.Logo {...} applies to an element that has both, an id of 'CSS' and a class of 'Logo'. Something like this:
<div id="CSS" class="Logo">
...
</div>
There is no element like that in your code, so the css rules are not applied.
Second, your original css code is not suitable to center an image within another container.
// This is your original code as you posted it:
img {
margin: auto;
align-content: center;
}
The rule align-content is only applicable in a flex box container. You could however use margins to center the image horizontally like this:
img {
display: block;
margin: 0 auto;
}
What you probably want instead is this:
<div id="center-logo">
<img src="your-image.png" alt="Center Circle">
</div>
body {
margin: 0; // making sure you have the whole page at your disposal
}
#center-logo {
height: 100vh; // using the full height of the viewport
// this is where the actual centering happens:
display: flex; // this is necessary for the following 3 rules (flex box)
flex-flow: row nowrap; // in this case this could also be column nowrap
align-items: center; // vertical center
justify-content: center; // horizontal center
img {
// set a width and height so the image does not stretch and to avoid repositioning
// the image (or other content if there is any) as soon as the image has been loaded
width: 250px;
height: 250px;
}
}
Notice I have used small letters for the id name, because it usually helps avoiding issues caused by misspelling the names afterwards.
I'm assuming it is a regular html and css.
You can compile with node.
npm init
npm install node-sass
Add this to your package.json (in scripts)
"scss": "node-sass --watch scss -o css"
Create two Folders.
CSS and SCSS.
Inside each one, the file style. (With the right termination)
css> style.css eg
and finally
npm run scss
Everything you type in scss, it converts to css.
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.