danisahne1996
Neues Mitglied
Ich hab folgende Website 
Und ich möchte, dass die orange
genau in die türkise
und den grünen
passt.
Wenn ich es mit
versuch passiert garnichts, wenn ich es mit
versuch dann sind es zwar wirklich 100%, aber die
rutscht auch wieder runter, wo sie nicht sein sollte. Hier noch der Code für HTML und CSS
Und ich möchte, dass die orange
HTML:
section
HTML:
aside
HTML:
footerWenn ich es mit
HTML:
width: auto;
HTML:
width: 100%;
HTML:
aside
HTML:
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Login System</title> <link rel="stylesheet/less" type="text/less" href="less/central.less"> <script src="../libs/js/less.js" type="text/javascript"></script> </head> <body> <div> <header id="head"> Header </header> <nav id="nav"> <ul> <li><a href="index.php">Main</a></li> <li><a href="secret.php">Secret</a></li> </ul> </nav> <section id="main"> Willkommen im Loginsystem, bitte loggen sie sich ein um den geheimen Bereich zu sehen! </section> <aside id="sidebar"> <section class="widget"> <p>Login</p> <form action="function/login.php" method="post"> Username: <input type="text" name="name"><br> Password: <input type="password" name="password"><br> <input type="submit" value="Login"> </form> </section> <section class="widget"> <p>Register</p> <form action="function/register.php" method="post"> Username: <input type="text" name="name"><br> Password: <input type="password" name="password"><br> Email: <input type="email" name="email"><br> Age: <input type="text" name="age"><br> <input type="submit" value="Register"> </form> </section> </aside> <footer id="footer"> Footer </footer> </div> </body></html>
HTML:
/******************************** * Dokumentname: style.less * * Erstellt von: Daniel Richter * * Erstellt für: Login * * * * Farben: * */@green: #AFDA00;/* * */ @blue: #00DADA;/* * */ @orange: #DA5000;/* * */ @violet: #8000DA;/* * *******************************/
/**********Alle Bildschirmgrößen**********/@media screen{
/*---------Universal Reset---------*/header, nav, section, aside, .widget, footer{ padding: 10px;}
/*---------Container---------*//*#########Header#########*/ header{ background: @green; } /*#########Navigation#########*/ nav{ background: @violet; /*#########Liste#########*/ ul{ list-style: none; /*#########Listenelement#########*/ li{ display: inline; }}} /*#########Section#########*/ section{ float: left; width: auto; background: @orange; } /*#########Sidebar#########*/ aside{ float: right; background: @blue; /*#########Widget#########*/ .widget{ background: @blue; clear: both; }} /*#########Footer#########*/ footer{ clear: both; background: @green; }}