[css] Float left image

donderdag 10 december 2009 11:17

Acties:

0 Henk 'm!

Voor Geen Cent Gaat De Zon Op

Topicstarter

Heb een vreemd probleem geconstateerd waar ik niet direct kan achterhalen waar het door komt en hoe dit op te lossen

Kopieer en plak de volgende code in een lege .html pagina

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>test</title>

    <style type="text/css">
    * {margin:0; padding:0}
    #container {margin:20px}
    #plaatje {float:left; margin:0 40px 0 0}
    li {background:#FFF url(http://www.iphoneappreviews.net/images/bullet_10x10.gif) 0 6px no-repeat; padding:0 0 0 20px; list-style-type:none}
    </style>

</head>
<body>

<div id="container">
<div id="plaatje"><img src="http://www.kickassmysticninjas.com/images/kamn_300x300.jpg" />
</div>
    <p>Lorem Ipsum is simply <a href="">dummy text</a> of the printingy textnd scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <ul>
    <li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li>
    </ul>
    </div>

</body>
</html>

Code kan tusssen [code=html][/] tags worden geplaatst

Wanneer je de float:left weghaalt van de #plaatje dan zie je dat alle LI's voorzien van een achtergrond.
Bij toevoeging van een float:left wordt de achtergrond plaatje over de hele breedte gezet - en dus achter het plaatje verdwijnt)

Hoe kan ik dit oplossen zonder een aparte div te definieeren links en rechts?

[ Voor 1% gewijzigd door BtM909 op 10-12-2009 11:29 ]

donderdag 10 december 2009 11:24

Acties:

0 Henk 'm!

mithras

Het gaat om je list-style-position gok ik zo. Standaard outside, waardoor hij achter de floating body valt.

donderdag 10 december 2009 11:28

Acties:

0 Henk 'm!

kaesve

ik zie helemaal geen achtergrond? bij mij is alles wit (op het plaatje en de zwarte tekst na). of ik nou een float heb of niet..

getest in firefox en de float weggehaald dmv firebug..

edit:: nvm, ik zie nu wat je bedoelt.. de 'bullets' verdwijnen inderdaad met een float.. ik heb alleen echt totaal geen idee hoe dit komt :0

[ Voor 27% gewijzigd door kaesve op 10-12-2009 11:32 ]

donderdag 10 december 2009 11:29

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Ik zie alleen dat je img over de li background gefloat wordt? Bij mij geen repeating background?

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 10 december 2009 11:32

Acties:

0 Henk 'm!

Ram0n

Bierbrouwende nerd

mithras schreef op donderdag 10 december 2009 @ 11:24:
Het gaat om je list-style-position gok ik zo. Standaard outside, waardoor hij achter de floating body valt.

Hij definieert een background en stelt de list-type op none, dus dat zou niet uit moeten maken. Even testen bevestigd dat. Verder ben ik ook nog aan het rommelen...

Als je de achtergrond van de li's op een fixed color instelt zie je dat de li inderdaad helemaal links begint (achter de grote image), daar zit het probleem. Ik kan me herinneren dat lists sowieso problemen hebben met floaten achter/naast grotere objecten, wellicht weet iemand hier daar een workaround voor?

MueR schreef op donderdag 10 december 2009 @ 11:29:
Ik zie alleen dat je img over de li background gefloat wordt? Bij mij geen repeating background?

Klopt, dat bedoelt hij ook niet volgens mij. De startpost is wat vaag gedefinieerd

[ Voor 17% gewijzigd door Ram0n op 10-12-2009 11:33 ]

Eigenaar/brouwer Milky Road Brewery

donderdag 10 december 2009 11:34

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Het gaat er volgens mij om, de <li> heeft een background-image om als bullets te dienen. Die staat helemaal links uitgelijnd, maar door de <img> links te floaten komt deze "over" de <li> te staan; de tekst er in wordt wel naar rechts gezet, de achtergrond (bullet) blijft achter de <img> hangen.

Zou zo 1,2,3, even geen oplossing weten eigenlijk - dit is volgens mij standaard gedrag; een oplossing is misschien de <ul> een float:left; te geven, maar dan blijven alle <li>'s onder elkaar, en niet tegen de kantlijn wanneer mogelijk (onder de <img>).

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 10 december 2009 11:35

Acties:

0 Henk 'm!

macciez

Ik begrijp niet zo 1 2 3 wat je bedoelt, maar hier zie ik dat bij float:left je bullets van de LI's naast het plaatje achter het plaatje vallen. Zou op te lossen zijn door je UL ietwat naar rechts te positioneren. edit: sorry had niet getest, is niet the workaround

Verder vraag ik me af waarom je die list zo half naast en half onder het plaatje zou willen hebben, echt mooi ziet het er niet uit. Ook is het een beetje overkill om een DIV te gebruiken puur om 1 plaatje te laten zien...

[ Voor 5% gewijzigd door macciez op 10-12-2009 11:36 ]

Do what you love, do it often

donderdag 10 december 2009 12:03

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

macciez schreef op donderdag 10 december 2009 @ 11:35:
Ik begrijp niet zo 1 2 3 wat je bedoelt, maar hier zie ik dat bij float:left je bullets van de LI's naast het plaatje achter het plaatje vallen. Zou op te lossen zijn door je UL ietwat naar rechts te positioneren. edit: sorry had niet getest, is niet the workaround
Verder vraag ik me af waarom je die list zo half naast en half onder het plaatje zou willen hebben, echt mooi ziet het er niet uit. Ook is het een beetje overkill om een DIV te gebruiken puur om 1 plaatje te laten zien...

Het is wel de methode voor de minste html code

Je hebt een image welke je een float:left geeft waardoor tekst rechts wordt uitgelijnd.
Enige probleem welke ik ondervind is dat de background in de LI's niet goed worden weergegeven

donderdag 10 december 2009 12:10

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Die background wordt prima weergegeven, alleen zit er zo'n verdraaide float overheen. Overigens is me niet helemaal duidelijk waarom je een bullet via background gaat doen, in plaats van de daarvoor bedoelde list-style-image property.

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 10 december 2009 12:22

Acties:

0 Henk 'm!

Thomasje

Semacode

MueR schreef op donderdag 10 december 2009 @ 12:10:
Die background wordt prima weergegeven, alleen zit er zo'n verdraaide float overheen. Overigens is me niet helemaal duidelijk waarom je een bullet via background gaat doen, in plaats van de daarvoor bedoelde list-style-image property.

Heb even een test gedaan met list-style-image zoals MueR al aangaf en dat werkt. Je kan die bullets ook nog wat alignen.

donderdag 10 december 2009 12:53

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

list-style-image werkt inderdaad!

[ Voor 234% gewijzigd door ZOMERZON op 11-12-2009 01:28 ]

vrijdag 11 december 2009 01:28

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

Maar kom achter het volgend probleem.
Kan geen extra marge of padding meegeven aan de list items die nu naast de image staan

Copy / paste onderstaande code voor voorbeeld

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>test</title>

    <style type="text/css">
    * {margin:0; padding:0}
    #container {margin:20px; width:700px;}
    #plaatje {float:left; margin:0 40px 0 0}
    li {list-style-type:none; list-style-image:url("http://www.iphoneappreviews.net/images/bullet_10x10.gif"); list-style-position:outside; margin:0 0 0 

60px; }
    </style>

</head>
<body>

<div id="container">
<div id="plaatje"><img src="http://www.kickassmysticninjas.com/images/kamn_300x300.jpg" />
</div>
    <p>Lorem Ipsum is simply <a href="">dummy text</a> of the printingy textnd scrambled it to make a type specimen book. It has survived not only five 

centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 

sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <ul>
    <li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd asfasfsd 

asfasfsd 

asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfa

sfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li><li>asfasfsd</li>
    </ul>
    </div>

</body>
</html>

vrijdag 11 december 2009 10:26

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je probleem zit hem niet zozeer in de margins, meer in het niet zo goed begrijpen van floats. Open deze test voor de grap eens in Firefox en kijk met Firebug naar je ul. Je zal zien dat die ul gewoon tegen de linker rand van de pagina aan zit. De list items ter hoogte van het plaatje worden niet beinvloed door een margin left, die onder het plaatje wel. Nou ja, dat zeg ik verkeerd. Ze lijken niet beinvloed te worden. Die float verknald een hoop.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 11 december 2009 12:20

Acties:

0 Henk 'm!

edeboeck

mie noow noooothing ...

@TS:
Het is me echt niet volledig duidelijk wat je nu eigenlijk wilt... kan je dat even met een schetsje tonen?

vrijdag 11 december 2009 12:25

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

MueR > met Ctrl+Shift+F had ik ook gezien dat de UL (en andere) tegen de kantlijn aanzit
wel apart, heb ook geprobeerd om de float zelf wat attributen te geven waardoor hij misschien wel als een normaal 'blok' gezien wordt

vrijdag 11 december 2009 12:26

Acties:

0 Henk 'm!

macciez

Wat is na de update precies het probleem? Hier ziet het er normaal uit. Een tekst en een lijst die rechts naast die image beginnen en dan de lijst die onder de image door gaat? Wat gaat er precies fout?

edit: ben nu al tijdje van alles aan het proberen, maar lists zijn gewoon kut

[ Voor 17% gewijzigd door macciez op 11-12-2009 12:48 ]

Do what you love, do it often

vrijdag 11 december 2009 12:32

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

Dit is de huidige situatie
http://img109.imageshack.us/i/huidige.jpg/

Wanneer ik een marge meegeef dan zullen de list items onder de float wel deze marge pakken, maar degene naast de float niet.
De ideale situatie is dus
http://img684.imageshack.us/i/nieuwe.jpg/

[ Voor 15% gewijzigd door ZOMERZON op 11-12-2009 12:33 ]

vrijdag 11 december 2009 12:49

Acties:

0 Henk 'm!

Grote Schurk

Mooi is anders, maar dit werkt iig in webkit en firefox, andere browsers (lees: IE) niet getest.

Cascading Stylesheet:

1
2
3

background: url(http://www.iphoneappreviews.net/images/bullet_10x10.gif) no-repeat 40px 5px;
display: table;
padding-left: 60px;

vrijdag 11 december 2009 13:21

Acties:

0 Henk 'm!

macciez

http://www.smashingmagazi...and-resources/#more-16064
Wellicht nog interessant voor je. Heb het zelf nog niet gelezen

Do what you love, do it often

vrijdag 11 december 2009 13:42

Acties:

0 Henk 'm!

ZOMERZON

Voor Geen Cent Gaat De Zon Op

Topicstarter

FritsYpeij schreef op vrijdag 11 december 2009 @ 12:49:
Mooi is anders, maar dit werkt iig in webkit en firefox, andere browsers (lees: IE) niet getest.
Cascading Stylesheet:
1
2
3
background: url(http://www.iphoneappreviews.net/images/bullet_10x10.gif) no-repeat 40px 5px;
display: table;
padding-left: 60px;

Is een erg goede eigenlijk, dank!

In IE6 en IE7 wordt het nog niet goed weergegeven alleen

Edit: Dan maar exclusies voor ie6 en 7 wat andere CSS opmaak ervan gemaakt...
Thanks all voor de hulp - ligt meerendeels dus aan display:table en width

[ Voor 14% gewijzigd door ZOMERZON op 14-12-2009 18:10 ]

Onderwerpen