• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 DIV Boxen nebeneinander..wie?

Status
Für weitere Antworten geschlossen.

BashGrinder

Neues Mitglied
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:
<div align="left">
<!--Bildkiste 1-->
<div style="position:absolute;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 1 Ende-->
</div>



<div align="center">
<!--Bildkiste 2-->
<div style="position:static;top:170px;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 2 Ende-->
</div>

<div align="right">
<!--Bildkiste 3-->
<div style="width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 3 Ende-->
</div>
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Werbung:
Das bezweifel ich, da musst du irgendwas falsch gemacht haben. Kleines Positiv-Beispiel:

Code:
<div style="float: left;width: 120px;">Box 1</div>
<div style="float: left;width: 120px;">Box 2</div>
<div style="float: left;width: 120px;">Box 3</div>
 
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 &nbsp; gesetzt.

Ergebnis:

Code:
<div align="left">
<!--Bildkiste 1-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 1 Ende-->
</div>


&nbsp;
<div align="center">
<!--Bildkiste 2-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 2 Ende-->
</div>

<div align="right">
<!--Bildkiste 3-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 3 Ende-->
</div>
 
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:
<div id="bild1">
  <img src="..." border="0"><br>
  Text Text Text.
</div>

<div id="bild2">
  <img src="..." border="0"><br>
  Text Text Text.
</div>

<div id="bild3">
  <img src="..." border="0">
  Text Text Text.
</div>

<br class="clear">
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;
}
Den CSS-Code kopierst du in deinen Editor und speicherst das ganze als style.css ab. Zwischen <head> und </head> fügst du dann das hier ein:

Code:
<link rel="stylesheet" type="text/css" href="style.css">
Müsste jetzt eigentlich funktionieren. :)
Deinen Javascript-Code musst du aber noch selber einfügen!
 
Werbung:
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:
<div style="float: left;width: 120px;">Box 1</div>
<div style="float: left;width: 120px;">Box 2</div>
<div style="float: left;width: 120px;">Box 3</div>

Und jetzt deinen zum Vergleich (etwas gekürzt):

Code:
<div>
 <div style="float: left;width: 120px;">Box 1</div>
</div>
<div>
 <div style="float: left;width: 120px;">Box 2</div>
</div>
<div>
 <div style="float: left;width: 120px;">Box 3</div>
</div>

Fällt dir was auf?
 
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 werden:cool:


Auszug Bilderbox 1:
EDIT:

Habe im Code was vergessen: Neuer Code:
Code:
<!--Bildkiste 1-->
<div id="bild1">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>

</div>
<!--Bildkiste 1 Ende-->



<!--Bildkiste 2-->
<div id="bild2">
<a href="#" onClick="dv.showDV(bild2);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/atlanta.jpg"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</div>
 
Werbung:
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:
<div align="center">
<!--Bildkiste 1-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 1 Ende-->




<!--Bildkiste 2-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 2 Ende-->



<!--Bildkiste 3-->
<div style="float:left;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 3 Ende-->
</div>
 
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:
<div style="text-align:center"> ODER MIT
<div style="margin:auto">
Probier beides aus, ich kann es nicht genau sagen, weil ich mir deinen Code nicht genau angesehen habe.
 
Werbung:
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:
<!--Bildkiste 3-->
<div style="margin:auto;width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
.....

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:
<div style="margin:auto">
<!--Bildkiste 1-->
<div style="width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 1 Ende-->



<!--Bildkiste 2-->
<div style="width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 2 Ende-->



<!--Bildkiste 3-->
<div style="width: 160px; padding-left: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bildkiste" width="150" style="padding-left: 3px;padding-right: 3px;padding-bottom:3px;">
<a href="#" onClick="dv.showDV(bild1);return false;">
<img border="0" width="150" height="113" alt="" src="/rookiecup/galerie/eugeny.jpg" style="margin-bottom:5px;margin-right:5px;margin-top:5px;margin-left:5px;"></a>
Eugeny Dimitriev auf Abwegen
<a href="#" onClick="dv.showDV(bild1);return false;">
<img src="/images/lupe.gif" border="0" width="12" height="13"></a>
</td>
</tr>
</table>
</div>
<!--Bildkiste 3 Ende-->
</div>


Langsam krieg ich echt n Hammer mit dem Mist...warum muss HTML nur so unlogisch sein......
 
Werbung:
Hi,

Der ganze Bilder/Javascript Kram muss drinne bleiben, damit die Bilder bei Klick geöffnet & vergrössert werden:cool:

mit Sicherheit nicht, das geht auch ohne JS, zumal JS ja auch nicht überall zur Verfügung steht.:wink:

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...:grin:
 
Werbung:
...na toll...
Jetzt weiss ich erst recht nicht mehr was ich tun soll...
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:
<div id="alle_kisten">

<p class="bildkiste">
<img class="blockbild" src="/rookiecup/galerie/eugeny.jpg" alt="bild1" width="150" height="130" />
<span>Eugeny Dimitriev auf Abwegen
<img src="/images/lupe.gif" alt="bild1" width="13" height="13" />
</span>
</p>

<p class="bildkiste">
<img class="blockbild" src="/rookiecup/galerie/eugeny.jpg" alt="bild1" width="150" height="130" />
<span>Eugeny Dimitriev auf Abwegen
<img src="/images/lupe.gif" alt="bild1" width="13" height="13" />
</span>
</p>


<p class="bildkiste">
<img class="blockbild" src="/rookiecup/galerie/eugeny.jpg" alt="bild1" width="150" height="130" />
<span>Eugeny Dimitriev auf Abwegen
<img src="/images/lupe.gif" alt="bild1" width="13" height="13" />
</span>
</p>
</div>
css:
Code:
* {
margin: 0;
padding: 0;
}

#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;
}
Vielleicht hilft es dir zu verstehen.

Zusätzlich könntest du nach den Stichwörten float und Boxmodell googeln.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.
Zurück
Oben