CSS Krieg xD

Kirby.exe

Top Contributor
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:
Javascript:
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:

CSS:
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:

1627390835431.png
 

Mart

Bekanntes Mitglied
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
 

Thallius

Top Contributor
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

Top Contributor
Java:
<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:

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;
}
 

mihe7

Top Contributor
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

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

1627562093557.png

Hier ist der js code:
Javascript:
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;
Javascript:
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:

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);
    }
  }
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;
}
 

Oben