hilfe mit tabellen

[domi]

hallo,
ich habe eine tabelle und habe links eine grafik
und rechts soll eine farbe bzw. eine grafik den rest des browserfensters füllen also von der breite her ohne das andere bild zu überdecken
also die farbe soll sich automatisch so breit machen dass sie mit der grafik das browserfenster ausfüllen
ich habs schon mit min-width probiert ging aber nich
vielleicht hab ich mich nur verschrieben
hat jemand einen code womit sowas geht?
hier nochmal ein bild:
[img]http://freeupp.de/upload/1201374540.png[/img]

[Christian Zill]

Hi,

hallo,
ich habe eine tabelle und habe links eine grafik
und rechts soll eine farbe bzw. eine grafik den rest des browserfensters füllen also von der breite her ohne das andere bild zu überdecken
also die farbe soll sich automatisch so breit machen dass sie mit der grafik das browserfenster ausfüllen
ich habs schon mit min-width probiert ging aber nich
vielleicht hab ich mich nur verschrieben

Vielleicht?

Grüße aus KL
Christian

[Patrick Andrieu]

Hallo Christian!

vielleicht hab ich mich nur verschrieben
Vielleicht?

Mein Gott, Du bist tatsächlich wieder da...

Wenn Du nichts Vernünftiges beizutragen hast, und es keine MENSCHELEI ist, dann lass es bitte sein. Du MUSST nicht der Erste sein, der auf einem Beitrag antwortet, wenn Deine Antwort nur aus Musiknoten oder dergleichen besteht.

Wir hatten das ja schon.

Viele Grüße aus Frankfurt/Main,
Patrick

[Christian Zill]

Hi,

Hallo Christian!

...

Mein Gott, Du bist tatsächlich wieder da...

Einer für alle?

Freundliche Abendgrüße aus KL
Christian

[gary]

Hi domi,

Wie wäre es, wenn du für das rechte Bild die gesammte Breite nimmst, und dem per layer z. B. eine 1 zuweisst. Den linken Bereich weisst du eine 2 zu?

Siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@titlt=hier

Also Bereich rechts:
z-index:1;

Und Bereich links:
z-index:2;

Dem rechten Bereich gibst du 100% Breite. Dem linken setzt du einfach über diesen Bereich. Dank dem z-index erscheint der im Vordergrund.

Nur so als Idee. Beachte auch die Voraussetzungen und eigenheiten des z-index Elementes.

Viele Grüsse

gary

[Patrick Andrieu]

Hallo gary!

Wie wäre es, wenn du für das rechte Bild die gesammte Breite nimmst, und dem per layer z. B. eine 1 zuweisst. Den linken Bereich weisst du eine 2 zu?

Hm, ich?

Viele Grüße aus Frankfurt/Main,
Patrick

[gary]

Hi Patrick,

Hm, ich?

Nein, natürlich nicht du. Steht ja auch "Hi domi" oben darüber. Nur weil ich höflicher weise mein post unten anhänge, heisst das ja nicht, dass du gemeint bist. Wobei ich abgesehen davon, sehr gerne mit dir plaudere *g*

Also guckst du nächstesmal oben auf Überschrift oder Titel oder Begrüssung, oder was auch immer...

Bye und Gruss

gary

[Der Martin]

Hallo Gary,

Nein, natürlich nicht du. Steht ja auch "Hi domi" oben darüber. Nur weil ich höflicher weise mein post unten anhänge, ...

das hat mit Höflichkeit nichts zu tun, sondern damit, dass du anscheinend das Prinzip nicht verstanden hast. Antworte doch bitte direkt auf den Beitrag, den du auch wirklich meinst, sonst ist doch die ganze Pracht der übersichtlichen Threadstruktur dahin, und wir hätten die gleiche Matsche von durcheinandergewürfelten Postings wie in den meisten anderen Boards.

Also guckst du nächstesmal oben auf Überschrift oder Titel oder Begrüssung, oder was auch immer...

Also guckst du nächstesmal bitte auf den Ursprungsbeitrag, dem du deine Antwort anhängen möchtest.

Schönen Sonntag noch,
 Martin

[gary]

Hi Martin,

das hat mit Höflichkeit nichts zu tun, sondern damit, dass du anscheinend das Prinzip nicht verstanden hast. Antworte doch bitte direkt auf den Beitrag, den du auch wirklich meinst, sonst ist doch die ganze Pracht der übersichtlichen Threadstruktur dahin, und wir hätten die gleiche Matsche von durcheinandergewürfelten Postings wie in den meisten anderen Boards.

