HTML / CSS Tabelle hat zu große Abstände

[Furtano]

Hi,

Warum sind die Abstände zwischen den Konzertiteln so groß?
Ich möchte dass sie sehr klein sind, denn ich habe nicht viel Platz.
(siehe Bild unten)

 <hr> 
 <h1>Konzerte</h1>
 
 <table width="500" align="center" cellpadding="0" cellspacing="0"> 
     <tr valign="top" style="padding:0;">
         <td>
        
         
         <span id="titel7">
         
         <h1>
         <font size="4" style="font-size: 16pt"><span class="Stil15">			
         <span id="titel7"><div align="center">
         WINTERREISE von F. Schubert
         </div></span>
         </h1>
         </span>
         
         <span id="beschreibung7" style="font-size:16px;">
         <b>
         musikalischer Zyklus von Franz Schubert

(Angela Hohmann, Katharina Möller-Weitz und

Lothar Alexander Runze am Klavier)</b></p>

<p>
Die „Winterreise“ ist geprägt von Trauer, Lebensunlust und Sinnlosigkeit des Daseins. Daher resultieren auch die übermäßig vielen Lieder in Moll-Tonarten. Das Spiel in Moll war für Schubert ein Symbol seines eigenen Lebens. So klingt denn auch die „Winterreise“ mit dem „Leiermann“ aus.
</p>
 

<br>
<span style="color:#339900;">
Geplant waren mehrere, verschiedenartige Veranstaltungen an drei Wochenenden am Sparrplatz. Aufgrund schwerer Erkrankungen einer Sängerin und der Hauptdarstellerin im Schauspiel konnten leider nur weniger Veranstaltungen, als geplant, stattfinden.
</span>
         
         </span>
         </td>
     </tr>
     
     <tr>
     <td valign="top">
        <h1>
         <font size="4" style="font-size: 16pt"><span class="Stil15">			
         <span id="titel8"><div align="center">
        NA PART Klezmer und mehr von Ulrike Fieguth und Leo Clemens
        </div></span>
         </h1>
         
         <span id="beschreibung8">
         <a href="Logo/napart2.jpg">
         <img src="Logo/napart2.jpg" width="500" alt=" NA PART Klezmer und mehr"></a>
         <br>
         <font size="3">
         <br>
         Der Name stammt aus dem Bulgarischen und heißt soviel wie „unterwegs“. Musikalisch bewegt sich das Duo zwischen Irish Folk, Klezmer, Balkanklängen bis hin zur Kaffeehausmusik. Manchmal melancholisch und nachdenklich, dann wieder temperamentvoll und voller Lebensfreude. Musik, die zum Verweilen einlädt und doch nie stehen bleibt.
         
         </font>
         </span>
         
         
         
         </td>
     </tr>
 </table>

 

[ZenTao]

Hast du irgendwelche Werte in CSS definiert?

 

[echoDave]

Ohwww was du da ineinander verschachtelt hast geht mal gar net ;-)

Das liegt an den ganzen Div´s(Blockelement sagt wohl hier alles), die ich nicht verstehe an sich brauchst du nur die Tabelle und den span für den Text mehr benötigst du nicht.

Ausserdem sollte innerhalb von span nur Text sein, keine Div´s ;-)

 

[Furtano]

Die ids titelX und beschreibungX sind nur für Javascript (jQuery), dahinter sind keine Stylesheets.

So habe mal span zu div gemacht, trotzdem noch immer noch das selbe Problem

 <hr> 
 <h1>Konzerte</h1>
 
 <table width="500" align="center" cellpadding="0" cellspacing="0"> 
     <tr valign="top" style="padding:0;">
         <td>
        
         
         <div id="titel7">
         
         <h1>
         <font size="4" style="font-size: 16pt"><span class="Stil15">			
         <div align="center">
         WINTERREISE von F. Schubert
         </div>
         </h1>
         </div>
         
         <div id="beschreibung7" style="font-size:16px;">
         <b>
         musikalischer Zyklus von Franz Schubert

(Angela Hohmann, Katharina Möller-Weitz und

Lothar Alexander Runze am Klavier)</b></p>

<p>
Die „Winterreise“ ist geprägt von Trauer, Lebensunlust und Sinnlosigkeit des Daseins. Daher resultieren auch die übermäßig vielen Lieder in Moll-Tonarten. Das Spiel in Moll war für Schubert ein Symbol seines eigenen Lebens. So klingt denn auch die „Winterreise“ mit dem „Leiermann“ aus.
</p>
 

<br>
<span style="color:#339900;">
Geplant waren mehrere, verschiedenartige Veranstaltungen an drei Wochenenden am Sparrplatz. Aufgrund schwerer Erkrankungen einer Sängerin und der Hauptdarstellerin im Schauspiel konnten leider nur weniger Veranstaltungen, als geplant, stattfinden.
</div>
         
         </div>
         </td>
     </tr>
     
     <tr>
     <td valign="top">
        <h1>
         <font size="4" style="font-size: 16pt"><span class="Stil15">			
         <div id="titel8"><div align="center">
        NA PART Klezmer und mehr von Ulrike Fieguth und Leo Clemens
        </div></div>
         </h1>
         
         <div id="beschreibung8">
         <a href="Logo/napart2.jpg">
         <img src="Logo/napart2.jpg" width="500" alt=" NA PART Klezmer und mehr"></a>
         <br>
         <font size="3">
         <br>
         Der Name stammt aus dem Bulgarischen und heißt soviel wie „unterwegs“. Musikalisch bewegt sich das Duo zwischen Irish Folk, Klezmer, Balkanklängen bis hin zur Kaffeehausmusik. Manchmal melancholisch und nachdenklich, dann wieder temperamentvoll und voller Lebensfreude. Musik, die zum Verweilen einlädt und doch nie stehen bleibt.
         
         </font>
         </div>
         
         
         
         </td>
     </tr>
 </table>

 

[MrStools]

Wer oder was hat denn diesen Spaghetti-Code ausgespuckt?

Aufräumen ist da angesagt. Hast du einen link auf die Originalseite? Dann könnte man trotz allem mal auf die Abstände schauen, so schaffe ich es nicht.

 

[Furtano]

Der Code ist nicht auf meinen Mist gewachsen.
Ich habe keine Lust den gesamten Code neu zu korrigieren,
ich will nur, dass es funktioniert.
Mir ist es ein Rätsel, dass die Abstände so groß sind.
Es sind doch keine Stylesheets für die Tabelle hinterlegt, und bei den Titeln oben sind die Abstände ja in Ordnung.


Ja, hier die abgespeckte Version:

http://furtano.de/oper/projekte.html

 

[TheNoxier]

<meta name="GENERATOR" content="OpenOffice.org 3.2 (Win32)" />

 

[MrStools]

Mir ist es ein Rätsel, dass die Abstände so groß sind.

Mir auch. Da ist doch ein leeres CSS - vielleicht solltest Du dort rein ein paar Definitionen für H1 o.ä. unterbringen. Eine genauere Lösung kann ich leider nicht anbieten.

Vielleicht löschst du den fehlerhaften Teil, doppelst den obigen Teil einfach und ersetzt ihn dann Stück für Stück durch den gewünschten Text!?

 

[Timmey92]

das <h1> tag hat einen default margin (je nach browser, die webkit based browser haben folgende), welches die Tabellenzellen unnötig groß macht. oben benutzt er kein h1 unten schon!

h1 {

display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

Das ist übrigens ganz ganz schlechter Stil, aber naja egal.

Leg eine CSS an mit einer Style Definition für h1 ohne margins, dann passt es.

 

[echoDave]

Ich würde auch mal bechaupten es liegt teilweise an den unzähligen Div-Kontainern....

mach die ganzen DIV´s aus der Tabelle raus die gehören da nicht hin wobei das komplette Design der Seite sollte auch nicht mit Tabellen formatiert werden....


€dit:

Habs grade rumprobiert, wenn du das H1 - Element löschst sind die Abstände weg!

Trotzdem ist der Code da der größter rotz, aber sowas erwartet man ja bei einem Generator.....

 

[T. Smith]

Ich habe keine Lust den gesamten Code neu zu korrigieren, ich will nur, dass es funktioniert.

Man schreibt übrigens guten Code, damit es funktioniert. Was du da nutzt, hat mit vernünftigem HTML nicht viel zu tun.

 

[voodoo44]

Habs grade rumprobiert, wenn du das H1 - Element löschst sind die Abstände weg!

Er braucht das h1 nicht löschen - es würde reichen, wenn er es 1. ordentlich um den Text packt (da wo's hingehört) und er 2. eine ordentliche CSS-Formatierung hinterlegen würde.

Trotzdem ist der Code da der größter rotz, aber sowas erwartet man ja bei einem Generator.....

Nein, erwartet man nicht - vermutlich hast du in diesem Bereich noch nie professionelle Software gesehen.

 

[Furtano]

wie gesagt, der Code ist nicht von mir...
Danke euch, es lag an der Überschrift

 

[cartridge_case]

laut firebug liegts am "<td valign="top">" das zieht nen großen rahmen drumrum, die schrift ist an und für sich normal groß

 

[Timmey92]

Es liegt an den h1 margins...