Hilfe
Neues Thema
Antworten
Hallo,
wie bekomme ich ein Mehrspaltiges Layout mit css hin, so das es vom IE6 bis zu den aktuellen Browsern funktioniert ?
Insgesamt sind es 7 Spalten mit einer jeweiligen festen Breite von 170px.
Bisher schaffe ich es nur im IE6 und älter das die Spalten nebeneinander stehen. Im Firefox oder Chrome sind die Spalten untereinander.
Seite 1 von 1
mehrspaltiges Layout
#1
tron0815 
geschrieben 16. April 2011 - 12:48
Nach oben
#2
Holger_N
- Gruppe: aktive Mitglieder
- Beiträge: 5.215
- Beigetreten: 11. September 10
- Reputation: 459
- Geschlecht:Männlich
geschrieben 16. April 2011 - 13:06
Ich würde ein "Gebilde" mit 7 Spalten einfach Tabelle nennen und dann entgegen aller Tipps für gutes Seitenlayout eine Tabelle nutzen. Allerdings nur, wenn die Darstellung mit alten Browsern sooo wichtig ist.
Ansonsten würde ich mit umfließenden DIVs arbeiten also mit der Eigenschaft "float".
Wobei ich das jetzt nicht ganz verstehe bei dir. Wie machst du es denn jetzt? Normalerweise gibts Probleme doch eher bei älteren Browsern und bei neueren funktionierts?
Ansonsten würde ich mit umfließenden DIVs arbeiten also mit der Eigenschaft "float".
Wobei ich das jetzt nicht ganz verstehe bei dir. Wie machst du es denn jetzt? Normalerweise gibts Probleme doch eher bei älteren Browsern und bei neueren funktionierts?
Dieser Beitrag wurde von Holger_N bearbeitet: 16. April 2011 - 13:08
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#3
Kirill
- Gruppe: aktive Mitglieder
- Beiträge: 3.588
- Beigetreten: 04. Dezember 06
- Reputation: 121
- Geschlecht:Männlich
- Wohnort:BT
geschrieben 16. April 2011 - 15:38
Interessiert mich auch, wie floatet man das denn? Ich habe bereits Probleme, 4 Divs in einer 2x2-Matrix mit Floats anzuordnen. Mit absoluten Positionen arbeiten will ich aber auch nicht.
Most rethrashing{
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
#4
Holger_N
- Gruppe: aktive Mitglieder
- Beiträge: 5.215
- Beigetreten: 11. September 10
- Reputation: 459
- Geschlecht:Männlich
geschrieben 16. April 2011 - 16:26
Zitat (Kirill: 16.04.2011, 16:38)
Interessiert mich auch, wie floatet man das denn? Ich habe bereits Probleme, 4 Divs in einer 2x2-Matrix mit Floats anzuordnen. Mit absoluten Positionen arbeiten will ich aber auch nicht.
2x2 ginge so:
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width:800px; margin-left:auto; margin-right:auto; border:1px solid #000000;">
<h1>2x2</h1>
<div style="width:375px; float:left; background-color:#BB0000; margin:10px;"><p>links oben</p></div>
<div style="width:375px; float:left; background-color:#BB0000; margin:10px;"><p>rechts oben</p></div>
<br style="clear:left;" />
<div style="width:375px; float:left; background-color:#BB0000; margin:10px;"><p>links unten</p></div>
<div style="width:375px; float:left; background-color:#BB0000; margin:10px;"><p>rechts unten</p></div>
<br style="clear:left;" />
</div>
</body>
</html>
(Hab die css-Angaben mal direkt reingeschrieben)
und 7 Spalten würd ich so machen.
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width:1270px; margin-left:auto; margin-right:auto; border:1px solid #000000;">
<h1>7 Spalten</h1>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 1</p><p>Spalte 1</p><p>Spalte 1</p><p>Spalte 1</p><p>Spalte 1</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 2</p><p>Spalte 2</p><p>Spalte 2</p><p>Spalte 2</p><p>Spalte 2</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 3</p><p>Spalte 3</p><p>Spalte 3</p><p>Spalte 3</p><p>Spalte 3</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 4</p><p>Spalte 4</p><p>Spalte 4</p><p>Spalte 4</p><p>Spalte 4</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 5</p><p>Spalte 5</p><p>Spalte 5</p><p>Spalte 5</p><p>Spalte 5</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 6</p><p>Spalte 6</p><p>Spalte 6</p><p>Spalte 6</p><p>Spalte 6</p></div>
<div style="width:170px; float:left; background-color:#BB0000; margin:5px;"><p>Spalte 7</p><p>Spalte 7</p><p>Spalte 7</p><p>Spalte 7</p><p>Spalte 7</p></div>
<br style="clear:left;" />
</div>
</body>
</html>
Dieser Beitrag wurde von Holger_N bearbeitet: 16. April 2011 - 16:34
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#5
Kirill
- Gruppe: aktive Mitglieder
- Beiträge: 3.588
- Beigetreten: 04. Dezember 06
- Reputation: 121
- Geschlecht:Männlich
- Wohnort:BT
geschrieben 16. April 2011 - 16:48
Boah ist das krank. Ich mei, ich käm nie drauf, dass wenn ich bei 2 Divs float: left einstelle, die nebeneinander auftauchen. Dann auch das float: clear, das ist mal ein eiskalter Verstoß gegen sämtliche HTML-Grundsätze, die ich bisher kenne, nämlich dass das Markup sich da auswirkt, wo es steht... Da wundert es mich nicht, dass es überall noch Layouttabellen gibt.
Und natürlich probier ich es gleich aus.
Und natürlich probier ich es gleich aus.
Most rethrashing{
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
#6
Holger_N
- Gruppe: aktive Mitglieder
- Beiträge: 5.215
- Beigetreten: 11. September 10
- Reputation: 459
- Geschlecht:Männlich
geschrieben 16. April 2011 - 17:39
Zitat (Kirill: 16.04.2011, 17:48)
Boah ist das krank. Ich mei, ich käm nie drauf, dass wenn ich bei 2 Divs float: left einstelle, die nebeneinander auftauchen. Dann auch das float: clear, das ist mal ein eiskalter Verstoß gegen sämtliche HTML-Grundsätze, die ich bisher kenne, nämlich dass das Markup sich da auswirkt, wo es steht... Da wundert es mich nicht, dass es überall noch Layouttabellen gibt.
Und natürlich probier ich es gleich aus.
Und natürlich probier ich es gleich aus.
Neeee, das hab ich doch nur dahingeschrieben, damit man sieht, was für was ist. Wenn ich das bei einer Seite anwende, kommt das alles wie es sich gehört, in die CSS-Datei.
Ansonsten kannst du auch float:right nehmen. Ob nun das Eine links von dem Anderen ist oder das Andere rechts von dem Einen ist ja Wurscht. Das ist doch eigenlich logisch, wenn ich sage dass links oder rechts was vorbeifließen soll, statt drunter zu stehen, dass es dann daneben erscheint. Dann natürlich mit clear:right; beenden oder mit clear:both; dann braucht man nicht aufzupassen ob rechts oder links.
Dieser Beitrag wurde von Holger_N bearbeitet: 16. April 2011 - 17:47
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
#7
Kirill
- Gruppe: aktive Mitglieder
- Beiträge: 3.588
- Beigetreten: 04. Dezember 06
- Reputation: 121
- Geschlecht:Männlich
- Wohnort:BT
geschrieben 16. April 2011 - 17:42
Zitat (Holger_N: 16.04.2011, 18:39)
Neeee, das hab ich doch nur dahingeschrieben, damit man sieht, was für was ist. Wenn ich das bei einer Seite anwende, kommt das alles wie es sich gehört, in die CSS-Datei.
)Ich wollte nur sagen, dass das schon recht unintuitiv ist, was die Jungs und Mädels vom W3C sich so ausgedacht haben.
Most rethrashing{
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
#8
richter001
geschrieben 17. April 2011 - 01:18
Hi, ich hoffe es ist nicht frech hier mal nach einer ähnlichen Sache zu fragen.
Ich blicke bei HTML überhaupt nicht durch.
Also ich bräuchte hilfe wie ich eine HTML-Seite mit "nur" 5 Spalten mache
Die Spalten sollten 200 breit sein und nebeneinander angeordnet sein.
Wenn der Browser aber in der breite zusammengeschoben wird, dann
sollten sich die einzelnen Spalten einfach der Reihe nach untereinander stapeln.
Es sollte wenn möglich in allen Browsern gleich aussehen. Auch in dem ollen
InternetExplorer6 der bei mir auf Arbeit nur genutzt werden kann.
Gibts da erinen simplen Trick ?
Ich blicke bei HTML überhaupt nicht durch.
Also ich bräuchte hilfe wie ich eine HTML-Seite mit "nur" 5 Spalten mache
Die Spalten sollten 200 breit sein und nebeneinander angeordnet sein.
Wenn der Browser aber in der breite zusammengeschoben wird, dann
sollten sich die einzelnen Spalten einfach der Reihe nach untereinander stapeln.
Es sollte wenn möglich in allen Browsern gleich aussehen. Auch in dem ollen
InternetExplorer6 der bei mir auf Arbeit nur genutzt werden kann.
Gibts da erinen simplen Trick ?
#9
Holger_N
- Gruppe: aktive Mitglieder
- Beiträge: 5.215
- Beigetreten: 11. September 10
- Reputation: 459
- Geschlecht:Männlich
geschrieben 17. April 2011 - 09:03
Zitat (richter001: 17.04.2011, 02:18)
Hi, ich hoffe es ist nicht frech hier mal nach einer ähnlichen Sache zu fragen.
Ich blicke bei HTML überhaupt nicht durch.
Also ich bräuchte hilfe wie ich eine HTML-Seite mit "nur" 5 Spalten mache
Die Spalten sollten 200 breit sein und nebeneinander angeordnet sein.
Wenn der Browser aber in der breite zusammengeschoben wird, dann
sollten sich die einzelnen Spalten einfach der Reihe nach untereinander stapeln.
Es sollte wenn möglich in allen Browsern gleich aussehen. Auch in dem ollen
InternetExplorer6 der bei mir auf Arbeit nur genutzt werden kann.
Gibts da erinen simplen Trick ?
Ich blicke bei HTML überhaupt nicht durch.
Also ich bräuchte hilfe wie ich eine HTML-Seite mit "nur" 5 Spalten mache
Die Spalten sollten 200 breit sein und nebeneinander angeordnet sein.
Wenn der Browser aber in der breite zusammengeschoben wird, dann
sollten sich die einzelnen Spalten einfach der Reihe nach untereinander stapeln.
Es sollte wenn möglich in allen Browsern gleich aussehen. Auch in dem ollen
InternetExplorer6 der bei mir auf Arbeit nur genutzt werden kann.
Gibts da erinen simplen Trick ?
Nimm den zweiten Quellcode, nimm 2 Divs raus, mach bei den restlichen 5 aus der 170 eine 200, pass die Gesamtbreite im übergeordneten DIV an und fertig.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
Thema verteilen:
Seite 1 von 1
