vertical align
Hey so, I'm probably just being stupid but, I can't get my div to vertically align to the center, even made my body a flex to try and get it to work đ
Can anyone point out what I'm doing wrong pretty please? thanks â¤ď¸
codepen: https://codepen.io/BrightDN-the-sasster/pen/abXMqXq
120 Replies
I think
place-content is only for grid. You prob need min-height: 100vh on body
For flex you need to justify-content: center; align-items: center or use display: grid; place-content: centerthanks!
why didn't it do this automatically?
oh wait, bc default is
auto and it just takes the min-height required?
thanks hart, but mannix' solution did hte trick xd
its prety much what you said too thobecause the body has the height of the content that is in it
not the whole window
ahh, so it indeed does auto which means min-height required, thanks
Just donât combine them and put
height: 100vh, or youâll have overflow. Has to be 100% if youâre putting a fixed height or has to be a min-height so you donât get overflowI mean if I were to have overflow, id just put it hidden no?
but if I were to use vh shouldn't I use the dvh? to also make it work good on phones
You want to hide your content?
no, not what I meant
you said "you'd have overflow", I responded to that, that can be fixed with
overflow:hidden
I know if I want to hide it I just put display:none
and probably also put everything else to 0 and the like, for whatever reasonIf you set a height of 100vh on your body, itâs only 100 viewport height so any content that is below the fold will overflow out of the body, because itâs fixed at the height of the viewport example 768px. Anything outside that will overflow. If you put content in your body you want to be able to see it (unless your hiding it on purpose)
I think Iâm confusing you. Nevermind just use height:100% or min-height: 100vh and youâll get the centering you need. If you switch your properties to be compatible with what youâre using of course
i dont think height 100% on body works does it??
dont worry, I understand what you mean
annyway that makes 2 pages done! visually atleast
Oh, by the way, do you happen to know any third-party that handles logins? I know there are paid ones but are there by any chance any free ones?
I'll probably also tie in the login to database acces, oh how fun, sql , been ages since i wrote that wonder if ill remember how it goes or'll have to refresh my memory again xd
I could also write it myself but that leaves a lot of security gaps for sure so I would prefer it if there were a third party handling logins, cause otherwise I would probably put a js file in there handling the logins, which obv is easy to break all they would have to do is look at the sources used
it did in fact
min-height 100vh will work but u may need to set margin 0 if the overflow annoys u like me
hmm weird
I put margin 0 by default btw, and border-sizing:border-box
& padding by default 0 too
not sure how it worked for u
Height with percentages is tricky but does work on body
o then that mustve been the html that took the 100%
ya i like to do dat too
i use css reset
You have to include html
aaah makes sense
yaa i thought u ment it works only on body
yaa dat makes sense
The bodyâs parent is html so setting both of them is what makes it work.
Thatâs why I like min-height instead
yaa me too
Does any of you know of a third party that handles logins w/o charge?
I may look into that netlify thing, I seen somewhere on that about it handling logins but I haven't tried it out yet
I would prefer it being a free service tho, cause my work ain't paying me to make this xD
I'm simply making this bc my workplace is struggling with keeping track of what's expiring n we losin lots of money due to it, so im making this to help out
but i would need it to be secure ofc, ain't no way this data should be hanging out for everyone to see
and change as they please
welp!! out of MY working knowledge
xD
:( dammit
I mean I wrote one myself, that works
but extremily insecure as its literally just a javascript file with an array of objects containing usernames & passwords and then its just running a forEach(element => element.match("inputUsername") an so on
which is easily just retraceable in the sources used on f12
i mean idk wut u actually ment by handling login w/o
wut does dat mean
like keeping track of users and their data or something??
Basically, authentication
you need to login to enter the page
like that :p
ooh
so it handles logins --> do the credentials match a user in the userbase
I canât say that I do. I didnât know netlify handles validation and security but I wouldnât be surprised
i see something else strange in you pen. you are using name-attributes in regular divs. these are meant (mostly) for form-elements
well for dat u will first need to have a db to store data
and php to work with it
if i am not wrong
well, I could also use classes instead, would that be a better alternative?
I thought maybe using names would be better
well, i can use some free to use databases, obv with limitations but yh
naah
class is better
name is ment for form elements
Yes youâll want to use classes. Names are for input elements like mark said and thatâs only for keeping track of what is what in your form on the server side.
Alright, I'll use classes instead
I thought using names might be better, considering it's not, I'll revert to using classes
after that, when a user first enters your site u will tell them to log in, and the use the form info via php to check if that username and password matches db
don't I need a server to run php code tho?
idk too much about backend so cant ans dat
but what u r trying to achieve is to do with backend
u should start from basics if u wanna do backend
unless u already have done em
Your company probably has a db somewhere to store the existing logins that you need to be able to access
in dat case just do some research and check whats needed for authentications
Well I do have the basic knowledge of php
Validation is one of the annoying parts of forms and you need to have everything secure and locked down
issue is, here's the thing
I work in a store, just a regullar employee, no higherup
Soooo, there is no way they'll grant me access to their database with information of all the stores carrying their name
or their server for thatm atter
well if they dont then theres no alternative way for u to authenticate user
What are you trying to accomplish with this separate site for employees to log in ?
you can look at xampp. with that you can locally run php and a mysql db
dats like, i tell u do pick a ball from a bag but u cant have access to the bag xD
Hostkoala I believe does as well
Oh, basically, the store I work at struggles w/ keeping track of expiry dates and I despise the app the store branch made, its unintuitive, broken
A lot of backlog
so i wanted to make my own to help the store out
bro code has a greay video on showing how to do dat
well not exactly broken but its just so unintuitive and confusing
and an ightmare to use
If itâs a local app for just your branch maybe you can ask to refactor the existing one? Iâm sure theyâd love the free help and the login portion will have been taken care of already
And even just asking shows youâre invested as an employee and wanting to improve the experience for everyone
also btw, idk if u have already been told but, use the form tag instead of div and use input with type submit or use button inside the form instead of p tag
I could do that yeh, but eventually I want to move away from this store and be a programmer, so I need some experience to show
My manager knows that I'm not gnna stick around forever and am planning to move on someday
So making a website from scratch that would help tackle a real issue is the best experience
I'm also going to make a bugtracker bc thats always handy
Are you wanting to make an app or a web app
Web app, maybe if I feel up for it I'll branch it out further
For now it's just to keep track of expiry dates, but I might eventually make it into something bigger
and maybe I may also write some arduino and have a physical scanner, doesnt cost much to make but will help enormously
the biggest cost there would be the arduinomotherboard xd
What is arduino? Is that something that uses your phone camera to scan bar codes and things?
no, it's just c+
well why not u make a full stack web compatible for your store your own and then once done u can propose that to your manager and if they like it then they'll change current site with yours and let youe site have acccess to their db if its possible
arduino is just c+
well, its actually just the motherboard ig xd its written in c+
c+ ?
or u mean c++
yeh, I might give that a go, first things first tho, making sure the page works and does what it intends tho xD
Oh so it would just be one physical controller ? Why not use the phone camera that every employee has in their pocket?
ya
Well, my manager doesn't like it when people use their phones
and I know my co-workers kinda break that rule all the time nad text and such
so if I make a scanner, which obv cant text and shit
that issue can't become worse
not sure, if my memory serves me right it should be just c+
nvm c++
i dont think c+ is a language at least never heard of one
Oh I thought the point was to use the app , but itâs something that would be referenced on a work computer. You could make your site only accessible from those computers and then only employees would have access
yeah, my mistake its c++ :p
I assume c++
Yeah
yup
c+ sounds kind like saying c hash tag đ
Here's the thing; the web-version will always be available in the office
The manager can always see it, we are allowed access to the office and the pc, so we can use it to check on expiry dates and discount them or remove them from the shelves and such
The scanner will be made to make that process easier, but the scanner would also be mostly for when I decide to try and make it into a system that keeps track of the stock
for that I need to keep track of what comes in and what goes out, so using a scanner can provide me with that information too
as we can literally just scan whatever gets delivered
btw how much experience u got in web dev
scanner as in the one to scan barcode?
well, I did start an education several years ago in university, but I never finished
woops, so now I'm just doing things on my own
yeah, well that basicaly means I'll just look for a library of a barcode reader
implement that in the scanner, all I would need is an infrared reader if im not mistaken a button and a light so it's always lit up correctly
well i didnt mean it like dat but rather how much u know about web dev
like for me i have firm grip on html, css and js and now i am learning framework [react]
like dat
AH, um, not sure how to answer that
if you mean the languages I know, currently I'm familiar with html css and javascript only and a small portion of arduino c++ as i made a linetracker before (a kinda car thing that follows a line)
I am planning however on looking at the react.js
and a small portion of php im familiar w too
kinda thinking of making a few games too, that'll be a whole disaster for sure xD
hmmm
i am not sure how the connection between your scanner and your whole site is to be done but sounds like its gonna be very advanced level stuff
Well, the site will be one thing
Its purpose is to:
--> keep track of expiry dates
--> Expantion: keep track of inventory and also help with ordering
With the expantion comes the use of the scanner
the scanner will be connected to the wifi which'll ensure it can connect to everything it needs to
and do its thing
k got it
well m asking cause if u ARE plannin got make a full stack app then u should have a very good experience and idea from fundamentals to advance concepts so its better for u to later on upgrade your app
Yeah,I'm also planning on making a "demo" of the website that I can show to potential businesses in interviews (one that's not connected to the database in use and such)
so upgrading the app is something that I'll constantly think of doing wheneverpossible
and rewriting code too if I come to know something much more advanced or more secure or faster
well considering that u have done projects like the car that follows a line, i guess wont be too hard for u
i just dont have any idea about those fields so no can tell xD
that's okayy
I'm glad it's not in c#, last time I was writing c# Ijust got so lost
in how everyting is connected
like sometimes it made sense and othertimes i was like how tf are you connected
yaa
so makes sure u have practiced enough all the things that u will be using from simple html to frameworks to db
if i learn c# i'll learn it for game dev
yeh, eventually when ive mastered or well, gotten the knowledge of react.js I may actually rewrite my project in react too
coincidence i want to make a few games đ about 7
hope u did enough js like u know working with api and stuff as well as grasping the concept of async js and similar level concepts
oh btw, speaking of react, recently I saw a vid on yt of an application to visually write react.js
xD
i made a few games using js canvas
visually write?
yeh, I'v worked with api's and async before
nice
Your form element should look like this
<form action=â/action-page.phpâ method=âpostâ class=âlogin-formâ>
<label for=âusernameâ class=âsr-onlyâ>Username</label>
<input type=âtextâ name=âusernameâ id=âusernameâ class=âinputâ placeholder=âusernameâ required>
<label for=âpasswordâ class=âsr-onlyâ>Password</label>
<input type=âpasswordâ name=âpasswordâ id=âpasswordâ class=âinputâ placeholder=âpasswordâ required>
<button type=âsubmitâ class=âbtnâ>Login</button>
</form>https://www.codux.com "visual ide", I don't know how else to word that than visually writing code sorry xd
Codux
Codux | Visual IDE for React
Develop React components fluidly and faster, all in one visual IDE. Codux enables you to visually edit your own code and see changes reflected instantly, everywhere.
Even if you donât want to show the labels, you need them in the html for accessibility reasons
thanks! tho for now I haven't yet written any back-end code to it yet
I'm first going to make sure it looks visually okay and after that I'll change and adjust where needed to enter back-end
o right, for the screenreaders right?
The class sr-only is a common class name to hide content from visual users but screen readers still give them information
so its like doing coding using gui of some sort
u drag drop stuff and application does the coding under the hood for u?
yh something like that
it looks useful tho when writing react, i havent written react before
but i assuem itll be so useful
like you can make the components n add them n see how they look on all sizes
u should send in
its easier to read dat way xD
n adjust the stying n everything
ya i wouldnt reccomend
dats just being lazy xD
if u wanna be a web dev learn the actual way xD
true, but I mean, even now when writing just normal css and html
having to refresh your page
everytime
is a pain in the ass
i mean i now just use a local live extention
what ide r u using
Missed a back tick
but still, before I always refresh my page
vsc
Live server is the best
then why r u not using live extansion
oki
I do now, but I only got knowledge of its existence recently
before that I always refresh refresh refresh
tho if u use vite or making react app via doing
npm creat react-app (might not be correct commpletely ) then u dont need any extension
well just go to extension page and download live serverwhat's vite? is that an ide ?
i havent looked into react yet, im first focussing on this...and 2 other projects that I have laying around unfinished
not ide
I diiiid! xd
I have it since 1 month ago
But I've been writing codes for maybe a year (I stopped writing after i stopped my university journey, but started again a year ago)
Fireship
YouTube
Vite in 100 Seconds
Vite is a JavaScript build tool that makes it faster and easier to build web applications. It's similar to tools like Webpack, but relies on modern browser features like ES Modules to simplify and speed-up the build process.
#javascript #webdev #100SecondsOfCode
đ Resources
Vite Docs https://vitejs.dev
Vite SSR Plugin https://vite-plugin-ssr...
so basically, for 11 months my refresh suffered!
Anyway, I'm going back to coding! ain't getting nowhere talking đ
Thanks for the help and the conversation, been very insightful
ill look at that vid later today
k great
well apart from that learn how u use emmet in vsc
like in vsc if u type
.test#test+span.class-1.class-2>span>lorem100 and hit tab itll generate
it can increase your coding speed a lot
top of that u can use pre processors like pug to write html fasterah right, ive sen people use things like
.container x4 or something and it generated 4 div's with the class container
or was it written differntly?like dis
in pug will be
.container*4ahh so its like that
thanks !
ya
@Brightie forgot to add height, just add
height: 100vh