mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 25.04.2024 16:57 Benutzername: Passwort: Auto-Login

Thema: div-layer über ganzes Browserfenster vom 30.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div-layer über ganzes Browserfenster
Seite: 1, 2  Weiter
Autor Nachricht
Kelvin
Threadersteller

Dabei seit: 27.08.2007
Ort: Ffm
Alter: -
Geschlecht: Männlich
Verfasst Fr 30.05.2008 23:24
Titel

div-layer über ganzes Browserfenster

Antworten mit Zitat Zum Seitenanfang

Hi, inzwischen habe ich meine neuen Webseiten auf Div Layouts umgestellt und letztenendlich funktioniert auch alles mehr oder weniger.
Trotzdem möchte ich jetzt auch mal verstehen WARUM *bäh*

Meine Konkrete Frage bezieht sich auf folgendes:

manchmal erstecken sich div-layer über die gesamte Browserbreite, ein anderes Mal aber nur direkt um den Inhalt, z.B. einen String.

Könnt ihr mir allgemeine Regeln geben, wann welcher Fall auftritt? Ich habe es schon versucht anhand verschiedener position (absolute, relative) values herauszufinden, allerdings ohne Erfolg.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 30.05.2008 23:50
Titel

Antworten mit Zitat Zum Seitenanfang

Das hast du schon richtig erkannt. Ein div Element ist von Haus aus ein Block Level Element.
Versiehst du es aber mit einer absoluten Position oder einer Float Eigenschaft, so verliert es die
volle Breite oder natürlich auch wenn du einen width Wert bestimmst welcher kleiner 100% ist.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  div {
    background: #FFFCCC;
    font-size: 3em;
    margin: 1em;
    padding: 1em;
  }
  div#absolute {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  div#float {
    float: right;
    width: 5em;
  }
  </style>
 </head>
 <body>
  <div id="normal">normal</div>
  <div id="absolute">absolute</div>
  <div id="float">float</div>
 </body>
</html>


Zuletzt bearbeitet von m am Fr 30.05.2008 23:52, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Kelvin
Threadersteller

Dabei seit: 27.08.2007
Ort: Ffm
Alter: -
Geschlecht: Männlich
Verfasst Di 03.06.2008 09:44
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die Antwort!

Ich persönlich finde es etwas unglück gelöst, wenn man beispielsweise ein padding hinzufügt.

nehmen wir an ich habe ein Padding von 50px und eine Breitenangabe von 100%.

Dann werden auf jeder Seite 50px HINZUGEFÜGT, zu den 100% Breitenangabe. Das ist doch nicht intuitiv!
Warum sollte ich durch das "kissen, sprich das Padding, etwas an der Gesamtgröße ändern?

Könnt ihr das erklären?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 03.06.2008 09:53
Titel

Antworten mit Zitat Zum Seitenanfang

Logisch ist es schon, dennoch ab und zu unpraktisch.

Aus diesem Grund wird in CSS3 die box sizing Eigenschaft eingeführt.

http://www.google.de/search?hl=de&q=css3+box-sizing
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Di 03.06.2008 09:53
Titel

Antworten mit Zitat Zum Seitenanfang

Kelvin hat geschrieben:

Dann werden auf jeder Seite 50px HINZUGEFÜGT, zu den 100% Breitenangabe. Das ist doch nicht intuitiv!


Code:


width:auto;
padding-right:40px;



* Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 03.06.2008 10:02
Titel

Antworten mit Zitat Zum Seitenanfang

choise hat geschrieben:
Code:


width:auto;
padding-right:40px;



* Keine Ahnung... *


In dem Fall einer prozentualen Breitenangabe wirst du auf Probleme stoßen
wenn du Padding Werte in px Einheit verwenden möchtest.

Sagen wir du möchtest ein zweispaltiges Layout, 80% Inhalt, 20% Sidebar,
den Inhalt möchtest du aber mit 50px Innenabstand versehen, so kommt die
insgesamt Breite auf 80% + 100px. Daher ist es notwendig zu bestimmen wie
die Abstandswerte angewendet werden sollen, ergänzend der Gesamtbreite oder
innerhalb der Breite, dazu wird die box-sizing Eigenschaft dienen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Di 03.06.2008 10:05
Titel

Antworten mit Zitat Zum Seitenanfang

coole sache, aber wie lange wird es wohl noch dauern bis die breite masse der nutzer einen
browser mit css3 hat ?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 03.06.2008 10:10
Titel

Antworten mit Zitat Zum Seitenanfang

*ha ha*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Verschiebung der Layer bei nicht ausgefülltem Browserfenster
innerer layer soll äußeren layer automatisch größer machen
[Dreamweaver] Layer in einem anderen Layer unten ausrichten?
Photoshop Layer exportieren auf einzelne Layer Größe
div-layer im Eltern-div-layer zentrieren. Wie geht das?
Ganzes HTML auf die Mitte ausrichten in DW
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.