WinFuture-Forum.de: mehrspaltiges Layout - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

mehrspaltiges Layout


#1 Mitglied ist offline   tron0815 

  • Gruppe: Mitglieder
  • Beiträge: 12
  • Beigetreten: 18. Januar 02
  • Reputation: 0

geschrieben 16. April 2011 - 12:48

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

Anzeige



#2 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.170
  • Beigetreten: 11. September 10
  • Reputation: 458
  • 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?

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

#3 Mitglied ist offline   Kirill 

  • Gruppe: aktive Mitglieder
  • Beiträge: 3.590
  • 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);}
0

#4 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.170
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 16. April 2011 - 16:26

Beitrag anzeigenZitat (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.
0

#5 Mitglied ist offline   Kirill 

  • Gruppe: aktive Mitglieder
  • Beiträge: 3.590
  • 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.
Most rethrashing{
DiskCache=AllocateMemory(GetTotalAmountOfAvailableMemory);}
0

#6 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.170
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 16. April 2011 - 17:39

Beitrag anzeigenZitat (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.


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

#7 Mitglied ist offline   Kirill 

  • Gruppe: aktive Mitglieder
  • Beiträge: 3.590
  • Beigetreten: 04. Dezember 06
  • Reputation: 121
  • Geschlecht:Männlich
  • Wohnort:BT

geschrieben 16. April 2011 - 17:42

Beitrag anzeigenZitat (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.
Das ist mir schon klar, habe ich auch so gemacht (danke übrigens :sick:)
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);}
0

#8 Mitglied ist offline   richter001 

  • Gruppe: Mitglieder
  • Beiträge: 4
  • Beigetreten: 17. April 11
  • Reputation: 0

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 ?
0

#9 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.170
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 17. April 2011 - 09:03

Beitrag anzeigenZitat (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 ?


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

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0