Probleme mit div

[mangani84]

Hallo zusammen, habe ein Problem und komme nicht dahinter, was ich falsch mache. Ich habe eine div Box erstellt Namens "wrapper". In dieser Box sollen weitere kleine Boxen, worin kleine Fotos reinkommen sollen. 6 in einer Reihe und dann beginnend mit der nächsten Zeile weitere 6. Dieser wrapper soll als Umschlag dienen, da ich diesem auch mit einem 1px Rand verziert habe. Das Problem ist, dass die Fotoboxen nicht in dem wrapper, sondern unter ihm dargestellt werden :-|. Will die aber in den wrapper haben. Was mache ich da nur falsch??
Gruß
mangani84

Hier mal das html:

<div id="wrapper">
<div class="fotozwischenraum"></div>
<div class="foto"></div>
<div class="fotozwischenraum"></div>
<div class="foto"></div>
<div class="fotozwischenraum"></div>
<div class="foto"></div>
<div class="fotozwischenraum"></div>
<div class="foto"></div>
<div class="fotozwischenraum"></div>
<div class="foto"></div>
<div class="fotozwischenraum"></div>
</div>
<!--Ende wrapper-->

und hier meine CSS Befehle:

#wrapper {
width: 740px;
margin: 10px auto;
border-right: solid 1px #fff;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
}

.fotozwischenraum {
width: 19px;
height: 100px;
float: left;
}


.foto {
width: 100px;
height: 100px;
float: left;
}

 

[Chigurh]

Hi,
warum der ganze Aufwand mit den "Fotozwischenraum" und "Foto"-Boxen? Kannst du die Bilder nicht in der entsprechenden Größe bereitstellen, dann in deinen Wrapper stecken und mit Margins versehen? Finde die Geschichte mit den Fotozwischenräumen da unschön gelöst. Ich denke das liegt an diesem verwirrenden System von divs und floats. Nimmt man die floats raus, zieht der Rahmen plötzlich um alles.

Ich würde das insgesamt anders lösen, ohne die ganzen Boxen.

LG

 

[mangani84]

Hallo zusammenn!

@Chigurh
Vielen Dank für die schnelle Antwort. Oje, daran merkt man, das ich Anfänger bin . Ich kann also einfach die Fotos in den wrapper einfügen und mit margins im CSS versehen? Dann muss ich die Fotos nur noch mit einer class versehen, richtig? Da sollen nähmlich über 100 Fotos rein, welche man nachher anklicken kann, damit sie groß werden.

LG back

 

[Chigurh]

Ja, das würde ich mal ausprobieren.
Wie hast du dir das denn vorgestellt mit dem "groß werden"? Link drauf und dann n Popup? Oder wie?

 

[mangani84]

Vielen Dank für die Hilfe, werde ich gleich mal ausprobieren.
Fotos sind Links. Wenn du auf einem der kleinen 100px breiten Fotos klickst, wird sich ein neues Fenster öffnen und das Große erscheinen. Hatte ursprünglich vor, dass das Bild größer wird, wenn man mit der Maus drüber fährt, aber das bekomme ich nicht hin. Mit CSS glaube ich auch zu aufwendig.

 

[koslowski]

Hi,

wer floatet muss auch clearen, sonst wird das nix.

Erstmal die divs class="fotozwischenraum" alle rausschmeissen.
Die divs für die Fotos brauchst du auch nicht.
height für fotozwischenraum und foto gehört auch rausgeschmissen.

Die Fotos gehören in eine ungeordnete Liste:

<ul>
<li><a href="grossesFoto.htm"><img src="foto.jpg" alt="Text" width:"100" height="100" /></a></li>
<li><a href="grossesFoto2.htm"><img src="foto2.jpg" alt="Text" width:"100" height="100" /></a></li>
</ul>

Die Abstände regelst du mit padding/margin für die Listenpunkte.
Du schaust wieviel Fotos in eine Reihe gehen und so lang wird dann deine Liste. Brauchst du eine zweite Reihe machst du noch eine ul.

Damit die Listenpunkte nicht untereinander stehen sondern in einer Reihe,
kannst du li display:inline; geben.

Wenn du floaten willst gibst du li float:left; dann mußst du aber nach jeder
ul (d.h. nach jeder Reihe) clearen.
Füge dazu zwischen und/oder nach ul folgende zeile ein:

<hr class="clear" />

CSS für class="clear"

.clear  {
    clear:both;
    height:0;
    width:0;
    visibility:hidden;
    border:0;
     }

Mit float hast du mehr Kontrolle über die Darstellung, aber du mußst auch einiges mehr beachten (wegen IE wie immer)..

Mit display:inline; geht es einfacher aber du hast nicht ganz so viel Kontrolle über die Darstellung (macht aber oft nix!).

koslowski

ps. Die Bilder beim hovern vergrößern geht auch, da hover auf alle Elemente anwendbar ist, der IE6 akzepiert hover allerdings nur in Verbindung mit a.

 

[mangani84]

Hi and thanks @ all :)

@koslowski, danke dir für die detailierte Beschreibung. Werde es gleich mal versuchen umzusetzen. Aber eine Sache interessiert mit jetzt brennend:

"ps. Die Bilder beim hovern vergrößern geht auch, da hover auf alle Elemente anwendbar ist, der IE6 akzepiert hover allerdings nur in Verbindung mit a."

Das heisst, das Bild würde beim rüberscrollen gößer werden, richtig. Könntest du mir ein Beispiel schicken, wie ich dies einbauen könnte?

Währe echt spitze.

Thanks

 

[koslowski]

Mahlzeit,

Zitat von mangani84:
Das heisst, das Bild würde beim rüberscrollen größer werden, richtig. Könntest du mir ein Beispiel schicken, wie ich dies einbauen könnte?

das Problem dabei ist das, wenn sich das Bild beim hovern vergrößert, zerhauts dir wahrscheinlich das Layout weil es die Bilder daneben/darunter wegschiebt.

Eine Lösung wäre vielleicht das gehoverte Bild mit position:absolute darzustellen, weil die anderen Elemente dann so tun als wäre das absolut positionierte Bild nicht da.

ul li  {
    position:relative;
     }

ul img:hover  {
    position:absolute;
    left:0;
    top:0;
    width:auto;
    height:auto;
     }

vielleicht so ungefähr, habs nicht getestet, mußt vielleicht etwas rumprobieren.
Geht leider nicht im IE6 da der mit img:hover nix anfangen kann.

Insgesamt finde ich die Lösung mit der gehoverten Vergrößerung in deinem Falle nicht so attraktiv, da wäre mir lieber das beim hovern ein optisches Signal kommt, daß das kleine Bild verlinkt ist (z.B. farbigen Rahmen um das gehoverte Bild).
Aber das ist natürlich Geschmackssache.;-)

koslowski

 

[neuroleptika]

IE6 hover

Auf A List Apart: Articles: Suckerfish Dropdowns
wurde ein Javascript vorgestellt, womit man dem IE5-6 das hovern auf alle möglichen Elemente beibiegen kann (Es fügt dem Element beim hover eine weiteres class ein). In dem Script müsstest du nur das li gegen img austauschen.
Wie groß (Dateigröße) sind deine vergrößerten Bilder?