|
|||
Hilfe Bei einer Css Floaten geht nicht
Hallo ich soll diese seite so machen https://files.icq.net/get/09igwHSlnG...h705b01839b1bc
bekomme es aber nur so weit https://s1.imagebanana.com/file/180521/Vbn4hled.jpg kann mir da jemand helfen, die 4 links unten nebeneinander statht untereinander zu bekommen mit floaten bekomme ich das nicht hin und das archiv mit den links sollte nach rechts in eine eigene spalte und die links da untereinander Mfg |
Sponsored Links |
|
|||
Hallo
Ohne Link zu deiner Seite oder den gesamten Quelltext können wir dir nicht konkret helfen. Allgemein: Für die 4 Links unten erscheint mir Flexbox sinnvoller als Float. Gruss MrMurphy |
Sponsored Links |
|
|||
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Layout mit Flexbox</title> <link href="neulena.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Gentium+Basic" rel="stylesheet"> <style> </style> </head> <body> <section> <nav> <h1>Toller Blog <ul> <li><a href="#">Neue Beiträge</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Community</a></li> <li><a href="#">Kontakt</a></li> </h1> <br> <h2>Post 1</h2> <br> <p><h3> von Lena Rimkus </p> Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore<br> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing<br> </p> elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <br> Lorem ipsum dolor sit amet.</h3> <h4> <li><a href="#">zu den Kommentaren</a></li> </h4> </ul> <aside> <h5>Archiv <ul> <li><a href="#">Januar 2018</a></li> <li><a href="#">Februar 2018</a></li> <li><a href="#">März 2018</a></li> <li><a href="#">Mehr</a></li> </h5> </ul> </aside> </section> <div class="brclear"></div> <div id="footer"> <p>©Copyright 2018</p> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">AGB</a></li> </ul> </div> </body> </html> Code:
body { font-family: 'Gentium Basic', serif; width: 90%; padding: 2%; border-radius: 20 px; text-shadow: 2px 5px 8px #333333; } nav ul { list-style-type: none; padding-left: 2.0%; width: 20%; border-radius: 20 px; display: flex; } nav ul li { margin: 1em auto; } section { width: 70%; display: flex; } article { width: 20%; background: #ddd; padding: 2.5%; border-radius: 20 px; } aside { width: 20%; background: #ddd; padding: 2.5%; border-radius: 20 px; } article, { width: 20%; } aside { width: 20%; } nav { width: 60%;} h1 { font-family: Gentium, serif; float: left; width: 80%; } h2 { font-family: Gentium, serif; width: 80%; } h3 { font-family: Gentium, serif; } h4 { font-family: Gentium, serif; list-style: none; } h5 { font-family: Gentium, serif; margin: 1em auto; } |
|
|||
Hallo
Grundlage für ein funktionierendes CSS ist ein fehlerfreies HTML. Daran hapert es bei dir. Elemente dürfen nicht ineinander verwebt sein (keine Ahnung ob es dafür einen passenderen Ausdruck gibt). Falsch ist zum Beispiel Code:
<p> <h3> </p> </h3> Code:
<p> </p> <h3> </h3> Das alles beachtest du überhaupt nicht. Webseiten in der Browserdarstellung sind zudem keine Fehleranzeige. Browser versuchen jeden Mist, der ihnen vorgesetzt wird, noch einigermaßen sinnvoll anzuzeigen. Ich habe deine Seite mal online gestellt Testseite und durch den Validator gejagt Ergebnis des Validators Die Fehler solltest du zunächst beheben. Die Links in dem Footer bekommst du mit folgenden CSS-Anweisungen nebeneinander: Code:
#footer ul { display: flex; } #footer li { list-style-type: none; padding: 0.2rem 0.5rem; } Gruss MrMurphy Geändert von MrMurphy (21.05.2018 um 15:55 Uhr) |
|
|||
danke vielmals aber mit dem code
Code:
Mfg |
|
|||
Hallo
Dann verwende stattdessen folgendes CSS: Code:
#footer ul { padding: 0rem; display: flex; } #footer li { list-style-type: none; margin-right: 1rem; } Gruss MrMurphy Geändert von MrMurphy (21.05.2018 um 16:39 Uhr) |
|
|||
danke hat super geklappt
jetzt muss ich nur noch die archiv seite mit januar 2018 bis mehr nach rechts bekommen im heft steht - das main element machen sie zum flexcontainer, sodass das layout zweispaltig wird (section nit artikeln links, aside rechts . - damit die hauptnavigationen horizontal angeordnet werden, machen sie auch die ul innerhalb von nav zum flexcontainer, sie können hierfür auf den selektor nav ul zurückgreifen. wie mach ich den das '? es geht immer nur um cm nach rechts wenn ich es versuche Mfg Code:
body { font-family: 'Gentium Basic', serif; width: 90%; padding: 2%; border-radius: 20 px; text-shadow: 2px 5px 8px #333333; } nav ul { list-style-type: none; padding-left: 2.0%; width: 20%; border-radius: 20 px; display: flex; } nav ul li { margin: 1em auto; display: flex; } section { width: 70%; display: flex; } article { width: 20%; background: #ddd; padding: 2.5%; border-radius: 20 px; } aside { width: 20%; background: #ddd; padding: 2.5%; border-radius: 20 px; } article { width: 20%; } aside { width: 20%; } nav { width: 60%;} h1 { font-family: Gentium, serif; float: left; width: 80%; } h2 { font-family: Gentium, serif; width: 80%; } h3 { font-family: Gentium, serif; } h4 { font-family: Gentium, serif; list-style: none; } h5 { font-family: Gentium, serif; margin: 1em auto; } #footer ul { padding: 0rem; display: flex; } #footer li { list-style-type: none; margin-right: 1rem; } Geändert von westpiomt (21.05.2018 um 17:20 Uhr) |
|
|||
Hallo
Hast du überhaupt schon die Fehler korrigiert? Wenn ja benötigen wir den neuen fehlerfreien Quelltext. Das main-Element finde ich zur Zeit noch gar nicht. Gruss MrMurphy Geändert von MrMurphy (21.05.2018 um 17:27 Uhr) |
|
|||
hab die ganzen fehler nicht alle verstanden hab versucht was zu ändern dann war der text auf einmal in der mitte und total lang untereinander...
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Layout mit Flexbox</title> <link href="neulena.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Gentium+Basic" rel="stylesheet"> <style> </style> </head> <body> <section> <nav> <h1>Toller Blog <ul> <li><a href="#">Neue Beiträge</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Community</a></li> <li><a href="#">Kontakt</a></li> </h1> <br> <h2>Post 1</h2> <br> <p> von Lena Rimkus </p> Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore<br> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing<br> </p> elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <br> Lorem ipsum dolor sit amet.</h3> <h4> <li><a href="#">zu den Kommentaren</a></li> </h4> </ul> <aside> <h5>Archiv <ul> <li><a href="#">Januar 2018</a></li> <li><a href="#">Februar 2018</a></li> <li><a href="#">März 2018</a></li> <li><a href="#">Mehr</a></li> </h5> </ul> </aside> </section> <div class="brclear"></div> <div id="footer"> <p>©Copyright 2018</p> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">AGB</a></li> </ul> </div> </body> </html> |
Sponsored Links |
|
|||
Hallo
Es ist leider recht schwierig dir zu helfen, da dir entscheidende Grundlagen fehlen. Das du zudem Informationen immer häppchenweise nachschiebst erleichtert die Hilfe auch nicht grade. Damit du überhaupt zu einem Ergebnis kommst habe ich mal versucht mit den bislang bekannten Informationen eine korrekte Webseite zu erstellen. Das CSS befindet sich im head-Bereich der Webseite, das kannst du auch komplett einfach in eine externe Datei auslagern. Da bei meinem Testseiten-Provider bplaced.net größere Umbauarbeiten stattfinden kann ich aktuell leider keine Online-Version zur Verfügung stellen. Vorhin hat die noch funktioniert, jetzt leider nicht mehr. Hier der Quelltext der Webseite: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout mit Flexbox 01</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } body { font-family: 'Gentium Basic', serif; text-shadow: 2px 5px 8px #333333; padding: 2%; border-radius: 20px; } h1 { font-family: Gentium, serif; width: 80%; } h2 { font-family: Gentium, serif; width: 80%; } header { max-width: 700px; } nav { max-width: 700px; } nav ul { padding: 0px; display: flex; } nav ul li { list-style-type: none; margin-right: 1rem; } main { max-width: 700px; display: flex; } article { background: #ddd; padding: 2.5%; border-radius: 20px; flex-grow: 1; flex-shrink: 1; flex-basis: 1px; } aside { background: #ddd; padding: 2.5%; border-radius: 20px; margin-left: 1rem; flex-grow: 0; flex-shrink: 0; flex-basis: 150px; } footer { max-width: 700px; } footer ul { padding: 0rem; display: flex; } footer li { list-style-type: none; margin-right: 1rem; } </style> </head> <body> <header> <h1>Toller Blog</h1> </header> <nav> <ul> <li><a href="#">Neue Beiträge</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Community</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> <main> <article> <h2>Post 1</h2> <p>von <i>Lena Rimkus</i></p> <p>Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt Bla Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p> <p>magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing</p> <p>elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p> <p>Lorem ipsum dolor sit amet.</p> <p class="link"><a href="#">zu den Kommentaren</a></p> </article> <aside> <h2>Archiv</h2> <p><a href="#">Januar 2018</a></p> <p><a href="#">Februar 2018</a></p> <p><a href="#">März 2018</a></p> <p><a href="#">Mehr</a></p> </aside> </main> <footer> <p>© Copyright 2018</p> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">AGB</a></li> </ul> </footer> </body> </html> Zum Beispiel der Schatten für den Text, der das Lesen der Seite unnötig erschwert. Oder border-radius für das body-Element. Nachtrag: Die Seite funktioniert grade mal wieder. Ich weiß aber nicht ob während der Umbauarbeiten von bplaced.net immer problemlos abrufbar ist. Einfach mal probieren. Testseite 2 Nachtrag: Ich habe die Testseite 2 für ein späteres Beispiel angepasst. Gruss MrMurphy Geändert von MrMurphy (21.05.2018 um 20:56 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü - Anfänger benötigt Hilfe | mauricen | CSS | 2 | 24.01.2013 12:44 |
ext rechts und links an CSS Kreis floaten? | choumana | CSS | 10 | 20.11.2012 15:12 |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 17:01 |
css hilfe | victorwooten | CSS | 1 | 19.11.2006 14:15 |
CSS mit CSS Seiten verlinken !!! BRAUCHE HILFE !!!! | beavis-2005 | CSS | 2 | 16.01.2006 18:10 |