✔ Seite im Browserfenster zentriert

chroemli · 9. November 2007

Hallo zusammen

Ich bin absolut neu hier und auch fast so neu bei der HP gestaltung, html, css etc sind mir nicht gerade geläufig.
Aber trotzdem versuche ich eine kleine Web Präsentation zu entwerfen.
Ich arbeite mit Frontpage 2003, weil ich Office im allg. sehr gut kenne und es doch eine gewisse ähnlichkeit hat.
Mein Problem ist: Ich möchte die Website im Browserfenster immer zenriert dargestellt. Habe hier im Forum ein paar Lösungsvorschläge mit Tabellen oder Ebenen zentrierung gefunden, allerdings habe ich es nicht geschnallt den Code auf meinen anzuwenden.
Meine Seite ist mit Ebenen und darin verschachtelten Tabellen designt.

Wenn mir jemand einen Rat ode noch besser eine Lösung hätte wäre, diese/r jemand mein Held.

Maik · 9. November 2007

Hi und herzlich Willkommen im Forum

Wenn du nicht weisst, wie du die gefundenen Lösungen auf dein Projekt anwenden musst, solltest du hier deinen Quellcode präsentieren, oder einen Link zu deiner Seite nennen, damit man dir den entscheidenden Hinweis geben kann.

chroemli · 9. November 2007

Code:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="01_Fit_in_die_Arbeitswelt-Dateien/filelist.xml">

<!--[if !mso]>
<style>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
<script language="JavaScript">
<!--
function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'../button3.gif',/*url*/'../button2.gif',/*url*/'../button6.gif',/*url*/'../button5.gif',/*url*/'../button9.jpg',/*url*/'../button8.jpg',/*url*/'../buttonC.gif',/*url*/'../buttonB.gif',/*url*/'../buttonF.jpg',/*url*/'../buttonE.jpg',/*url*/'../button12.jpg',/*url*/'../button11.jpg',/*url*/'../button15.jpg',/*url*/'../button14.jpg',/*url*/'../button18.jpg',/*url*/'../button17.jpg',/*url*/'../button1B.jpg',/*url*/'../button1A.jpg',/*url*/'../button1E.gif',/*url*/'../button1D.gif',/*url*/'../button21.gif',/*url*/'../button20.gif',/*url*/'../button24.gif',/*url*/'../button23.gif',/*url*/'../button27.gif',/*url*/'../button26.gif',/*url*/'../button2D.gif',/*url*/'../button2C.gif',/*url*/'../button39.gif',/*url*/'../button38.gif',/*url*/'../button36.gif',/*url*/'../button35.gif',/*url*/'../button33.gif',/*url*/'../button32.gif',/*url*/'../button30.gif',/*url*/'../button2F.gif')">



<div style="position: absolute; width: 90px; height: 110px; z-index: 5; left: 10px; top: 10px" id="Logo">
	<!--[if gte mso 9]>
	<p align="center"><![endif]--><!--[if gte vml 1]><v:group id="_x0000_s1025"
 href="01_Fit_in_die_Arbeitswelt/Fit_in_die_Arbeitswelt.htm" style='position:absolute;
 left:0;top:0;width:67.5pt;height:85.5pt;z-index:5' coordorigin="42,21"
 coordsize="90,114">
 <v:rect id="_x0000_s1026" style='position:absolute;left:42;top:21;width:90;
  height:90;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
  mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' filled="f"
  stroked="f" insetpen="t" o:cliptowrap="t">
  <v:stroke>
   <o:left v:ext="view" joinstyle="miter" insetpen="t"/>
   <o:top v:ext="view" joinstyle="miter" insetpen="t"/>
   <o:right v:ext="view" joinstyle="miter" insetpen="t"/>
   <o:bottom v:ext="view" joinstyle="miter" insetpen="t"/>
  </v:stroke>
  <v:imagedata src="01_Fit_in_die_Arbeitswelt4-Dateien/image001.jpg" o:title="S-Logo"
   recolortarget="#00bc00"/>
  <v:shadow color="#ccc"/>
  <v:path o:extrusionok="f"/>
 </v:rect><v:shapetype id="_x0000_t202" coordsize="21600,21600" o:spt="202"
  path="m,l,21600r21600,l21600,xe">
  <v:stroke joinstyle="miter"/>
  <v:path gradientshapeok="t" o:connecttype="rect"/>
 </v:shapetype><v:shape id="_x0000_s1027" type="#_x0000_t202" alt="" style='position:absolute;
  left:42;top:113;width:90;height:22;mso-wrap-distance-left:2.88pt;
  mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
  mso-wrap-distance-bottom:2.88pt' filled="f" stroked="f" insetpen="t"
  o:cliptowrap="t">
  <v:shadow color="#ccc"/>
  <v:textbox style='mso-next-textbox:#_x0000_s1027;mso-column-margin:2mm'
   inset="0,0,0,0">
