[Dreamweaver] Wie "bleibt" das Layout auch bei Vollbildmodus (im Browser) i.d. Mitte? @ tutorials.de: Tutorials, Forum & Hilfe

Margit_ · 10.05.07 00:15

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

DFence · 10.05.07 02:39

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-Code:


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

oder mit einem DIV Container

PHP-Code:


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

Hoffe das hilft Dir weiter !?

Maik · 10.05.07 06:32

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;
    [b]text-align: center;[/b]
    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;
    [b]margin: 0 auto;[/b]
    padding: 0;
    [b]width: 740px;[/b]
    }

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.

Margit_ · 22.05.07 15:02

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"

Lieber michaelsinterface: Deine Antwort versteh ich noch viel weniger

Oje.
Kann man das irgendwie direkt im Dreamweaver mit einem Befehl einstellen?

Bitte nochmal um Eure Antworten!

Liebe Grüße,

Margit

Maik · 22.05.07 21:50

Hi!

Zitat von Margit_

Lieber michaelsinterface: Deine Antwort versteh ich noch viel weniger

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?

Ja, einfach per copy&paste die drei hervorgehobenen CSS-Eigenschaften im Stylesheet der Webseite anwenden und die Breitenangabe width:740px deinem Layout anpassen.

Margit_ · 06.06.07 01:18

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

Desperone · 11.10.08 12:50

Hmm Tabelle is aber nicht fein.

Ich benutz immer nen sehr leichtes Schema.

Um den gesammten Code nen div packen

HTML-Code:

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

HTML-Code:

#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.

Maik · 11.10.08 13:07

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

Desperone · 11.10.08 14:24

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).

Maik · 11.10.08 14:38

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"

[Dreamweaver] Wie "bleibt" das Layout auch bei Vollbildmodus (im Browser) i.d. Mitte?-ff3_im_duennformat.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

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

"body" bleibt immer kleiner als "content"-Div

preg-match gibt immer "0" zurück, auch wenn es "1" sein müsste

JSF "Komponenten dynamisch rendern" oder auch "die 'nächste' Seite beeinflussen"

"wine" auch für Anwender - Dreamweaver nutzen?

"IsValid" bleibt immer auf "false"

E-Mail:

Abonnieren Abbestellen