WebWork Magazin - Design, Gestaltung, Online Medien, html

Webhosting Provider Domain

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- css, drei Spalten und der browser dreht durch

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » html xml - Hilfe für das Erstellen einer Homepage » css, drei Spalten und d... - 21 Nov 2017 Antworten
im Forum für Webhosting Homepage gefunden:
css, drei Spalten und der browser dreht durch
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

Ihr Lieben,

nach einer Nacht und einem Tag erfolglosen Forschens brauche ich auf dem Weg zu einer Lösung einen neuen Denkanstoß. Vielleicht ist die Lösung ja ganz einfach und ich verschwende Stunden.

Ausgangssituation:
Ich habe ein div als Nest, welches drei weitere divs ("content_left", "content" und "content_right") beherbergt. Die divs "content_left" und "content_right" sollen mit fester Breite jeweils am Rand stehen (der Name verrät schon, wo) und das div "content" soll größenveränderlich die Mitte ausfüllen.

Ich dachte, so funktioniert es in der css-Datei (ich lasse das umschließende Nest weg, das stört jetzt nur).

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31:

#content_left {
	float:left;
	width:160;
	padding: 2px;
	border: 1px solid #C5D8C0;
	background-color:white;color:black;
	border-right: 2px solid #B0B7AF;
	border-bottom: 2px solid #B0B7AF;
	overflow:hidden;
}

#content {
	background: #FFFFFF;
	background-image:url(http://www.isjetztegal.de/images/background.jpg);
	background-repeat:repeat-y;
	overflow:auto;
}

#content_right {
	float:right;
	width:160;
	border: 1px solid #C5D8C0;
	background-color:white;color:black;
	border-right: 2px solid #B0B7AF;
	border-bottom: 2px solid #B0B7AF;
	overflow:hidden;
}




Das dachte ich nur.
Im Firefox funktioniert es, ich habe drei schöne Spalten nebeneinander.
Im IE dagegen sind die schönen Spalten nur anfangs nebeneinander - am unteren Ende von "content_left" nimmt "content" (also die mittlere Spalte) dann die komplette Seitenbreite ein. "content_left" wird also von "content" umflossen.

Ich habe mich heißgegoogelt und alle Beispiele, die ich finde, sind im Grunde die gleiche Lösung wie die von mir verwandte. Eine Breitenangabe für die mittlere Spalte hilft mir nichts, da sie sich ja der Größe anpassen soll. Für die mittlere Spalte einen linken Rand anzugeben macht auch keinen Sinn - dann nickt der IE und der Firefox baut ihn (korrekter Weise) zwischen den linken und den mittleren div.

Wo ist mein Denkfehler? Alle Beispiele, die ich fand, sehen so einfach aus, aber bei mir mag es einfach nicht klappen.

Liebe Grüsse
Mondschatten


  Profil   Editieren   Zitieren
progrookie
Fachidiot




Beiträge: 128

wie sieht denn die CSS-Angabe deines "Nestes"(Container) aus?

---

Diese Nachricht wurde geändert von: progrookie
  Profil   E-Mail   Website   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

So:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11:
#content_nest {
	min-height:600px;
	height:auto !important;
	height:600px;	
	padding: 5px;
	border: 0px;
	margin: 1px;
	background: #FFFFFF;
}

  Profil   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

Nur so eine Idee...

Kann es vielleicht sein, dass es an der Reihenfolge der "Befüllung" der divs liegt? Bei mir werden zuerst "content_left", dann "content_right" und anschließend "content" mit Inhalt versorgt.

Viele Grüße
Mondschatten

  Profil   Editieren   Zitieren
progrookie
Fachidiot




Beiträge: 128

Hallo, ich bin es nochmal,

ich habe mal deine CSS-Angaben 1zu1 übernommen und habe per HTML das gebaut:
1: 
2: 
3: 
4: 
5: 
6: 
7:
    <div id="content_nest">
        <div id="content_left">a</div>
        <div id="content">b</div>
        <div id="content_right">c</div>
    </div>

... und habe danach in deiner #content-"Klasse" ein "float:left;" eingebaut, und in deiner #content_nest-Klasse ein "min-width:350px;" (350px nur zu Testzwecken).

Danach das Fenster beim FF(2.0) und IE7 verkleinert, und die DIV's blieben ausgerichtet!!!

Gruß und GeNacht

---

  Profil   E-Mail   Website   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

Hallo progrookie,

