trotz - CSS - Verzweiflungtabelle ?

[Harry]

Hallo,
Inhalt der Site müßte doch "Mittig" bleiben, auch wenn ich das Browserfenster kleiner setze?

Am liebsten würde ich ohne Tabelle auskommen, wenn dies mit fast allen Browsern ginge.

Habe mit - css - alles in der Mitte festgenagelt, siehe unten. Und dachte mit der Tabelle

zusätzlich bekäme ich das mit der Mittigkeit grundsätzlich in den Griff.

Ich suche also die beste Kombination mit am wenigsten Tabellen-Konstrukt!

habe im - html- Bereich folgendes:

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
</table><br>

Und im - css - Bereich Ausschnittsweise:

H1 {
color: #0033FF;
font-size: 20px;
position: absolute;
left: 330px;
text-align: center;
top: 10px;
width: 350px;
}
H2 {
color: #0000CC;
font-size: 15px;
position: absolute;


Frage:
Wenn ich das Fenster oder die Auflösung Verkleinere, ist der Inhalt immer ein gutes Stück nach rects
gerückt.

Der Inhalt soll aber immer mittig bleiben. In meiner Auflösung 1152 x 864 ist alles auch" nur mit css"
mittig.

Hat einer einen Tipp? Will aber kein Tabellen-"Monster."

Am liebsten passenden Quelltext, da ich schon viel gesucht habe. Ich finde auch nicht die Stelle auf

dieser Website, bzw. Das passende zu - CSS -.

Gruß harry

[newbiest]

Hi Harry,

Versuch´s mal ohne "absolute".
Mit welchem Browser siehst Du Dir das ganze an (vielleicht NN, dann "aktualisieren" - Resize Fix)?

greets,

[Harry]

Hallo,
resizefix habe ich als externes javascript.
(ist auch nicht das Problem, da auch bei IE.)

Position: absolut ändern zerschießt das Layout!

Bei CSS muß ich die einzelnen Komponenten, sprich logo, text usw. mit position:absolut festnageln, sonst kann ich ja Tabellen stricken.

Es ist ja alles wunderbar auf Mitte.

Ich will den code wissen, bzw.
was muß ich ändern, wenn ich das Browserfenster kleiner mache
und dann ist immer noch alles auf Fenstermitte.
So wie hier die Forumsseite!

Ich will aber zu 99,9% CSS benutzen und nur was mit Tabellen, wenn ich unbedigt muß.
Es soll da auch noch was mit DIV-Container geben. Ich hätte den
Wunsch ob mir einer den code geben kann zu oben, was ich ändern soll?
Finde leider alleine nicht den Fehler.Für Euch CSS "GURUS" muß
die Frage doch "Peanuts "sein oder?
Gruß Harry

[newbiest]

Wenn Du sagst:
{position:absolute;left 330px;} dann ist das Ding nun mal immer 330px vom linken Rand weg positioniert, egal wie groß das Browserfenster ist...
Da bringt´s dann {...;left 50%} wahrscheinlich mehr, um das Ding in der Mitte zu halten (die Angaben beziehen sich meist auf das nächste übergeordnete Element). Oder Du machst z.B. eine <DIV> mit {width:100%;text-align:center}, hat einen ähnlichen Effekt.

Tip: SELF HTML, Rubrik "CSS Style Sheets".

greets,

[Boris]

Original geschrieben von Harry
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
</table><br>

Wieso machst Du es denn nicht so:

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">CONTENT</td>
</tr>
</table>

Das ist ja wohl kein Tabellenmonster, oder?

Das "align=center" im TABLE-Tag ist unnütz, da die Tabelle ja 100% Breite hat - da brauchst Du sie selbst nicht auch noch extra zu zentrieren

[Harry]

Hallo,
Danke an alle, werde alles ausprobieren!

Habe das hier noch gefunden soll dann ganz ohne Tabelle gehen:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
text-align: center;
/* part 1 of 2 centering hack */
}
#content {
width: 400px;
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
background: #666;
border: 5px solid #ccc;
text-align:left;
/* part 2 of 2 centering hack */
width: 400px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 370px;
}
html>body #content {
width: 370px; /* ie5win fudge ends */
}

Bei opera muss ich dann mal sehen.

Kenne jedoch "voice-family:" nicht und wird
auch nirgendwo erklärt.

Weis dies jemand?

Jedenfalls problemfrei scheint das mit dem
css nicht zu sein.
Ich werde jedoch gerade als Anfänger auf den
neuen Zug der Zeit aufspringen, bevor ich mich an hyper Wahnsinnstabellen gewöhnt habe.

Die letzte Tabelle hier ist allerdings kein Tabellenmonster, werde ich auch testen!
(wenn es denn gehen sollte )
Gruß Harry

[LANtastic]

Auch hier nochmal :

Das Ding mit der Voice Family ist in der CSS 2 Spezifikation definiert Kaiptel 19.8 Voice characteristic properties mehr dazu findest Du hier : http://www.w3.org/TR/REC-CSS2/aural....ice-char-props

Den eigentlichen Grund, warum Du diese seltsame Konstruktion hast,

voice-family: "\"}\"";
voice-family:inherit;

die sich Tantek'S BoxModelHack nennt kannst Du hier nachlesen:
http://www.fabrice-pascal.de/artikel/ie5boxmodel/#Hack3

Oder aber im englischen Original quasi direkt vom Hersteller :
http://www.tantek.com/CSS/Examples/boxmodelhack.html

[newbiest]

Nachtrag: Wenn Du wirklich alles auf der Site zentriert haben willst, genügt natürlich ein einfaches:
body {text-align:center;}
im CSS, dann hast Du alle Elemente des <BODY>s zentriert angeordnet.

greets,

[Harry]

Hallo, bin zurück mit Ergebnis!

Habe nicht mit DW, sondern mit -Homesite- und Topstyle gearbeitet um besser den Code
verstehen zu lernen. ( Ergebnis Tag 2)

1. diese Tabelle:

<body><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

</tr>
</td>
</table>
</body>

Wobei diese Tabelle, in diesem Fall, nur gebraucht wird damit der "resizefix " funktioniert.
Ist mir auch nicht eingeleuchtet, da dies im head steht, javascript ist und nach meinem Vertständnis
doch nichts mit der Tabelle zu tun hat.

2. die ausgelagerte CSS:

/*sprachauswahlseite*/
BODY {
background: #000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
H1 {
color: #0033FF;
font-size: 20px;
position: absolute;
left: 30%;
text-align: center;
top: 10px;
width: 350px;
}
H2 {
color: #0000CC;
font-size: 15px;
position: absolute;
top: 40px;
left: 30%;
text-align: justify;
letter-spacing: -4px;
line-height: 7px;
width: 350px;
}
/*art logo*/
.logo {
position: absolute;
left: 41%;
top: 125px;
}
H3 {
color: #0033FF;
font-size: 18px;
position: absolute;
text-align: center;
left: 30%;
top: 300px;
width: 350px;
}
.viereck {
list-style-type: square;
list-style-position: outside;
color: #66CCFF;
font-size: 15px;
position: absolute;
text-align: justify;
left: 26%;
top: 400px;
width: 450px;
}

Warum die Prozentzahlen für left unterschiedlich sein müssen kapiere ich nicht?
Aber sonst sind die Texte und das logo nicht mehr untereinander, sondern verschoben.

Ein DIV container anstelle der Tabelle funktioniert zwar auch, jedoch warum weis der Teufel,
der " resizefix" wiederum nicht.

Ansonsten nur im -Opera Browser ( 6.1)- starke Verschiebung des Logo,nach rechts. Gäbe es
nur diesen Browser, dann müßte ich "left: " unter 30% setzen.

IE ab 5.X 100% korrekt! NS 4.7 98% OK.

Wenn man auf den "resizefix" keinen wert legt gibt es noch mehr Möglichkeiten.

Da die Opera Fans sicher wissen wie man einen neuen Browser installiert, dürfte dieses
Problem bis Ende des Jahres auch nicht mehr existieren.

Da alles bis auf die Tabelle ausgelagert ist, wird meine erste Website ganz schön schnell werden.
Wenn ich so weitermache :-)

Danke für Eure Antworten!

Gruß Harry