nicht angemeldet
Hilfen zu Positionierungen!
0 
Gunnar Bittersmann
0 0 
Der Martin
0 Gunnar Bittersmann
Hilfen zu Positionierungen!
Kai345Hallo Leute,
ich bin CSS-Neueinsteiger, versuche aber schnell zu lernen.
Nachdem ich die ersten normalen Gehversuche gemacht habe, und Erfolgserlebnisse auch dabei waren, versuche ich von Grund auf etwas aufzubauen, ohne mir dabei Lösungen, die ich noch nicht verstanden habe einfach einzukopieren!
Dabei entstehen aber Logikschwierigkeiten, die ich auch durch fleißiges Lesen von selfhtml nicht überbrückt bekomme, vor allem da durchs Lesen eher immer mehr durcheinander gerät!
Ganz simple Frage zunächst:
Warum wird das:
http://www.richter-reichenbach.de/marv_battle/
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Start</title>
<style type="text/css">
body {
margin: 50px;
color: black;
background-color: #00473b;
background-image: url(right_bottom2.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
#startbox {
color: #00473b;
background-image: url(2.png);
background-repeat: repeat;
</style>
</head>
<body>
<div id="startbox" style="width: 100%; height:100%">Erste Gehversuche!</div>
</body>
</html>
im IE korrekt angezeigt, im Firefox aber das background-image gar nicht "nutton right" angezeigt wird!
2. Frage:
Gibt es eine Möglichkeit das id "startbox" über 100% der height zu definieren, so macht er ja eher auto und richtet sich am Inhalt, nicht am Viewport!
Ich weiß, das sind noob-Fragen, aber nachdem ich schonmal weiter vorgedrungen war und dann gar nichts mehr lief, wollte ich nochmal von vorn anfangen und zusehen, daß kein Durcheinander mehr da is!
Gruß
-
Hello out there!
im IE korrekt angezeigt, im Firefox aber das background-image gar nicht "nutton right" angezeigt wird!
Nein, die Anzeige im Firefox ist korrekt. Davon auszugehen, der IE würde es richtig machen, ist in den allermeisten Fällen falsch.
Wenn die korrekte Anzeige nicht der geünschten entspricht, muss also am Code was nicht stimmen.
Gib mal 'body' noch einen Rahmen: '
border: 2px solid white;', dann siehst du, was los ist. Das Hintergrundbild eines Elements wird nur in der Größe von dessen Box (einschließlich Rand) dargestellt.'body' ist aber nicht so hoch wie der Viewport, das führt zu deiner
- Frage:
Gibt es eine Möglichkeit das id "startbox" über 100% der height zu definieren, so macht er ja eher auto und richtet sich am Inhalt, nicht am Viewport!
'100%' heißen 100% der Höhe der umschließenden Box (hier des Elternelements). Hat diese die Höhe 'auto', dann ist 100% davon eben auch 'auto'.
Weise also den umschließenden Boxen (bis hinauf zu der des Wurzelelements 'html') auch '100%' Höhe zu.
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)-
Hi,
'body' ist aber nicht so hoch wie der Viewport, das führt zu deiner
- Frage:
Gibt es eine Möglichkeit das id "startbox" über 100% der height zu definieren, so macht er ja eher auto und richtet sich am Inhalt, nicht am Viewport!
'100%' heißen 100% der Höhe der umschließenden Box (hier des Elternelements). Hat diese die Höhe 'auto', dann ist 100% davon eben auch 'auto'.
Weise also den umschließenden Boxen (bis hinauf zu der des Wurzelelements 'html') auch '100%' Höhe zu.
Danke für die Hilfe, allerdings habe ich jetzt der höchstmöglich zu definierenden umschließenden Box body 100/100 zugewiesen, Ergebnis ist immer noch, daß sich die height am Inhalt, im Moment halt gar nix orientiert!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Start</title>
<style type="text/css">
body {
margin: 50px;
color: black;
background-color: #00473b;
border: 2px solid white;
}
</style>
</head>
<body style="width:100%; height:100%">
</body>
</html>Mal abgesehen davon, daß jetzt noch nichtmal margin:50px; eingehalten wird...
Ich verstehs nimmer, es wird doch möglich sein dem Ding beizubringen, einen 100%/100% Kasten anzuzeigen!Grüße
-
Hallo,
Danke für die Hilfe, allerdings habe ich jetzt der höchstmöglich zu definierenden umschließenden Box body 100/100 zugewiesen, Ergebnis ist immer noch, daß sich die height am Inhalt, im Moment halt gar nix orientiert!
dann hast du Gunnars Rat nicht genau gelesen:
Weise also den umschließenden Boxen (bis hinauf zu der des Wurzelelements 'html') auch '100%' Höhe zu.
Auch body hat noch ein Elternelement, nämlich html, das du auch noch auf 100% Höhe stzen solltest.
Ciao,
Martin--
Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
Aber warum bin ich ans Bett gefesselt?-
Hi!
Auch body hat noch ein Elternelement, nämlich html, das du auch noch auf 100% Höhe stzen solltest.
Momentmal, ich dachte ins <html> darf nur noch die, lang, version, xml:lang und xmlns!
Zumindest macht ers immer noch nicht, wenn ich sage:
<html style="height:100%>http://www.richter-reichenbach.de/marv_battle/
Mal ganz abgesehen vom nicht eingehaltenen margin...
Gruß
-
Hello out there!
Momentmal, ich dachte ins <html> darf nur noch die, lang, version, xml:lang und xmlns!
'dir' und 'lang', ja.
'version', 'xml:lang', 'xmlns' nein; nich in HTML 4.01 Strict.
Wobei mir gleich noch Fehler auffallen:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
ist kein gültiges HTML 4.01; '/' ist falsch. (http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschiede)Zumindest macht ers immer noch nicht, wenn ich sage:
<html style="height:100%>Das ist ja auch ungültiges HTML.
(IMHO sollte das 'style'-Attribut bei keinem Element erlaubt sein.)
Mal ganz abgesehen vom nicht eingehaltenen margin...
??
'startbox' sollte nicht 100% hoch sein oder 'body' keinen Rand haben, wenn das Hintergrundbild bis ganz unten gehen soll.
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers) -
Hi
jetzt habe ich verstanden, was ihr mit html definieren meintet, ich
wußte nicht, daß es einen Selektor html gibt, hab es aber jetzt anhand eines online gefundenen Beispiels gesehen.Allerdings funzt es immer noch nicht:
http://www.richter-reichenbach.de/marv_battle
Benutzter Code:
html {
width: 100%;
height:100%;
border: 2px dashed whithe;
}
body {
margin: 50px;
border: 2px solid white;
background-color: #00473b;
}Ergebnis Mozilla: (s.Link oben) keine rechte/untere dashed Linie...
Außerdem ist der body nicht aufgespannt (solid white Linie, sollte ja box ergeben)Dann habe ich das versucht:
http://www.richter-reichenbach.de/marv_battle/index1.html
Benutzter Code:
html {
width: 100%;
height:100%;
border: 2px dashed whithe;
}
body {
height: 100%;
width: 100%;
margin: 50px;
border: 2px solid white;
background-color: #00473b;
}Ergebnis Mozilla: Der beabsichtigte margin pusht den body rechts raus und die dashed linie ist unten nicht zu sehen...
Was habe ich jetzt falsch gemacht?
Gruß
-
Hello out there!
Allerdings funzt es immer noch nicht:
http://www.richter-reichenbach.de/marv_battlebody {height: 100%}fehlt. Und Tippfehler: "whithe".Dann habe ich das versucht:
http://www.richter-reichenbach.de/marv_battle/index1.htmlErgebnis Mozilla: Der beabsichtigte margin pusht den body rechts raus und die dashed linie ist unten nicht zu sehen...
Was habe ich jetzt falsch gemacht?
Du hast das Boxmodell [CSS2 §8] nicht beachtet: margin, border, padding kommen bei der Berechnung der Größe der Box zu height/width noch dazu (sollten bei einigen Elementen also auf 0 belassen bzw. gesetzt werden).
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers) -
Grütze .. äh ... Grüße!
Ergebnis Mozilla: Der beabsichtigte margin pusht den body rechts raus und die dashed linie ist unten nicht zu sehen...
Was habe ich jetzt falsch gemacht?
Wenn du einen Abstand willst, dann gib
ENTWEDER
- dem html padding:50px und dem body margin:0
ODER
- dem html ein margin:0; padding:0 und dem body ein padding von 50px
jenachdem, wie du es haben willst.
Ansonsten: siehe Gunnar. ;)
Cü
Kai--
Der vertuschte Gefahrstoff: Dihydrogenmonoxid
+---------+
| ___ |
---+--|_R_|--+---- Widerstand ist zwecklos
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
-
-
-
-
Hello out there!
Weise also den umschließenden Boxen (bis hinauf zu der des Wurzelelements 'html') auch '100%' Höhe zu.
allerdings habe ich jetzt der höchstmöglich zu definierenden umschließenden Box body
Das 'body' nicht die „höchstmögliche“ ist und welche es ist, hatte ich bereits gesagt.
<body style="width:100%; height:100%">
Vermeide Inline-Style-Angaben, die machen den Quelltext unübersichtlich und fehleranfällig. Schreibe _alle_ CSS-Angaben ins zentrale Stylesheet ('style'-Element im 'head' bzw. externe Datei)!
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
- Frage:
- Frage: