kostenloser Webspace werbefrei: lima-city

Design mittig via CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

befehlen beitrag body ecken element fehler gre halbe hhe hlfte hhen inhalt linke obere ecke margin mitte mittelpunkt mts page pixel tabelle webseite
  1. Autor dieses Themas

    zero-forum

    zero-forum hat kostenlosen Webspace.

    12:07, 15.4.2007
    Servus,
    will gern via CSS meine Page mittig setzen. Horizntal als auch vertikal.
    Das hier ist mein CSS Script:
    body  { position: absolute; top: -50%; left: -50%; width: 1002px; height: 554px }

    Die Page hat eine Höhe von 553 Pixel und eine Breite von 1002 Pixel. Und das ganze soll dann vertikal als auch horizontal immer mittig sein. In der GL-Vorschau bei mir funzt dieses Script nicht.. wo liegt denn mein Fehler?

    Ich weiß, dass das hier die HTML- und Java- Ecke ist, aber ich denke hier passt es dennoch am besten rein.

    Ich danke euch,
    euer Zero

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. sandrock-jonas

    Kostenloser Webspace von sandrock-jonas

    sandrock-jonas hat kostenlosen Webspace.

    13:31, 15.4.2007
    Also, in die Breite geht schonmal so:

    body {
  margin:10px auto;
  width:1002px;
  height:554px
}


    Wie das in die Höhe geht, weiß ich leider nicht. Es geht aber bestimmt. Würde mich aber auch mal interessieren, wie.

  4. timmythom

    timmythom hat kostenlosen Webspace.

    18:09, 17.4.2007
    Es gibt noch ne zweite Variante, mit der man auch vertikal zentrieren kann:

    #dein_container{
width:1002px;
height:554px;
position:absolute;
left:50%;
margin-left:-501px; /* halbe Breite*/
top:50%;
margin-top:-277px; /* halbe Höhe */
}


    Beitrag geaendert: 17.4.2007 18:10:12 von timmythom

  5. e**6

    18:15, 17.4.2007 
    <html>
<head>
<style type="text/css">
<!--

BODY {
 margin: 0px 0px 0px 0px;
}

#zentriert {
 position: absolute;
 width: 400px;
 height: 300px;
 left: 50%;
 top: 50%;
 margin-left: -200px;
 margin-top: -150px;
}

-->
</style>
<title>Elemente genau in der Mitte der Webseite zentrieren</title> </head> <body>

<div id="zentriert">
<img src="bild.jpg">
</div>

</body>
</html>

    Zuerst wird der unsichtbare Abstand zwischen Inhalt der Webseite und dem
    Browserfenster mit dem Befehl margin: 0px 0px 0px 0px; auf Null gesetzt.

    Für den Bereich "zentriert" wird zuerst die Breite (width: 400px) und die
    Höhe (height: 300px) festgelegt. Mit den beiden Befehlen left: 50% und
    top: 50% wird das Element in die Mitte der Webseite verschoben. Da sich die beiden Befehle left und top auf die linke,
    obere Ecke des Elementes beziehen, muss dieses noch durch einen negativen margin-left und margin-top um genau
    die Hälfte seiner Größe nach links bzw. oben versetzt werden.

    Nun ist der Mittelpunkt der Grafik genau in der Mitte der Webseite
    zentriert.
  6. Autor dieses Themas

    zero-forum

    zero-forum hat kostenlosen Webspace.

    23:23, 21.4.2007
    Ich habe jetzt mal sowas gemacht, mein Tabellen-Template in den DIV-Container, auch wenn es sinnlos ist :biggrin:

    <HTML>
<HEAD>
<TITLE>PEDDINGHAUS Germany</TITLE>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
		<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		button_willkommen1_over = newImage("template/button-willkommen1-over.png");
		button_welcome1_over = newImage("template/button-welcome1-over.png");
		button_willkommen2_button_willkommen1_over = newImage("template/button-willkommen2-button-w.png");
		button_welcome2_button_welcome1_over = newImage("template/button-welcome2-button-welc.png");
		preloadFlag = true;
	}
}

// -->
</SCRIPT>
		<style type="text/css" media="screen"><!--
#rahmen           { background-color: #fff; margin: -227 0 0 -501; position: absolute; top: 50%; left: 50%; width: 1002px; height: 553px; visibility: visible }
--></style>
		<csscriptdict import>
			<script type="text/javascript" src="file:///C:/Dokumente%20und%20Einstellungen/Zero/Anwendungsdaten/Adobe/Adobe%20GoLive/Settings/JScripts/GlobalScripts/CSScriptLib.js"></script>
		</csscriptdict>
		<csactiondict>
			<script type="text/javascript"><!--
var preloadFlag = true;

