Inhalt zentrieren @ tutorials.de: Tutorials, Forum & Hilfe

solbie · 26.04.11 19:58

Liebe Mitglieder,
ich stehe vor folgendem Problem: ich erstelle grade eine Website mit Dreamweaver CS3 (Betriebssystem Windows XP). Nun möchte ich gerne den Inhalt der Site zentrieren, so dass im Browserfenster alles komplett mittig erscheint. Ich habe schon hier im Forum gestöbert und gegoogelt und zumindest schon mal rausgefunden, dass man wohl so eine Art unsichtbares Fenster (wrapper?...) um das Ganze basteln muss, womit man dann alles auf dem Bildschirm zentrieren kann. Ich habe mal den Inhalt des Index unten reinkopiert und würde mich sehr freuen, wenn Ihr mir weiterhelfen könntet! Vielen Dank!

Code css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kom-index</title>
<style type="text/css">
<!--
.Stil7 {font-family: Geneva, Arial, Helvetica, sans-serif}
li {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-style: normal;
    color: #400000;
    background-color: #D0DBF2;
    height: 30px;
    width: 120px;
    vertical-align: middle;
    text-align: left;
    display: list-item;
    list-style-type: none;
    white-space: normal;
    clip: rect(10px,auto,10px,auto);
    top: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin: 0px;
}
body {
    background-color: #8F8F8F;
}
#apDiv1 {
    position:absolute;
    left:262px;
    top:-192px;
    width:530px;
    height:344px;
    z-index:1;
}
.Stil10 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #400000; }
table {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    background-color: #D0DBF2;
    font-size: 70px;
    font-style: normal;
    margin-left: 40px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#apDiv2 {
    position:absolute;
    left:252px;
    top:272px;
    width:491px;
    height:341px;
    z-index:1;
}
#apDiv3 {
    position:absolute;
    left:194px;
    top:194px;
    width:670px;
    height:416px;
    z-index:1;
}
.noten {
    background-image: url(hintergrundbilder/hintergrund_noten.jpg);
}
#apDiv4 {
    position:absolute;
    left:830px;
    top:350px;
    width:138px;
    height:187px;
    z-index:2;
}
li {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    background-color: #D0DBF2;
    width: 230px;
    height: 55px;
    padding-left: 20px;
    padding-top: 15px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-align: left;
}
#apDiv5 {
    position:absolute;
    left:322px;
    top:68px;
    width:273px;
    height:600px;
    z-index:1;
}
#apDiv6 {
    position:absolute;
    left:610px;
    top:189px;
    width:340px;
    height:240px;
    z-index:2;
}
#apDiv7 {
    position:absolute;
    left:322px;
    top:198px;
    width:276px;
    height:644px;
    z-index:3;
}
#apDiv8 {
    position:absolute;
    left:610px;
    top:438px;
    width:339px;
    height:230px;
    z-index:4;
}
#apDiv9 {
    position:absolute;
    left:322px;
    top:189px;
    width:275px;
    height:239px;
    z-index:5;
}
#apDiv10 {
    position:absolute;
    left:322px;
    top:438px;
    width:276px;
    height:300px;
    z-index:6;
}
a:link {
    color: #400000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #400000;
}
a:hover {
    text-decoration: none;
    color: #626262;
}
a:active {
    text-decoration: none;
    color: #800000;
}
.Stil13 {color: #800000}
#apDiv11 {
    position:absolute;
    left:531px;
    top:765px;
    width:186px;
    height:27px;
    z-index:7;
}
.Stil14 {font-family: Geneva, Arial, Helvetica, sans-serif; color: #400000; font-size: 12px; }
-->
</style>
</head>
 
<body>
<div id="apDiv6"><img src="hintergrundbilder/klavier_3_kl.jpg" alt="klav" width="339" height="200" /></div>
<div id="apDiv7"></div>
<div id="apDiv8"><img src="hintergrundbilder/klarinette_5_kl.jpg" alt="klar" width="339" height="300" /></div>
<div id="apDiv9"><img src="hintergrundbilder/schnecke_1kl_quer.jpg" alt="schnecke" width="276" height="200" /></div>
<div id="apDiv10"><img src="hintergrundbilder/cello_3_kl.jpg" alt="cello" width="276" height="300" /></div>
<div class="Stil14" id="apDiv11">
  <div align="center"><a href="kom_impressum.html">Impressum</a></div>
</div>
<table width="902" border="0
">
  <tr>
    <td width="156" height="160"><img src="tenorschluessel/tenorschluessel.jpg" alt="tenorschluessel" width="142" height="142" /></td>
    <td width="736" bgcolor="#D0DBF2"><div align="left"><span class="Stil10">k.o.m. musikverlag</span></div></td>
  </tr>
</table>
<ul>
  <li class="Stil13">Home</li>
  <li><a href="kom_komponisten.html">Komponisten</a></li>
  <li><a href="kom_werke.html">Werke</a></li>
  <li><a href="kom_bestellungen.html">Bestellungen/Kontakt</a></li>
  <li><a href="kom_ueber uns.html">Über uns</a></li>
  <li><a href="kom_verlagsgruender.html">Über den Verlagsgründer Klaus Obermayer</a></li>
  <li><a href="kom_dienstleistungen.html">Dienstleistungen</a></li>
</ul>
<p class="Stil7">&nbsp;</p>
<p class="Stil7">&nbsp;</p>
</body>
</html>

**ComFreek** · 26.04.11 20:07

Hallo solbje,

bitte füge den HTML-Code in solche Klammern ein: [html]Your code[/html]
Und deinen CSS-Code in solche: [css]Your code[/css]
Danke

Sorry, dass ich nichts zum Thema schreibe, aber das ist wirklich unübersichtlich.

// Danke smileyml

Ja man benutzt dazu sogenannte Wrapper, die den Container für den ganzen Content beinhalten. Diese sind dann auch auf der Seite zentriert.

Zu diesem Thema gibt es ganz viele Forumsbeiträge im Internet.
Google zeigt auch viele Ergebnisse: seite zentriert wrapper

**smileyml** · 26.04.11 20:47

Hallo solbie,
wie mir unsere Kommmunikationspraktikant mitteilte, hast du auf die Benachrichtigungsmail geantwortet.

Noch besser und vor allem richtiger ist, wenn du es direkt hier schreibst indem du eifnach auf "Antworten" klickst und tippst und um es abzuschließen wieder auch "Antworten" klickst.

Danke

FunkFlex · 26.04.11 22:40

Da gibts mehrere Möglichkeiten:
Die erste wäre du gibts dem Div dass du zentrieren willst die WErte : margin-left:auto; und margin-right:auto;

Dass das auch im IE funktioniert, nutzt du einen kleinen Trick. Im body, setzt du Text-aling:center;
Musst halt dann im Div die texte neu ausrichten...

Oder du machst, margin-left:50%; und dann left

die hälfte der Breite deines Divs)

Jetz weisst du alle mir bekannten Möglichkeiten.

Hoffe ich konnte dir da helfen.

Gruß FunkFlex

threadi · 26.04.11 23:39

Für den IE muss man keine zusätzlichen Tricks anwenden, wenn man auch einen gültigen Doctype in den HTML-Code eingefügt hat. Dann verhält er sich (auch schon seit Version 6) genau wie jeder andere Browser hinsichtlich automatischem Außenabstand mit fester Breite ("margin: 0 auto;width: XYpx;").

solbie · 27.04.11 10:37

vielen Dank für Eure Tips! Dann mache ich mich mal an's Probieren!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div Inhalt Vertikal zentrieren

<div> Inhalt vertikal zentrieren?

DIV Inhalt vertikal zentrieren

JTable Inhalt zentrieren

Inhalt zentrieren klappt nicht

E-Mail:

Abonnieren Abbestellen