<div dir="ltr">
	<p class="MsoNormal" style="mso-pagination: none" align="center">
	<span style="font-family: Impact; mso-default-font-family: Impact; mso-ascii-font-family: Impact; mso-latin-font-family: Impact; mso-greek-font-family: Impact; mso-cyrillic-font-family: Impact; mso-latinext-font-family: Impact; language: DE-CH; mso-ansi-language: DE-CH; vertical-align: middle">
	<font style="font-size: 11pt">S A N T I B O O K</font><o:p></o:p></span></div>
  </v:textbox>
 </v:shape></v:group><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:5;left:10px;top:10px;width:94px;height:116px'><map
name=MicrosoftOfficeMap0><area shape=Rect
coords="2, 92, 92, 114"
href="01_Fit_in_die_Arbeitswelt/Fit_in_die_Arbeitswelt.htm"><area shape=Rect
coords="2, 0, 92, 90"
href="01_Fit_in_die_Arbeitswelt/Fit_in_die_Arbeitswelt.htm"></map><img
border=0 width=94 height=116
src="01_Fit_in_die_Arbeitswelt4-Dateien/image002.gif"
usemap="#MicrosoftOfficeMap0" v:shapes="_x0000_s1025 _x0000_s1026 _x0000_s1027"></span><![endif]></p>
	<p>&nbsp;</div>
<p><!--[if gte vml 1]><v:group
 id="_x0000_s1028" style='position:absolute;left:159.75pt;top:63pt;width:413.25pt;
 height:31.5pt;z-index:1' coordorigin="303,7" coordsize="551,42">
 <v:shape id="_x0000_s1029" type="#_x0000_t202" style='position:absolute;
  left:303;top:18;width:390;height:31;mso-wrap-distance-left:2.88pt;
  mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
  mso-wrap-distance-bottom:2.88pt' filled="f" stroked="f" o:cliptowrap="t">
  <v:stroke>
   <o:left v:ext="view" joinstyle="miter"/>
   <o:top v:ext="view" joinstyle="miter"/>
   <o:right v:ext="view" joinstyle="miter"/>
   <o:bottom v:ext="view" joinstyle="miter"/>
  </v:stroke>
  <v:shadow color="#ccc"/>
  <v:path insetpenok="f"/>
  <v:textbox style='mso-column-margin:2mm' inset="2.88pt,2.88pt,2.88pt,0">
<div dir="ltr">
	<p class="MsoNormal" align="center">
	<span style="font-family: Arial; color: #B2B2B2; font-weight: bold; language: DE-CH">
	<font style="font-size: 22pt">Kaufmännische Praxisfirma</font></span></p>
</div>
  </v:textbox>
 </v:shape><v:shape id="_x0000_s1030" type="#_x0000_t202" style='position:absolute;
  left:303;top:7;width:551;height:39;mso-wrap-distance-left:2.88pt;
  mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
  mso-wrap-distance-bottom:2.88pt' filled="f" stroked="f" o:cliptowrap="t">
  <v:stroke>
   <o:left v:ext="view" joinstyle="miter"/>
   <o:top v:ext="view" joinstyle="miter"/>
   <o:right v:ext="view" joinstyle="miter"/>
   <o:bottom v:ext="view" joinstyle="miter"/>
  </v:stroke>
  <v:shadow on="t" color="#ccc" opacity=".5"/>
  <v:path insetpenok="f"/>
  <v:textbox style='mso-column-margin:2mm' inset="0,2.88pt,2.88pt,0">
