3 Spalte hinzufügen

[Arne]

Hallo Forum,

Meine Seite ist wie folgt aufgebaut:

  
<div id='content'>  
<div id='left'>  
</div>  
<div id='right'>  
</div>  
</div>  

  
#content { background-color:#FFFFFF;top:0px; }  
#left { float:left; width:12em; padding:2em;top:0px; }  
#right { padding:1em; margin-left:19em; background-color:#F8F8F8;top:0px; }  

Das ergibt ein schönes 2-spaltiges Layout.

Nun möchte ich ab und an auch mal eine 3. Spalte auf gleicher Höhe wie left und right und identischem Abstand wie zwischen left und right rechts neben right hinzufügen.

Es gelingt mir aber nicht, das zu formatieren. Wie müsste der CSS-Teil für "right_out" ausehen?

Grüß Euch, Arne

[suit]

Es gelingt mir aber nicht, das zu formatieren. Wie müsste der CSS-Teil für "right_out" ausehen?

Wie wäre es, wenn du dich nicht durch unsinnige Angaben wie "rechts", "links" und "noch weiter rechts draußen" verwirren lässt :)

Nenne die spalten #spalte1, #spalte2 und #spalte3 in der Reihenfolge ihrer bedeutung.

Dann kannst du die Spalten mit float und position: relative problemlos herumschieben - alle drei Spalten mit float: left; nebeneinander sollte in deinem Fall völlig ausreichen, wenn die logische Abfolge auch dem entspricht.

<div id="content">
  <div id="spalte1">links</div>
  <div id="spalte2">rechts</div>
  <div id="spalte3">"rechtser"</div>
</div>

[Kai345]

[latex]Mae  govannen![/latex]

Die nächste Stufe wäre dann

<div id="content">
  <div id="spalte1">links</div>
  <div id="spalte2">rechts</div>
  <div id="spalte3">"rechtser"</div>

<div id="spalte4">"am_rechtsesten"</div>

</div>

? *g*

Stur lächeln und winken, Männer!
Kai

[Arne]

[latex]Mae  govannen![/latex]

Die nächste Stufe wäre dann

<div id="content">
  <div id="spalte1">links</div>
  <div id="spalte2">rechts</div>
  <div id="spalte3">"rechtser"</div>
    <div id="spalte4">"am_rechtsesten"</div>
</div>

? *g*

Stur lächeln und winken, Männer!
Kai

Witzig.
Wenn Du jetzt noch den CSS-Part geschrieben hättest, wärs auch hilfreich. So ist es nur witzig :-)
Grüß Dich, Arne

[suit]

Wenn Du jetzt noch den CSS-Part geschrieben hättest, wärs auch hilfreich. So ist es nur witzig :-)

Mein Vorschlag:

#spalte1,  
#spalte2,  
#spalte3 {  
  float: left;  
}  

Mit einer zusätzlichen Spalte von Kai:

#spalte1,  
#spalte2,  
#spalte3,  
#spalte4 {  
  float: left;  
}

Ich verstehe nicht ganz, wo das problem ist - wie das CSS auszusehen hat, kommt auf die Reihenfolge der Spalten im HTML an - die ist durch die Aussage des Dokuments definiert und nicht durch die visuelle anordnung.

Wenn z.B. Spalte 4 links ist und Spalte 1, 2 und 3 in dieser Reihenfolge rechts daneben, dann ist die Sache natürlich noch mit position: relative umzusortieren.

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

Witzig. Wenn Du jetzt noch den CSS-Part geschrieben hättest, wärs auch hilfreich. So ist es nur witzig :-)

Nein, hilfreich. Es zeigt dir auf witzige Weise, dass IDs wie left (links oder verlassen) nicht sinnvoll sind.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Witzig.
Wenn Du jetzt noch den CSS-Part geschrieben hättest, wärs auch hilfreich. So ist es nur witzig :-)

In diesem Fall wäre ich dann durchaus in der Kategorie CSS geblieben.

Stur lächeln und winken, Männer!
Kai

P.S. die ID der Spalte, die direkt _vor_ der mit der ID "am_rechtesten" liegt (also die vorletzte), heißt natürich "ein_klein_wenig_linkser_als_am_rechtesten"

[MudGuard]

Hi,

Wie wäre es, wenn du dich nicht durch unsinnige Angaben wie "rechts", "links" und "noch weiter rechts draußen" verwirren lässt :)
Nenne die spalten #spalte1, #spalte2 und #spalte3 in der Reihenfolge ihrer bedeutung.

Nein, denn ids sollten nicht nach der derzeitig gewünschten Darstellung benannt werden, sondern nach der Bedeutung des Element-Inhalts.

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

Hallo Forum,

Meine Seite ist wie folgt aufgebaut:

> <div id='content'>
> <div id='left'>
> </div>
> <div id='right'>
> </div>
> </div>
> 

left und right sind keine sinnvollen Bezeichner. Benenne Klassen und IDs nach ihrer Funktion, nicht nach ihrem gegenwärtig gewünschten Aussehen oder Position.

Grundsätzliche Idee:

Float left, Float right, kein Float

[ref:self812;css/layouts/anzeige/kopfundfuss.htm@title=Beispiel]

ggf. Floats einschließen

Matthias

[Arne]

Hi,

es klappt nicht, egal wie ichs versuche :-(

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<TITLE>Test</TITLE>  
<style type="text/css">  
#content { background-color:#FFFFFF;top:0px; }  
#spalte1 { float:left; background-color:#66FF00;width:15em; padding:1em;top:0px; }  
#spalte2 { padding:1em; margin-left:19em;  margin-right:19em;background-color:#FF6633;top:0px; }  
#spalte3 { float:right; padding:1em; width:15em;background-color:#3333FF;top:0px; }  
</style>  
</HEAD>  
<body>  
<div id='content'>  
<div id='spalte1'>xxxxxxxxxxxxx</div>  
<div id='spalte2'>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>  
<div id='spalte3'>zzzzzzzzz</div>  
</div> <!-- contentende -->  
</BODY>  
</HTML>  

Warum ist Spalte3 nicht ganz oben??

Arne

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

es klappt nicht, egal wie ichs versuche :-(

nana,

Warum ist Spalte3 nicht ganz oben??

Lies mein Posting noch einmal ganz aufmerksam.

Matthias

[Arne]

Lies mein Posting noch einmal _ganz_ aufmerksam.

Hi Mathias,

hab ich gemacht, ich weiß nicht, worauf Du hinaus willst :-(

Gruß, Arne

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

hab ich gemacht, ich weiß nicht, worauf Du hinaus willst :-(

HTML und CSS müssen zusammenpassen.

1. Spalte float: left;
2. Spalte float: right;
3. Spalte float: none;

Matthias

[Arne]

Om nah hoo pez nyeetz, Arne!

hab ich gemacht, ich weiß nicht, worauf Du hinaus willst :-(

HTML und CSS müssen zusammenpassen.

1. Spalte float: left;
2. Spalte float: right;
3. Spalte float: none;

Matthias

Hi Matthias,

Hast Du das mal ausprobiert?

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<TITLE>Test</TITLE>  
<style type="text/css">  
#content { background-color:#FFFFFF;top:0px; }  
#spalte1 { float:left; background-color:#66FF00;width:15em; padding:1em;top:0px; }  
#spalte2 { padding:1em; margin-left:19em;  margin-right:19em;background-color:#FF6633;top:0px; }  
#spalte3 { float:right; padding:1em; width:15em;background-color:#3333FF;top:0px; }  
</style>  
</HEAD>  
<body>  
<div id='content'>  
<div id='spalte1'>xxxxxxxxxxxxx</div>  
<div id='spalte2'>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>  
<div id='spalte3'>zzzzzzzzz</div>  
</div> <!-- contentende -->  
</BODY>  
</HTML>  

Das ist nicht das, was ich sehen wollte :-(

Gruß, Arne

[Arne]

Hast Du das mal ausprobiert?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<TITLE>Test</TITLE>  
<style type="text/css">  
#content { background-color:#FFFFFF;top:0px; }  
#spalte1 { float:left; background-color:#66FF00;width:15em; padding:1em;top:0px; }  
#spalte2 { float:right; padding:1em; margin-left:19em;  margin-right:19em;background-color:#FF6633;top:0px; }  
#spalte3 { padding:1em; width:15em;background-color:#3333FF;top:0px; }  
</style>  
</HEAD>  
<body>  
<div id='content'>  
<div id='spalte1'>xxxxxxxxxxxxx</div>  
<div id='spalte2'>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>  
<div id='spalte3'>zzzzzzzzz</div>  
</div> <!-- contentende -->  
</BODY>  
</HTML>

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

Hast Du das mal ausprobiert?

Du solltest dich wirklich bemühen, aufmerksam zu lesen.

Im Quelltext:

spalte1 links floaten

spalte3 rechts floaten

spalte2 nicht floaten

Matthias

[Arne]

Om nah hoo pez nyeetz, Arne!

Hast Du das mal ausprobiert?
Du solltest dich wirklich bemühen, aufmerksam zu lesen.

Im Quelltext:

spalte1 links floaten

spalte3 rechts floaten

spalte2 nicht floaten

Matthias

Hi Matthias,

...willkommen bei "Verstehen Sie Spass" oder wie??

Schau mal:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<TITLE>Test</TITLE>  
<style type="text/css">  
#content { background-color:#FFFFFF;top:0px; }  
#spalte1 { float:left;background-color:#FF0000;top:0px; }  
#spalte2 { background-color:#00CCFF;top:0px; }  
#spalte3 { float:right; background-color:#3300CC;top:0px;}  
</style>  
</HEAD>  
<body>  
<div id='content'>  
<div id='spalte1'>xxxxxxxxxxxxx</div>  
<div id='spalte2'>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>  
<div id='spalte3'>zzzzzzzzz</div>  
</div> <!-- contentende -->  
</BODY>  
</HTML>  

Und ruf doch mal diese Seite im Browser Deines Vertrauens auf!

Gruß, Arne

[Arne]

Und ruf doch mal diese Seite im Browser Deines Vertrauens auf!

Gruß, Arne

...oder gerne auch diese hier:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<TITLE>Test</TITLE>  
<style type="text/css">  
#content { background-color:#FFFFFF;top:0px; }  
#spalte1 { float:left;background-color:#FF0000;top:0px; }  
#spalte2 { float:none;background-color:#00CCFF;top:0px; }  
#spalte3 { float:right; background-color:#3300CC;top:0px;}  
</style>  
</HEAD>  
<body>  
<div id='content'>  
<div id='spalte1'>xxxxxxxxxxxxx</div>  
<div id='spalte2'>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>  
<div id='spalte3'>zzzzzzzzz</div>  
</div> <!-- contentende -->  
</BODY>  
</HTML>  

Gruß, Arne

[Arne]

Und ruf doch mal diese Seite im Browser Deines Vertrauens auf!

Gruß, Arne

...oder gerne auch diese hier:

Ach Du Sch...ße...

Es kommt drauf an, dass man Spalte3 vor Spalte 2 im Quelltext notiert?

Hm.... weiß nicht, ob ich das ändern kann...

Gruß, Arne