,,Flexibler" seiten abstand?

[skalldem]

Guten Morgen, naja sagen wir mal eher guten mittag ^^

hab nen problem. Ich will das sich meine seite immer an der breite das browsers anpasst und der inhalt immer in der mitte ist. Hab aber kein plan wie das geht. Wäre nett wenn mir da vllt wer bei helfen könnte.

Dazu noch was, das hier ist mein code wie er bisher ist:

Code: Alles auswählen

   body
   {
      background-color: #4b7388;
      margin: 0;
      padding: 0;
      color: #000;
      font: 76% Verdana, Arial, Helvetica, sans-serif;
      font-size:10;
   }

   #navi_oben
   {
            top:0; left:169.5px; right:12em;
            margin-left:10em;
            width: 750px;
            height: 214px;
            z-index:3;
   }

         #inhalt_container
   {
            top:214px; left:169.5px; right:12em;
            margin-left:20em;
            width: 750px;
            height: 443px;
            z-index:3;
   }


die elemente vom navi_oben und vom inhalt_container sollen genau unter einander liegen. Das tuen sie jetzt auch. Aber warum muss ich beim navi_oben einen kleineren margin-left wert eingeben als beim inhalt container? verstehe ich nicht so ganz. Kann mir das vllt auch noch wer erklären?
Schon mal Danke und nen schönen Tag noch

Skalldem

[Laus]

wenn ich das richtig verstehe willst du eine Seite die zb.: 750px breit ist und immer in der Mitte zentriert ist.
Dies erreichst du indem du um deine Container einen weiteren legst und diesem eine feste breite zuweist.
also

Code: Alles auswählen

<div id="wrapper">
<div id="navi_oben"></div>
<div id="inhalt_container"></div>
</div>

css
body {height:100%;
text-align:center;
background-color: #4b7388;
margin: 0;
padding: 0;
color: #000;
font: 100.01% Verdana, Arial, Helvetica, sans-serif; }
#wrapper{height:100%; width: 756px; margin:0 auto; text-align:left; font: 76%}
#navi_oben { width: 750px; height: 214px;}
#inhalt_container{width: 750px; height: 443px;}         
   

Das text-align:center; ist dafür das der IE die Seite auch zentriert. Für die Schrift wird das im Wrapper wieder aufgehoben.
Die Zentrierung in "Guten" Browsern erfolgt über margin:0 auto;
Ach ja im body soll grundsätzlich die Standardgröße der Schrift also 100% angegeben werden. Das 100.01% ist eine Krücke damit auch der IE bei den Schriftgrößen nicht aus dem Tritt kommt. Die eigentliche Größe wird dann bei den verschieden Elementen angegeben.

Gruß Xaver

[skalldem]

Hallo, erstmal dake für deine antwort, doch, wenn ich alles so mache sind meine gnazen ,,tabellen" alle unter dem bild und nicht darauf.
Und wenn ich dann versuche die abstands angaben einzutrage und es mir hinterher anschaue, schaut es total verwuschelt aus :-/

edit: sind noch paar ,,tabellen" dazu gekommen (denn border mache ich nur damit ich sehe wo genau die tabelle ended und anfängt)

hier der code wie ich ihn nun haben

Code: Alles auswählen


<style type="text/css">

   body
   {
      height:100%;
      text-align:center;
      background-color: #4b7388;
      margin: 0;
      padding: 0;
      color: #000;
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
   }

         #wrapper
         {
            height:100%;
                 width: 756px;
                 margin:0 auto;
                 text-align:left;
                 font: 76%}
         }

   #navi_oben
   {
            top:0; left:170px; right:12em;
            margin-left:10em;
            width: 750px;
            height: 214px;
            z-index:3;
   }

         #inhalt_container
   {
            top:214px; left:169.5px; right:12em;
            margin-left:20em;
            width: 750px;
            height: 443px;
            z-index:3;
   }

         #info_box
         {
             position:absolute;
       top:240px; left:223px; right:538px;
                  width: 180px;
                  height: 299px;
           border: 2px ridge silver;
       z-index:3;
   }

         #inhalt1
         {
            position:absolute;
                 top:240px; left: 410px; right: 504px;
                 width: 290px;
                 height: 358px;
                 border: 2px ridge silver;
                 z-index:3;
         }

         #navi_rechts
         {
            position:absolute;
                 top:214px; left: 704px; right: 50px;
                 width: 246px;
                 height: 157px;
                 z-index:3;
         }


