Autor |
Nachricht |
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Sa 10.07.2004 23:19
Titel Content mittels CSS zentriert anzeigen |
|
|
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
|
|
|
|
|
Waschbequen
Account gelöscht
Ort: -
|
Verfasst So 11.07.2004 00:57
Titel
|
|
|
Suche...
|
|
|
|
|
Anzeige
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst So 11.07.2004 13:15
Titel
|
|
|
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?
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Mo 12.07.2004 14:23
Titel
|
|
|
*push*
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.07.2004 14:25
Titel
|
|
|
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 14:26, insgesamt 1-mal bearbeitet
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Mo 12.07.2004 14:53
Titel
|
|
|
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 14:54, insgesamt 1-mal bearbeitet
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.07.2004 15:06
Titel
|
|
|
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
Zuletzt bearbeitet von beeviZ am Mo 12.07.2004 15:09, insgesamt 1-mal bearbeitet
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Mo 12.07.2004 15:13
Titel
|
|
|
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 |
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*
|
|
|
|
|
|
|
|
Ähnliche Themen |
Scroll-Bar Zentriert anzeigen lassen.
layout mit layern zentriert anzeigen
Wie kann man ein Frameset zentriert anzeigen lassen?
button, content anzeigen, aber wie?
Content Editing, statt Content Management
<div> zentriert ausrichten
|
|