News-Bereich mit Tabelle

[Dracus]

Ich habe mir ein Design erstellt. Jetzt möchte ich im content-Bereich rechts einen kleinen Newsbereich einrichten, der ca. 25% der Seite belegt. Das wollte ich mithilfe von Tabellen machen, eine für den content und eine für die News. Ich habe das, was ich erreichen möchte, mal kurz grob mit Paint gezeichnet.:
http://dracus.selfip.org/homepage/design.png

Im Moment sieht meine Website so aus:
http://dracus.selfip.org/homepage/home.htm

Gruß & Danke :)
Dracus

[zwerg]

Glück auf Dracus!

Wolltest du uns das jetzt nur mitteilen oder hast du auch ne Frage?

Freundliche Grüße

zwerg Alex

[Dracus]

Glück auf Dracus!

Wolltest du uns das jetzt nur mitteilen oder hast du auch ne Frage?

Freundliche Grüße

zwerg Alex

Mir ist am Ende auch aufgefallen, dass ich nichts gefragt habe, wollte aber einen Doppelpost vermeiden. ;)

Jetzt mit Aufgabenstellung: =P
Wie kriege ich das überhaupt (und ohne zu großen Tabellenwirrwarr) hin?

[Cheatah]

Hi,

Wie kriege ich das überhaupt (und ohne zu großen Tabellenwirrwarr) hin?

durch Verzicht auf Tabellen selbstverständlich, denn da gehört keine hin. Welches Problem siehst Du bei der Umsetzung des semantischen Markups respektive den zugehörigen Darstellungsempfehlungen?

Cheatah

[Dracus]

Hi,

Wie kriege ich das überhaupt (und ohne zu großen Tabellenwirrwarr) hin?

durch Verzicht auf Tabellen selbstverständlich, denn da gehört keine hin. Welches Problem siehst Du bei der Umsetzung des semantischen Markups respektive den zugehörigen Darstellungsempfehlungen?

Cheatah

Ich verstehe nicht, wie ich ohne Frames/Tabellen links und rechts jeweils einen Bereich definieren kann.

[stareagle]

Hallo,

Ich verstehe nicht, wie ich ohne Frames/Tabellen links und rechts jeweils einen Bereich definieren kann.

Du scheinst das Feld von hinten aufzuzäunen.

Zuerst kommen die Inhalte, dann wird mittels CSS (und nur mit CSS) formatiert.

Aber analysieren wir mal dein Design (ich werd dir jetzt keinen fertigen Code hier hinschreiben):

• Oben soll der Titel erscheinen. Ein <div> sollte hier das richtige Element sein. Darin packst du deinen Text (event. innerhalb eines Absatzes). Event. wäre hier auch eine (Hintergrund-) Grafik möglich/angebracht.

• Dann kommt deine Navigation. Eine Navigation ist der klassische Fall für eine <ul>. Die Listenpunkte packst du dann mittels CSS nebeneinander. Stichwort: float.

• Dann kommt deine Subnavigation. S. Navigation.

• Dann möchtest du zwei Bereich nebeneinander haben. Auch hier setzt du float ein. Die Bereiche definierst du über zwei Divs.

• Dann soll die Breite der ganzen Seite noch beschränkt werden. Das geht über einen CSS-Angabe für die Breite von Body. Das Zentrieren kannst du per margin machen.

Gruß

Stareagle

[Dracus]

• Oben soll der Titel erscheinen. Ein <div> sollte hier das richtige Element sein. Darin packst du deinen Text (event. innerhalb eines Absatzes). Event. wäre hier auch eine (Hintergrund-) Grafik möglich/angebracht.

• Dann kommt deine Navigation. Eine Navigation ist der klassische Fall für eine <ul>. Die Listenpunkte packst du dann mittels CSS nebeneinander. Stichwort: float.

• Dann kommt deine Subnavigation. S. Navigation.

• Dann möchtest du zwei Bereich nebeneinander haben. Auch hier setzt du float ein. Die Bereiche definierst du über zwei Divs.

• Dann soll die Breite der ganzen Seite noch beschränkt werden. Das geht über einen CSS-Angabe für die Breite von Body. Das Zentrieren kannst du per margin machen.

