CSS Krieg xD

[Kirby.exe]

Also ich habe mir vorgenommen für eine Hausarbeit anstatt eine "langweiligen" CLI GUI mit React.js ein schönes Webinterface zu machen. Dazu muss ich mich leider auch mit CSS auseinandersetzen und habe da immernoch große Verständnisprobleme

Ich möchte gerne meine Login Page so allignen, dass die Input Felder und Überschrift zentriert auf der Seite sind. Leider funktioniert das nicht sonderlich wie man unten im Screenshot sieht...

Das ist mein React Code:

import { useEffect } from "react";
import './css/login.css'

const Login = () => {
    useEffect(() => {
        document.title = 'Log In';
    });

    return (
        <div>
            <div className="login-container">
                <h1>Log In</h1>
                <form>
                    <input type="text" placeholder="Email"></input>
                    <input type="text" placeholder="Password"></input>
                    <input type="submit" value="Log In"></input>
                </form>
            </div>
        </div>
    );
};

export default Login;

CSS Code:

div {
    position:absolute;
    width: 100%;
    height: 100%;
    overflow:hidden;
    background: rgb(0,25,36);
    background: linear-gradient(135deg, rgba(0,25,36,1) 0%, rgba(61,9,121,1) 29%, rgba(0,91,255,1) 100%);
}
.login-container{
    position: absolute;
    margin: 0 auto;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    display: block;
    text-align: center;
}

h1{
    margin-top: 20%;
    color: aliceblue;
}

form{
    display:grid;
    grid-template-columns: 1;
    grid-gap:10px;
    align-items: center;
    justify-content: center;
}

input{
    padding: 10px;
    border-radius: 15px;
}

Screenshot:

 

[Mart]

wenn du position absolute benutzt und %werte hernimmst greift das auto anpassen im browser durch parent elemente nicht .. da musst du mit aligns arbeiten oder sonst was.. css/ GUI mit fixen pixel werten is für die katz.. ja gut % verschiebt auf basis deiner screen size ja schön ... aber das würden deine Layout container auch für dich tun wenn sie das auch ändern dürften von den children

 

[Kirby.exe]

Könntest du mir ein "korrektes" Beispiel vorführen xD

 

[Mart]

<div align="center">

solange der kontent nicht fix ist wird alles in die mitte gepackt


w3schools is da sehr gut da dir ein beipsiel zeigen und auch zeigen was raus kommt würde ich sehr empfehlen zum lernen von dem ganzen kladeradasch

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Thallius]

Bin nur ich eigentlich blind oder was genau ist da jetzt nicht zentriert in den Screenshot?

 

[Kirby.exe]

Bin nur ich eigentlich blind oder was genau ist da jetzt nicht zentriert in den Screenshot?

Zentriert ist es, aber eben sehr hacky Deswegen wollte ich gerne wissen wie es besser geht

 

[Thallius]

Ich finde es in diesem Fall nicht verkehrt dem Login Panel eine feste Größe zu geben (Nicht unbedingt in Pixeln sondern in em) da es irgendwie scheiße aussieht wenn die Eingabefelder nicht an die Fontgröße angepasst sind.

 

[Kirby.exe]

<div align="center">

solange der kontent nicht fix ist wird alles in die mitte gepackt

Mhh align gibt es nicht xD gibt nur z.B. align-conten und das ändert leider nichts

Habe jetzt folgendes CSS:

.login-background {
    position:absolute;
    width: 100%;
    height: 100%;
    overflow:hidden;
    background: rgb(0,25,36);
    background: linear-gradient(135deg, rgba(0,25,36,1) 0%, rgba(61,9,121,1) 29%, rgba(0,91,255,1) 100%);
    text-align: center;
    justify-items: center;
}
.login-container{
    /*background-color: aqua;*/
    align-content: center;
    text-align: center;
}

.login-heading{
    margin-top: 20%;
    color: aliceblue;
}

