Danke euch! Es hat funktioniert.
Das das Layout optisch gelinde gesagt eine Katastrophe ist, ist mir schon klar. Es ging erstmal darum, nach Kursanleitung, zu verstehen wie es funktioniert. Habe mich gerade kurz mit den Flexboxen beschäftigt, super Tipp. Da hätte ich mir viel Ärger ersparen können bisher! Da werde ich mich gleich mal besser einarbeiten.
Beiträge von kseyfang
-
-
wieso benutzt du nicht flexboxen ? Damit wäre es einfacher und auch zeitgemäß?
Auch html 5 Tags wären besserIch absolviere derzeit einen Grundkurs für Webseitenprogrammierung, da war dies so vorgegeben.
-
Und wie sollen sie?
Die Navigationsleiste links (hier: <div id="left">), dann soll in der Mitte ein Hauptteil kommen (hier: <div id="middle">) und rechts eine Möglichkeit für Werbeanzeigen, Bilder (hier: <div id="right">).
Oben sonst eine Kopfzeile (Die floatet nicht) und unten eine Fußzeile (dito). -
Hallo zusammen,
ich bin noch blutiger Anfänger und habe aktuell das Problem, dass die Boxen nicht so floaten, wie sie sollen.
Ich habe anbei ein Minimalbeispiel erstellt.Danke und Gruß
HTML
Alles anzeigen<!DOCTYPE html > <html lang="de"> <head> <meta charset="UTF-8"> <title> Test </title> <style> *{ margin: 0px; padding: 0px} #frame{ width: 1276px; background-color: #E6E6E6; border: solid 3px black; } #header{ width: 1276px; background-color: #ABABAB; border: solid 2px blue; } #main{ width: 1276px; background-color: #D4D4D4; border: solid 2px blue; } #foot{ width: 1276px; background-color: #ABABAB; border: solid 2px blue; } #left{ width: 196px; height: 1000px ; background-color: white; border: dotted 2px black; float: left;} #middle{ width: 876px; height: 1000px ; background-color: #D1EEEE; border: dotted 2px blue; float: none; } #right{ width: 190px; height: 1000px ; background-color: white; border: dotted 2px black; float: right;} .clear {background: none; border: 0px; clear: both; display: block; font-size: 0px; margin: 0px; padding: 0px; width: 0px; height: 0px;} h1 { font-family: Helvetica, Avenir, Arial, sans-serif; font-size: 13px;} p { font-family: Helvetica, Avenir, Arial, sans-serif; font-size: 11px;} ul {list-style-type: none; list-style-position: inside; font-family: Helvetiva, Avenir, Arial sans-serif; font-size: 12px; margin-left: 0em; padding-left: 0em;} </style> </head> <body> <div id="frame"> <div id="header"> <p> Kopfzeile </p> </div> <div id="main"> <div id="left"> <ul> <li> <p>Navigation 1</p> </li> <li> <p>Navigation 2</p> </li> <li> <p>Navigation 3</p> </li> </ul> <hr class="clear" /> </div> <div id="middle"> <hr class="clear" /> </div> <div id="right"> <img src="img/jpg.jpg" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" /> <br /> <img src="img/jpg.jpg" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" /> <hr class="clear" /> </div> </div> <div id="foot"> <p> Fußzeile </p> </div> </div> </body>