Mein Problem ist, dass ich nicht den float-Effekt haben möchte. Der Newsbereich soll nicht vom Text links daneben umflossen werden, sondern ich möchte wirklich 2 eigene Bereiche festlegen. Für ein wenig Code wäre ich sehr dankbar, weil ich einfach nicht weiterkomme.

[stareagle]

Moin,

Mein Problem ist, dass ich nicht den float-Effekt haben möchte. Der Newsbereich soll nicht vom Text links daneben umflossen werden, sondern ich möchte wirklich 2 eigene Bereiche festlegen. Für ein wenig Code wäre ich sehr dankbar, weil ich einfach nicht weiterkomme.

Auch das ist kein Problem, du musst den Bereichen die umflossen werden, einfach eine margin entsprechend der Breite des Bereiches geben, für den du das float definierst.

Gruß

Stareagle

[Dracus]

Moin,

Mein Problem ist, dass ich nicht den float-Effekt haben möchte. Der Newsbereich soll nicht vom Text links daneben umflossen werden, sondern ich möchte wirklich 2 eigene Bereiche festlegen. Für ein wenig Code wäre ich sehr dankbar, weil ich einfach nicht weiterkomme.

Auch das ist kein Problem, du musst den Bereichen die umflossen werden, einfach eine margin entsprechend der Breite des Bereiches geben, für den du das float definierst.

Gruß

Stareagle

Ich habe das ganze so definiert:

Im Stylesheet:
 ~~~css div#info{
   width: 25%;
   float: right;
 }

  
Für den content-Bereich habe ich nichts definiert.  
  
  
In der HTML-Datei:  
 ~~~html
<div id="info">  
     <h2>News</h2>  
    <p>Hier kommen die News hin.</p></p>  
 </div>  
  
 <div id="content">  
 <h2>Inhalt</h2>  
 <p>Hier kommt dann der Inhalt der Seite an, die man  eigentlich anschauen möchte.</p>  
 </div>

Es funktioniert so, wie es laut Regel soll. Nur ist das Ergebnis davon nicht so, wie das, was ich haben möchte. Beide Bereiche sollen immer gleich lang sein. Es soll gar keinen Textumfluss zwischen den beiden Elementen geben.

Ich habe es mal mit einer zweispaltigen Tabelle gemacht und dabei bis jetzt noch keinen Nachteil gefunden. Wo soll bei dieser Methode das Problem liegen?

[Dracus]

Sorry für den Doppelpost.

Auch wenn ich z.B. einen 3px-margin um das float-Element mache, wird es immer noch vom Text umflossen.

[Auge]

Hallo

Im Stylesheet:

div#info{

width: 25%;
   float: right;
}

>   
> Für den content-Bereich habe ich nichts definiert.  
  
Hättest du für jenen `margin-right:26%;`{:.language-css} definiert, würde der (eventuell) zu lange Text nicht den Newsbereich umfließen.  
  

> In der HTML-Datei:  
>  ~~~html

<div id="info">  

>      <h2>News</h2>  
>     <p>Hier kommen die News hin.</p></p>  

<!-- ZWEI schließende Tags fuer Textabsaetze? Schreib- oder Kopierfehler? -->  

>  </div>  
>   
>  <div id="content">  
>  <h2>Inhalt</h2>  
>  <p>Hier kommt dann der Inhalt der Seite an, die man  eigentlich anschauen möchte.</p>  
>  </div>

Es funktioniert so, wie es laut Regel soll. Nur ist das Ergebnis davon nicht so, wie das, was ich haben möchte. Beide Bereiche sollen immer gleich lang sein.

Tja, dafür ist dieses System (float) nicht geschaffen worden. Blockelemente haben die Höhe, die ihr Inhalt benötigt, außer man erzwingt eine Höhe (height). Daher wirst du nicht ohne weiteres beide Elemente (#info, #content) gleich hoch/lang bekommen. Du könntest dies umgehen, indem du dem beide Elemente umschließenden Element im Sichtbereich des einen Elements (z.B. #info) ein über die gesamte Höhe gekacheltes Bild als Hintergrund zuweist.

Beispiel: SELFHTML mehrspaltige Layouts

Ich habe es mal mit einer zweispaltigen Tabelle gemacht und dabei bis jetzt noch keinen Nachteil gefunden. Wo soll bei dieser Methode das Problem liegen?

Du benutzt ein Element zu einem Zweck, für den es nicht da ist. Das funktioniert in den mir bekannten Ausgabeprogrammen, dass ich nicht alle kenne, dürfte klar sein.
Du nagelst die Aufteilung der Seite fest. Im Gegensatz dazu wäre dein obiger HTML-Quelltext mit den CSS-Angaben dazu geeignet, per Änderung am CSS-Code auf einen Schlag Positionen, Größen, Farben etc. pp. von Elementen zu ändern, ohne den HTML-Quelltext anfassen zu müssen. Das ist zumindest meiner Meinung nach ein Riesen_vorteil_.

Tschö, Auge

[Cheatah]

Hi,

Ich habe mir ein Design erstellt. Jetzt möchte ich im content-Bereich rechts einen kleinen Newsbereich einrichten, der ca. 25% der Seite belegt. Das wollte ich mithilfe von Tabellen machen, eine für den content und eine für die News. Ich habe das, was ich erreichen möchte, mal kurz grob mit Paint gezeichnet.:
http://dracus.selfip.org/homepage/design.png

auf http://dracus.selfip.org/homepage/design.png sehe ich nichts, was tabellarischen Daten auch nur ähnlich wäre. Ob welchen Grundes möchtest Du eine Tabelle nehmen? Was hat das mit CSS zu tun? Und wie lautet eigentlich Deine Frage?

Cheatah

[Dracus]

Hi,

Ich habe mir ein Design erstellt. Jetzt möchte ich im content-Bereich rechts einen kleinen Newsbereich einrichten, der ca. 25% der Seite belegt. Das wollte ich mithilfe von Tabellen machen, eine für den content und eine für die News. Ich habe das, was ich erreichen möchte, mal kurz grob mit Paint gezeichnet.:
http://dracus.selfip.org/homepage/design.png

auf http://dracus.selfip.org/homepage/design.png sehe ich nichts, was tabellarischen Daten auch nur ähnlich wäre. Ob welchen Grundes möchtest Du eine Tabelle nehmen? Was hat das mit CSS zu tun? Und wie lautet eigentlich Deine Frage?

Cheatah

Da habe ich ja auch nur kurz gezeichnet, wie hinterher die Einteilung mit der Tabelle sein sollte, weil ich nicht wusste, wie ich meine Frage formulieren sollte.

Ich will den content-Bereich mit HTML und CSS in zwei Teile teilen:
Einmal den, wo ich halt Sachen zum aktuellen Menüpunkt schreibe, und rechts den Teil mit den aktuellen News. Ich hatte vor, dass mit Tabellen zu machen, meine Versuche sind bis jetzt aber kläglich gescheitert.

Gruß
Dracus

[zwerg]

Ich will den content-Bereich mit HTML und CSS in zwei Teile teilen:
Einmal den, wo ich halt Sachen zum aktuellen Menüpunkt schreibe, und rechts den Teil mit den aktuellen News. Ich hatte vor, dass mit Tabellen zu machen, meine Versuche sind bis jetzt aber kläglich gescheitert.

Ich gebe Cheatah absolut recht. Ich habe zur Zeit auch noch ein Tabellenlayout und hätte ich damals schon gewusst, was ein Aufwand das anpassen ist, hätte ich es gleich ohne Tabellen versucht.
Also ein gut gemeinter Ratschlag: Verzichte auf Tabellen zur Ausrichtung.

Aber nun zu deiner Frage:
Wenn es unbedingt eine Tabelle sein soll, dann würde ich eine Tabelle mit einer Breite von 100% nehmen und dann zwei Spalten mit 75% und 25%. Wie du das machst, kannst du hier nachlesen.

Aber probier es wirklich besser mit diesem  Kapitel.

Freundliche Grüße

zwerg Alex

[zwerg]

Wenn es unbedingt eine Tabelle sein soll, dann würde ich eine Tabelle mit einer Breite von 100% nehmen und dann zwei Spalten mit 75% und 25%.

Also in etwa so:

  
<table border="0" style="width:100%;">  
  <tr>  
    <td style="width:75%; background-color:red;">Content</td>  
    <td style="width:25%; background-color:green;">News</td>  
  </tr>  
</table>