Antworten zum Thema „Das verflixte FLOAT“

xero7 · 17.05.2007

Frage
Ich habe mal eine Frage wegen float und ich hoffe dass es die letzte ist.
Hier hab ich ein Design umgesetzt und jetzt habe ich eine Frage die hoffentlich alles erklären wird. Hier ist das Problem, dass der Content erst unten bei der Navigation anfang. Wie kann ich das ändern?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="images/style.css" />
<title>Clan</title>
</head>
<body>

<div id="center">
<div id="header"></div>
<h6 class="mainnavigation"></h6>
<div class="navi_top">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>



<h6 class="navispeck"></h6>
<p class="inahlt">
Home<br />
Home<br />
</p>
<h6 class="navispeck"></h6>
<p class="inahlt">
Home<br />
Home<br />
</p>
<h6 class="navispeck"></h6>
<p class="inahlt">
Home<br />
Home<br />
</p>

<h6 class="counter"></h6>
<div id="content"></div>

</div>

</body>
</html>

stb_87 · 17.05.2007

AW: Das verflixte FLOAT

Moin,

ich würde ein paar zusätzliche div-Container einbauen.

HTML:

<div id="header">Hier kommt das Logo und so was hin!</div>
<div id="main">
      <div class="navigation">Navigation -> Float Left</div>
      <div class="content">Seiteninhalt ->Float Left</div>
</div>
<div id="footer">Fußzeile</div>

Bei mir klappt das immer einwandfrei.

xero7 · 17.05.2007

AW: Das verflixte FLOAT

Also die divs verschachteln?

welchen wert soll der div main habne? und welchen navigation und content?
ist das dann keine Div-suppe?

Schonmal vielen dank stb_87

Bracuhst nur sagen float left... clear und so.

stb_87 · 17.05.2007

AW: Das verflixte FLOAT

EDIT: Ein float für mein ist nicht zwingend erforderlich. float:left oder clear ist aber aus eigener Erfahrung beides möglich.

Genau, die <div>'s verschachteln. Wenn du das dann alles einrückst, ist es auch gleich viel übersichtlicher.

Die Werte sind dir eigentlich freigestellt. Die kannst du ja eingeben, wie du sie gerne möchtest.

Ich habe eben gesehen, dass du eine vertikale und horizontale Navigation hast, dann erweitere es noch mit

HTML:

<div id="hnavigation">Dies kommt unter den Header</div>

und dann die entsprechenden Inhalte in die Container "schmeißen"

HTML:

	<div id="allumfassend">
		<div id="header">
			<div id="navi_list_head"></div>
			<div id="logo"></div>
		</div>
		<div id="main">
			<div id="navigation"></div>
			<div id="content">	</div>
		</div>
	</div>

Code:

#allumfassend {
	width: 1000px;
	height: 100%;
	padding: 0px;
	margin: 0px;
	}

#header {
	flaot: left;
	width: 1000px;
	height: 100px;
	padding: 0px;
	margin: 0px;
	}	

#navi_list_head {
	float: left;
	width: 200px;
	height: 100px;
	background-color: #e32;
	padding: 0px;
	margin: 0px;
	}	

#logo {
	float: left;
	width: 725px;
	height: 100px;
	background-color: #afa;
	padding: 0px;
	margin: 0px;
	}

#main {
	width: 1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	padding: 0px;
	margin: 0px;
	}	

#navigation {
	float: left;
	width: 200px;	
	min-height: 600px;
	font-size: 1.3em;
	background-color: #e32;
	padding: 0px;
	margin: 0px;
	}

#content {
	float: left;
	width: 655px;
	min-height: 580px;
	font-size: 1.3em;
	background-color: #fae;
	padding: 10px;
	margin: 0px;
	}

Das ist ein Auszug von meinem Standard-Layout.

Naja, <div>-Suppe ist Ansichtssache.

knispel · 18.05.2007

AW: Das verflixte FLOAT

Aus der float-Geschichte halte ich mich erstmal raus.

Wozu soll das denn sein:

HTML:

<h6 class="navispeck"></h6>
<p class="inahlt">
Home<br />
Home<br />
</p>

