mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 05.12.2016 05:43 Benutzername: Passwort: Auto-Login

Thema: Content mittels CSS zentriert anzeigen vom 10.07.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Content mittels CSS zentriert anzeigen
Seite: 1, 2, 3, 4  Weiter
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Sa 10.07.2004 22:19
Titel

Content mittels CSS zentriert anzeigen

Antworten mit Zitat Zum Seitenanfang

Tach!

Ich habe eben mal den PAGE Workshop für reines CSS-Sitedesign durchgemacht und probiere den Spass jetzt an etwas eigenem aus.

Das hier möchte ich in reinem CSS nachbauen: www.phasedrei.com - ist ja relativ einfach gemacht.
Nun habe ich in meinem CSS-Dok. folgende Angaben drin:
Code:
div#content {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   height: 300px;
   width: 450px;
}


Wie kann ich diesem div#content nun sagen, dass er auf der Seite horizontal und vertikal zentriert erscheinen soll?

Gruss Mario
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Waschbequen
Account gelöscht


Ort: -

Verfasst Sa 10.07.2004 23:57
Titel

Antworten mit Zitat Zum Seitenanfang

Suche...
 
Anzeige
Anzeige
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst So 11.07.2004 12:15
Titel

Antworten mit Zitat Zum Seitenanfang

Waschbequen hat geschrieben:
Suche...


Dankeschön - funktioniert bis dahin wunderbar und sieht so aus:
Code:
div#content {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   background-image: url(img/platzhalter.gif);
   height: 300px;
   width: 450px;
   position:absolute;
   left:50%;
   top:50%;
   height:300px;
   width:450px;
   margin-left:-225px;
   margin-top:-150px;
   padding: 40px;
}


Wie ihr seht habe ich nun noch ein padding eingerichtet um den Text besser zu positionieren. Dieses Padding zerreisst mir jetzt allerdings wieder alles. Was mach ich falsch?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Mo 12.07.2004 13:23
Titel

Antworten mit Zitat Zum Seitenanfang

*push*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Mo 12.07.2004 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

das padding wird ur größe hinuaddiert.
du musst dann die 40px vom margin wieder abiehen.

//edit:
lad mal rauf, ich schau mal drüber.


Zuletzt bearbeitet von beeviZ am Mo 12.07.2004 13:26, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Mo 12.07.2004 13:53
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:
das padding wird ur größe hinuaddiert.
du musst dann die 40px vom margin wieder abiehen.

//edit:
lad mal rauf, ich schau mal drüber.


Hab die 40px jetzt den den margins abgezogen aber irgendwie ist die Seite dann nicht wirklich zentriert > http://www.phasedrei.com/0.5/index-css.htm

Außerdem wird jetzt das ganze DIV-Dingens wieder grösser, was mir die Grafik im Hintergrund zerreist (bedingt durch das padding).


Zuletzt bearbeitet von Xaven am Mo 12.07.2004 13:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Mo 12.07.2004 14:06
Titel

Antworten mit Zitat Zum Seitenanfang

css so:

div#content {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url(platzhalter.gif) no-repeat top center;
height: 300px;
width: 450px;
position:absolute;
left:50%;
top:50%;
height:300px;
width:450px;
margin-left:-265px;
margin-top:-150px;
padding: 40px;
}


dann sollte es gehen Lächel


Zuletzt bearbeitet von beeviZ am Mo 12.07.2004 14:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Mo 12.07.2004 14:13
Titel

Antworten mit Zitat Zum Seitenanfang

beeviZ hat geschrieben:
css so:

div#content {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url(platzhalter.gif) no-repeat top center;
height: 300px;
width: 450px;
position:absolute;
left:50%;
top:50%;
height:300px;
width:450px;
margin-left:-265px;
margin-top:-150px;
padding: 40px;
}


dann sollte es gehen Lächel


Negativ. Sollte doch eigentlich die einfachste Übung sein sowas darzustellen oder? Aber mit reinem CSS sind so horizontal und vertikal zentrierte Sachen wohl nicht so einfach.

*hilfe*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen layout mit layern zentriert anzeigen
Wie kann man ein Frameset zentriert anzeigen lassen?
Scroll-Bar Zentriert anzeigen lassen.
button, content anzeigen, aber wie?
[CSS] Will nicht zentriert...
CSS linksbündige ul zentriert
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.