Autor |
Nachricht |
Kelvin
Threadersteller
Dabei seit: 27.08.2007
Ort: Ffm
Alter: -
Geschlecht:
|
Verfasst Fr 30.05.2008 23:24
Titel div-layer über ganzes Browserfenster |
|
|
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
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.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 30.05.2008 23:50
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
Kelvin
Threadersteller
Dabei seit: 27.08.2007
Ort: Ffm
Alter: -
Geschlecht:
|
Verfasst Di 03.06.2008 09:44
Titel
|
|
|
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?
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 03.06.2008 09:53
Titel
|
|
|
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;
|
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 03.06.2008 10:02
Titel
|
|
|
choise hat geschrieben: | Code: |
width:auto;
padding-right:40px;
|
|
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.
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 03.06.2008 10:05
Titel
|
|
|
coole sache, aber wie lange wird es wohl noch dauern bis die breite masse der nutzer einen
browser mit css3 hat ?
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 03.06.2008 10:10
Titel
|
|
|
|
|
|
|
|
|
|
|
Ä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?
link über ganzes li feld
|
|