• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalt bestehend aus DIVs zentrieren.

Status
Für weitere Antworten geschlossen.
V

VollDerNewb

Gesperrt
Hi,

Ich habe ein kleines Problem.
Ich möchte eine bestehende Seite zentrieren und sehe gerade das es doch nicht so einfach ist wie angenommen.

Anbei der IST und der SOLL Zustand.
screen.jpg


Hat jemand eine Idee wie ich es am einfachsten Lösen kann?

Ich könnte das natürlich alles in Tabellen zurück wandeln und ein TD zentrieren aber gibt es da nicht auch eine einfachere Möglichkeit?

Anbei mal der Code:

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HDT Hanseatische Datentechnik - IT-Dienstleistung: Systemhaus, Service-Management, IT-Security</title>
<link href="Styles/layout.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
#Titelmotiv {
    position:absolute;
    width:1005px;
    height:445px;
    left: 15px;
    top: 160px;
}
#Layer2 {
    position:absolute;
    width:776px;
    height:61px;
    left: 101px;
    top: 106px;
}
#Slogan {
    position:absolute;
    width:200px;
    height:35px;
    z-index:2;
    left: 184px;
    top: 68px;
}
#Layer4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    top: -115px;
}
#Header {

    position:absolute;
    width:1005px;
    height:160px;
    z-index:4;
    left: 15px;
    top: 0px;
    background-color: #CECECE;
}
#Leftbar {

    position:absolute;
    width:15px;
    height:605px;
    z-index:1;
    left: 0px;
    top: 0px;
    background-color: #2D4B9B;
}
-->
</style>
</head>
    
<body>

<div id="Titelmotiv" style="z-index: 5;">
    <img src="Pics/titel.jpg" name="image" width="1005" height="445" id="image" style="opacity:1;" />
</div>
  <div id="Leftbar"></div>
<div id="Header">
<div id="Logo"><a href="sitemap/sitemap.html"><img src="Pics/hdt-logo.gif" width="140" height="80" border="0" /></a></div>
<div id="Slogan"><img src="Pics/logo_add.jpg" width="332" height="33" /></div>
<div id="NaviZeile1">
  <table width="555" border="0">
    <tr>
      <td width="67"><a href="hdt/unternehmensgruppe/unternehmensgruppe.html" class="blue15_Navi">HDT</a></td>
      <td width="127" nowrap="nowrap"><a href="it-services/leistungsspektrum/leistungsspektrum.html" class="blue15_Navi">IT-Services</a></td>
      <td width="175" nowrap="nowrap"><a href="highperformance/vision/vision.html" class="blue15_Navi">High Performance</a> </td>
      <td width="95"><a href="karriere/offenestellen/offenestellen.html" class="blue15_Navi">Karriere</a></td>
      <td width="69" class="blue15_Navi"><a href="Presse/pressecenter.html">Presse</a></td>
    </tr>
  </table>
</div>
</div>
</body>
</html>

MOD EDIT: Code Tag editiert. Bitte Forenregeln lesen. (Corvulus)
 
Pack doch deinen gesamten Code ncoh einmal in einen DIV und dann mit align="center" ausrichten.

Gruß Corvulus
 
Kein Thema, wie hast du das denn gemacht? Du musst ja eigendlcih nur den Ausgabeteil da rein setzen. Hast du davon vielleciht nen Code? So muss es auf jeden fall klappen.

Corvulus
 
schön wäre es aber leider geht es nicht.
Versuch es mal.. Nimm dir mal den Code und setzt ihn in ein Dokument in Firefox oder Safarie geht da leider nix.
 
1) Div ausen rum mit margin-left:auto;margin-right:auto;
2) Div ausen rum mit width:100%;text-align:center;


Beide Divs Sollten in allen Browsern den Inhalt zentrieren. Die absolute Positionierung muss dann aber bei den anderen Weg, also entweder relative oder mit float arbeiten.
 
Ich mach es ähnlich wie oben schon gesagt.
Hier der Code:
HTML: 
<style type="text/css">
body {
text-align:center /* Für den IE */
}

#main {
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto; /* Damit es sich auch ausdehnt */
border:0px;
text-align:center;
}

div {
margin-left:auto;
margin-right:auto;
}

/* Zentrierte Container */
#div1 {
width:XXpx;
height:XXpx;
border:XXpx;
text-align:left;
/* Evtl. noch mehr ? */
}
</style>

<div id="main">
 <div id="div1">
  Div 1 zentriert
 </div>
</div>
So sieht es aus, einfach umgesetzt in meine Aufstellung.


MfG, matibaski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben