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

Wie Mittenzentrierung - Seite von Tabellenwirrwar auf Div Tags geändert

A

aftereight

Neues Mitglied
Hallo Leute

Habe meine Website endlich überarbeitet und alle Tabellenverschachtelungen durch Div Tags ersetzt. Der Code ist nun viel übersichtlicher und gefällt mir so um einiges besser.

Früher war meine Seite mittenzentriert. Da ich das auf Anhieb mit Div Tags nicht hingekriegt habe, habe ich die Seite einfach mal Linkszentriert aufgebaut.
Irgendwie würde es mich jetzt aber doch reizen die Seite mittenzentriert zu machen.

Doch wie kriege ich das mit Div Tags hin? Immerhin müsste ja das Hintergrundbild, welches genau in der Mitte sein soll anderst ausgerichtet sein als Schaltflächen oder kleine Bildchen die beispielsweise am Linken Rand stehen sollen, jedoch auch auf dem Hintergrundbild immer an der gleichen Position sein sollen.

Beste Grüsse und danke im Voraus

Markus
 
Mithilfe des CSS-Attributs margin kannst du das allesumschließende DIV-Tag horizontal zentrieren.
Code: 
div#alles{
    margin: 0 auto;
}
 
Hi Leute

Irgendwie klappt meine Mittenzentrierung noch nicht so ganz. Layer1 sollte im rechten unteren Teil, visuell innerhalb von "div#page" sein. Stattdessen hängt Layer1 irgendwo ganz weit unten im Nirwana, ausserhalb von „div#page“.

Liebe Grüsse
Markus


Code: 
div#page_margins{
    margin: 0 auto;
}
div#page{
    height: 1200px;
    width: 1000px;
    left: 0px;
    top: 0px;
    margin: 0 auto;
}
div#Layer1 {
    position:relative;
    left:344px;
    top:763px;
    width:300px;
    height:292px;
}


<body bgcolor="#000000" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<div id="page_margins">
<div id="page"> <img src="images/index.jpg" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="110,352,294,374" href="kontakt.php" />
      </map>
</div>
<div id="Layer1">blablabla..</div>
</div>
</body>
 
Hallo

Danke für die Tipps. Habe es mal so versucht und auch alle relativen positionen weg gelassen. Das dritte "div" (Layer1), kriege ich aber nicht an die richtige Position. Es ist immer noch viel zu weit unten.

Hier nun der überarbeitete Code:

Code: 
body{
    background-color:#000000;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}
div#center{
    width: 1000px;
    height:1200;
    border:none;
    margin: 0 auto;
}
div#page{
    height: 1200px;
    width: 1000px;
    left: 0px;
    top: 0px;
    margin: 0 auto;
}
div#Layer1 {
    left:344px;
    top:763px;
    width:300px;
    height:292px;
    margin:0 auto;
    border:0;
}



<body>
<div id="center">
<div id="page"> <img src="images/index.jpg" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="110,352,294,374" href="kontakt.php" />
      </map>
</div>
<div id="Layer1">blablabla..</div>
</div>
</body>

Gruss und danke für die Hilfe
Markus
 
Den Code kannst Du weiter kürzen:

Code: 
body{
    background-color:#000000;
}
div#center{
    width: 1000px;
    height:1200px;
    margin: 0 auto;
}
div#page{
    height: 1200px;
    width: 1000px;
    margin: 0 auto;
}
div#Layer1 {
    width:300px;
    height:292px;
    margin:0 auto;
}

Hintergrund:
body hat bereits 100% Breite und braucht keine feste Höhe.
div's haben keine vorgegebenen border, also sind deren Werte bereits 0 bzw. none.
Du hast an einer Stelle für die Höhe ein "px" vergessen.
Du musst keine top- und left-Werte angeben wenn Du kein position verwendest.

Frage:
Wo sollte denn #Layer1 sitzen?
Anhand deines Codeschnippsels kann man das nicht erkennen. Vermutung: es soll irgendwo rechts sitzen, neben den anderen. Dann wäre die "float"-Eigenschaft die die Du suchst.
 
Habe nun zudem gemerkt, dass wenn ich das Bild "index.jpg" anstatt als Bild im HTML, ins CSS als Hintergrund pflanze, es dann geht. Ansonsten landet Layer1 immer ausserhalb.

Danke euch für euren Weekend Einsatz:-) Das war sehr nett von euch!

Markus
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben