Fylle ut overflødig mellomrom bilde

[KFKF]

Har en liste med flere bilder, hvorav det er 700px i max-bredde- og høydeverdi. Bildene flyter mot venstre og er i forskjellig høyder og bredder, men 700px i den ene eller andre retningen. I bredderetningen skulle jeg ønsket at bildene som ikke gikk til kant, fylte ut det overflødige mellomromet med en farge. Har knotet og rotet med de ulike liste-egenskapene, men oppnår ikke resultatet jeg ønsker. Eksempelvis:

ul#container li {
position: relative;
top: 240px;
list-style: none;
margin-right:10px;
width: 700px;
background-color: gray;
}

Gjør delvis det jeg ønsker. Jeg får enkelt og greit en grå boks som strekker seg de nevnte 700px i bredde, og til bunnen av listen. Jeg vil likevel ha en grå boks for hvert bilde, ikke en for alle. Jeg vil ha det som om jeg åpnet alle bildene i photoshop, gjorde canvas 700px bredt, og fylte ut det overflødige med gråfarge.

Er dette mulig? Eventuelt forståelig. Haha.

 

[spikre]

Jeg forstår ikke hva du spør etter. Legg ut et bilde med forklaring - sikkert en lett sak

 

[KFKF]

Bilde #1 er slik et resultat jeg ønsker å oppnå. Blåfargen er fotografi. Bilde #2 er så langt jeg foreløpig har kommet, men langt fra dit jeg vil.

Bilde-1:

Bilde-2:

 

[TorsteinO]

Mulig dette vil ordne det - hvis ikke er det bare et annet sted du må legge til det jeg la til nederst her:

ul#container li {
position: relative;
top: 240px;
list-style: none;
margin-right:10px;
width: 700px;
background-color: gray;
display: block;
}

 

[KFKF]

Du tenker på Display:block;? Den gir resultatet du ser på nr to der, hvor det svarte feltet ligger bak hele liste-elementet, ikke stopper med bildets høyde.

 

[TorsteinO]

Det er litt vanskelig å se nøyaktig hvor du skal plassere den uten å se koden, men det er den du trenger.

Mulig

#container li {
display: block;
}

gjør susen

 

[KFKF]

TorsteinO, jeg takker selvfølgelig for at du tar deg tid til problemet mitt, men jeg aner vireklig ikke hvor block-koden skal inn, jeg har prøvd den på alle variasjoner og muligheter av ul/li/container/img.

Er det en mulighet å gjøre det med en border-right? Eller lignende. For det er altså utrolig viktig, kosmetisk, at fargen (grå eller sort) holder samme høyde som hvert enkelt bilde og ikke flyter over i de andre.

 

[KFKF]

Løste det foreløpig med noe hidden overflow og 700px border-right, men koden er ikke så rafinert, tar gjerne imot noen fetere råd.