Ergebnis 1 bis 10 von 10

Thema: Zentrieren einer Homepage

  1. #1
    Gast
    Gast

    Standard Zentrieren einer Homepage

    Ich weiss, dass es dazu schon einen Thread gab, aber es ist noch einiges unklar.

    Meine Frage: Wie kann ich eine komplette Website (mit Buttons, Bilder, usw) vertikal in der Mitte plazieren?
    Ich hab für alle objekte schon absolute Postitionen in CSS bestimmt. Wie muss ich diese ändern?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Gast
    Gast

    Standard Quelltext

    Hier ist der Quellcode. Was muss ich zum zentrieren machn?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    #Layer_content &#123;
    	position&#58;absolute;
    	left&#58;374px;
    	top&#58;411px;
    	width&#58;390px;
    	height&#58;522px;
    	z-index&#58;1;
    &#125;
    #Layer_button1_1 &#123;
    	position&#58;absolute;
    	left&#58;256px;
    	top&#58;63px;
    	width&#58;74px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button1_2 &#123;
    	position&#58;absolute;
    	left&#58;330px;
    	top&#58;63px;
    	width&#58;73px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button1_3 &#123;
    	position&#58;absolute;
    	left&#58;404px;
    	top&#58;63px;
    	width&#58;69px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button1_4 &#123;
    	position&#58;absolute;
    	left&#58;477px;
    	top&#58;63px;
    	width&#58;72px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button1_5 &#123;
    	position&#58;absolute;
    	left&#58;551px;
    	top&#58;63px;
    	width&#58;72px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button1_6 &#123;
    	position&#58;absolute;
    	left&#58;625px;
    	top&#58;63px;
    	width&#58;72px;
    	height&#58;32px;
    	z-index&#58;2;
    &#125;
    #Layer_button2_1 &#123;
    	position&#58;absolute;
    	left&#58;821px;
    	top&#58;22px;
    	width&#58;86px;
    	height&#58;25px;
    	z-index&#58;3;
    &#125;
    #Layer_button2_2 &#123;
    	position&#58;absolute;
    	left&#58;908px;
    	top&#58;22px;
    	width&#58;86px;
    	height&#58;25px;
    	z-index&#58;4;
    &#125;
    #Layer_button_foto_1 &#123;
    	position&#58;absolute;
    	left&#58;78px;
    	top&#58;764px;
    	width&#58;154px;
    	height&#58;17px;
    	z-index&#58;5;
    &#125;
    #Layer_button_foto_1 &#123;
    	font-family&#58; "Courier New";
    	font-size&#58; 11pt;
    	color&#58; #FFFFFF;
    	left&#58;164px;
    	top&#58;755px;
    	width&#58;154px;
    	height&#58;17px;
    &#125;
    #Layer_foto &#123;
    	position&#58;absolute;
    	left&#58;136px;
    	top&#58;436px;
    	width&#58;225px;
    	height&#58;260px;
    	z-index&#58;6;
    &#125;
    #Layer_button_foto_2 &#123;
    	font-family&#58; "Courier New";
    	font-size&#58; 11pt;
    	color&#58; #FFFFFF;	
    	position&#58;absolute;
    	left&#58;164px;
    	top&#58;784px;
    	width&#58;154px;
    	height&#58;17px;
    	z-index&#58;7;
    &#125;
    #Layer_button_foto_3 &#123;
    	font-family&#58; "Courier New";
    	font-size&#58; 11pt;
    	color&#58; #FFFFFF;	
    	position&#58;absolute;
    	left&#58;164px;
    	top&#58;869px;
    	width&#58;154px;
    	height&#58;17px;
    	z-index&#58;7;
    &#125;
    #Layer_button_foto_4 &#123;
    	font-family&#58; "Courier New";
    	font-size&#58; 11pt;
    	color&#58; #FFFFFF;	
    	position&#58;absolute;
    	left&#58;164px;
    	top&#58;898px;
    	width&#58;154px;
    	height&#58;17px;
    	z-index&#58;7;
    &#125;
    a &#123;
    	font-size&#58; 11pt;
    	font-family&#58; Courier New;
    	color&#58; #FFFFFF;
    &#125;
    a&#58;link &#123;
    	text-decoration&#58; none;
    &#125;
    a&#58;visited &#123;
    	text-decoration&#58; none;
    	color&#58; #999999;
    &#125;
    a&#58;hover &#123;
    	text-decoration&#58; underline;
    &#125;
    a&#58;active &#123;
    	text-decoration&#58; none;
    &#125;
    #Layer_content_2 &#123;
    	position&#58;absolute;
    	left&#58;770px;
    	top&#58;411px;
    	width&#58;213px;
    	height&#58;522px;
    	z-index&#58;8;
    &#125;
    #body &#123;
    	position&#58;absolute;
    	top&#58;0px;
    	left&#58;112px;
    &#125;
    -->
    </style>
    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore&#40;&#41; &#123; //v3.0
      var i,x,a=document.MM_sr; for&#40;i=0;a&&i<a.length&&&#40;x=a&#91;i&#93;&#41;&&x.oSrc;i++&#41; x.src=x.oSrc;
    &#125;
    
    function MM_preloadImages&#40;&#41; &#123; //v3.0
      var d=document; if&#40;d.images&#41;&#123; if&#40;!d.MM_p&#41; d.MM_p=new Array&#40;&#41;;
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for&#40;i=0; i<a.length; i++&#41;
        if &#40;a&#91;i&#93;.indexOf&#40;"#"&#41;!=0&#41;&#123; d.MM_p&#91;j&#93;=new Image; d.MM_p&#91;j++&#93;.src=a&#91;i&#93;;&#125;&#125;
    &#125;
    
    function MM_findObj&#40;n, d&#41; &#123; //v4.01
      var p,i,x;  if&#40;!d&#41; d=document; if&#40;&#40;p=n.indexOf&#40;"?"&#41;&#41;>0&&parent.frames.length&#41; &#123;
        d=parent.frames&#91;n.substring&#40;p+1&#41;&#93;.document; n=n.substring&#40;0,p&#41;;&#125;
      if&#40;!&#40;x=d&#91;n&#93;&#41;&&d.all&#41; x=d.all&#91;n&#93;; for &#40;i=0;!x&&i<d.forms.length;i++&#41; x=d.forms&#91;i&#93;&#91;n&#93;;
      for&#40;i=0;!x&&d.layers&&i<d.layers.length;i++&#41; x=MM_findObj&#40;n,d.layers&#91;i&#93;.document&#41;;
      if&#40;!x && d.getElementById&#41; x=d.getElementById&#40;n&#41;; return x;
    &#125;
    
    function MM_swapImage&#40;&#41; &#123; //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for&#40;i=0;i<&#40;a.length-2&#41;;i+=3&#41;
       if &#40;&#40;x=MM_findObj&#40;a&#91;i&#93;&#41;&#41;!=null&#41;&#123;document.MM_sr&#91;j++&#93;=x; if&#40;!x.oSrc&#41; x.oSrc=x.src; x.src=a&#91;i+2&#93;;&#125;
    &#125;
    //-->
    </script>
    </head>
    <body bgcolor="#ffffff" onload="MM_preloadImages&#40;'images/button_on_works.gif','images/button_on_links.gif','images/button_on_forum.gif','images/button_on_down.gif','images/button_on_kontakt.gif','images/Button2_on_home.gif','images/Button2_on_login.gif'&#41;">
    <div id="Layer_content">
      <iframe src="news.html" name="content" width="396px" marginwidth="0" height="522px" marginheight="0" scrolling="auto" frameborder="0" class="_content" id="_content" title="content" target="_self"></iframe>
    
    </div>
    <div id="Layer_button1_1">[img]images/button_off_news.gif[/img]</div>
    <div id="Layer_button1_2">[img]images/button_off_works.gif[/img]</div>
    <div id="Layer_button1_3">[img]images/button_off_links.gif[/img]</div>
    <div id="Layer_button1_4">[img]images/button_off_forum.gif[/img]</div>
    <div id="Layer_button1_5">[img]images/button_off_down.gif[/img]</div>
    <div id="Layer_button1_6">[img]images/button_off_kontakt.gif[/img]</div>
    <div id="Layer_button2_1">[img]images/Button2_off_home.gif[/img]</div>
    <div id="Layer_button2_2">[img]images/Button2_off_login.gif[/img]</div>
    <div id="Layer_foto">
      <iframe width="225px" height="260px" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="foto" target="_self"  name="foto"></iframe>
    </div>
    <div id="Layer_button_foto_1">Fotoname</div>
    <div id="Layer_button_foto_2">Fotoname</div>
    
    <div id="Layer_button_foto_3">Fotoname</div>
    <div id="Layer_button_foto_4">Fotoname</div>
    <div id="Layer_content_2">
    <iframe height="522px" width="213px" marginheight="0" scrolling="auto" frameborder="0" class="_content" id="_content" title="content" target="_self" marginwidth="0"></iframe></div>
    [img]images/index.gif[/img]
    </body>
    </html>

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Definiere (sofern nicht bereits vorhanden) noch einen zusätzlichen Container, der alle übrigen umfasst und für den du eine Breite in % oder px festlegst sowie
    Code:
    margin&#58; 0 auto;
    zuweist.
    Diesen öffnest du unmittelbar nach <body> und schließt ihn vor </body>

  4. #4
    Teeny
    Registriert seit
    12.09.2006
    Beiträge
    27
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <div id="centerthis">
       
    </div>
    dazugehöriges CSS
    Code:
    #centerthis &#123;
      margin&#58; 0 auto; //Standardconforme, horizontale Zentrierung &#40;erste Ziffer für oben und unten, zweite für links und rechts.
      &#125;

  5. #5
    Gast
    Gast

    Standard

    Ja, soweit, sogut. Aber er hat die Inhalte immer noch so, wie ich sie in den CSSs definiert hab. Wie mach ich, dass sich das auf die "Haupt-div" bezieht?

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So lange du die CSS sonst nicht änderst, werden deren Inhalte beibehalten. Sie beziehen sich dann aber auf den übergelagerten Container.
    Deine vielen DIVS sind sehr unüberlichtlich und durch die zusätzlichen Frames wird die Struktur nicht ganz klar. Am Ende deiner CSS hast du einen #body definiert. Nimm den mal raus, da er vermutlich die generellen Angaben überlagert.
    Versuch mal, zunächst eine Grundstruktur mit wenigen Layern in die Seite zu bringen und füge erst dann die Details wie Buttons usw. ein.
    Layoutbeispiele gibt's hier: http://www.stichpunkt.de/css/bereiche.html

  7. #7
    Gast
    Gast

    Standard

    Kann ich denn einen Div mit einem Button in sich, in einen anderen Div einordnen, dass sich die Ausrichtung des Button-Divs an dem anderen "übergeordneten" Div ausrichtet?

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du kannst zum Beispiel alle Buttons, die in eine Reihe kommen in einen div setzen und musst nicht für jeden Button einen eigenen div definieren.

  9. #9
    Gast
    Gast

    Standard

    Ja, aber das Problem ist, dass er, wenn ich ein div einfüge, es dann an der gesamten page und nicht an dem von mir übergeordneten div ausrichtet... wie mach ich das`?

  10. #10
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wenn du einen übergeordneten, zentrierten Container hast, dann fügst du da hinein alle weiteren erforderlichen Container in der Reihenfolge von oben nach unten oder von links nach rechts. Deren Position zum übergeordneten bestimmst du mit margin-left und margin-top-Angaben oder mit float:left; wenn die Anordnung von links nach rechts erfolgt.
    Das kommt immer auf die Bedürfnisse des Einzelfalls an, deshalb lässt sich hier keine generelle Lösung geben.
    Google mal nach CSS positionieren oder CSS-Layouts und sieh dir einige Beispiele an.

Ähnliche Themen

  1. Tabelle einer Website, Vertikal und Horizontal zentrieren ..
    Von JELLICOE im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.09.2007, 12:50
  2. zentrieren einer Homepage
    Von WWKiller im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.01.2007, 10:23
  3. Downloaden von einer Homepage
    Von dominikb im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.11.2006, 09:41
  4. Tabelle in einer Zelle zentrieren
    Von chris90night im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.10.2006, 13:08
  5. Antworten: 4
    Letzter Beitrag: 07.03.2005, 17:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •