nicht angemeldet
Verzweifelter Neuling, mehrere bilder zentrieren
henmanServus!
Ich weiss dass einige sagen werden ich hätte das Forum zuerst durchsuchen sollen aber leider finde ich nirgends den entscheidenden Hinweis wie ich mein Problem lösen könnte. Nun was will ich.
Ich möchte eine seite basteln mit einem hintergrundbild welches immer zu 100% in der breite angezeigt wird. dies habe ich damit gelöst das ich das ding in ein div gelegt habe:
#hintergrund{position:relative;padding-top:0px;}
dies funktioniert auch wunderbar.
darüber möchte ich 6 images legen die oben als menüpunkte dienen. diese werden von einem js "animiert bei mouseover" dieser punkt klappt auch wunderbar. wenn ich die einzelnen images absolut positioniere ist alles wunderbar. nun möchte ich aber dass diese 6 bilder in einem div liegen und immer in der mitte des browsers (horizontal) angezeigt werden. und ja ich kenne schon margin-left/right:auto und ja es klappt damit allerding liegen bei mir die bilder dann übereinander was ich nicht verstehe.
hier nun der code:
<div id ="hintergrund">
<img src="../_graphics/bg.jpg" width=100%>
<div id="bilderserie">
<div id ="menu1">
<a href="index.htm"> <img src="../_graphics/home.gif" border="0" width=100px class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>
</div>
<div id ="menu1">
<a href="_html/menue.htm"><img src="../_graphics/menue.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"</a>
</div>
<div id ="menu1">
<a href="_html/tagesteller.htm"><img src="../_graphics/tagesteller.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>
</div>
<div id ="menu1">
<a href="_html/fotos.htm"><img src="../_graphics/fotos.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>
</div>
<div id ="menu1">
<a href="_html/catering.htm"><img src="../_graphics/catering.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>
</div>
<div id ="menu1">
<a href="_html/kontakt.htm"><img src="../_graphics/kontakt.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>
</div>
</div>
</div>
und hier die fehlende css-codes
#bilderserie {
position:absolute;
left:0;
top:3%;
width: 100%;
min-height: 82px;
padding: 9px 0px 9px 10px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}
#menu1{position:absolute;
margin-top: 7px;
margin-bottom: 7px;
margin-left: auto;
margin-right: auto;
border:0px;}
bitte kann mir jemand sagen woran es liegt dass es nicht klappt
-
hallo,
ich distanziere mich mal von deinem Code und gebe dir einen Hinweis darauf, wie man Bilder nebeneinander zentrieren kann.
Über CSS kannst du mit text-align:center; zum Beispiel Text zentrieren. Bilder scheuen sich da nicht und machen mit.<div style="text-align:center;"> <img src="bild1.gif" alt=""> <img src="bild2.gif" alt=""> </div>Mehr braucht man nicht im Prinzip nicht.
Besser ist es aber, da es sich quasi um eine Auflistung handelt, die Bilder in eine Liste zu packen.
<ul> <li><img src="bild1.gif" alt=""></li> <li><img src="bild2.gif" alt=""></li> </ul>über CSS kannst du die Aufzählungszeichen mit list-style:none; ausblenden. die listenpunkte musst du dann noch mit display:inline; nebeneinander setzen. Dazu wieder text-align:center; und schon stehen die Bilder zentriert und nebeneinander.
Dazu kommt noch, dass du mit dieser Semantik auch schneller wieder zur Navigation findest, im Quelltext, falls du etwas hinzufügen willst. Die Wartbarkeit ist immens gestiegen.noch was zu deinem Code: versuche nicht alles in divs zu packen, wenn du mit CSS arbeiten willst. img-Elemente können auch Klassen, Ids haben und direkt über CSS angesprochen werden.
<div id ="menu1">
[...]
</div>
<div id ="menu1">
[...]
</div>eine id darf im Dokument nur ein einziges Mal vorkommen. Nutze Klassen, wenn du mehreren Elementen CSS-Eigenschaften zuweisen willst. grüße, henman -- "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
Über CSS kannst du mit text-align:center; zum Beispiel Text zentrieren. Bilder scheuen sich da nicht und machen mit.
<div style="text-align:center;">
<img src="bild1.gif" alt="">
<img src="bild2.gif" alt="">
</div>> > Mehr braucht man nicht im Prinzip nicht. nun ich habe jetzt meinen code geändert und er sieht jetzt so aus: <div id ="hintergrund"> <img src="../\_graphics/bg.jpg" width=100%> <div style="text-align:center;"> <a href="index.htm"> <img src="../\_graphics/home.gif" border="0" width=100px class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a> <a href="\_html/menue.htm"><img src="../\_graphics/menue.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"</a> <a href="\_html/tagesteller.htm"><img src="../\_graphics/tagesteller.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a> <a href="\_html/fotos.htm"><img src="../\_graphics/fotos.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a> <a href="\_html/catering.htm"><img src="../\_graphics/catering.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a> <a href="\_html/kontakt.htm"><img src="../\_graphics/kontakt.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a> </div> </div> und als ergebnis sehe ich nur das hintergrundbild-
nun ich habe jetzt meinen code geändert und er sieht jetzt so aus:
Immer noch wild :) Versuche dich einfach an einer Liste (ohne nichts, keine Bilder)
<ul id="menu">
<li><a href="foo.html">Menüpunkt 1</a></li>
<li><a href="foo2.html">Menüpunkt 2</a></li>
</ul>Diese kannst du dann Wunderbar mit CSS formatieren oder mit JavaScript aufpeppen.
-
-
-
Liebe(r) moketas,
Ich möchte eine seite basteln mit einem hintergrundbild welches immer zu 100% in der breite angezeigt wird. dies habe ich damit gelöst das ich das ding in ein div gelegt habe:
#hintergrund{position:relative;padding-top:0px;}
wieso bekommt der body nicht dieses Hintergrundbild?
darüber möchte ich 6 images legen die oben als menüpunkte dienen.
Falscher Denkansatz. Du schreibst von Bildern, meinst aber ein Menü. Also denke zuerst strukturell (Menü) und dann visuell (Bilder). Wie man ein Menü am besten macht, steht in SELFHTML: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>
diese werden von einem js "animiert bei mouseover" dieser punkt klappt auch wunderbar.
Nicht gut. Benutze zuerst die Möglichkeiten von CSS zum http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=hovern. Und wenn es der IE6 halt nicht kann, dann <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript@title=bringe es ihm entweder bei>, oder entscheide Dich, diesen lästigen Dinosaurier eben nicht mehr in allen Details zu unterstützen.
wenn ich die einzelnen images absolut positioniere ist alles wunderbar.
Absolute Positionierung ist sehr trickreich. Ich bezweifle, dass alles "wunderbar" ist...
nun möchte ich aber
... siehst Du? Doch nicht wunderbar.
dass diese 6 bilder in einem div liegen
Warum kein <p>? Reden wir noch immer von Deinem Menü? Das soll ja laut SELFHTML-Kapitel eine _Liste_ werden. Also liegen die Bilder in <li>-Elemenen, die von einem <ul>-Element umfasst werden. Damit hast Du eine schön asugearbeitete Struktur, die Du mit CSS perfekt "ansprechen" kannst, um alle Deine visuellen Wünsche nun umzusetzen.
und immer in der mitte des browsers (horizontal) angezeigt werden.
Das oben verlinkte Kapitel bietet genau dafür eine Lösung (die Bilder musst Du dann eben als Hintergrundbilder denken): <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal@title=CSS-basierte Navigationsleisten #Horizontale Formatierung>
hier nun der code:
Ja, das ist Dein hauptsächliches Problem. Und da Du Dich als Neuling bezeichnest, wirst Du das auch anfänglich nicht einsehen wollen. Deine HTML-Grundlage ist mangelhaft. Daher kann man mit CSS nur begrenzt Deine Vorstellungen umsetzen. Wenn Deine HTML-Vorlage qualitativ besser ist, dann gelingen mit CSS auch viel mehr tolle Sachen, unter anderem auch das, was Du Dir da so vorstellst.
Poste doch einmal einen Link zu einer momentanen Version Deines Projektes, damit man Dir besser weiterhelfen kann!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
wieso bekommt der body nicht dieses Hintergrundbild?
Felix Riesterer.wie kann ich, wenn ich body background img verwende angeben dass es über die ganze breite angezeigt wird? meiner meinung nach geht das nicht. und ja ich bin ein neuling und ich weiss dass ich nicht durchblicke, deswegen stelle ich fragen und spiele mich mit den sachen, learning by doing.
-
wie kann ich, wenn ich body background img verwende angeben dass es über die ganze breite angezeigt wird?
So wie bei jedem anderen Element[1] auch - ob das nun ein div-Element ist, ein html-Element oder ein body-Element spielt keine Rolle.
meiner meinung nach geht das nicht.
Nein - deines Wissens geht das nicht - mit Meinung hat das nichts zu tun ;)
und ja ich bin ein neuling und ich weiss dass ich nicht durchblicke [...]
Das ist ja nichts schlimmes, irgendwann machts "klick".
[1] Ausnahmen sind diverse Eigenheiten diverser Browser bei Formularelementen, aber die zählen hier nicht.
-
Liebe(r) moketas,
wie kann ich, wenn ich body background img verwende angeben dass es über die ganze breite angezeigt wird?
inwieweit glaubst Du, dass es sich bei CSS mit dem <body>-Element in irgendeiner Weise anders verhält, als wenn Du dafür ein <div>-Element nimmst? Für CSS ist das doch vollkommen egal!
meiner meinung nach geht das nicht. und ja ich bin ein neuling
Also darf das, was Deine Meinung bezüglich "geht nicht" betrifft, hier durchaus in Frage gestellt werden, oder?
und ich weiss dass ich nicht durchblicke, deswegen stelle ich fragen und spiele mich mit den sachen, learning by doing.
Genau. Und daher stelle ich Dir Fragen, die Dich auf neue Gedanken bringen sollen, auf die Du von alleine nicht selbst gekommen wärst. Lasse Dich von meinen Fragen nicht persönlich angreifen, so sind sie nicht gemeint. Lies dazu am besten in der Charta (Tipps für Fragende) den (dritten) Abschnitt (die Stelle "So wie im Forum kein Recht auf eine Antwort besteht..."), dann verstehst Du sicher besser, was ich meine.
Hast Du Dir die entsprechenden Seiten aus der Doku schon angesehen?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Liebe(r) moketas,
wie kann ich, wenn ich body background img verwende angeben dass es über die ganze breite angezeigt wird?
inwieweit glaubst Du, dass es sich bei CSS mit dem <body>-Element in irgendeiner Weise anders verhält, als wenn Du dafür ein <div>-Element nimmst? Für CSS ist das doch vollkommen egal!
meiner meinung nach geht das nicht. und ja ich bin ein neuling
ich werte deine kommentare überhaupt nicht gegen mich. ich bin ja hier um etwas zu erfahren und das ich kein recht auf antworten habe, vor allem nicht auf konkrete, ist mir auch ein begriff. allerdings habe ich das gefühl, dass du nicht recht haben kannst, wenn du meinst, dass es sich beim body element wie bei jedem anderem element in css bzw. html verhält. denn wenn ich beim body das attribut background-img verwende dann wird dieses angezeigt, es wird aber in original grösse angezeigt. width hat keine auswirkung auf die anzeige. ich bin zwar vlt blöd aber irgendwie finde ich auch im netz nur ähnliche aussagen. dort wird als lösungsvorschlag css 3 oder eben weg mit background-img aus dem body und ein div mit relativer positionierung und 100% breite damit man die anderen elemente drüber legen kann. oder gibt es da eine andere lösung?
-
allerdings habe ich das gefühl, dass du nicht recht haben kannst, wenn du meinst, dass es sich beim body element wie bei jedem anderem element in css bzw. html verhält.
Doch doch, er hat schon recht.
denn wenn ich beim body das attribut background-img verwende dann wird dieses angezeigt, es wird aber in original grösse angezeigt.
background-img ist für das body-Element garnicht vorgesehen, dass es trotzdem funktioniert ist der Fehlerkorrektur des Browsers zuzuschreiben.
Das korrekte Attribut wäre "background". Die CSS-Alternative ist die Eigenschaft "background-image". In beiden Fällen (ob mit HTML-Attribut oder gleich mit CSS) ist aber ein skalieren nicht praktisch möglich - die dafür nötige CSS3-Eigenschaft wird noch nicht entsprechend "flächendeckend" unterstützt.
width hat keine auswirkung auf die anzeige.
width als Attribut hat ebenfalls nichts mit CSS zu tun.
ich bin zwar vlt blöd aber irgendwie finde ich auch im netz nur ähnliche aussagen. dort wird als lösungsvorschlag css 3 oder eben weg mit background-img aus dem body und ein div mit relativer positionierung und 100% breite damit man die anderen elemente drüber legen kann. oder gibt es da eine andere lösung?
Wenn du das Bild skalieren willst, hilft dir momentan nur ein img-Element welches du absolut hinter die Seite positionierst - ein div-Element bietet gegenüber dem body-Element keinen Vorteil (wirklich).
-
-
-
-