OK. Ich dachte immer, man soll die zeitliche Abfolge beachten. Also OP, dan erste Antwort, zweite Antwort usw. So dass der Baum nach unten wächst. Das Zwischenreinposten, macht ja so einen Thread auch nicht übersichtlicher :-)

Zukünftig Poste ich direkt auf den bezugnehmenden Thread.

Viele Grüsse und schönnen Sonntag

gary

[Der Martin]

Hallo,

Das Zwischenreinposten, macht ja so einen Thread auch nicht übersichtlicher :-)

doch, weil man an der Baumstruktur gleich sieht, wer wem geantwortet hat.

Zukünftig Poste ich direkt auf den bezugnehmenden Thread.

:-)

Ciao,
 Martin

[domi]

Also Bereich rechts:
z-index:1;

Und Bereich links:
z-index:2;

Dem rechten Bereich gibst du 100% Breite. Dem linken setzt du einfach über diesen Bereich. Dank dem z-index erscheint der im Vordergrund.

Nur so als Idee. Beachte auch die Voraussetzungen und eigenheiten des z-index Elementes.

funktioniert nicht hier mein code:

»»<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
»»<html><head><title>vertical-align</title>
»»<style type="text/css">
»»td       { padding: 0%; }
»».a1a    { vertical-align:middle; background-color: #ffffff; »»width:422px; height: 152px; z-index:1; background-image: »»url(Bildlink); }
»».a2a    { vertical-align:middle; background-color: #ffffff; »»width:100%; height:152px; z-index:2; background-image: »»url(Bildlink); }
»»</style>
»»</head><body>

»»<table style="border-spacing:0pt;"><tr>
»»<td class="a1a"><b></b></td>
»»<td class="a2a"><b></b></td>
»»</tr></table>
»»</body></html>

[domi]

Na hab ich euch die sprache verlagen oda was?^^

[gary]

Hi domi,

Na hab ich euch die sprache verlagen oda was?^^

Na nicht so wild mit den Jungen Pferden, bin schliesslich nicht den ganzen Tag online (Familie will mich auch noch haben *g*)

Hast du dir sowas in die Richtung vorgestellt? :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>vertical-align</title>
<style type="text/css">
td       { padding: 0%;
}

.a1a    { vertical-align:middle; background-color: #ffffff;
            width:600px; height: 152px;
            z-index:1;
            background-color: #008000;
}

.a2a    { vertical-align:middle;
            background-color: #ffffff;
            width:100%;
            height:152px;
            z-index:2;
            background-color: #808080;
}
</style>
</head>
<body>
<table style="border-spacing:0pt;"><tr>
<td class="a1a"><b>Das ist die linke Seite</b></td>
<td class="a2a"><b>Und das die Rechte</b></td>
</tr>
</table>
</body>
</html>

Muste die Grafiken rausnehmen, da ich zum Testen ja nicht deine Sources zu Verfügung hatte.

Viele Grüsse

gary

[domi]

das klappt immer noch nicht ich will die breite verändern aber die lässt sich nicht verändern
hier is ein online beispiel:
http://worldofgfx.wo.funpic.de/vert.html
den code seht ihr im quelltext

[gary]

Hi domi,

Ich habe bemerkt, dass die linke breite abhängig vom Text ist. Wenn der Text für die linke Seite mit Leerzeichen eingegeben wird, macht dein Code automatisch Umbrüche und und die Linke Seite wird dann kleiner.

Ich habe versucht deine Tabellen in DIV-Boxen zu packen, und diese zu formatieren. Aber auch dort funktioniert die Breitenangabe nicht.

Sorry, bin selber kein Profi. Aber vielleicht sitzt hier irgendwo einer, der dir helfen kann. Ich schaue auch mit dir gemeinsam zu *g* Da kann ich vielleicht auch noch was lernen :-)

Also bitte Helft uns doch ein wenig :-)

Hier mein murks, der auch nicht geklappt hat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>vertical-align</title>
<style type="text/css">
td       { padding: 0%;
}

#links {
            width:422px;
            height: 0px;
            z-index:1;
            background-color: #008000;
}

.a1a    { vertical-align:middle;
            width:422px;
            height: 152px;
            z-index:2;
            background-color: #008000;
}

#lrechts {
            width:422px;
            height: 152px;
            z-index:1;
            background-color: #008000;
}

.a2a    { vertical-align:middle;
            width:100%;
            height:152px;
            z-index:3;
            background-color: #808080;
}

</style>
</head>
<body>

<table style="border-spacing:0px;">
<tr>
<div id="links">
<td class="a1a"><b>DasistdielinkeSeite</b>
</td>
</div>
<div id="rechts">
<td class="a2a"><b>Und das die Rechte</b>
</td>
</div>
</tr>
</table>

</body>
</html>

Viele Grüsse gary

[gary]

Hi domi,

Habe bemerkt, dass die id #rechts falsch war (hatte #lrechts stehen) aber daran lags auch nicht.

Grüsse

gary

[gary]

Hi domi,

Ähmm, was mir grad auffällt: Wie willst du das mit der tabelle haben? Links die tabelle und rechts die Grafir, oder eine _zweispaltige_ Tabelle, die eine Grafik enthält. Und die Tabelle soll ihre breite ändern?

Könntest du die Sache noch mal genauer beschreiben?

Grüsse gary

[gary]

Hi domi,

Probier mal das:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>vertical-align</title>
<style type="text/css">

#links {
            position:absolute;
            z-index:3;
            top: 0%;
            left: 0%;
            width:422px;
            height: 152px;
            background-color: #C0C0C0;
}

p.a1a    {
            font-weight:bold;
             text-align:left;
}

#rechts {
            position:absolute;
            z-index:2;
            top: 0%;
            left: 50%;
            width:422px;
            height: 152px;
            background-color: #008000;
}

#alles {
            position:absolute;
            z-index:1;
            top:0%;
            width:100%;
            height: 152px;
            background-color: #008000;
}

p.a2a    {
             font-weight:bold;
             text-align:left;
}

</style>
</head>
<body>

<div id="links">
<p class="a1a">Das ist die linke Seite</p>
</div>
<div id="rechts">
<p class="a2a">Und das die Rechts</p>
</div>
<div id="alles">
</div>

</body>
</html>

Habe die Tabelle entfernt. #alles ist eine grüne  Div-Box, die über die gesammte Breite geht (layer 1). #rechts ist eine grüne Div-Box, die von der mitte aus nach rechts verläuft und den Text "Und das die Rechte" enthält (layer 2). #links ist eine graue Div-Box, die vom linken Rand nach recht verläuft (layer 3).

Alle Boxen sind frei mit CSS einstellbar (jetzt übernehmen sie auch die Breitenangaben).

Ich denke (das heisst ich bin nicht sicher), dass eine Zweispaltige Tabelle nicht unterschiedliche Breiten in unterschiedlichen Zeilen annehmen kann, ohne das du jede Zelle einzel formatieren musst.

Desshalb würde ich es mit Div-Boxen realisieren. Aber wie bereits weiter oben im Post erwähnt - ich nix Profi...

Viele Grüsse

gary

[domi]

Hi,gary

es klappt zwar alles recht gut aber wie krieg ich den text jetzt in die mitte?
also der soll vertical in der mitte sein

[gary]

Hallo domi - hallo Forum,

Ich habe jetz drei Div-Container. 1 geht über die gesammte Breite, 2 und 3 sind links und recht. Im linken und rechten ist text. domi will diesen vertical mittig haben. Das "vertical-align:middle" CSS-Element zeigt keine Wirkung. Und das obwohl ich es in die Div wie auch in die P-Class hineingetan habe. Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>vertical-align</title>
<style type="text/css">

#links {
            position:absolute;
            z-index:3;
            top: 0%;
            left: 0%;
            width:422px;
            height: 152px;
            background-color: #C0C0C0;
            vertical-align:middle;
}

p.a1a    {
            font-weight:bold;
            text-align:left;
            vertical-align:middle;
}

#rechts {
            position:absolute;
            z-index:2;
            top: 0%;
            left: 50%;
            width:422px;
            height: 152px;
            background-color: #008000;
            vertical-align:middle;
}

#alles {
            position:absolute;
            z-index:1;
            top:0%;
            width:100%;
            height: 152px;
            background-color: #008000;
}

p.a2a    {
             font-weight:bold;
             text-align:left;
             vertical-align:middle;
}

</style>
</head>
<body>

<div id="links">
<p class="a1a">Das ist die linke Seite</p>
</div>
<div id="rechts">
<p class="a2a">Und das die Rechts</p>
</div>
<div id="alles">
</div>

</body>
</html>

Irgend welche Vorschläge, wie der Text doch in die Mitte der Div-Box wandert?

Grüsse gary

PS: Sorry domi, es gibt Tage, da klappt einfach nix :-(
Aber nicht aufgeben :-)

[domi]

Sorry domi, es gibt Tage, da klappt einfach nix :-(
Aber nicht aufgeben :-)

nich slimm hab ja gedult^^
kann man sachen auch vertical floaten ?
dann könnte man den text vielleicht vertical floaten