[GastForen Web allgemein HTML und CSS / Stylesheets Layer per CSS auf der Seite zentrieren

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Layer per CSS auf der Seite zentrieren

Tömsken
Beiträge gesamt: 720

11. Jun 2004, 17:17
Beitrag # 1 von 6
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Salut.

Ich wollte es nun doch mal wissen - und bin gescheitert:
Wie zentriert man einen Layer (von z. B. 300 x 200 Pixel) auf einer Seite ohne JavaScript und unabhängig von der Festergröße des Browsers?

position: relative; top: 40%; right: 50%; bottom: 50% left: 40%;

ist zwar ein Ansatz, da aber abhängig von der Größe des Layers eher "unbefriedigend".
Bessere Vorschläge?
X

Layer per CSS auf der Seite zentrieren

SabineP
Beiträge gesamt: 7586

11. Jun 2004, 17:24
Beitrag # 2 von 6
Beitrag ID: #90458
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Tom, mein Vorschlag

CSS
#layer{witdh:300px; height:200px}

HTML
<div id="layer" align="center">bla blu</div>

Gruß Sabine


als Antwort auf: [#90455]

Layer per CSS auf der Seite zentrieren

Tömsken
Beiträge gesamt: 720

11. Jun 2004, 18:40
Beitrag # 3 von 6
Beitrag ID: #90465
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ok, so weit, so klar. Aber: Wie geht's vertikal?


als Antwort auf: [#90455]

Layer per CSS auf der Seite zentrieren

SabineP
Beiträge gesamt: 7586

11. Jun 2004, 22:24
Beitrag # 4 von 6
Beitrag ID: #90488
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Tom, wenn der Layer unbedingt vertikal zentriert werden soll (Browser mögen das nicht so sehr),
dann greife ich immer noch zum verbotenen Attribut height="100%" (Achtung Ausnahme!) für Tabellen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
#layer{width:200px; height:200px; border:solid 1px}
</style>
</HEAD>

<BODY>

<table width="100%" height="100%">
<tr><td align="center"><div id="layer">blu</div></td></tr>
</table>

</BODY>
</HTML>

Eine bessere Variante, die in allen Browsern (Opera ungetestet) funktioniert, habe ich leider auch noch nicht gefunden.

Gruß Sabine


als Antwort auf: [#90455]
(Dieser Beitrag wurde von SabineP am 11. Jun 2004, 22:26 geändert)

Layer per CSS auf der Seite zentrieren

Tömsken
Beiträge gesamt: 720

11. Jun 2004, 23:45
Beitrag # 5 von 6
Beitrag ID: #90509
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine,

danke für den Hinweis. Ich dachte, dass es mittlerweile etwas "Schickeres" geben würde - nun ja, dann eben nicht ;)

Ich habe bislang noch keine Website ausschließlich mit Layern aufgebaut, stattdessen immer Tabellen genommen. Nun "experimentiere" ich z. Z. damit, um herauszufinden, was denn der bessere, zeitgemäße Weg ist. Gerade mit Blick auf NS 4 bin ich recht skeptisch, wenngleich dessen Marktanteil eigentlich ein "Ignorieren" erlauben sollte... na, ich weiß nicht... ist schon doof, wenn der Kunde denn doch einen NN 4 einsetzt und man das erst mal erklären muß...

Ciao, Tom


als Antwort auf: [#90455]

Layer per CSS auf der Seite zentrieren

SabineP
Beiträge gesamt: 7586

12. Jun 2004, 00:05
Beitrag # 6 von 6
Beitrag ID: #90511
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Tom,

ausschließlich mit Layern habe ich auch noch keine Seite gebastelt, ein oder zwei Tabellen waren immer dabei.
Aber das macht ja nichts, Tabellen sind ja nicht verboten.

Ich habe in meinen Bookmarks noch zwei Links gefunden die sich mit CSS - Layouts beschäftigen,
die auch in Netscape 4 funktionieren.

http://www.saila.com/...ts/nn4-layouts.shtml
http://www.fu2k.org/alex/css/

Interessant finde ich die Beispiele von Projectseven (without scripts/ohne JavaScript):
http://www.projectseven.com/...box/2boxnoscript.htm
http://www.projectseven.com/...box/3boxnoscript.htm

Vielleicht ist etwas dabei was Dir gefällt.

Gruß Sabine


als Antwort auf: [#90455]
(Dieser Beitrag wurde von SabineP am 12. Jun 2004, 00:12 geändert)
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
02.07.2024

Online
Dienstag, 02. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow