✔ [Dreamweaver] Wie "bleibt" das Layout auch bei Vollbildmodus (im Browser) i.d. Mitte?

Margit_

Margit_

Erfahrenes Mitglied
Liebe Leute,

Ich hab schon mal eine Homepage mit Dreamweaver gemacht, hab aber trotzdem eine ziemliche Newbie-Frage

Ich möchte, dass das Layout das ich gestalte, immer "in der Mitte bleibt", egal wie gross der Benutzer das Browserfenster "zieht" (also auch im Vollbildmodus)
also wie bei folgender Seite: http://generalicenter.at/

Ich kann aber nur mit Ebenen arbeiten (bin eigentlich Grafikdesignerin und hab mit Programmierung und Tabellen nicht so viel am Hut.) -> Braucht man die dafür?

Wäre dankbar für Eure Ratschläge,
[ach ja, für Dreamweaver 4 bitte ;-)]

Liebe Grüße,

Margit
 
moin Margit_

hier mal zwei Lösungen dazu, welche die bessere ist, weis ich net....:)

mit einer Tabelle, ist eigentlich nur eine riesen Zelle

PHP: 
<body>
<table align="center">
<td>
Und hier kommt Dein kompletter Inhalt rein ;-)
</td>
</table>
</body>


oder mit einem DIV Container


PHP: 
<body>
<div align="center">
Und hier kommt Dein Inhalt rein ;-)
</div>
</body>


Hoffe das hilft Dir weiter !?
 
Zuletzt bearbeitet:
Hi,

auf der verlinkten Seite wurde die horizontale Zentrierung des Layouts mit CSS vorgenommen:

Code: 
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Arial, Helvetica, Verdana, Sans-Serif;
	background-color: #fff;
	color: #333;
	text-align: center;
	background: url("http://www.generalicenter.at/wp-content/themes/generali_de/img/bg.gif") top center no-repeat;
	margin:0;
	padding:0;
	}

#page {
	border: 1px none #959596;
	text-align: left;
	background: transparent url("http://www.generalicenter.at/wp-content/themes/generali_de/img/content-bg.gif") 0 0 repeat-y; border: none;
	margin: 0 auto;
	padding: 0;
	width: 740px;
	}
Die text-align:center-Angabe im body-Selektor gilt für die älteren Versionen des IE, die margin:0 auto-Angabe im #page-Selektor ist für die modernen Browser gedacht.

Damit sich das Layout auf diese Weise horizontal zentrieren lässt, ist die Breitenangabe width:740px für das übergeordnete DIV erforderlich.
 
Hallo!

Danke für Eure Antworten, war jetzt leider ein paar Tage ausser Land und kann erst jetzt zurückschreiben!

Lieber DFence: Das mit der Zelle / Tabelle klingt für mich am einfachsten.
Aber ich versteh nicht, wie ich diesen "PHP-Code" machen kann - ich bin eigentlich Grafikerin (und kann nur mit solchen Benutzeroberflächen wie Dreamweaver/Freehand umgehen), --> also alles, wo man mit einem Werkzeug an der Oberfläche was SICHTBARES erzeugen kann. Ich wüsste nicht, wie und wo diesen Code einsetzen.
- das gleiche gilt für den "DIV-Container" :confused: :confused:

Lieber michaelsinterface: Deine Antwort versteh ich noch viel weniger :confused::eek:
Oje.
Kann man das irgendwie direkt im Dreamweaver mit einem Befehl einstellen?

Bitte nochmal um Eure Antworten!

Liebe Grüße,

Margit
 
Hi!
Margit_ hat gesagt.:
Lieber michaelsinterface: Deine Antwort versteh ich noch viel weniger :confused::eek:
Zum Vergrößern anklicken....
Schade, dabei hatte ich mir solche Mühe gegeben: die relevanten CSS-Eigenschaften fettmarkiert und anschliessend erläutert.

Wenn du dich nur auf die Benutzeroberfläche der eingesetzten Programme verlässt und nicht mal einen Blick in den erzeugten Quellcode wirfst, wirst du meine Antwort vermutlich nie verstehen. ;)

Kann man das irgendwie direkt im Dreamweaver mit einem Befehl einstellen?
Zum Vergrößern anklicken....
Ja, einfach per copy&paste die drei hervorgehobenen CSS-Eigenschaften im Stylesheet der Webseite anwenden und die Breitenangabe width:740px deinem Layout anpassen.
 
Liebe Alle!

Nach ein paar VÖLLIG hoffnungslosen Versuchen, mit das Wissen um diese Stylesheets anzueignen, hab ich es nun doch so versucht, dass es wirklich mit einer einfachen Tabelle (bzw. mit Layouttabellen) geht, wenn man sie einfach auf "zentriert" einstellt.

Also Danke nochmal an alle Antworten! :)

Liebe Grüße,

Margit
 
Hmm Tabelle is aber nicht fein.

Ich benutz immer nen sehr leichtes Schema.

Um den gesammten Code nen div packen


HTML: 
<body>
          <div id="mitte">
                   ....blub....
          </div>
</body>

HTML: 
#mitte
{ width:1000px; height:100%; position:absolute; left:50%; margin-left:-500px; }

Das DIV wird über position:absolute und left:50% in die mitte gesetzt.
Da der Mittelpunkt von dem DIV aber oben links in der Ecke sitzt und nicht in der Mitte, liegt das Layout jetzt genau 50% zu weit rechts.
Wenn unser Div 1000px breit ist müssen wir es also nochmal 500px per margin-left:-500px; nach links verschieben.

Das gleiche klappt auch, bei einer in der Höhe nicht variablen Seite, in der Höhe.



EDIT

AAAAA seh ich das gerade richtig, dass der Post hier vor mir schon nen Jahr alt ist?. Wie zum ... bin ich denn hier hin gekommen?!. ich habe nicht eine Seite geblättert.
 
Zuletzt bearbeitet:
Hi,

schön, dass du hier 16 Monate später deine bevorzugte Technik zur Diskussion vorstellst, denn sie bietet browserübergreifend einen nicht unerheblichen Darstellungsfehler, sobald die Breite des Browserfensters die festgelegte Breite (1000px) der Box #mitte unterschreitet. Ab diesem Moment verschiebt sich nämlich der linke Bereich der Box über den linken Fensterrand hinaus in das dahinterliegende "Niemandsland", wo er nicht mehr einzusehen, geschweige denn in irgendeiner Form zugänglich ist, solange die Fensterbreite nicht entsprechend hochskaliert wird - bei einem Seitenkonzept mit linksbündiger Navigation schon mal alles andere als optimal.

Der gleiche Fehler ergibt sich auch für den oberen Bereich der Box, wenn sie auf dieselbe Weise in der Vertikalen des Browserfensters zentriert wird, und die Fensterhöhe die Boxenhöhe unterschreitet.

Von daher empfiehlt es sich, von dieser Positionierungstechnik Abstand zu nehmen, und die Zentrierung der Box auf eine andere Weise umzusetzen, wenn hier margin:0 auto nicht zum Einsatz kommen soll, um diesem Problem aus dem Weg zu gehen.

Siehe hierzu das alternative Konzept CSS vertical centering using float and clear , bei dem die Box nicht hinter dem oberen und linken Fensterand verschwindet, und zum Vergleich die altbekannte Technik Zentrieren mit nur einem Element.

mfg Maik
 
Wie gesagt ich habe nicht mit Absicht ein so altes Thema geöffnet.

Nichts desto trotz hats MIR jetzt scheinbar was gebracht. Das ist mir vorher noch nie aufgefallen, daher danke ich dir für den Tip.

edit:

bei deinem Beispiel "Zentrieren mit nur einem Element", tritt der selbe Fehler auf. Nur das dort nur ca 1cm links verschwindet (ff3).
 
Zuletzt bearbeitet:
Das zweite Beispiel wendet auch diese "kritische" Technik an, um die Box im Viewport zu zentrieren.

FF3 verschiebt bei mir die Box solange nach links, bis sich sein Fenster in der Horizontalen nicht mehr zusammenschieben lässt - bei 125px ist sozusagen "Ende - Gelände" :)

ff3_im_dünnformat.jpg

Anhand der Überschrift in der Box, die erst ab dem Wort "nur" zu sehen ist, kannst du im Quervergleich zur vollständigen Boxenbreite abschätzen, wie weit die Box da ins "Niemandsland" hineinragt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück