[GastForen Web allgemein HTML und CSS / Stylesheets Seite zentrieren mit CSS

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

Seite zentrieren mit CSS

25_Kerstin
Beiträge gesamt: 4

6. Mär 2009, 15:23
Beitrag # 1 von 5
Bewertung:
(4598 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich muss den Inhalt einer Website mithilfe von CSS vertikal und horizontal zentrieren.


Wenn ich folgenden CSS-Code verwende, funktioniert es und die Seite ist zentriert.

body {
background-color:#000000;
margin: 0px;
padding: 0px;
}


#mainbackground {
background-color:#FFFFFF;
position:absolute;
height:760px;
width:1025px;
margin:-380px 0px 0px -512px;
top: 50%;
left: 50%;

}

#main {
position:absolute;
height:720px;
width:985px;
margin:-360px 0px 0px -492px;
top: 50%;
left: 50%;
}

#header {
width: 985px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}

#naviright {
width: 224px;
height: 500px;
position: absolute;
left: 761px;
top: 220px;
}




#navitop {
background-color:#FFFFFF;
width: 985px;
height: 20px;
position: absolute;
left: 0;
top: 200px;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}



#content {
width: 761px;
height: 500px;
position: absolute;
left: 0;
top: 220px;
}



Wenn das Browserfenster allerdings kleiner ist als der Inhalt, verschiebt sich der Inhalt nach links und man kann nicht nach links scrollen. Der Teil, der sich also ganz links befindet, ist in kleineren Browserfenstern nicht mehr sichtbar.

Kann mir jemand sagen, wie ich die Seite horizontal und vertikal zentrieren kann, sodass der Inhalt links am Browserfenster stoppt, falls dieses kleiner als der Inhalt ist?

Ich möchte den Inhalt allerdings nicht mit dem Browserfenster mitwachsen lassen, er soll sich also nicht verkleinern, wenn das Browserfenster kleiner wird.
X

Seite zentrieren mit CSS

Dirk Levy
  
Beiträge gesamt: 9467

6. Mär 2009, 15:52
Beitrag # 2 von 5
Beitrag ID: #388394
Bewertung:
(4592 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Kerstin,

horizontal geht einfach,
aber vertikal funktioniert
nicht Browserstabil.

Das der Inhalt nach links schiebt
ist ja klar, da Du mit einem negativen
Einzug für die horizontale Zentrierung
arbeitest.

Seitlich mache ich das für den
Container so:

#wrap { background-color: #fff; margin-left: auto; margin-right: auto; width: 1001px; height: 674px; margin-top: 20px; }


als Antwort auf: [#388388]

Seite zentrieren mit CSS

FSt
  
Beiträge gesamt: 1965

6. Mär 2009, 16:34
Beitrag # 3 von 5
Beitrag ID: #388401
Bewertung:
(4577 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Kerstin

Die beiden Minuswerte haben so ihre tücken.
Schau Dir doch mal diesen Thread an ...
http://www.hilfdirselbst.ch/..._P355682.html#355682

Gruss
Martin


als Antwort auf: [#388394]

Seite zentrieren mit CSS

25_Kerstin
Beiträge gesamt: 4

9. Mär 2009, 09:46
Beitrag # 4 von 5
Beitrag ID: #388552
Bewertung:
(4522 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich habe jetzt versucht, eine Tabelle zu machen und da meine ganzen div-boxen reinzumachen. Da man den Inhalt von Tabellen genau mittig stellen kann, müsste das doch funktionieren oder?
Es funktioniert bei mir aber nicht. Vielleicht findet ja jemand den Fehler:


CSS-Code:

@charset "utf-8";

body {
background-color:#000000;
margin: 0px;
padding: 0px;
}


#mainbackground {
background-color:#FFFFFF;
position:relative;
height:760px;
width:1025px;
}

#main {
position:absolute;
height:720px;
width:985px;
margin:-360px 0px 0px -492px;
top: 50%;
left: 50%;
}

#header {
width: 985px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}

#naviright {
width: 224px;
height: 500px;
position: absolute;
left: 761px;
top: 220px;
}


#navitop {
background-color:#FFFFFF;
width: 985px;
height: 20px;
position: absolute;
left: 0;
top: 200px;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}


#content {
width: 761px;
height: 500px;
position: absolute;
left: 0;
top: 220px;
}


HTML-Code:

<body>


<table width="100%" height="100%">
<tr> <td width="1025" height="760" align="center" valign="middle">


<div id="mainbackground">

<div id="main">



<div id="header">
</div>


<div id="navitop">
</div>


<div id="naviright">
</div>


<div id="content">
</div>

</div>
</div>

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

</body>
</html>


Ich hoffe, Ihr könnt mir helfen.


als Antwort auf: [#388401]

Seite zentrieren mit CSS

SabineP
Beiträge gesamt: 7586

9. Mär 2009, 12:24
Beitrag # 5 von 5
Beitrag ID: #388574
Bewertung:
(4497 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Kerstin,

es gibt keine Lösung mit CSS, die in allen Browsern funktioniert.


als Antwort auf: [#388552]
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