nicht angemeldet
Mehrere bilder in einem div verankern
0 0 0 0 
MudGuard
0 0 1 
Gunnar Bittersmann
0 
Der Martin
Mehrere bilder in einem div verankern
Hallo, ich muss eine Homepage für die Schule erstellen und komme einfach nicht weiter, ich habe mehrere Grafiken über css eingefügt und ausgerichtete. hat auch alle super ausgesehen doch nun wenn ich im Browser näher an die Homepage zoomen möchte verschiebt es mir alles wie man unten auf dem Bild sehen kann. was kann ich machen damit die Bilder im Hintergrund verankert werden wie die grüne Überschrift "1234" das Bild sollte die Position im lila farbenen Kästchen behalten und nicht am Rand kleben bleiben.
Danke für die Hilfe
normal (richtig)
verkleinert (falsch)
-
normal (richtig)
verkleinert (falsch)
Ein absolut positioniertes Bild erhält sein Koordinatensystem vom nächst höheren Parentelement, welches nicht statisch positioniert ist.
Du wirst also dem richtigen Parentelement z.B. ein position:relativ zuweisen müssen.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
normal (richtig)
verkleinert (falsch)
Ein absolut positioniertes Bild erhält sein Koordinatensystem vom nächst höheren Parentelement, welches nicht statisch positioniert ist.
Du wirst also dem richtigen Parentelement z.B. ein position:relativ zuweisen müssen.mfg Beat
Hallo Beat,
ich habe eigentlich alle grafiken relativ zugewisen auser dem hintergrund oder ist die schrift "1234" auch gemeint ???
gruß Patrick-
Hi,
ich habe eigentlich alle grafiken relativ zugewisen auser dem hintergrund oder ist die schrift "1234" auch gemeint ???
nun, da Du ansonsten keinerlei Informationen darüber angibst, was Du eigentlich getan hast (und auch diese Information in die Kategorie "keine" passt), können Dir zwar viele Ratschläge gegeben werden, die dann aber eher so klingen: Wenn die Fischstäbchen zu hart geraten, einfach vor dem Verzehr auftauen!
Möchtest Du also nicht viel lieber Dein Problem *nachvollziehbar* beschreiben?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Wenn die Fischstäbchen zu hart geraten, einfach vor dem Verzehr auftauen!
Und vor allem: von allen Seiten braten
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Also ok wie man Fischstäbchen macht weis ich ja jetzt ;)
also hier der HTML Code den ich auf der eigentlich Homepage verwendet habe:
<head></head>
<div>
<body bgcolor=#C3C3C3 >
<style type="text/css">
h1 { color:#1DC10C; font-size:32px; font-family:calibri; }
h2 { color:#1DC10C; font-size:45px; font-family:calibri; font-weight:bold; }</style>
<link rel="stylesheet" href="stylsheet.css" type="text/css">
<div id="gesamt"
<div style="background-image:url(Bilder/headbunner.gif); background-repeat:no-repeat;background-position:center 50px; height:270px; font-size:150%">
<div style="background-image:url(Bilder/oben2.png); background-repeat:no-repeat;background-position:center 270px; height:500px; font-size:150%">
</div>
<div><div id="voll">
<div style="background-image:url(Bilder/background.png); background-repeat:repeat-y; background-position:center ; font-style:h1%">
<center><h2>1234</h2></center><div id="box1">
<img src="Bilder/artikel.jpg" alt="" border="0" width="400" height="500">und hier der stylesheet:
#box1 {
position:absolute;
top: 50px;
left: 450px;
}#preis {
position:relative;
left: 540px;
top: -555px;
}#timer {
position:relative;
left: -5px;
top: -1025px;
}#warenkorb {
position:relative;
left: 800px;
top: 620px;
}
#voll {
position:relative;
left: center;
top: -200;
}-
Hi,
also hier der HTML Code den ich auf der eigentlich Homepage verwendet habe:
validiere ihn. Bevor die vielen Fehler nicht behoben sind, lohnt keine Problembehandlung.
<center><h2>1234</h2></center>
Das <center>-Element. Nicht brauchen wirst Du es.
und hier der stylesheet:
Auch dies validiere.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
@@onkelotto:
nuqneH
also hier der HTML Code den ich auf der eigentlich Homepage verwendet habe:
Den solltest du berichtigen. Der W3C-Validator hilft dabei. Oder validome.org. Fürs Stylesheet der CSS-Validator.
<head></head>
'title' fehlt.
<div>
<body bgcolor=#C3C3C3 >'body' ist bereits mit 'div' implizit geöffnet. Sämtliche Darstellung solltest du im Stylesheet angeben, nicht mit missbilligten HTML-Attributen.
<style type="text/css">
Gehört in den 'head'.
<link rel="stylesheet" href="stylsheet.css" type="text/css">
Dito.
<div id="gesamt"
Syntaxfehler.
<div style="background-image:url(Bilder/headbunner.gif); background-repeat:no-repeat;background-position:center 50px; height:270px; font-size:150%">
Sämtliche Darstellung solltest du im Stylesheet angeben, nicht inline in @style-Attributen.
font-style:h1%
Kein gültiger Wert.
<center>
Sämtliche Darstellung solltest du im Stylesheet angeben, nicht mit missbilligten HTML-Elementen.
left: center;
Kein gültiger Wert.
top: -200;
Dito.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Mahlzeit Gunnar Bittersmann,
Den solltest du berichtigen. Der W3C-Validator hilft dabei. Oder validome.org.
Oder der Gunnarisator:
'title' fehlt.
Gehört in den 'head'.
Dito.
Syntaxfehler.
Kein gültiger Wert.
Kein gültiger Wert.
Dito.
*SCNR*
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
Hallo,
Also ok wie man Fischstäbchen macht weis ich ja jetzt ;)
na prima, eines Tages wird dir dieses Wissen auch weiterhelfen. ;-)
<head></head>
<div>
<body bgcolor=#C3C3C3 >Was ist das? HTML jedenfalls nicht. DOCTYPE fehlt, das öffnende html-Tag fehlt, das head-Element darf nicht leer sein (mindestens das title-Element ist Pflicht), und ein div kann nicht einfach im Niemandsland zwischen head und body anfangen. Außerdem sollten HTML-Attribute in Anführungszeichen geschrieben werden, auch wenn das nicht in jedem Fall zwingend notwendig ist.
<style type="text/css">
h1 { color:#1DC10C; font-size:32px; font-family:calibri; }
h2 { color:#1DC10C; font-size:45px; font-family:calibri; font-weight:bold; }
</style>
<link rel="stylesheet" href="stylsheet.css" type="text/css">Die style- und link-Elemente dürfen nicht im body vorkommen, sie gehören in head.
<div id="gesamt"
<div style="background-image:url(Bilder/headbunner.gif); background-repeat:no-repeat;background-position:center 50px; height:270px; font-size:150%">
<div style="background-image:url(Bilder/oben2.png); background-repeat:no-repeat;background-position:center 270px; height:500px; font-size:150%">
</div>
<div><div id="voll">
<div style="background-image:url(Bilder/background.png); background-repeat:repeat-y; background-position:center ; font-style:h1%">
<center><h2>1234</h2></center><div id="box1">
<img src="Bilder/artikel.jpg" alt="" border="0" width="400" height="500">Auch dieser Codeausschnitt strotzt vor Fehlern. In erster Linie die vielen div-Elemente, die geöffnet, aber nicht wieder geschlossen werden; wozu sie überhaupt da sind, ist auch unklar. Außerdem eine Menge Flüchtigkeitsfehler (vergessene Tag-Klammern oder "font-style:h1%").
#box1 {
position:absolute;
top: 50px;
left: 450px;
}#preis {
position:relative;
left: 540px;
top: -555px;
}#timer {
position:relative;
left: -5px;
top: -1025px;
}#warenkorb {
position:relative;
left: 800px;
top: 620px;
}
#voll {
position:relative;
left: center;
top: -200;
}Die Elemente mit den IDs preis, timer und warenkorb kommen in deinem gezeigten Code aber gar nicht vor, und die Art, wie du absolute und relative Positionierung einsetzt, lässt vermuten, dass du das Prinzip nicht verstanden hast.
Mein ernstgemeinter Vorschlag: Schmeiß das Zeug weg und lass uns nochmal von vorn anfangen. Am besten mit dem Grundgerüst einer HTML-Datei und einer verbalen Beschreibung und/oder einer Skizze, was am Ende dabei rauskommen soll.So long,
Martin--
F: Was ist schlimmer: Alzheimer oder Parkinson?
A: Parkinson. Lieber mal ein Bier vergessen zu zahlen, als eins verschütten.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
<head></head>
<div>
<body bgcolor=#C3C3C3 >[…] ein div kann nicht einfach im Niemandsland zwischen head und body anfangen.
Tut es auch nicht. Es gibt kein Niemandsland. Der Fehler kommt danach.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
<head></head>
<div>
<body bgcolor=#C3C3C3 >
[…] ein div kann nicht einfach im Niemandsland zwischen head und body anfangen.
Tut es auch nicht. Es gibt kein Niemandsland. Der Fehler kommt danach.*mir* ist das klar, dem Validator auch, einem intern korrigierenden Browser wohl auch (letzterer wird mutmaßlich sogar noch die im fehlplazierten body-Tag notierten Attribute berücksichtigen).
Einem Leser/Schreiber, der mit diesen Feinheiten nicht vertraut ist, eher nicht. Der sieht seine gesetzten head- und body-Tags, und für sein Verständnis fängt das body-Element da an, wo <body> steht (wenn er überhaupt schon zwischen Tag und Element unterscheidet).
Mit solchen Dingen wie implizit geschlossenen oder geöffneten Elementen kann man kommen, wenn der Kandidat mal ein gewisses Grundverständnis hat. Das scheint mir hier aber derzeit noch nicht der Fall zu sein.Ciao,
Martin--
Der Professor sitzt beim Essen in der Mensa. Ein Student setzt sich ihm unaufgefordert gegenüber.
Professor: Seit wann essen denn Schwein und Adler an demselben Tisch?
Student: Na gut, dann flieg' ich eben zum nächsten Tisch.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
Mit solchen Dingen wie implizit geschlossenen oder geöffneten Elementen kann man kommen, wenn der Kandidat mal ein gewisses Grundverständnis hat
Am besten, man kommt damit gar nicht, sondern verwendet XHTML.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo,
Mit solchen Dingen wie implizit geschlossenen oder geöffneten Elementen kann man kommen, wenn der Kandidat mal ein gewisses Grundverständnis hat
Am besten, man kommt damit gar nicht, sondern verwendet XHTML.dem kann ich mich vorbehaltlos anschließen.
Ciao,
Martin--
Eifersucht ist so alt wie die Menschheit: Als Adam einmal spät heimkam, zählte Eva sofort seine Rippen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
Hi,
Was ist das? HTML jedenfalls nicht. [...] das öffnende html-Tag fehlt,
DAS wäre nichts, was gegen HTML (aus HTML 4.01) spricht:
<!ELEMENT HTML O O (%html.content;) -- document root element -->Wie man an den zwei O sieht, sind beide tags des HTML-Elements optional.
und ein div kann nicht einfach im Niemandsland zwischen head und body anfangen.
Das hat Gunnar ja schon geklärt, aber zur näheren Erklärung auch hier noch der DTD-Abschnitt:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-
-
-
-
-