<div dir="ltr">
	<p class="MsoNormal" align="center">
	<span style="font-family: Arial; font-weight: bold; language: DE-CH">
	<font style="font-size: 22pt">Kaufmännische Praxisfirma </font></span>
	<span style="font-family: Arial; color: #B2B2B2; font-weight: bold; language: DE-CH">
	<font style="font-size: 22pt">Langenthal</font></span></p>
</div>
  </v:textbox>
 </v:shape></v:group><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:1;left:213px;top:84px;width:555px;height:46px'><img
width=555 height=46 src="01_Fit_in_die_Arbeitswelt4-Dateien/image003.gif"
v:shapes="_x0000_s1028 _x0000_s1029 _x0000_s1030"></span><![endif]></p>
<div style="position: absolute; width: 950px; height: 20px; z-index: 4; left: -5px; top: 870px; right: 0" id="Navi_unten">
	<img border="0" id="img65" src="../button1C.gif" height="20" width="105" alt="" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title onmouseover="FP_swapImg(1,0,/*id*/'img65',/*url*/'../button1D.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img65',/*url*/'../button1C.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img65',/*url*/'../button1E.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img65',/*url*/'../button1D.gif')"><a href="http://www.santis-training.ch/"><img border="0" id="img66" src="../button1F.gif" height="20" width="106" alt="Santis-Training" onmouseover="FP_swapImg(1,0,/*id*/'img66',/*url*/'../button20.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img66',/*url*/'../button1F.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img66',/*url*/'../button21.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img66',/*url*/'../button20.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Santis-Training"></a><a href="http://www.santifit.ch/"><img border="0" id="img67" src="../button22.gif" height="20" width="106" alt="Santifit" onmouseover="FP_swapImg(1,0,/*id*/'img67',/*url*/'../button23.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img67',/*url*/'../button22.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img67',/*url*/'../button24.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img67',/*url*/'../button23.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Santifit"></a><a href="http://www.b2bcosmetics.ch/b2bshop/contact_us.php"><img border="0" id="img68" src="../button25.gif" height="20" width="106" alt="B2B Cosmetics AG " onmouseover="FP_swapImg(1,0,/*id*/'img68',/*url*/'../button26.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img68',/*url*/'../button25.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img68',/*url*/'../button27.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img68',/*url*/'../button26.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="B2B Cosmetics AG "></a><a href="http://www.practicefirms.ch/indexd.htm"><img border="0" id="img69" src="../button2B.gif" height="20" width="106" alt="CSEE" onmouseover="FP_swapImg(1,0,/*id*/'img69',/*url*/'../button2C.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img69',/*url*/'../button2B.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img69',/*url*/'../button2D.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img69',/*url*/'../button2C.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="CSEE"></a><img border="0" id="img73" src="../button37.gif" height="20" width="105" alt="" onmouseover="FP_swapImg(1,0,/*id*/'img73',/*url*/'../button38.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img73',/*url*/'../button37.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img73',/*url*/'../button39.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img73',/*url*/'../button38.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title><img border="0" id="img72" src="../button34.gif" height="20" width="105" alt="" onmouseover="FP_swapImg(1,0,/*id*/'img72',/*url*/'../button35.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img72',/*url*/'../button34.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img72',/*url*/'../button36.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img72',/*url*/'../button35.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title><img border="0" id="img71" src="../button31.gif" height="20" width="105" alt="" onmouseover="FP_swapImg(1,0,/*id*/'img71',/*url*/'../button32.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img71',/*url*/'../button31.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img71',/*url*/'../button33.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img71',/*url*/'../button32.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 6; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title><img border="0" id="img70" src="../button2E.gif" height="20" width="106" alt="Photogalerie" onmouseover="FP_swapImg(1,0,/*id*/'img70',/*url*/'../button2F.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img70',/*url*/'../button2E.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img70',/*url*/'../button30.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img70',/*url*/'../button2F.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Photogalerie"></div>

<div style="position: absolute; width: 740px; height: 520px; z-index: 3; left: 210px; top: 370px" id="Hintergrund_3er">
<!--[if gte vml 1]><v:rect
 id="_x0000_s1031" alt="" style='position:absolute;left:375.75pt;top:-1.5pt;
 width:180pt;height:391.5pt;z-index:5' fillcolor="silver" stroked="f">
 <v:fill opacity="42598f" o:opacity2="29491f" rotate="t" angle="-90" focus="100%"
  type="gradient"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:5;left:711px;top:368px;width:240px;height:522px'><img
width=240 height=522 src="01_Fit_in_die_Arbeitswelt4-Dateien/image004.gif"
v:shapes="_x0000_s1031"></span><![endif]><!--[if gte vml 1]><v:rect id="_x0000_s1032"
 alt="" style='position:absolute;left:189pt;top:-1.5pt;width:180pt;height:391.5pt;
 z-index:4' fillcolor="silver" stroked="f">
 <v:fill opacity="42598f" o:opacity2="29491f" rotate="t" angle="-90" focus="100%"
  type="gradient"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:4;left:462px;top:368px;width:240px;height:522px'><img
width=240 height=522 src="01_Fit_in_die_Arbeitswelt4-Dateien/image004.gif"
v:shapes="_x0000_s1032"></span><![endif]><!--[if gte vml 1]><v:rect id="_x0000_s1033"
 alt="" style='position:absolute;left:0;top:-1.5pt;width:180pt;height:391.5pt;
 z-index:3' fillcolor="silver" stroked="f">
 <v:fill opacity="42598f" o:opacity2="29491f" rotate="t" angle="-90" focus="100%"
  type="gradient"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:3;left:210px;top:368px;width:240px;height:522px'><img
width=240 height=522 src="01_Fit_in_die_Arbeitswelt4-Dateien/image004.gif"
v:shapes="_x0000_s1033"></span><![endif]><div style="position: absolute; width: 720; height: 480px; z-index: 4; left: 10px; top: 10px" id="Text_3er">
<table border="0" width="720" id="table3" height="480" cellspacing="0" cellpadding="0">
	<!-- MSTableType="nolayout" -->
	<tr>
		<td width="220" align="left" valign="top" height="50">
		&nbsp;</td>
		<td width="30" align="left" valign="top">&nbsp;</td>
		<td align="left" valign="top" width="220">&nbsp;</td>
		<td width="30" align="left" valign="top">&nbsp;</td>
		<td width="220" align="left" valign="top">&nbsp;</td>
	</tr>
	<tr>
		<td width="220" align="left" valign="top">
		&nbsp;</td>
		<td width="30" align="left" valign="top">&nbsp;</td>
		<td align="left" valign="top" width="220">&nbsp;</td>
		<td width="30" align="left" valign="top">&nbsp;</td>
		<td width="220" align="left" valign="top">&nbsp;</td>
	</tr>
</table>
</div>
</div>

<div style="position: absolute; width: 950px; height: 20px; z-index: 7; left: -5px; top: 130px; right: 0" id="Navi_oben">
	<a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/zu%20Off/01_Fit_in_die_Arbeitswelt.htm">
	<img border="0" id="img56" src="../button1.gif" height="20" width="106" alt="Fit in die Arbeitswelt" onmouseover="FP_swapImg(1,0,/*id*/'img56',/*url*/'../button2.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img56',/*url*/'../button1.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img56',/*url*/'../button3.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img56',/*url*/'../button2.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font: Arial; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Fit in die Arbeitswelt"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/02_Konzept/02_Konzept.htm"><img border="0" id="img57" src="../button4.gif" height="20" width="105" alt="Konzept" onmouseover="FP_swapImg(1,0,/*id*/'img57',/*url*/'../button5.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img57',/*url*/'../button4.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img57',/*url*/'../button6.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img57',/*url*/'../button5.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Konzept"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/03_Kaufmaennische_Praxis/03_Kaufmaennische_Praxis.htm"><img border="0" id="img58" src="../button7.jpg" height="20" width="106" alt="Kaufmännische Praxis" onmouseover="FP_swapImg(1,0,/*id*/'img58',/*url*/'../button8.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img58',/*url*/'../button7.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img58',/*url*/'../button9.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img58',/*url*/'../button8.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Kaufmännische Praxis"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/04_Aus-_und_Weiterbildung"><img border="0" id="img59" src="../buttonA.gif" height="20" width="106" alt="Aus- und Weiterbildung" onmouseover="FP_swapImg(1,0,/*id*/'img59',/*url*/'../buttonB.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img59',/*url*/'../buttonA.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img59',/*url*/'../buttonC.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img59',/*url*/'../buttonB.gif')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-transparent: 1; fp-proportional: 0; fp-orig: 0" fp-title="Aus- und Weiterbildung"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/05_Bewerbungswerkstatt/05_Bewerbungswerkstatt.htm"><img border="0" id="img60" src="../buttonD.jpg" height="20" width="106" alt="Bewerbungswerkstatt" onmouseover="FP_swapImg(1,0,/*id*/'img60',/*url*/'../buttonE.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img60',/*url*/'../buttonD.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img60',/*url*/'../buttonF.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img60',/*url*/'../buttonE.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Bewerbungswerkstatt"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/06_Geschaeftsleitung/06_Geschaeftsleitung.htm"><img border="0" id="img61" src="../button10.jpg" height="20" width="105" alt="Geschäftsleitung" onmouseover="FP_swapImg(1,0,/*id*/'img61',/*url*/'../button11.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img61',/*url*/'../button10.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img61',/*url*/'../button12.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img61',/*url*/'../button11.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Geschäftsleitung"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/07_Kontakt_Lageplan/07_Kontakt_Lageplan.htm"><img border="0" id="img62" src="../button13.jpg" height="20" width="105" alt="Kontakt / Lageplan" onmouseover="FP_swapImg(1,0,/*id*/'img62',/*url*/'../button14.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img62',/*url*/'../button13.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img62',/*url*/'../button15.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img62',/*url*/'../button14.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Kontakt / Lageplan"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/08_Dokumente_Links/08_Dokumente_Links.htm"><img border="0" id="img63" src="../button16.jpg" height="20" width="106" alt="Dokumente / Links" onmouseover="FP_swapImg(1,0,/*id*/'img63',/*url*/'../button17.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img63',/*url*/'../button16.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img63',/*url*/'../button18.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img63',/*url*/'../button17.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Dokumente / Links"></a><a href="file:///H:/SantiBook/Homepage%20Santibook/1.HP/Webseite_SBO1/09_WebShop/09_WebShop.htm"><img border="0" id="img64" src="../button19.jpg" height="20" width="105" alt="WebShop" onmouseover="FP_swapImg(1,0,/*id*/'img64',/*url*/'../button1A.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img64',/*url*/'../button19.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img64',/*url*/'../button1B.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img64',/*url*/'../button1A.jpg')" fp-style="fp-btn: Embossed Tab 5; fp-font-size: 7; fp-font-color-hover: #FFFFFF; fp-font-color-press: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="WebShop"></a></div>

<div style="position: absolute; width: 740px; height: 130px; z-index: 7; left: 210px; top: 160px" id="Bilder">
<table border="0" width="100%" id="table4" height="131" cellspacing="0" cellpadding="0">
	<tr>
		<td>&nbsp;</td>
		<td width="10">&nbsp;</td>
		<td width="240">
		&nbsp;</td>
		<td width="10">&nbsp;</td>
		<td width="240">
		&nbsp;</td>
	</tr>
</table>
</div>
<div style="position: absolute; width: 740px; height: 60px; z-index: 8; left: 210px; top: 300px" id="Text_breit">
<table border="0" width="100%" id="table5" height="61" cellspacing="0" cellpadding="0">
	<tr>
		<td align="left">&nbsp;</td>
	</tr>
</table>
</div>
<div style="position: absolute; width: 200px; height: 500px; z-index: 11; left: 0px; top: 370px" id="Titel0">
	<p align="center">
	<img border="0" src="FIT%20IN%20DIE%20ARBEITSWELT.gif" width="88" height="500"></div>

</body>

</html>

Maik · 9. November 2007

Wenn ich mich jetzt nicht verrechnet habe, besitzt dein Layout eine Gesamtbreite von 950 Pixel.

Da alle Bereiche im Fenster absolut positioniert sind, betten wir das vorhandene Layout in ein weiteres DIV ein, das hier die ID #wrapper erhält.

Im Dokumentheader notierst du nun das folgendene Stylesheet, um das DIV in der horizontalen Fenstermitte zu positionieren:

Code:

<style type="text/css">
<!--
div#wrapper {
position:absolute;
left:50%;
width:950px;
margin-left:-475px; /* negative Hälfte von width:950px */
}
-->
</style>

und bindest darin das Vorhandene ein:

Code:

<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand -->
    </div>
</body>

Sollte ich mich jetzt mit der Gesamtbreite täuschen, lautet die Formel für die margin-left-Eigenschaft: "Die negative Hälfte des width-Wertes".

nilox · 9. November 2007

Zentrieren macht sich wunderbar mit verschachtelten Tabellen, dabei muss die erste (also außenliegende) Tabelle einfach in der Höhe und Breite auf 100% gesetzt werden und darf nur eine Spalte und eine Teile beinhalten, somit passt sich diese Tabelle immer dem Browserfenster an. Die Tabellenatribute auf zentriert setzen und fertig...

PHP:

<table width="100%" border="0" height="100%">
  <tr> 
    <td align="center" valign="middle"> 
      <div align="center"> 
    hier deinen Quelltext einfügen...
      </div>
    </td>
  </tr>
</table>

chroemli · 9. November 2007

Hi Maik

Also du bist für Heute mein Held, wie es scheint funktioniert es, obwohl ich nicht 100% sicher bin, den Code am genau richtigen Ort eingefügt zu haben, Aber wie ich schon bemerkt habe kann ein code an verschiedenen Stellen stehen und trotzdem noch die selbe Funtkion haben, oder?

Also RIESEN DANK

Ein nice Weekend, Gruss chroemli

P.s. : Hätte da noch eine andere Frage.

Ist es möglich, eine Ebene so zu fixieren, dass sie immer am unteren Rand des Browserfensters klebt, und dabei über etwaige weitere Ebenen quasi drüberläuft? Ich meinte schon mal so etwas gesehen zu haben.

chroemli · 9. November 2007

Hallo Nilox

Auch du bist ein Held
Auch deine Version ist wunderbar und elegant und ich werde sie in der Zukunft bestimmt einmal anwenden.

Besten Dank und nice Weekend

Gruss chroemli

Maik · 9. November 2007

@nilox: dein Vorschlag funktioniert im vorliegenden Fall aber nicht, da die einzelnen Seitenbereiche im Viewport absolut positioniert sind, und die Tabelle daran nichts ändert, dass sie vom linken Fensterrand beginnend ausgerichtet werden.

@chroemli: Vielleicht sprichst du von der fixierten Positionierung, sodass das Element seine Position im Fenster beibehält, wenn die Seite gescrollt wird?

chroemli · 9. November 2007

@Maik
Ja ich denke ich, damit meine ich die fixe Positionierung beim Scrollen.

Maik · 9. November 2007

Bitte schön

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_chroemli</title>

<style type="text/css">
<!--
body {
margin:0;
padding:0;
height:100%;
overflow-y:auto;
}

#content {
padding-bottom:50px;
}

#footer {
position:fixed;
left:0;
bottom:0;
width:100%;
height:50px;
background:#ddd;
}

* html #footer {
position:absolute;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}
</style>
<![endif]-->

</head>
<body>

<div id="content">
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     <p>dummy text</p>
     - END -
</div>

<div id="footer">footer</div>

</body>
</html>

✔ Seite im Browserfenster zentriert

chroemli

Grünschnabel

Maik

chroemli

Grünschnabel

Maik

nilox

Grünschnabel

chroemli

Grünschnabel

chroemli

Grünschnabel

Maik

chroemli

Grünschnabel

Maik

Neue Beiträge