zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Inhalt ohne Tab. mittig horizontal u. vertikal ausrichten?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.06.2004, 12:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.09.2003
Beiträge: 9
otoo befindet sich auf einem aufstrebenden Ast
Standard Inhalt ohne Tab. mittig horizontal u. vertikal ausrichten?

Hallo,

hab versucht meine Seite weitestgehend ohne Tabellen nur mit CSS zu gestalten und hab jetzt einen Test für XHTML durchgeführt.

Um die Seite www.doberlug.de halt komplett mittig auszurichten habe ich im Moment die Tabellenlösung gewählt, allerdings ist das nicht xhtml konform da ich die Anweisung table height=100% verwenden muß.

Wie kann ich das in CSS lösen, für den IE und auch für die anderen Browser

Hab bis jetzt nichts richtiges gefunden. Es soll ja bei allen Bildschirmauflösungen funktionieren.

CU Arne
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.06.2004, 12:17
Benutzer
neuer user
 
Registriert seit: 24.02.2004
Beiträge: 48
to.ni befindet sich auf einem aufstrebenden Ast
Standard

Hallo otoo,

Also wenn du weiterhin ein Tabellen-Design verwenden willst

Im CSS-File:
Code:
html
{
 height : 100%;
}

body
{
 height : 100%;
}

table
{
 height : 100%;
 width : 100%;
}

/*Fuer den Hauptinhalt, zentriert*/
td.main
{
 height : 100%;
 width : 100%;
 text-align : center;
 vertical-align : middle;
}
Wenn du einem Element die Höhe 100% zuweisen möchtest, musst du auch dem übergeordneten Elementen eine Höhe zuweisen, in diesem Falle Body, wobei du für das übergeordnete Element von Body - nämlich Html - auch wieder die Höhe 100% vergeben musst.

mfg
to.ni
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.06.2004, 15:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.09.2003
Beiträge: 9
otoo befindet sich auf einem aufstrebenden Ast
Standard ohne wenn es geht....

Hallo,

vielen Dank erst einmal

Ich dachte aber an eine Nutzung ohne das ich Tabellen einsetze!
Also nur mit CSS die vert. u. horiz. Ausrichtung zu realisieren.

CU Arne
Mit Zitat antworten
  #4 (permalink)  
Alt 19.06.2004, 15:48
Benutzer
neuer user
 
Registriert seit: 24.02.2004
Beiträge: 48
to.ni befindet sich auf einem aufstrebenden Ast
Standard

Ups, sorry,

also mit Layern würde das (nach einem kurzen Test meiner-seits) so funktionieren (IE 6 und Mozilla 1.0):

CSS:
Code:
#main
{
 position : absolute;
 width : 600px;
 height : 200px;
 left : 50%;
 top : 50%;
 margin-left : -300px;
 margin-top : -100px;
 background : #FF0000;
}
Zur Erklärung des CSS: Der Layer wird auf eine absolute Position gesetzt. Dann wird eine Breite von 600px und eine Höhe von 200px angegeben (Nur Beispielwerte, um zu zeigen, dass der Layer auch zentriert ist).
Anschließend wird der Layer positioniert und zwar 50% Links und 50% von Oben, vom übergeordetem Element aus gesehen, also Body...
Aber jetzt wäre lediglich die Linke-Obere-Ecke des Layers bei der Position 50%, 50%...
Daher die nächsten Angaben margin-left und -top mit jeweils einem negativen Wert. Der Wert entspricht dabei der Hälfte der Weite- bzw. Höhenangabe. Das ist eingentlich der ganze Zauber.

Im HTML kannst du das ganze dann einfach mit
Code:
<body>
 <div id="main">
  

in der mitte</p>
 </div>
</body>
einbinden.

Hoffe, dass ich jetzt weitergeholfen habe...
Würde dir auch entsprechende Seiten im Internet empfehlen (Google hilft bestimmt gerne weiter ), z.B.
http://selfhtml.teamone.de/
http://www.css4you.de/

mfg
to.ni
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2004, 09:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.09.2003
Beiträge: 9
otoo befindet sich auf einem aufstrebenden Ast
Standard Danke!

Hallo,

vielen Dank für den Tipp, werd ich gleich mal versuchen umszusetzen.

CU Arne
Mit Zitat antworten
  #6 (permalink)  
Alt 13.07.2004, 15:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.07.2004
Beiträge: 106
come@death befindet sich auf einem aufstrebenden Ast
Standard

wollte mal anmerken, dass so geschichten wie height:100% in so einem zusammenhang nur im quirks modus funktionieren - ansonsten bedeutet height:100%, dass sich das element einfach so viel platz nimmt wie es benötigt, und nicht etwa die höhe des viewports einnimmt
Mit Zitat antworten
  #7 (permalink)  
Alt 13.07.2004, 22:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.05.2004
Beiträge: 275
dexter befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von come@death
wollte mal anmerken, dass so geschichten wie height:100% in so einem zusammenhang nur im quirks modus funktionieren - ansonsten bedeutet height:100%, dass sich das element einfach so viel platz nimmt wie es benötigt, und nicht etwa die höhe des viewports einnimmt
Mhh? Kannst Du das genauer erklären?
Bei mir nimmt eine 100% hohe Tabelle im Standardsmode das ganze Browserfenster ein.

(Vorausgesetzt, ich setze den Body/ Html, wie das hier oben im Beispiel auch richtig gemacht wurde, auf 100%)
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.07.2004, 16:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.07.2004
Beiträge: 106
come@death befindet sich auf einem aufstrebenden Ast
Standard

height:100%; ergibt nur im Quirks modus des IE (seidenn im stylesheet steht ebenfalls html, body { height:100%; }) eine höhe des viewports - ansonsten nimmt das element sich nur so viel platz, wie benötigt um den inhalt komplett anzuzeigen.
Mit Zitat antworten
  #9 (permalink)  
Alt 15.07.2004, 18:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.05.2004
Beiträge: 275
dexter befindet sich auf einem aufstrebenden Ast
Standard

100% funktioniert prima im IE, es sei denn man vergisst festzulegen wie hoch/breit der Body ist.
Ich finde die Verwendung von "funktioniert nur im Quirksmode" etwas daneben, wenn Du es dann doch wieder einschränken musst.

Wenn man es richtig macht gibt's keine Probleme, also funktioniert in dem Zusammenhang auch nicht irgendwas "nur im Quirksmode"
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.08.2004, 22:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.07.2004
Beiträge: 106
come@death befindet sich auf einem aufstrebenden Ast
Standard

sagen wir es al so: nach den standards dürfte es in keinem fall funktionieren.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 17:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 19:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 12:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 13:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:13 Uhr.