Box - float funktioniert nicht

kseyfang

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

<!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&szlig;zeile </p>


    </div>


</div>


</body>

Alles anzeigen

Bandit

Zitat von kseyfang

habe aktuell das Problem, dass die Boxen nicht so floaten, wie sie sollen.

Und wie sollen sie?

kseyfang

Zitat von Bandit

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).

basti1012

wieso benutzt du nicht flexboxen ? Damit wäre es einfacher und auch zeitgemäß?
Auch html 5 Tags wären besser

kseyfang

Zitat von basti1012

wieso benutzt du nicht flexboxen ? Damit wäre es einfacher und auch zeitgemäß?
Auch html 5 Tags wären besser

Ich absolviere derzeit einen Grundkurs für Webseitenprogrammierung, da war dies so vorgegeben.

Sailor

In deinem Fall liegt es daran, dass dein id="middle" mit 'float: none;' verhindert, dass sich id="right" so verhält, wie du es beabsichtigst... es wird eben erst hinter 'middle' angezeigt.
float none wirkt in diesem Fall wie 'clear: both;'

Ansonsten ist dein Layout (sorry) grottig!!!
Viel zu viele id's und vor allem viel zu viele absolute Größenvorgaben (px).
Du solltest dir den Vorschlag von basti1012 mal zu Herzen nehmen und dich mit Flexbox beschäftigen - das macht vieles einfacher.

basti1012

Das sind ja tolle vorgaben. Bei Flexboxen spart man sich auch die ganzen breiten und höhen Angaben ,weil sich das fast alles von alleine ausrichtet.
Nagut zu deinen Code
Schreib mal bei #middel float left rein anstatt float:none

kseyfang

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.

basti1012

Versuch auch gleich das du die html5 Elemente nutzt wie nav, header, main, footer usw. Die verhalten sich wie normale div`s ,ist aber übersichtlicher und sieht natürlich Aktueller aus.

Wenn du dir ein paar Tutorials durchgelesen hast zu Flexboxen ,kann man hier http://the-echoplex.net/flexyboxes/ schön rumspielen.
Da kann man ganz gut sehen und testen wie sich die Flexboxen verhalten und man bekommt auch gleich den Code angezeigt was man da so gemacht hat.

Tags

Benutzer online in diesem Thema