form{
    margin-top: 2%;
    display:grid;
    grid-template-columns: 1;
    grid-gap:10px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.text-field, .submit-button{
    padding: 12px;
    width: 20em;
    border-radius: 15px;
    border-style: none;
}

.text-field:focus{
    width: 23em;
    outline: none;
    transition: 0.2s ease-in-out;
}

.submit-button:focus{
    opacity: 70%;
    transition: 0.1s ease-out;
}

.submit-button{
    color: #fff;
    background-color: green;
}

 

[Thallius]

mach das Ganze doch einfach mal in ein jsFiddle. Dann kann man es direkt ausprobieren und damit herumspielen.

 

[mihe7]

Um ein Block-Element horizontal zu zentrieren, setzt man dessen Breite und stellt margin-left sowie margin-right auf auto ein. (EDIT: so kenn ich das zumindest, bin allerdings auch nicht der Frontend-Heini)

 

[Kirby.exe]

The CSS War goes on xD Irgendwie mag meine Navbar den Rest nicht xD Die colliden miteinander:



Hier ist der js code:

Spoiler: home.js

import React from 'react';
import Navbar from '../components/navbar/Navbar';
import './css/home.css'
import useSticky from '../components/hooks/useSticky';

const Home = () => {
    const { isSticky } = useSticky();

    return (
        <div className="home-background">
            <Navbar sticky={isSticky}/>
            <div className="slider-box">
                <h1 className="home-heading">Home</h1>
                <p className="home-subheading">This is home page</p>
                <div className="product-slider">

                </div>
            </div>
        </div>
    );
};
export default Home;

Spoiler: navbar.js

import { MenuItems } from './MenuItems';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import './Navbar.css';
import { NavLink } from 'react-router-dom';

let authentificated = true;
const Navbar = ({ sticky }) => (
            

            <nav className={sticky ? "navbar navbar-sticky" : "navbar"}>
                <NavLink exact to="/"><h1 className="navbar-logo"> Hardware Store</h1></NavLink>
                <ul className="nav-menu">
                    {MenuItems.map((item, index) => {
                        if(item.title != "Log In"){
                            return (
                                <li key={index}>
                                    <NavLink className={item.cName} exact to={item.url}>
                                        {item.title}
                                    </NavLink>
                                </li>
                                
                            )
                        }else if(!authentificated){
                            return ( 
                                <li key={index}>
                                    <NavLink className={item.cName} exact to={item.url}>
                                        {item.title}
                                    </NavLink>
                                </li>
                            )
                        }
                    })}
                    {authentificated && <li><NavLink className="nav-links" exact to="/account"><FontAwesomeIcon icon={faUser}/></NavLink></li>}
                </ul>
            </nav>
)

export default Navbar;

Hier der CSS Stuff:

Spoiler: navbar.css

.navbar{
    /*background: rgb(0,25,36);
    background: linear-gradient(135deg, rgba(0,25,36,1) 0%, rgba(69,9,121,1) 30%, rgba(0,91,255,1) 100%);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 2.5rem;
    position: absolute;
    width: 100%;
    font-size: 1.2em;
}

.navbar-logo{
    background: none;
    justify-self: start;
    margin-left: 0;
    color: aliceblue;
    cursor: pointer;
    text-decoration: none;
}

.logo-box{
  cursor: pointer;
}

.login-logo{
  width: 4em;
}

.nav-menu{
    background: none;
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-gap: 10px;
    list-style: none;
    text-align: center;
    width: 80vw;
    justify-content: end;
    margin-right: 2rem;
}

.nav-links{
    color: aliceblue;
    text-decoration: none;
    padding: 0.6rem 1rem;
}

.nav-links:hover{
    background-color: #6d76f7;
    border-radius: 4px;
    transition: all 0.2s ease-out;
}


.navbar-sticky {
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 1px 1px 1px #222;
    animation: moveDown 0.5s ease-in-out;
  }
 
  @keyframes moveDown {
    from {
      transform: translateY(-5rem);
    }
    to {
      transform: translateY(0rem);
    }
  }
 
  @keyframes rotate {
    0% {
      transform: rotateY(360deg);
    }
    100% {
      transform: rotateY(0rem);
    }
  }

Spoiler: home.css

.home-background {
    position:absolute;
    width: 100%;
    height: 100%;
    overflow:hidden;
    background: rgb(0,25,36);
    background: linear-gradient(135deg, rgba(0,25,36,1) 0%, rgba(61,9,121,1) 29%, rgba(0,91,255,1) 100%);
    text-align: center;
    justify-items: center;
}

.slider-box{
    width: 100%;
    height: 10em;
}