Ein ganz neues Menü-Layout?

Wie breit ist ein <p>-Element?

Wann clearst du?

Mach dir doch bitte mal ein paar eigene Gedanken und denke vielleicht an deinen letzten Thread.

blackout · 18.05.2007

AW: Das verflixte FLOAT

<div id="allumfassend"> ist schlicht das Body- bzw HTML-Element, ergo kann man's weglassen.

Generell zum "Float-Probelm": Will man zwei Block-Elemente (ordentlich) nebeneinander anordnen, kommt man ums Wrappen nicht herum, also das Erstellen von Hilfselementen (gut, in seltenen Fällen, z.B. bei statischen Breiten, geht's auch ohne).

HTML:

<div id="mainwrapper">
    <div id="left"/>
    <div id="right"/>
</div>

Alles was unzusammenhängend übereinander steht (alles!) kann ohne Umklammernde Hilfselemente gebastelt werden. (Will man natürlich zwei übereinander stehenden Elementen die gleiche Breite geben ist's natürlich wieder anders, aber das sollte hier ohne Belang sein)

wex_stallion · 18.05.2007

AW: Das verflixte FLOAT

Ich häng mich an den Thread hier mal ran, vielleicht bin ich auch einfach nur zu doof für diesen Webkrempel, aber irgendwie funktioniert das mit dem floaten in allen Tuts, nur bei mir nicht.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css" media="screen">
<html, body {margin: 0; padding: 0;}
#container {width: 500 px; height: 500 px;}
#innenrechts {float:right; width: 20px; background-color:#999999;}
#innenlinks {margin-right: 100px; background-color:#00FF00;}
</style>
</head>

<body>
<div id="container">
<div id="innenlinks"></div>
<div id="innenrechts"></div>
</div>
</body>
</html>

Die Kollegen "innenrechts" und "innenlinks" sind sich scheinbar spinnefeind, denn zusammen wollen die nicht in den Container.

Andersrum hab ich in diversen "Layout mit CSS"-Tuts gesehen, dass so ein eingeschobener mit Float positioniert wird, aber sobald Text drin ist, ballert alles auseinander. Wo ist die Rahmeneinstellung "umfliessen" für Printler?

knispel · 18.05.2007

AW: Das verflixte FLOAT

...sind sich scheinbar spinnefeind...

wie sollten sie sich auch vertragen, wenn du nur
<div id="innenrechts"></div> aus dem normalen Fluss nimmst. Mach es doch mit
<div id="innenlinks"></div> analog durch float:left;

wex_stallion · 18.05.2007

AW: Das verflixte FLOAT

Ich frag mich halt eher, warum es funktioniert. Ich hab den Krempel 1:1 abgetippt, bei mir klappt das irgendwie nicht; das fällt alles auseinander.

Oder liegt das irgendwie am Doctype oder so?

Ich hasse diese Webkacke

knispel · 18.05.2007

AW: Das verflixte FLOAT

...den Krempel 1:1 abgetippt...

reicht nicht, denn da heißt es auch auf Seite 6:

Lets see. Copy and paste this text into the sidebar div:

HTML:

<div id="sidebar-a">
    Lorem ipsum dolor sit amet, ...
</div>

Das TUT hat `nen Fehler!

Einfachste Version könnte z.B. so aussehen:

HTML:

<!DOCTYPE ...">
<head>
<meta ... />
<title>Titel</title>
<style type="text/css" media="screen">
<html, body {margin: 0; padding: 0;}
#container {width: 800px;}
#innenrechts {float:right; width: 20%; background-color:#999999;}
#innenlinks {float:left; width: 80%; background-color:#00FF00;}
</style>
</head>

<body>
<div id="container">
<div id="innenlinks">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
    Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
    Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
    euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
    Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
    purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
<div id="innenrechts">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
    Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
    Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
    euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
    Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
    purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
</div>
</body>
</html>

wex_stallion · 18.05.2007

AW: Das verflixte FLOAT

Danke, das probiere ich auch einmal aus.

In meinem Falle lag der Fehler schlicht und einfach daran, das ich bei den Attributen mal mit und mal ohne Leerzeichen gearbeitet habe, da hat er sich irgendwie dran aufgehangen. 20px wird anscheinend anders interpretiert als 20 px.

Dreamweaver schrieb:
Der Wert ""500"" wird für die CSS-Eigenschaft height nicht unterstützt [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0]

Für Printler is dat nix

K-Dawg · 18.05.2007

AW: Das verflixte FLOAT

Joa, bei 500 px interpretiert der Browser bzw. der XHTML Parser das anders. Allgemein sollte bei Webseiten die angaben direkt ohne leerzeichen angegeben werden, sonst kann es zu besagte probleme kommen.

Aber in den meisten fällen, ist es auch ratsam die Floats zu "clear"en. Somit werden auch viele probs beseitigt, vorausgesetzt, es wurden die richtigen angaben gemacht ,-)

wex_stallion · 18.05.2007

AW: Das verflixte FLOAT

Die Dinger ohne Leerzeichen einzugeben ist für erfahrene Setzer grauenhaft. Ich schreib ja auch nicht "10km" oder "2l" *schauder*

NicoB · 18.05.2007

AW: Das verflixte FLOAT

Solltest du nicht eigtl statt einem Leerzeichen nur ein halbes- einfügen?

Der Code soll net optisch ansprechend sein, sondern funktionieren.

wex_stallion · 18.05.2007

AW: Das verflixte FLOAT

Ich wär ja für ein Spatium, aber das raffen die Coder net

blackout · 18.05.2007

AW: Das verflixte FLOAT

Ein Spatium ist kein halbes Leerzeichen, ein Spatium ist einfach ein sehr kleiner Zwischenraum bzw. ein Messingplättchen das diesen erzeugt. Dieser Zwischenraum wird in modernen Schriften (bzgl. Satzzeichen) bereits von der Schrift selbst festgesetzt, von daher ist es weder notwendig noch in HTML vorhanden. (Nicht mal LaTeX kann's von Haus aus so weit ich weiß, muss man sich selbst definieren)

NicoB · 18.05.2007

AW: Das verflixte FLOAT

Nun aber wieder bitte zurück zum Thema.

knispel · 19.05.2007

AW: Das verflixte FLOAT

#Schuster {
background: bleib bei deinem Spatium;
clear: both;
}

:lol:

K-Dawg · 19.05.2007

AW: Das verflixte FLOAT

wex_stallion schrieb:
Die Dinger ohne Leerzeichen einzugeben ist für erfahrene Setzer grauenhaft. Ich schreib ja auch nicht "10km" oder "2l" *schauder*

Wie nicobats schon schrieb, soll es funktionieren.

Ich weis nicht ob du es weist, aber Webdesign ist etwas anderes als Print, daher Webdesign und nicht print

(bissel spass)

Wenn du dich also mit Webdesign auseinander setzen möchtest, dann musst du dich damit auseinandersetzen und die Schreibregel davon auch akzeptieren und nicht darüber meckern

@ knipsel
LoL

wex_stallion · 19.05.2007

AW: Das verflixte FLOAT

Das hat sich mittlerweile auch schon zu mir herumgesprochen, wobei ich mir ernsthaft die Frage stelle, ob ich mir das weiterhin überhaupt antun will und werde.

Gemessen an den zwei oder vielleicht drei Webaufträgen im Jahr erscheint es nicht wirklich lohnend, sich mit dem Krempel intensiv auseinander zu setzen. Alle Nase lang irgendeine Warnung: "Das mag der IE 5.5 nicht", bauste um dann blökt der dich an, dass der Opera das nicht versteht … die ticken doch nicht mehr sauber. Müste ich das jeden Tag acht Stunden lang machen, wär ich wahrscheinlich schon im Bau.

Ich bin zu alt für den Mist, ich geb den Krempel zukünftig raus und kassier Provi fürs Nixtun, das rechnet sich viel eher.

Kann/Muss ja auch nicht jeder alles können, wäre ja schlimm. Ausserdem: Shirts werden auch getragen, wenn der Strom ausfällt.