Divs naast elkaar plaatsen

[Verwijderd]

Hey ik wil voor men site allemaal afbeeldingen naast elkaar plaatsen met telkens een lijn van 1pixel dik (boven, onder, links en rechts) en de afbeeldingen moeten automatisch naar de volgende lijn gaan als het scherm wordt verkleint. Het is me reeds gelukt met float:left maar dit werkt niet in IE maar wel in Firefox. Om een of andere duistere reden verdwijnt alles binnen de div waarin float wordt gebruikt. Dan ben ik opzoek gegaan naar een andere methode en dan ben ik op lists gekomen. Door de display op inline te zetten komt het lijstje naast elkaar te staan maar dan zit ik met het probleem dat die lijn van 1pixel dik er niet meer is. Door margin: -1px te namen binnen elke <li> tag was het dan opgelost maar enkel voor wat links en rechts stond. De afbeeldingen die op de lijn er onder stonden kreeg ik niet op 1pixel afstand. Daar kwam nog eens bij dat de tweede lijn afbeeldingen een pixel naar rechts stonden waardoor het niet als een "grid" overkwam. Kortom, geen oplossingen enkel wat prutswerk. Ik heb dan nog eens met div display: inline geprober wat leidde tot het zelfde probleem met die 1pixel lijn ertussen. Het idiote van dit alles is dat vanaf ik float:left toevoeg alles werkt zoals het moet... in Firefox en niet Internet explorer. Wat ik dus zoek is: een grid van afbeeldingen met tussen elke afbeelding 1pixel zowel horizontaal als vertikaal. Deze afbeeldingen moeten automatisch naar de volgende rij overgaan als het scherm verkleint (en dus ook als de resolutie van de gebruiker anders is). Heeft iemand een idee want ongeveer drie dagen prutswerk en googlewerk heeft nog niets opgebracht.


EDIT: http://gert-janschulte.be/index.php

de fout is nog altijd niet gevonden. (scroll naar beneden voor meer info)

[ Voor 3% gewijzigd door Verwijderd op 23-08-2007 14:19 ]

[Kiphaas7]

Zou je een eenvoudige testcase met het probleem online kunnen plaatsen, of relevante code hier posten?

Een paar enter's in je verhaal zou trouwens ook niet erg zijn, beetje onoverzichtelijk nu..

[Verwijderd]

dat doen plaatjes toch automatisch al? beetje morrelen met margins / borders en opletten met whitespaces en je bent klaar

[Milt]

Je moet ook helemaal geen <li> tags gebruiken. Veel te ingewikkeld, zeker als het automatisch door moet lopen naar de volgende regel. Gebruik zo iets:

Cascading Stylesheet:

div.afbeeldingen { float: left; }
div.afbeeldingen img { float: left; padding: 0px 1px 1px 0px; }

HTML:

<div class="afbeeldingen">
  <img src="/images/1.gif" alt="" />
  <img src="/images/2.gif" alt="" />
  <img src="/images/3.gif" alt="" />
  <img src="/images/4.gif" alt="" />
  <img src="/images/5.gif" alt="" />
  <img src="/images/6.gif" alt="" />
</div>

Dit moet in alle browsers werken.

[ Voor 4% gewijzigd door Milt op 18-08-2007 00:36 . Reden: Code in [code] tags gezet ]

[Verwijderd]

Ik heb dat laatste eens uitgeprobeerd maar die float doet alles binnen die div verdwijnen in Internet Explorer in Firefox is alles ok.

Hieronder vind je wat ik al had gedaan met divs omdat er nog wat anders als een afbeelding in komt.

code:

    <div id="thumb_{$v.post_id}" class="main-thumb">
        <a href="topic.php?id={$v.post_id}" style="color: #000000">
        <div style="position: absolute; z-index: 1; height: 120px; width: 120px;"  onmouseover="new Effect.Appear('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})" onmouseout="new Effect.Fade('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})"></div>
        <div id="date_{$v.post_id}" style="position: absolute; display: none; background-color: #FFFFFF; width: 120px; text-align: center; font-size: 11px;">Gepost op <span style="color:#FF00CC">{$v.post_publish}</span></div>
        <img src="{$v.post_thumb}" alt="{$v.post_title}" title="{$v.post_title}" border="0"></a>        
    </div>

en dit als style voor main-thumb

code:

.main-thumb {

    float: left;
    width: 121px;
    height: 121px;

}

In firefox werkt dit perfect maar internet explorer toont dus niets. Is er iets anders wat de oorzaak kan zijn dat die float niet werkt in internet explorer?

[Milt]

Je zorgt er zelf voor dat er een grote afstand is tussen de afbeeldingen op de regels door de hoogte vast te zetten op 121px terwijl het plaatje dat wellicht niet is. Als je geen width en height zet, past de layer zichzelf aan aan de content. Met padding 1px zorg je dan voor de juiste afstand.

Cascading Stylesheet:

.main-thumb {
    float: left;
    padding: 0px 1px 1px 0px;
    line-height: 0px;
    font-size: 0px;
}
.main-thumb span {
    line-height: 11px;
    font-size: 11px;
}

De layer met position:absolute en width/height van 120px heb je helemaal niet nodig. Je kunt die mouse-over effecten ook met de A tag doen. Ik weet natuurlijk niet precies wat de bedoeling is, maar het volgende lijkt me ongeveer hetzelfde te doen met minder code:

Cascading Stylesheet:

a.main-thumb {
    display: block;
    float: left;
    padding: 0px 1px 1px 0px;
    line-height: 0px;
    font-size: 0px;
}
a.main-thumb span {
    line-height: 11px;
    font-size: 11px;
}

HTML:

<a href="topic.php?id={$v.post_id}" id="thumb_{$v.post_id}" class="main-thumb" onmouseover="new Effect.Appear('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})" onmouseout="new Effect.Fade('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})">
    <div id="date_{$v.post_id}" style="position: absolute; display: none; background-color: #FFFFFF; text-align: center; font-size: 11px;">Gepost op <span style="color:#FF00CC">{$v.post_publish}</span></div>
    <img src="{$v.post_thumb}" alt="{$v.post_title}" title="{$v.post_title}" border="0">
</a>

[Verwijderd]

Bedankt, de code die jij hebt gemaakt is eenvoudiger en werkt beter maar nog steeds zit ik met het probleem dat er in internet explorer niets wordt weergegeven. De ruimte die zou worden gebruik is gewoon wit er zijn geen afbeeldingen te zien. Internet Explorer aanvaard die float precies niet maar dat is enkel het geval bij dit project. Bij andere werkte het gewoon aan wat kan dat liggen?

[Milt]

Ik heb bovenstaande code getest in IE6 en dat werkt (de variabele dan even vervangen door een lokale image). Heb je misschien een linkje naar de online omgeving, kan ik daar even kijken.

[Verwijderd]

Maar ik test het in mijn locale omgeving tegelijk in firefox en internet explorer. Maar aangezien het zeker niet aan de code gaat liggen heb ik ergens iets fout gedaan denk ik. Zou het aan het doctype kunnen liggen? Ik gebruik nu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[Milt]

Nee, denk het niet. Ik denk eerder dat het aan de HTML / CSS ligt die er omheen staat, vandaar de vraag om een linkje. De code waarmee ik test werkt prima in IE6.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<style type="text/css">

a.main-thumb {
    display: block;
    float: left;
    padding: 0px 1px 1px 0px;
    line-height: 0px;
    font-size: 0px;
}
a.main-thumb span {
    line-height: 11px;
    font-size: 11px;
}

</style>

<body>

<a href="topic.php?id={$v.post_id}" id="thumb_{$v.post_id}" class="main-thumb" onmouseover="new Effect.Appear('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})" onmouseout="new Effect.Fade('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})">
    <div id="date_{$v.post_id}" style="position: absolute; display: none; background-color: #FFFFFF; text-align: center; font-size: 11px;">Gepost op <span style="color:#FF00CC">{$v.post_publish}</span></div>
    <img src="file://test.jpg" alt="{$v.post_title}" title="{$v.post_title}" border="0">
</a>

<a href="topic.php?id={$v.post_id}" id="thumb_{$v.post_id}" class="main-thumb" onmouseover="new Effect.Appear('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})" onmouseout="new Effect.Fade('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})">
    <div id="date_{$v.post_id}" style="position: absolute; display: none; background-color: #FFFFFF; width: 120px; text-align: center; font-size: 11px;">Gepost op <span style="color:#FF00CC">{$v.post_publish}</span></div>
    <img src="file://test.jpg" alt="{$v.post_title}" title="{$v.post_title}" border="0">
</a>

<a href="topic.php?id={$v.post_id}" id="thumb_{$v.post_id}" class="main-thumb" onmouseover="new Effect.Appear('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})" onmouseout="new Effect.Fade('date_{$v.post_id}', {literal}{duration: 0.2}{/literal})">
    <div id="date_{$v.post_id}" style="position: absolute; display: none; background-color: #FFFFFF; width: 120px; text-align: center; font-size: 11px;">Gepost op <span style="color:#FF00CC">{$v.post_publish}</span></div>
    <img src="file://test.jpg" alt="{$v.post_title}" title="{$v.post_title}" border="0">
</a>

</body>

</html>

[Verwijderd]

Sorry dat ik niet vroeger een link gepost heb maar ik wou eerst de rest wat afwerken.

http://gert-janschulte.be/index.php

ik kom er maar niet uit waar de fout zou liggen. In IE krijg ik mijn afbeeldingen niets te zien. Als er trouwens commentaar zou zijn op het design mag je dit altijd geven.

[Wizz15]

probeer eens met css 'position:relative;' te zetten op de elementen die je niet te zien krijgt in internet explorer

[Verwijderd]

Yup nu krijg ik ze wel te zien maar de afstand boven en onder is wel groter dan 1px maar daar komt ik wel uit. Het effect daarin tegen (die fade over wanneer het gepost is krijg je daar nu wel niet meer te zien...)

[Milt]

Zoals ik al in mijn code had staan, moet je de mouseover en mouseout verplaatsen naar de A tag. IE6 ondersteunt geen mouseovers op DIV elementen, alleen op A elementen. Die hele layer met "<div style="position: absolute; etc..." kan volgens mij echt weg. Dat kan de A tag, die je toch nodig hebt, prima doen.

Edit: Sorry, mouseovers zijn wel ondersteund op DIV's. Ik was in de war met de :hover selector in CSS, die werkt bij IE6 alleen op A tags. Echter, ik blijf van mening dat je DIV weg kan doen en gewoon alleen met een A tag kan werken. Heb je overigens al getest of in IE6 de javascript bij onmouseover of onmouseout wel aangeroepen wordt ? Is het niet een probleem met de javascript library die je gebruikt ?

[ Voor 40% gewijzigd door Milt op 25-08-2007 00:27 ]

[Verwijderd]

Ok die mouseover werkt. Aan de js library kon het niet liggen want die is scriptaculo. Die div kan echt niet weg . Ik heb het geprobeerd... de div met datum verschijnt dan wel maar vanaf je erop zit fade die weer weg... als hij weg is zit je weer in die andere div-> fade in en zo een loopje dus die div moet echt wel blijven. Voor de rest is nu alles ok buiten het feit dat hij meer dan een pixel ruimte geeft tussen vertikale afbeeldingen. Kijk maar http://www.gert-jaschulte.be

[Verwijderd]

Wat betreft afbeeldingen en andere elementen die binnen de div's zitten waar float gebruikt wordt. Dit is een bekende IE-bug waar ik de laatste tijd ook enkele keren last van heb gehad. Position:relative dan wel in combinatie met zoom:1; (div) werkt vaak.

Het heeft te maken met IE die geen update doet op de display van de elementen in de div. Met zoom:1 kun je dat forceren.