Ich verstehs nicht...

Asrokk · 13.05.2009

hi leute ich komm einfach nich klar...
wie schaff ich es das das layout mit dem menü etc. bei jeder aulösung und bei jedem browser in der mitte zentriert bleibt?

danke euch schonmal ich hoffe ihr könnt mir helfen ich bin noch ganz neu in sachen webdesign...^^

stiller47 · 13.05.2009

AW: Ich verstehs nicht...

margin: 0 auto;

c0ldIc3 · 13.05.2009

AW: Ich verstehs nicht...

setz nen wrapper durm und set den vertical-align: middle; oder glaube das ist effektiver margin: 0 auto;

vertical align ist schrift sry ^^

Asrokk · 13.05.2009

AW: Ich verstehs nicht...

ok also margin:0 auto; versteh ich noch..

aber vertival align is mir schon zuviel aber ich probiers erstmal^^

ichwars83 · 13.05.2009

AW: Ich verstehs nicht...

Hatte auch schon das Problem und wie du siehst gibt es da zahlreiche Möglichkeiten.
Mein Vorschlag ist recht Simpel und sollte funktionieren.

Code:

#all {
position:relative;
margin:0 auto;
width:1030px;
height:auto;
}

<body>
<div id="all">
<!-- hier alles rein, was bisher zw. <body> und  </body> steht -->
</div>
</body>

Harrystyle · 13.05.2009

AW: Ich verstehs nicht...

wenn du es in allen auflösungen so haben willst würde ich mit % anstatt px arbeiten.
^^ greetz harry

esupanetz · 13.05.2009

AW: Ich verstehs nicht...

Hi Asrokk,

für "jeden Browser und jede Auflösung zentriert" heißt du musst viele Weichen einbauen wenn du in CSS und ähnlichem arbeiten willst - und irgendwer wird trotzdem einen exotischen Browser haben in dems nicht funktioniert.

Ok, das war der weniger aufbauende Teil meiner Antwort.

An sich hast du ja schon einzelne Antworten erhalten - leichter wärs, wenn du schon eine Seite mit HTML-Code hättest wo wir nachschauen können.

Willst du eigentlich horizontal oder vertikal zentrieren? Vor meinem inneren Auge schwebt nämlich grad eine Seite, wo das Menü so richtig schön in der Mitte "hängt" und rundherum die Texte sich aufbauen - und ich hoffe, dass das nicht das ist was du willst :-D

lG

Eva

Asrokk · 13.05.2009

AW: Ich verstehs nicht...

also ich moechte das dieses bild:

was gleichzeitig das menue is immer in der mitte zentriert haben und nur der innere bereich soll sich scrollen lassen ansonsten steht die seite/ das bild fest.

leohh · 13.05.2009

AW: Ich verstehs nicht...

Setz das ganze in einen Umschliessenden Container, dem du dein margin 0 auto mitgibst und merk dir die absolute Hoehe dieses umschliessenden Containers und positionierst diesen relativ. Noch vor diesem Container, setzt du einen dummy Container, der eine Hoehe von 50% bekommt und ein negatives margin, das genau der Haelfte, deiner absoluten Hoehe deines alles umschliessenden Containers bekommt.

Das waere eigentlich alles.

Asrokk · 13.05.2009

AW: Ich verstehs nicht...

alter ich kapier nichts^^

mein gott wieso muss das so kompliziert sein...
hat jemand lust mir das zu programmieren?^^
ich schick die grafiken und dann macht ihr es feritg?^^
waer nett^^

sdsf · 13.05.2009

AW: Ich verstehs nicht...

Also das es mittig bleibt, kannst du so machen:

CSS 4 You - The Finest in Stylesheets: Layouten ohne Tabellen

in dem container div musst du dann einen content div mit fester größe machen dem du
die eigenschaft overflow:scroll; gibst.

Könnte jemand für dich machen, klar... aber dann lernst du ja nichts bei

Asrokk · 13.05.2009

AW: Ich verstehs nicht...

ja da haste recht aber man verliert iwie so die nerven daran aber danke schonmal euch allen

leohh · 13.05.2009

AW: Ich verstehs nicht...

Nun ja, mir sollst gleich sein:
Grafiken einsetzen Hoehen und Breiten entsprechend anpassen.
Wirst noch ein bisschen beim ausrichten von Schriften & Aehnlichem zu feilen haben
aber das ist wohl eher ein kleineres Problem.

Es gibt sicher noch die ein oder andere Loesung, die zum selben Ziel fuehrt also bitte nicht als ultimative Loesung sehen. Auch wenn ich weiss, dass du selber wohl wenig, direkt aus diesem Beispiel lernen wirst aber sicher wird es den ein oder anderen geben, der sicher daran interessiert ist (Vertical Centering in CSS)...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      
      <title>vertical-alignedSites</title>

      <style type="text/css" media="screen, projection">
      
         /* reset 
         ----------------------------------------------------------------------------------------*/
         * { margin: 0; padding: 0; }
         
         a img { border: 0; }
          
         ol, ul { list-style: none; }
         q:before, q:after, blockquote:before, blockquote:after { content: ""; }
         
         /* rebuild
         ----------------------------------------------------------------------------------------*/
         html,body { 
            font: 100%  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
            background: url() repeat; 
            color: #333;     
            text-align:center; height: 100%;
            
         }
         
	      #dummy { 
            width:1px;
            height:50%;
            margin-bottom:-12.5em; /* die haelfte deiner gesammthoehe fuer den Inhalt */
            float:left; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */
            
         }
      
         #wrap {
            background: orange url(); /* nur um den container und den effekt zu sehen - farbe ausradieren */
            margin: 0 auto;
            position: relative;
            text-align: left;
            height: 25em; /* deine Gesammthoehe */
            width: 25em;
            clear: left;
            
         }
         
         #nav li { float: left; }
         #nav a  { display: block; }
      
         #main  {
            float:right; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */
            font-size: .68em;
            
         }
         
         br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
         
      </style>
         
   </head>
   <body id="vertical-alignedSites">
   
      <div id="dummy"></div>
      
      <div id="wrap">
         
         <div id="main">
            
            <div id="header">
               <h1>headline</h1>
               <ul id="nav">
                  <li><a href="#" title="menu 1">menu item 1</a></li>
                  <li><a href="#" title="menu 2">menu item 2</a></li>
                  <li><a href="#" title="menu 3">menu item 3</a></li>
                  <li><a href="#" title="menu 4">menu item 4</a></li>
                  
               </ul>
               <!--endMenue -->
               <br class="clear" /> <!-- avoiding floting issues -->
               
            </div>
            <!-- endHeader -->
         
            <div id="content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
                  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                  sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
                  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                  sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
                  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                  sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               
            </div>
            <!-- endContent -->
            
         </div>
         <!-- endMain -->
         
      </div>
      <!-- endWrap -->
      
   </body>
</html>