Oblanie obrazka tekstem, problem z <ul> Opcje

[yavaho]

Dalem taki przyklad oblania obrazka tekstem (lepiej to jest widoczne w mniejszym okienku) a ponizej to samo ale zamiast tekstu jest wypunktowanie. I mam problem z ustawieniem odpowiedniego marginesu w przypadku wypunktowania. Caly czas kropeczki sa schowane za obrazkiem.

[HTML] pobierz, plaintext 
<style>
.left {
	float: left;
}
.img {
	width: 90px;
	height: 90px;
	margin: 0px 5px 0px 100px;
	border: 2px solid #cccccc;
}
.txt {
	margin: 0px 100px 0px 100px;
}
.ul {
	margin: 0px 100px 0px 100px;
}
</style>
 
<div class="left">
  <img class="img" src="http://forum.php.pl/uploads/av-6503.png" />
</div>
 
<p class="txt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
 
<hr style="clear:both;" />
 
<div class="left">
  <img class="img" src="http://forum.php.pl/uploads/av-6503.png" />
</div>
 
<ul class="ul">
  <li>1</li><li>2</li><li>3</li>
  <li>4</li><li>5</li><li>6</li>
  <li>7</li><li>8</li><li>9</li>
</ul>
[HTML] pobierz, plaintext 

[Kill3R]

witam

no wiec tak:

1. dla znacznika li tez daj margin-left

nie ma sensu robic klasy np dla znacznika ul
mozna to zrobic w ten sposob

[HTML] pobierz, plaintext 
ul#cos {
margin: 0 0 0 20px;
}
#cos li {
margin: 0 0 0 20px;
}
 
<ul id="cos">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
[HTML] pobierz, plaintext 

2 nie powinno sie podawac przy wartosciach zerowych px
zero to jest zero niexaleznie od tego czy to sa cm px em czy jeszcze jakies inne wymiary

3. jesli bedziesz pisal jakies style dla wszystkich elementow np typu img nie trzeba dla nich klasy tworzyc. Mozna bezposrednio

[HTML] pobierz, plaintext 
img {
.........
}
 
<img src="" />
[HTML] pobierz, plaintext 

[yavaho]

Nie mam problemu z optymalizacja kodu CSS tylko z ustaleniem marginesów dla elementów wypunktowanych w taki sposob aby oblewaly obrazek identycznie jak to jest w przypadku tekstu, ktory zamiescilem w tym samym przykladzie. Nic nie osiagnalem ustalajac margin czy padding osobno dla UL czy LI. Nawet umieszczenie UL wewnątrz innego elenentu (div,span,p) nic nie zmienia. W dalszym ciagu nie umiem tego wypunktowania ulozyc tak jak tekstu. Jak masz jakis przyklad, ktory identycznie interpretuje IE, FF i Opera, to bym prosil o podpowiedz.

[revyag]

Kod

<style type="text/css">
.fleft {
    float:left;
    padding: 0 5px 5px 5px;
}
.img {
    display:block;
}
.txt {
    width:75%;
}
ul {
    margin:0 0 0 15px;
    padding:0;
}
br.clr {
    clear:both;
}
</style>

[HTML] pobierz, plaintext 
<img src="obrazek.jpg" alt=" " class="fleft img" />
    <div class="fleft txt">
        <ul>
        <li>
            Curabitur ac nulla. Vestibulum elementum pulvinar massa. Donec sed quam.
            Donec ac metus a lorem aliquam laoreet. Nullam tempor pede at tellus.
        </li>
        <li>
            Curabitur justo. Praesent nec enim in odio cursus ultricies. Ut ac nunc vitae
            sapien tempus nonummy. Phasellus ut massa quis magna porttitor bibendum.
            Vestibulum in ipsum.
        </li>
        <li>
            Morbi lacus magna, hendrerit ut, fermentum et, commodo non, ligula.
            Quisque vel tortor. Etiam dictum augue eget purus. 
        </li>
        </ul>
    </div>
    <br class="clr" /><br />
[HTML] pobierz, plaintext 

[yavaho]

@revyag w Twoim przykladzie obrazek nie jest oblany tekstem tylko tekst znajduje sie w bloku, ktory jest po prawej stronie obrazka.
Chodzi mi o takie cos tylko aby punktory byly poza tekstem (jako: outside).

[HTML] pobierz, plaintext 
<style>
.left {
	float: left;
}
.img {
	width: 90px;
	height: 90px;
	margin: 0px 15px 0px 100px;
	border: 2px solid #cccccc;
}
.ul {
	padding:0;
	margin: 0px 100px 0px 100px;
	list-style-position: inside;
}
</style>
 
<div class="left">
  <img class="img" src="http://forum.php.pl/uploads/av-6503.png" />
</div>
 
<ul class="ul">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </li>
</ul>
[HTML] pobierz, plaintext 

[revyag]

Nie tekst tylko lista. Swego czasu męczyłem się długo aby wstawić listę obok obrazka i tylko w ten sposób mi się udało.

[Axmahey]

Witam!
To powinno raczej być zrobione inaczej (podaje miszanke CSS z XHTML, reszte jakoś samemu ustawisz):

[HTML] pobierz, plaintext 
<head>
<style type="text/css">
img {padding: 10px; float: left}
ul {margin-left: 20px;
<!-- niewiem czy nie za dużo -->
}
</style></head>
<body>
<img src=""/><ul>
<li>Twoja treść
</ul>
</body>
[HTML] pobierz, plaintext 

Tak chyba jest prościej.

[revyag]

@Axmahey, ten kod niewiele wnosi, bo pod ie jest problem o którym mówi autor topica. Nie widać znaczników kolejnych elementów listy(kulek:)), wchodzą pod obrazek.

[siemakuba]

czołem,
małe rozwiązanie wykombinowane na szybko:

Kod

/*
    twoje .ul    
*/

.ul {
    margin: 0px 100px 0px 100px;
}

/*
    zamieniłem na
*/

.ul {
    margin: 0px 100px 0px 100px;
    list-style-position:inside;
}

U mnie jest OK pod FF 1.5, IE 6, Opera 8.5

-- EDIT --

Rozwiązanie było na szybko...
Przy dłuższym tekście zamieszonym w LI może to wyglądać nie tak jak chcesz.
Tekst, który zaiwinie się do nowej linii nie będzie wcięty, ale "obleje" się wokół kropki... no, nie wiem jak to napisać :) potestuj :)

Ten post edytował siemakuba 9.12.2005, 16:13:36

[yavaho]

@siemakuba ja juz to testowalem. Zobacz na moj ptrzyklad w trzecim moim poscie w tym wątku.
Jezeli punktory ustawi sie jako: list-style-position:inside to wszystko jest tak jak powinno byc, ale jak sie je uatawi jako: list-style-position:outside (domyślna wartość) to właśnie wtedy wystepuje ten problem i punktory wchodza na obiekt ktory powinny oblac.

[siemakuba]

@yavaho - masz rację... przeoczyłem... mea culpa.

pozdr.