hm ich glaub ich hab denn fehler gefunden. muss ja dnek ich mir mal nun die tabellen auch wieder neu anpassen oder? wenns doch nicht die fehlerursache ist, kannst ja gerne bitte nochmal was schreiben ^^

VIele grüße
Skalldem

[Laus]

Kann man das irgendwo online sehen? Wenn nicht wäre der Quelltext des html dazu schon sehr hilfreich, denn es kommt auch auf dessen Anordnung an.

[skalldem]

Hallo, habs mal bei rapdishare hoch geladne, hier der link:

http://rapidshare.de/files/26828058/hp.zip.html

Viele Grüße
Skalldem

[skalldem]

edit: hat sich erledigt sry

[Laus]

Versuchs mal so

Code: Alles auswählen

<html>
<head>
<title>Kara AG</title>
<meta name="author" content="Patrick">
<style type="text/css">

   body
   {
      height:100%;
      text-align:center;
      background-color: #4b7388;
      margin: 0;
      padding: 0;
      color: #000;
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
   }

         #wrapper
         {
            height:100%;
                 width: 756px;
                 margin:0 auto;
                 text-align:left;
                 font: 76%}
         }

   #navi_oben
   {
            width: 750px;
            height: 214px;
            z-index:3;
   }

         #inhalt_container
   {
                  background-image:url(hintergrundbild.jpg);
            width: 750px;
            height: 443px;
            z-index:3;
   }

         #info_box
         {         float:left;
                  margin-left:33px;
                  width: 180px;
                  height: 299px;

       z-index:3;
   }

         #inhalt1
         {         float:left;
                 width: 290px;
                 height: 358px;
                 z-index:3;
         }

         #navi_rechts
         {        float: left;
                 top:214px;  right: 0px;
                 width: 246px;
                 height: 157px;
                 z-index:3;
         }

</style>
</head>
<body>
<div id="wrapper">
         <div id="navi_oben">
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="750" height="214" id="navi_oben" >
      <param name="allowScriptAccess" value="sameDomain" />
      <param name="movie" value="menü test.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="menü test.swf" quality="high" bgcolor="#ffffff" width="750" height="214" name="menü test"  allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
      </object>
   </div>
<div id="inhalt_container" >
                 <div id="info_box">
                 INFO BOX
                 </div>
                 <div id="inhalt1">
                 Inhalt1
                 </div>
            <div id="navi_rechts">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="247" height="157">
      <param name="movie" value="index1.swf">
      <param name="quality" value="high">
      <embed src="index1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="247" height="157"></embed></object>
                 </div>
         </div>
</div>
</body>
</html>

[Laus]

Hab gerade Festgestellt das deine Flash Navigation wenn sie zwei oder mehrfach geöffnet ist die Browser zum Absturz bringt. (Festgestellt bei IE6, IE7, FF und Opera)
Hast du dir auch mal überlegt das die Navigation mit Flash extrem Suchmaschinenfeindlich ist, weil Links in Flash Dateien von Robots nicht verfolgt werden. Etwas amüsantes hierzu kannst du --> hier <-- nachlesen. Zumindest würde ich dir empfehlen noch zusätzliche Links im Textformat in die Seite einzubauen.

[skalldem]

Hallo,

ich denke mal das mit dem absturz lag an dereinbindung vom flashnavi. Also dem großen. Irgendwas stimmt da nicht, wenn man mit FLash 8 auf veröffentlichen geht. Habs nun anders gemacht und ich kann die seite mind. 7mal öffnen (öfters habe ich es nun nicht macht^^)

Dazu wird das ne subpage von joomla, also kein problem für such maschinen

Dazu noch was, dien code ging shcon wieder nicht bei mir, ich glaub ich bin einfach zu blöd dafür ^^

Viele Grüße
Skalldem

[Laus]

Sorry mein Fehler da hatte ich wohl noch den alten Code in der Zwischnablage.
Andere volgendes

Code: Alles auswählen


  #info_box
         {         float:left;
                  margin-left:16px;
                  width: 180px;
                  height: 299px;

       z-index:3;
   }

         #inhalt1
         {         float:left;
                 width: 290px;
                 height: 358px;
                 z-index:3;
         }

         #navi_rechts
         {        float: right;
                 top:214px;  right: 0px;
                 width: 246px;
                 height: 157px;
                 z-index:3;
         }

Am Anfang des html setzt du noch einen Doctype

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Xaver

[skalldem]

hallo,

sry das ich jetzt erst wieder antworte. hatte aber leider etwas zuviel stress hier werde gleich oder heute abend mal denn neuen css code teste. Vielen dank für deine mühe

Skalldem