Mahlzeit !
Sitze hier schon am experimentieren seit ungefähr 2 Stunden, aber nie funktioniert es wie gewollt:
http://www.LupiUpload.de/091102/DAl1g3Q.jpg
Diese 3 Fotoboxen sollen alle nebeneinander. In allen Browsern, soll überall logischerweise gleichaussehen…ich kriege es aber einfach nicht hin…:?:
Hier der dazugehörige Quelltext:
[code]
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
Verwende statt „position“ lieber „float“: SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
Habe ich vorher versucht. Kam leider genau das gleich dabei raus…
Das bezweifel ich, da musst du irgendwas falsch gemacht haben. Kleines Positiv-Beispiel:
[code]
So…
http://www.LupiUpload.de/091102/8gXnJUd4.JPG
Damit so wie o.g. die Boxen nicht „aneinander kleben“ habe ich nach/vor jeder Box ein gesetzt.
Ergebnis:
[CODE]
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
Dein Code sieht ziemlich komplex aus, obwohl dein Ziel eigentlich ganz einfach ist.
Ich kürze das Ganze mal ein bisschen für dich. 
HTML:
[code]
[/code]CSS:
[code]bild1 {
background-color:#F5F5F5;
width:160px;
padding:5px;
border-style:solid;
border-width:1px;
}
bild2 {
background-color:#F5F5F5;
width:160px;
float:left;
margin-left:5px;
padding:5px;
border-style:solid;
border-width:1px;
}
bild3 {
background-color:#F5F5F5;
width:160px;
float:left;
margin-left:5px;
padding:5px;
border-style:solid;
border-width:1px;
}
.clear {
clear:both;
}[/code]Den CSS-Code kopierst du in deinen Editor und speicherst das ganze als style.css ab. Zwischen und fügst du dann das hier ein:
<link rel="stylesheet" type="text/css" href="style.css">Müsste jetzt eigentlich funktionieren. 
Deinen Javascript-Code musst du aber noch selber einfügen!
Abstände zwischen den Boxen erhälst du mittels margin (Außenabstand). Deine Variante ist überhaupt keine gute Idee.
Und: schau dir nochmal meinen Entwurf an:
[code]
Und jetzt deinen zum Vergleich (etwas gekürzt):
[code]
Fällt dir was auf?
Eigentlich hab ich das mit dem margin ja schon eingefügt?
Nee als so geht das überhaupt net…sorry aber danke für die Mühe…
Ergebnis:
EDIT: neues Foto: http://www.LupiUpload.de/091102/hN6QDssx.JPG
Der ganze Bilder/Javascript Kram muss drinne bleiben, damit die Bilder bei Klick geöffnet & vergrössert werden8-)
Auszug Bilderbox 1:
EDIT:
Habe im Code was vergessen: Neuer Code:
[code]
Eugeny Dimitriev auf Abwegen
Eugeny Dimitriev auf Abwegen
Komisch, ich floate selber auf meiner Seite und bei dir geht es nicht…
Wenn ichs rausgefunden hab, schreib ich nochmal.
So…
Habe es bisher so
http://www.LupiUpload.de/091102/gIvsqmvq.JPG
Nachteile:
-Ich weiss nicht ob es fachlich korrekt ist vom Code her
-Wie es auf grösseren Auflösungen ausser auf 1027*768 aussieht
-Ich kriege das Ding nicht zentriert
Code:
[CODE]
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
Den Code kann ich mir nicht wirklich ansehen, weil du noch so viele alte HTML-Tags benutzt und das CSS in die HTML-Datei schreibst. Warum hast du zum Beispiel Tabellen? Die suchen da absolut gar nichts. Mittig kriegst du das ganze entweder mit:
[code]
das text-style hatte ich schonmal, hatte nix geändert, jetzt mit margin:auto siehts wie folgt aus:
http://www.LupiUpload.de/091102/noHhFcMI.JPG
Auszug Code:
[code]
Alte HTML Tags? Sorry, aber ich kenn keine neueren^^
CSS da in den Boxen weil ich für das bissl nicht extra nen eintrag in meine format.css Datei machen muss
Ich meine, dass du HTML-Tags benutzt, die veraltet sind. Man benutzt sie nicht mehr, da HTML nicht dafür vorgesehen ist, sondern CSS. Sie gehören nicht mehr zum HTML-Standard.
Zu deinem Problem:
Du hast margin:auto bei jeder Box verwendet, selbstverständlich wird dann auch jede Box mittig. Du musst ein div verwenden, das alle Boxen umschließt.
Sorry aber verstehe überhaupt nicht was Du meinst…Was bitte zählt heute nicht mehr als HTML standard? Also welche Tags speziell? Weil mir da nichts bekannt ist…
Und mit margin:auto; erreiche ich irgendwie gar nix…
Siehe: http://www.LupiUpload.de/091102/FaDDkZzl.JPG
Und der Code (wiedermal…):
[CODE]
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
|
Eugeny Dimitriev auf Abwegen
|
Langsam krieg ich echt n Hammer mit dem Mist…warum muss HTML nur so unlogisch sein…
Hi,
mit Sicherheit nicht, das geht auch ohne JS, zumal JS ja auch nicht überall zur Verfügung steht.
koslowski
edit. HTML ist nicht unlogisch, es liegt an deinen mangelhaften Kenntnissen, das es für dich unlogisch erscheint
Mann kann keine Block-Box zentrieren der keine Breite zugewiesen wurde.
Sie nimmt 100% vom verfügbaren Platz ein. ein margin: auto würde das gleiche wie margin: 0 bedeuten.
Die Box muss also eine Breite kleiner als 100% haben damit der Außenabstand auf rechts und links aufgeteilt werden kann.
Die gefloateten Boxen dürfen zusammen nicht breiter sein wie die Box die sie umschließt.
Die Breite addiert sich aus width+border+padding. Zusätzlicher Platz wird auch durch margin verbraucht.
Deine Boxen sind jeweils 165px breit. Die umschließende Box müßte dem nach 495px breit sein.
Das dir html und css unlogisch erscheinen, mag daran liegen, dass in diesem Thread so viel geraten und gemutmaßt wurde.
…na toll…
Jetzt weiss ich erst recht nicht mehr was ich tun soll…
Erstellt man Grafiken, ergibt jede Breite, jede Angabe einen Sinn…
Übrigens: Das Bilodvergrösserungsscript hab ich dies hier: Ajax like DivViewer at its best
Nur zur Erklärung meines Script-Monsters…
Hm,
mit margin: auto; erreicht man, daß der Außenabstand rechts und links gleich groß ist.
Wenn eine Box aber die gesamte Breite einnimmt, gibt es keinen Außenabstand mehr.
Das ist wie einen 2m breiten Teppich in einem 2m breiten Korridor mittig auszurichten.
Gucke dir das mal an
html:
[code]
Eugeny Dimitriev auf Abwegen
Eugeny Dimitriev auf Abwegen
Eugeny Dimitriev auf Abwegen
#alle_kisten {
width: 498px;
margin: auto;
}
.bildkiste {
float: left;
width: 159px;
background-color: #CFCFCF;
border-left:1px solid #ffffff;
}
.bildkiste .blockbild {
display: block;
margin: auto;
}
.bildkiste span {
display: block;
width: 150px;
margin: auto;
}
[/code]Vielleicht hilft es dir zu verstehen.
Zusätzlich könntest du nach den Stichwörten float und Boxmodell googeln.
Jawoll jetzt passt es…
Wunderbar !!
Ich danke Dir !!!