danke für Deine Mühe. Deine Vorschläge habe ich übernommen - nun geht es im IE. Dafür sitzt die mittlere Spalte jetzt im Firefox unter der linken Spalte.

Ich sende Dir per PM einen Link zum Ansehen. Ich steige nicht mehr durch. Kein falsches Clearing, soweit ich das sehe, den Platz in der Mitte habe ich versuchsweise auch erhöht, mir fällt nichts mehr ein.

Viele Grüße
Mondschatten

  Profil   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

nun geht es im IE. Dafür sitzt die mittlere Spalte jetzt im Firefox unter der linken Spalte.


Falls es einen css-Experten gibt, der dieses Problem erklären kann... Bislang haben leider alle aufgegeben und ich suche immer noch nach einer Lösung.

Viele Grüße
Mondschatten

  Profil   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

Mit float habe ich viele schlechte Erfahrungen gemacht. Irgendwo wurde mal vorgeschlagen, dass sich damit ganz toll Spalten machen lassen und alle haben das dann nachgemacht.
Ich bin davon nicht überzeugt, Viel schöner geht es mit absoluter Positionierung.

(Und da es sich ausschließlich um Ausrichtung dreht, kannst du Farben etc. ruhig weglassen..)

In der Annahme, dass der mittlere auf jeden Fall am längsten ist (sonst evtl. mit min-height vergrößern), sollte Folgendes klappen:
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45:
body, html
{
	margin: 0;
	border: 0;
	padding: 0;
}

#content_nest
{
	background: lime; /* Testzwecke */
	padding: 5px /* für den mittleren */
}

#content_left, #content_right
{
	width:160px;
	padding: 2px;
	border: 1px solid #C5D8C0;
	border-right: 2px solid #B0B7AF;
	border-bottom: 2px solid #B0B7AF;
	position: absolute;
	margin: 5px; /* Durch absolute Positionierung wird die padding-Angabe des Containers ausgehebelt, darum nachhelfen */

}
#content_left
{
	top: 0;
	left: 0;
}

#content_right
{
	top: 0;
	right: 0;
}

#content
{
	background: #FFFFFF;
	background-image:url(http://www.isjetztegal.de/images/background.jpg);
	background-repeat:repeat-y;
	margin-left: 170px; /* Abstand nach links/rechts */
	margin-right: 170px;
	border: 1px solid red; /*Testzwecke*/
}

(oder gleich das Ergebnis ansehen: Tada! (via dyndns - evtl. offline))

Vermutlich befindet sich jedoch noch etwas darüber. Logo, Banner o.ä., dann müssen die enstprechenden top-Angaben angepasst werden (durch Hinzunahme von margin-top lassen sich sogar em- und px-Werte gleichzeitig verwenden).

  Profil   E-Mail   Website   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

Hallo Ori,

vielen Dank für Deine Antwort und Erklärungen.

Drei Spalten mit absoluter Positionierung ist allerdings das, was ich habe - und loswerden will, weil eben nicht die mittlere Spalte immer die längste ist und kein clear funktioniert, um unten einen ordentlichen Abschluss hinzubekommen.

Ich verstehe nicht, warum überall von der Leichtigkeit des Floatings mit drei Spalten geredet wird, wenn es doch gar nicht funktioniert. Ich habe nun wirklich alles gedreht, probiert und verändert - entweder geht es im IE pder im Ff. In beiden gleichzeitig nicht.

Viele Grüße
Mondschatten

  Profil   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

Wenn es unbedingt mit float sein muss, dann notiere doch einfach die rechte Spalte vor der mittleren. Sofern es nicht die logische Reihenfolge zu arg durcheinanderbringt, müsste das jedes Deiner Probleme lösen.

Ansonsten: Tabellen. Nur Spaß. Aber vielleicht ist die Unterstützung für die display-Angaben für Tabellendarstellung inzwischen so weit, dass das etwas bringt. (Firefox kann sie - IE nicht, riecht nach Star-Hack.)

  Profil   E-Mail   Website   Editieren   Zitieren
Ehemaliges Mitglied (#378)
Quasselstrippe
Threadstarter




Beiträge: 285

Ori schrieb am 22.04.2007 11:29
dann notiere doch einfach die rechte Spalte vor der mittleren.

...das ist bereits so. Erst wird die linke, dann die rechte Spalte gefüllt, ganz zum Schluss kommt der Inhalt der mittleren Spalte. Ändert leider gar nichts.

Viele Grüße
Mondschatten

  Profil   Editieren   Zitieren
Ori
Mausakrobat




Beiträge: 163

Ich habe ein wenig geschummelt und einen weiteren <div> ins Nest gesetzt:
1: 
2: 
3: 
4: 
5: 
6:
 <div id="content_nest">
  <div id="content_left">a<br/>a<br/>a<br/>a<br/>a</div>
  <div id="content_right">c<br/>c<br/>c</div>
  <div id="content">b<br/><br/>b2</div>
  <div id="unten">&nbsp;</div>
 </div>

und diesen via CSS verschwinden lassen: Das Ergebnis sollte jetzt stimmen.

  Profil   E-Mail   Website   Editieren   Zitieren
 

Antworten


Forum » html xml - Hilfe für das Erstellen einer Homepage » css, drei Spalten und d...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - css, drei Spalten und der browser dreht durch im Forum Homepage Hosting AntwortenLetztes Posting
WIe kann ich Datum ausblenden?
in "html xml - Hilfe für das Erstellen einer Homepage"
0 20.10.2017 10:02 von Kevinkk
CSS: ul li navigation - Problem mit dem Einrücken
in "html xml - Hilfe für das Erstellen einer Homepage"
2 05.07.2017 15:12 von elster
Javascript: Im Inputfeld nur bestimmte Zeichen erlauben.
in "html xml - Hilfe für das Erstellen einer Homepage"
4 27.06.2017 18:10 von Diskus
Multiplier Your Bitcoins Pay 0.07 BTC get 10 BTC In 12 Hours
in "html xml - Hilfe für das Erstellen einer Homepage"
0 03.03.2017 11:16 von getbtcfast
HTML CSS Lernprogramme
in "html xml - Hilfe für das Erstellen einer Homepage"
5 25.02.2017 20:27 von Powerwalker
HTML Template aus Photoshop heraus?
in "html xml - Hilfe für das Erstellen einer Homepage"
1 16.06.2015 08:58 von Zeus
Positionieren in einer DIV-Box
in "html xml - Hilfe für das Erstellen einer Homepage"
0 02.06.2015 13:45 von Louie
Bilder in Seite
in "html xml - Hilfe für das Erstellen einer Homepage"
1 18.03.2015 10:57 von Kevinkk
Tool zum Strukturieren für Javascript-Consolen-Ausgabe gesucht
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.02.2015 17:42 von Webinator
Problem mit Zeichenverkettung in Javascript
in "html xml - Hilfe für das Erstellen einer Homepage"
2 31.03.2014 19:03 von raiserle
Online-Inhalte einholen, verarbeiten und Text in Word-Datei umändern.
in "html xml - Hilfe für das Erstellen einer Homepage"
3 03.10.2013 19:11 von Annaa
Tabelle mit Mannschaftslogos
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.10.2013 19:09 von Annaa
Frage zu UTF-8 Sonderzeichen für Handy
in "html xml - Hilfe für das Erstellen einer Homepage"
1 20.08.2013 14:56 von Herby



Besucher : 5376095    Heute : 463     Gestern : 1431     Online : 36     21.11.2017    9:14      1 Besucher in den letzten 60 Sekunden        
alle 60.00 Sekunden ein neuer Besucher
Die letzten 30 Referrer :

1 4:17 - google.com/search - content
2 4:15 - google.com/search - content
3 3:57 - google.com/search - content
4 3:13 - google.com/search - content
5 2:41 - google.com/search - content
6 2:22 - google.com/search - content
7 2:18 - google.com/search - content
8 2:16 - google.com/search - content
9 2:13 - google.com/search - content
10 2:12 - google.com/search - content
11 2:10 - google.com/search - content
12 2:09 - google.com/search - content
13 2:05 - google.com/search - content
14 2:02 - google.com/search - content
15 1:25 - google.com/search - content
16 1:02 - google.com/search - content
17 23:32 - google.com/search - content
18 22:58 - google.com/search - content
19 21:09 - google.com/search - content
20 21:00 - google.com/search - content
21 20:51 - bing.com/search - patchday november 2017
22 18:04 - google.com/search - content
23 18:03 - google.com/search - content
24 18:00 - google.com/search - content
25 17:34 - google.com/search - content
26 17:30 - google.com/search - content
27 16:08 - google.com/search - content
28 15:44 - bing.com/search - knistern boxen pc
29 15:13 - google.com/search - content
30 14:30 - google.com/search - content

Nach oben