// --></script>
		</csactiondict>
	</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
		<div id="rahmen">
		<TABLE WIDTH=1002 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=9>
			<IMG SRC="template/index_01.png" WIDTH=1002 HEIGHT=395 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="template/index_02.png" WIDTH=104 HEIGHT=37 ALT=""></TD>
		<TD>
			<A HREF="Deutsch/index-de.html"
				ONMOUSEOVER="changeImages('button_willkommen1', 'template/button-willkommen1-over.png', 'button_willkommen2', 'template/button-willkommen2-button-w.png'); return true;"
				ONMOUSEOUT="changeImages('button_willkommen1', 'template/button-willkommen1.png', 'button_willkommen2', 'template/button-willkommen2.png'); return true;">
				<IMG NAME="button_willkommen1" SRC="template/button-willkommen1.png" WIDTH=263 HEIGHT=37 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=3>
			<IMG SRC="template/index_04.png" WIDTH=308 HEIGHT=37 ALT=""></TD>
		<TD>
			<A HREF="Englisch/index-eng.html"
				ONMOUSEOVER="changeImages('button_welcome1', 'template/button-welcome1-over.png', 'button_welcome2', 'template/button-welcome2-button-welc.png'); return true;"
				ONMOUSEOUT="changeImages('button_welcome1', 'template/button-welcome1.png', 'button_welcome2', 'template/button-welcome2.png'); return true;">
				<IMG NAME="button_welcome1" SRC="template/button-welcome1.png" WIDTH=205 HEIGHT=37 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=2>
			<IMG SRC="template/index_06.png" WIDTH=122 HEIGHT=37 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="template/index_07.png" WIDTH=25 HEIGHT=121 ALT=""></TD>
		<TD COLSPAN=3>
			<A HREF="Deutsch/index-de.html"
				ONMOUSEOVER="changeImages('button_willkommen1', 'template/button-willkommen1-over.png', 'button_willkommen2', 'template/button-willkommen2-button-w.png'); return true;"
				ONMOUSEOUT="changeImages('button_willkommen1', 'template/button-willkommen1.png', 'button_willkommen2', 'template/button-willkommen2.png'); return true;">
				<IMG NAME="button_willkommen2" SRC="template/button-willkommen2.png" WIDTH=420 HEIGHT=27 BORDER=0 ALT=""></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC="template/index_09.png" WIDTH=132 HEIGHT=121 ALT=""></TD>
		<TD COLSPAN=3>
			<A HREF="Englisch/index-eng.html"
				ONMOUSEOVER="changeImages('button_welcome1', 'template/button-welcome1-over.png', 'button_welcome2', 'template/button-welcome2-button-welc.png'); return true;"
				ONMOUSEOUT="changeImages('button_welcome1', 'template/button-welcome1.png', 'button_welcome2', 'template/button-welcome2.png'); return true;">
				<IMG NAME="button_welcome2" SRC="template/button-welcome2.png" WIDTH=398 HEIGHT=27 BORDER=0 ALT=""></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC="template/index_11.png" WIDTH=27 HEIGHT=121 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="template/index_12.png" WIDTH=420 HEIGHT=94 ALT=""></TD>
		<TD COLSPAN=3>
			<IMG SRC="template/index_13.png" WIDTH=398 HEIGHT=94 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=79 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=263 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=78 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=132 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=205 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=95 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="template/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
	</TR>
</TABLE>
</div>
	</BODY>
</HTML>


    Das Ding ist aber jetzt nicht mittig, wie es soll, woran liegt das?
    Das Design ist 1002 breit und 553 hoch.
    Meine DIV heißt #rahmen
    Könnte da vielleicht mal einer drüberschauen und mir meinen Fehler nennen?

  7. i-spacke

    Kostenloser Webspace von i-spacke

    i-spacke hat kostenlosen Webspace.

    3:56, 22.4.2007
    http://www.webdesign-in.de/mts/vertikal-und-horizontal-zentrieren-ohne-tabelle/

  8. grafratlos

    grafratlos hat kostenlosen Webspace.

    13:56, 28.4.2007

    http://www.webdesign-in.de/mts/vertikal-und-horizontal-zentrieren-ohne-tabelle/


    naja... ich hab eher die erfahrung gemacht, dass unterschiedliche Browser RIESSEN Problem mit dem zenrtieren haben OHNE Tabbellen...

    zurzeit mach ich nur noch Tabbellen... geht auch relativ schnell auch ohne viel ausprobieren...

    einfach:
    <head>
body {margin:0;padding:0;}
#table-zentrieren {width:100%;height:100%;margin:0;padding:0;}
#table-zentrieren-td {width:100%;height:100%;margin:0;padding:0;}
</head>
<body>
<table id="table-zentrieren" cellpadding="0" cellspacing="0">
<tr>
<td id="table-zentrieren-td" align="center" valign="middle">
Dein Inhalt
</td>
</tr>
</table>
</body>


    mfg

  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!