Verschiedene Probleme mit CSS

[Dina]

So langsam bin ich über mich auch enttäuscht, aber ich weiß echt nicht weiter.

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts. Ich habs mit Vererbung probiert und mit direktem Befehl. Ohne Erfolg :-(

Geht das überhaupt?

2.) Des weiteren habe ich ein dreispalten Layout zu Anfang meiner Seite.

Der Quelltext schaut ungefähr so aus:

<h1 id="qdocTitle">Hier steht der Titel, der in die Mitte soll</h1>

<div id="qmdocHeader">

<h2 class="field visualNoPrint">Links</h2>
 <p id="qdocId" class="value"> hier steht der linke Teil</p>

<h2 class="field visualNoPrint">Rechts</h2>
 <p id="qdocMand" class="value">Hier steht der rechte Teil</p>

</div>

CSS:
#qmdocHeader {
 border: solid thin;
}

#qdocId {
 float: left;
 margin-left: 20px;
 font-weight: bold;
}

#qdocMand {
 text-align: right;
 margin-right: 20px;
 font-size: smaller;
}

Damit bekomme ich allerdings den teil nicht in die Mitte, der in die Mitte soll. Am einfachsten wäre es natürlich, wenn ich den <div>-Container hoch schiebe, aber ich DARF am Quellcode LEIDER nichts ändern.

Ist das Problem trotzdem lösbar und wenn ja, wie?

Ich hoffe, ihr könnt mir bei meinen Problemchen helfen (das Internet war nicht sehr aufschlussreich!).

Danke an alle, die es versuchen!

Dina

[T-Rex]

So langsam bin ich über mich auch enttäuscht, aber ich weiß echt nicht weiter.

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts. Ich habs mit Vererbung probiert und mit direktem Befehl. Ohne Erfolg :-(

Geht das überhaupt?

2.) Des weiteren habe ich ein dreispalten Layout zu Anfang meiner Seite.

Der Quelltext schaut ungefähr so aus:

<h1 id="qdocTitle">Hier steht der Titel, der in die Mitte soll</h1>

<div id="qmdocHeader">

<h2 class="field visualNoPrint">Links</h2>
<p id="qdocId" class="value"> hier steht der linke Teil</p>

<h2 class="field visualNoPrint">Rechts</h2>
<p id="qdocMand" class="value">Hier steht der rechte Teil</p>

</div>

CSS:
#qmdocHeader {
border: solid thin;
}

#qdocId {
float: left;
margin-left: 20px;
font-weight: bold;
}

#qdocMand {
text-align: right;
margin-right: 20px;
font-size: smaller;
}

Damit bekomme ich allerdings den teil nicht in die Mitte, der in die Mitte soll. Am einfachsten wäre es natürlich, wenn ich den <div>-Container hoch schiebe, aber ich DARF am Quellcode LEIDER nichts ändern.

Ist das Problem trotzdem lösbar und wenn ja, wie?

Ich hoffe, ihr könnt mir bei meinen Problemchen helfen (das Internet war nicht sehr aufschlussreich!).

Danke an alle, die es versuchen!

Dina

Hoi!

<tr> kann man nicht mit border stylen, leider :(.
Wegen dem anderen Problem, gibts da mehrere Ansätze.
Entweder schreibst du den Teil den du in die Mitte willst unter die anderen zwei, also so:

<div>rechts</div>
<div>links</div>
<div>mitte</div>

und stylst rechts mit float:right und links mit float:left

oder du machst es so

<div>links</div>
<div>mitte</div>
<div>rechts</div>

und stylst alle mit float:left.
Kannst das ganze natürlich auch mit float:right machen, da mus es dann in umgekehrter Reinfolge stehen.

Für den IE6 musste noch ein wenig mit margin-left und -right arbeiten, damit der richtig floatet und achte auf den padding Fehler im IE in oder bei gefloateten Boxen. Der ist aber nur im Quriks modus oder so...

naja viel erfolg
T-Rex

[Dina]

<tr> kann man nicht mit border stylen, leider :(.

Ich hab aber schon einen anderen Ansatz gefunden, bei dem ich denke, dass das klappen wird :-)

Entweder schreibst du den Teil den du in die Mitte willst unter die anderen zwei, also so:

<div>rechts</div>
<div>links</div>
<div>mitte</div>

und stylst rechts mit float:right und links mit float:left

oder du machst es so

<div>links</div>
<div>mitte</div>
<div>rechts</div>

und stylst alle mit float:left.
Kannst das ganze natürlich auch mit float:right machen, da mus es dann in umgekehrter Reinfolge stehen.

Na ja, die Ideen sind ja nicht schlecht, aber das löst mein Problem ja nicht, denn dafür müsste ich ja mein <h1> aufgeben oder im Quellcode verschieben, was ich nicht DARF!
Mit der Variante bin ich auch schon zum Ziel gekommen, aber das soll ja für alle nachfolgenden Seiten auch machbar sein, ohne das ich bei jeder vorher den Code ändern muss :-(

[T-Rex]

<tr> kann man nicht mit border stylen, leider :(.

Ich hab aber schon einen anderen Ansatz gefunden, bei dem ich denke, dass das klappen wird :-)

Entweder schreibst du den Teil den du in die Mitte willst unter die anderen zwei, also so:

<div>rechts</div>
<div>links</div>
<div>mitte</div>

und stylst rechts mit float:right und links mit float:left

oder du machst es so

<div>links</div>
<div>mitte</div>
<div>rechts</div>

und stylst alle mit float:left.
Kannst das ganze natürlich auch mit float:right machen, da mus es dann in umgekehrter Reinfolge stehen.

Na ja, die Ideen sind ja nicht schlecht, aber das löst mein Problem ja nicht, denn dafür müsste ich ja mein <h1> aufgeben oder im Quellcode verschieben, was ich nicht DARF!
Mit der Variante bin ich auch schon zum Ziel gekommen, aber das soll ja für alle nachfolgenden Seiten auch machbar sein, ohne das ich bei jeder vorher den Code ändern muss :-(

Ein <tr> kann keinen Border enthalten!!!
<td> kann einen Border bekommen und <table> auch. Du kannst auch über diverse Eigenschaften die Art und Weise der Tabellenform bestimmen. Da gibt es z.B. rules, mit dem Wert "rows" kannste horizontale Linien in der Tabelle ziehen. <table rules='rows'>...</table>

ob du ein div, p oder ein h1, h2 etc... mit float belegst ist irrelevant. Fakt ist, dass du mit float: left und right die Sachen links oder rechts umfließen lassen kannst. Musst halt ein wenig mit margin und float spielen. Die divs waren nur Beispiele.

bleib so hübsch!
T-Rex

[MudGuard]

Hi,

<tr> kann man nicht mit border stylen, leider :(.
Ein <tr> kann keinen Border enthalten!!!

Das wird auch durch Wiederholung nicht richtig. http://www.w3.org/TR/CSS21/tables.html#table-layout: "Internal table elements generate rectangular boxes with content and borders. "

cu,
Andreas

[Dina]

Das Problem mit dem <tr> habe ich gelöst bekommen! Nun quält mich aber das zweite Problem um so heftiger:

Zum Quellcode:

<h1 id="qdocTitle">Titel</h1>

<div id="qmdocHeader">

<h2 class="field visualNoPrint">ID</h2>
 <p id="qdocId" class="value"> ID</p>

<h2 class="field visualNoPrint">Muster</h2>
  <p id="qdocMand" class="value">Muster</p>
</div>

Zum Problem:

Ich möchte, dass dieser Quellcode so aussieht:

|------------------------------------------------------------------|
|                                                                  |
|ID                       Titel                            Muster  |
|                                                                  |

Ich schaffe das, dass der Titel rechts oder links im Kasten (der Kasten soll ein border haben und alles umrahmen) steht, aber nicht mittig. Das schwierige ist, das ich den Quellcode nicht ändern darf.
Ist es möglich den <h1> so anzusprechen, dass er mittig steht? Und wenn ja, wie???

Bitte nicht vergessen: Der Quellcode KANN und DARF NICHT verändert werden!

Danke für Eure Hilfe

Dina

[Dina]

Also wirklich, alles muss man hier alleine machen. Aber hier nun die Lösung zum zweiten Problem ohne den Quelltext zu ändern:

CSS-Code:

#qmdocHeader {
 border: solid thin;
 width: 100%;
 height: 80px;
}

#qdocTitle {
 text-align: center;
 font-size: large;
 float: right;
 width: 250px;
 margin: 20px 130px 0px 50px;
}

#qdocId {
 float: left;
 margin-top: 22px;
 font-weight: bold;
 padding-left: 20px;
}

#qdocMand {
 clear: right;
 text-align: right;
 margin-top: -40px;
 padding-right: 20px;
 font-size: smaller;
 font-style: italic;
}

und schon steht es so, wie es soll!

[T-Rex]

Hi,

<tr> kann man nicht mit border stylen, leider :(.
Ein <tr> kann keinen Border enthalten!!!

Das wird auch durch Wiederholung nicht richtig. http://www.w3.org/TR/CSS21/tables.html#table-layout: "Internal table elements generate rectangular boxes with content and borders. "

cu,
Andreas

Leider ist es richtig :P.
-------------------------------------------------------------------
  <table>
   <tr style='border-top: 1px solid black;'>
    <td>test</td>
    <td>test</td>
   </tr>
  </table>
-------------------------------------------------------------------
Das wird keinen Border ausgeben.

-------------------------------------------------------------------
  <table>
   <tr>
    <td  style='border-top: 1px solid black;'>test</td>
    <td>test</td>
   </tr>
  </table>
-------------------------------------------------------------------
Das schon.

Man bemerke, dass man mit z.B. rules="row" doch einen horizontalen Rahmen hinbekommt. Dennoch halte ich daran fest, dass man <tr> nicht stylen kann.

Gruß und so
T-Rex

[MudGuard]

Hi,

Leider ist es richtig :P.

Nein, ist es nicht.

ersetze

<table>

durch

<table style="border-collapse:collapse">

<tr style='border-top: 1px solid black;'>
    <td>test</td>
   </tr>
  </table>

Und es wird in modernen Browsern die border-top der tr ausgegeben.

Nur weil IE 4/5/6/7 zu dumm dafür sind, heißt nicht, daß es nicht geht.

cu,
Andreas

[T-Rex]

Hi,

Leider ist es richtig :P.

Nein, ist es nicht.

ersetze

<table>

durch

<table style="border-collapse:collapse">

<tr style='border-top: 1px solid black;'>
    <td>test</td>
   </tr>
  </table>

Und es wird in modernen Browsern die border-top der tr ausgegeben.

Nur weil IE 4/5/6/7 zu dumm dafür sind, heißt nicht, daß es nicht geht.

cu,
Andreas

Der Style bei deinem Code bezieht sich auf <table> nicht auf <tr>.
Dina hat in ihrem ersten Posting nähmlich genau das versucht:

Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts.

und ich sags nochmal: mit stylen der <tr> Element erreicht man nie einen border, nicht mal in den modernen Browsern!

Schönes Wochenende
T-Rex

[Vinzenz Mai]

Hallo,

Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts.

und ich sags nochmal: mit stylen der <tr> Element erreicht man nie einen border, nicht mal in den modernen Browsern!

bist Du unbelehrbar? Mein Firefox, mein Opera, noch nicht mal mein Safari haben mit

tr {
       border: 1px solid green;
   }

irgendein Problem. Sie stellen das gewünschte artig dar, so wie es in der Spezifikation steht. Das gleiche gilt übrigens auch für col-Elemente.

Von meinen Browsern ist nur IE unfähig, damit richtig umzugehen.

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo,

<tr> kann man nicht mit border stylen, leider :(.
Ein <tr> kann keinen Border enthalten!!!

grundsätzlich schon, siehe Spezifikation, ich zitiere:

<zitat>
    In the collapsing border model, it is possible to specify borders that
    surround all or part of a cell, row, row group, column, and column group.
</zitat>

Schade, dass der IE (bis einschließlich IE 7) das nicht kann. Firefox, Opera, Safari und Verwandte können's.

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@Dina:

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. […]
Geht das überhaupt?

Ja. Siehe 17.6 Rahmen [CSS2 §17.6]

Live long and prosper,
Gunnar

[Vinzenz Mai]

Hallo Gunnar,

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. […]
Geht das überhaupt?

Ja. Siehe 17.6 Rahmen [CSS2 §17.6]

warum verlinkst Du die Spezifikation CSS 2.0?
Hast Du ein einfaches Beispiel schon mal in IrgendEinem speziellen Browser getestet?

<!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">  
    table {  
        border-collapse: collapse;  
        padding: 3px;  
    }  
    tr {  
        border: 1px solid green;  
    }  
</style>  
</head>  
  
<body>  
    <table>  
        <tr>  
            <td>Das</td>  
            <td>ist</td>  
        </tr>  
        <tr>  
            <td>ein</td>  
            <td>Wert</td>  
        </tr>  
    </table>  
</body>  
</html>  

Was folgt daraus für die praktische Nutzbarkeit bei Reale-Welt-Projekten?

Freundliche Grüße

Vinzenz, der zur Ansicht gelangt ist, dass Browser wie Firefox, Internet Explorer, Opera und Safari das CSS-Tabellen-Modell nur sehr mangelhaft beherrschen.

[MudGuard]

Hi,

Ja. Siehe 17.6 Rahmen [CSS2 §17.6]

warum verlinkst Du die Spezifikation CSS 2.0?

Hat er doch gar nicht.

cu,
Andreas

[Vinzenz Mai]

Hallo,

Ja. Siehe 17.6 Rahmen [CSS2 §17.6]
warum verlinkst Du die Spezifikation CSS 2.0?

*grins* noch schlimmer, eine "nicht normative" Übersetzung der CSS-Spezifikation 2.0 ;-)

Besser: http://www.w3.org/TR/2007/CR-CSS21-20070719/tables.html (CSS 2.1, Abschnitt 17, Tabellen).

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@Vinzenz Mai:

Was folgt daraus für die praktische Nutzbarkeit bei Reale-Welt-Projekten?

Dass man nicht 'tr' den Rahmen gibt, sondern 'margin-top' und 'margin-bottom' für 'td'/'th'.

Live long and prosper,
Gunnar

[Vinzenz Mai]

Hallo,

Was folgt daraus für die praktische Nutzbarkeit bei Reale-Welt-Projekten?
Dass man nicht 'tr' den Rahmen gibt, sondern 'margin-top' und 'margin-bottom' für 'td'/'th'.

tut mir leid, ich kann daraus keinen Nutzen ziehen.

Ich verstehe nicht, was Du meinst - und meine Tests sind erfolglos, sprich: im IE sind keine Rahmen um die Zeilen zu sehen. Welche CSS-Anweisungen wären bei meinem Beispielcode für 1-Pixel-breite grüne Rahmen zu verwenden?

Dass

    table {  
        border-collapse: collapse;  
        padding: 3px;  
    }  
    td, th {  
        margin-top: 1px;  
        margin-bottom: 1px;  
    }  

nicht ausreicht, ist mir klar. Wo müsste ich aber ansetzen? Ich habe keine Idee. Ich persönlich löste es über Klassen für td und th-Elemente. Womit müsste ich die margin-Angaben kombinieren, um einen Rahmen-Effekt für Zeilen zu erhalten?

Fragende Grüße

Vinzenz

[Gunnar Bittersmann]

@@Vinzenz Mai:

Dass

table {

border-collapse: collapse;
        padding: 3px;
    }
    td, th {
        margin-top: 1px;
        margin-bottom: 1px;
    }

>   
> nicht ausreicht, ist mir klar. Wo müsste ich aber ansetzen?  
  
Rahmenstil und -farbe setzen?  
  
Live long and prosper,  
Gunnar

-- 
[Erwebsregel](http://memory-alpha.org/de/wiki/Erwerbsregeln_der_Ferengi) 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.

[Vinzenz Mai]

Hallo Gunnar,

dass

table {

td, th {
        margin-top: 1px;
        margin-bottom: 1px;
    }

  

> > nicht ausreicht, ist mir klar. Wo müsste ich aber ansetzen?  
  
[völlig abwegig ist](https://forum.selfhtml.org/?t=176777&m=1163662), ist mir während der Heimfahrt klar geworden ...  
  

> Rahmenstil und -farbe setzen?  
  
Du hast mich da ganz schön aufs Glatteis gebracht!  
  
  
Freundliche Grüße  
  
Vinzenz

[Vinzenz Mai]

Hallo Ingrid,

Was folgt daraus für die praktische Nutzbarkeit bei Reale-Welt-Projekten?
Dass man nicht 'tr' den Rahmen gibt, sondern 'margin-top' und 'margin-bottom' für 'td'/'th'.

tut mir leid, ich kann daraus keinen Nutzen ziehen.

klar, ist ja auch völlig abwegig. margin bringt hier noch nicht einmal marginalen Nutzen :-) Gunnar meinte wohl border-top und border-bottom. Und ich falle darauf rein :-(

<!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">  
[code lang=css]    table {  
        border-collapse: collapse;  
        border: 1px solid green;  
    }  
    td, th {  
        border-top: 1px solid green;  
        border-bottom: 1px solid green;  
    }

</style>
</head>

<body>
    <table>
        <tr>
            <td>Das</td>
            <td>ist</td>
        </tr>
        <tr>
            <td>ein</td>
            <td>Wert</td>
        </tr>
    </table>
</body>
</html>[/code]

Nicht schön, aber es geht.

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@Vinzenz Mai:

klar, ist ja auch völlig abwegig. margin bringt hier noch nicht einmal marginalen Nutzen :-)

*g*

Gunnar meinte wohl border-top und border-bottom.

Ja, meinte er. Frei nach [MudGuard]:

UPDATE Gunnar SET Wörterbuch = Wörterbuch + 'Rahmen – border';

Und ich falle darauf rein :-(

Besser du fielest nicht, sondern stiegest; und zwar nicht rein, sondern dahinter. ;-)

Live long and prosper,
Gunnar

[MudGuard]

Hi,

Dass man nicht 'tr' den Rahmen gibt, sondern 'margin-top' und 'margin-bottom' für 'td'/'th'.

Du meinst wegen http://www.w3.org/TR/CSS21/tables.html#table-layout: "Internal table elements do not have margins. " ?

cu,
Andreas

[Harlequin]

Yerf!

Am einfachsten wäre es natürlich, wenn ich den <div>-Container hoch schiebe, aber ich DARF am Quellcode LEIDER nichts ändern.

Ist das Problem trotzdem lösbar und wenn ja, wie?

Erschlag denjenigen er solch unsinnige Vorgaben macht und ändere dann den Quellcode ;-)

(...nein, das soll jetzt keine Aufforderung zu einer Straftat sein)

Ich hoffe, ihr könnt mir bei meinen Problemchen helfen (das Internet war nicht sehr aufschlussreich!).

Evtl. lässt sich das mittels absoluter Positionierung lösen, allerdings ist die nicht ganz trivial.

Den Anfang könnte je ein position:absolute; und ein left:0; oder right:0; für die seitliche Boxen bilden (evtl. brauchts noch eine Angabe für top). Dem Mittelteil sollte man dann jeweils ein margin-left und margin-right geben, damit er Text nicht unter die seitlichen Boxen läuft.

Gruß,

Harlequin

[Dina]

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts. Ich habs mit Vererbung probiert und mit direktem Befehl. Ohne Erfolg :-(

Hab die Lösung gefunden! Im Grunde genommen ganz einfach, man muss nur folgenden Text ins CSS einbauen:

table {
 width: 100%;
 border: solid black;
 border-collapse: collapse;
}

th{
 border-right: solid black;
}

td {
 border-right: solid black;
 padding-left: 3px;
}

und schon funzt das *breites Grinsen auf dem Gesicht und Schulterklopf, dafür, dass ich das hinbekommen habe;-))*

[Vinzenz Mai]

Hallo Dina,

1.) Ich hab eine Tabelle, in der nur die <tr> Elemente umrahmt werden sollen. Wenn ich diesen Befehl gebe, passiert aber rein absolut gar nichts. Ich habs mit Vererbung probiert und mit direktem Befehl. Ohne Erfolg :-(

wenn Du Spalten umrahmen möchtest, dann erreichst Du dies mit dem von Dir angegebenen CSS:

» table {  

>  width: 100%;  
>  border: solid black;  
>  border-collapse: collapse;  
> }  
>   
> th{  
>  border-right: solid black;  
> }  
>   
> td {  
>  border-right: solid black;  
>  padding-left: 3px;  
> }  

und schon funzt das *breites Grinsen auf dem Gesicht und Schulterklopf, dafür, dass ich das hinbekommen habe;-))*

wobei diese unschöne Konstruktion mal wieder nur für den IE notwendig ist.
Richtige Browser können mit Rahmen für Spalten wunderbar umgehen:

    table {  
        border-collapse: collapse;  
    }  
  
    col {  
        border: 1px solid black;  
    }  

Freundliche Grüße

Vinzenz