Avaleht
uus teema   vasta Tarkvara »  WWW »  CSS-s väike mure märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
pmz
HV vaatleja

liitunud: 05.07.2008




sõnum 11.08.2009 21:42:38 CSS-s väike mure vasta tsitaadiga

Nimelt on mul üks suur div, kus sees on väiksed divid, mis sisaldavad thumbnail'e.
Mozillas kõik töötab ilusti, kuid IE ja Chrome panevad need väiksed divid üksteise alla.

Väikeste divide css:


#thumbnail {
float:left;
padding:10px;
margin-left:10px;
margin-top:10px;
border:1px dotted #CCCCCC;

}


Ilmselt on sellele kerge lahendus, aga ise ei tule hetkel selle peale.
Manus
Mujal
Mujal
Mozillas
Mozillas

tagasi üles
vaata kasutaja infot saada privaatsõnum
iceincube
HV veteran
iceincube

liitunud: 18.11.2005




sõnum 11.08.2009 21:55:35 vasta tsitaadiga

äkki on süüdlaseks margin...
Kuna IE's on box model teissugune.
Ehk siis 2 thumbi ei mahu ära üldisesse DIV-i IE's

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
Kommentaarid: 39 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 37
tagasi üles
vaata kasutaja infot saada privaatsõnum
pmz
HV vaatleja

liitunud: 05.07.2008




sõnum 11.08.2009 22:05:42 vasta tsitaadiga

iceincube kirjutas:
äkki on süüdlaseks margin...
Kuna IE's on box model teissugune.
Ehk siis 2 thumbi ei mahu ära üldisesse DIV-i IE's

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug


Proovisin seda ka ise, muutsin divi kus sees thumbid on kaks korda laiemaks, kahjuks polnud sellest kasu.
tagasi üles
vaata kasutaja infot saada privaatsõnum
iceincube
HV veteran
iceincube

liitunud: 18.11.2005




sõnum 11.08.2009 22:26:43 vasta tsitaadiga

IE box model kargas igastahes esmalt pähe kuna IE's oli probleem icon_smile.gif aga ok.
Ise olen saanud selliste asjade määramisega ilusti õigeks taolise asja... overflow ja width on tähtsad ...
Toon näite ..


#thumbs_wrapper {
   width: 200px;
   overflow: hidden;
}


.thumb {
   float: left;
   width:  98px;
   height: 100px;
   overflow: hidden;
}


See XHTML 1.0 strict-is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Ei oskagi muud moodi aidata
Kommentaarid: 39 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 37
tagasi üles
vaata kasutaja infot saada privaatsõnum
DoS
HV veteran
DoS

liitunud: 19.08.2002




sõnum 11.08.2009 22:29:01 vasta tsitaadiga

pmz kirjutas:
iceincube kirjutas:
äkki on süüdlaseks margin...
Kuna IE's on box model teissugune.
Ehk siis 2 thumbi ei mahu ära üldisesse DIV-i IE's
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Proovisin seda ka ise, muutsin divi kus sees thumbid on kaks korda laiemaks, kahjuks polnud sellest kasu.

pane sealt lehelt just tähele sellist kohta: Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations.
ehk siis pane õige doctype ja saab loodetavasti asja paremaks
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 47
tagasi üles
vaata kasutaja infot saada privaatsõnum
pmz
HV vaatleja

liitunud: 05.07.2008




sõnum 11.08.2009 22:52:58 vasta tsitaadiga

Panen kogu koodi, ehk siis suure divi algusest kuni lõpuni



<div  style="width:600px;margin-left:40px;overflow: hidden;">
                   <div id="thumbnail">
         <a href='images/stories/imagebrowser/pildid/Desert.jpg' rel='lightbox[]' title=''>            <img src="/joomla/images/stories/imagebrowser/pildid//thumb/Desert.jpg"
                       class="thumbnail" alt="Desert.jpg" border="0" />
         </a>
      </div>
                <div id="thumbnail">
         <a href='images/stories/imagebrowser/pildid/Desert0.jpg' rel='lightbox[]' title=''>            <img src="/joomla/images/stories/imagebrowser/pildid//thumb/Desert0.jpg"
                       class="thumbnail" alt="Desert0.jpg" border="0" />
         </a>
      </div>
                <div id="thumbnail">
         <a href='images/stories/imagebrowser/pildid/Hydrangeas.jpg' rel='lightbox[]' title=''>            <img src="/joomla/images/stories/imagebrowser/pildid//thumb/Hydrangeas.jpg"
                       class="thumbnail" alt="Hydrangeas.jpg" border="0" />
         </a>
      </div>
                <div id="thumbnail">
         <a href='images/stories/imagebrowser/pildid/Koala.jpg' rel='lightbox[]' title=''>            <img src="/joomla/images/stories/imagebrowser/pildid//thumb/Koala.jpg"
                       class="thumbnail" alt="Koala.jpg" border="0" />
         </a>
      </div>


css thumbnaili jaoks


#thumbnail {
float:left;
padding:10px;
border:1px dotted #CCCCCC;
overflow: hidden;
}



Kasutan Joomlat, et kas seal saab üldse Strictiks muuta või kas üldse tohib?
Edit:
Pea juba lolliks läinud, muidugi saab muuta aga muutus ainult see, et nüüd tekkis thumbide vahele vahe ülevalt alla vaadates. Üksteise kõrvale nad ikka ei läinud.
tagasi üles
vaata kasutaja infot saada privaatsõnum
Puravik
HV kasutaja

liitunud: 05.11.2001




sõnum 12.08.2009 07:57:54 vasta tsitaadiga

see koodijupp töötab küll õigesti nii IE6, kui ka IE7. Ehk mõni Joomla enda deklaratsioon kusagil css-is on probleemi põhjuseks. Thumbnailid on arvatavasti kõik ühesuurused, siis võiks prooviks fikseerida #thumbnail -is width: ja height:
Kommentaarid: 1 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 0
tagasi üles
vaata kasutaja infot saada privaatsõnum
pmz
HV vaatleja

liitunud: 05.07.2008




sõnum 12.08.2009 09:36:05 vasta tsitaadiga

Ütleme siis nii, et IE-s asi töötab. Nüüd on kolmest lehitsejast Chrome ainuke, mis kuidagi ei taha ilusti näitama hakata. Proovisin ka width ja height fikseerida, aga ei midagi. Chrome näitab thumbe üksteise all ja kõik.
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 12.08.2009 12:47:12 vasta tsitaadiga

Vaata korra seda lehte, kas ikka pole korras? LEHT
Esimene pilt on pandudki suur ja seetõttu jääb ülemisele reale, teised on all reas.
Minul näitab kõigi browseritega sedasi, ka Chromega.
Kood on sinu kood.

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002




sõnum 12.08.2009 12:47:25 vasta tsitaadiga

Muide HTML lehel ei saa olla mitu elementi sama IDga. Kasuta CLASSi
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Number47
Kreisi kasutaja
Number47

liitunud: 07.09.2004



Autoriseeritud ID-kaardiga

sõnum 19.09.2009 15:57:17 vasta tsitaadiga

Renka, tahtsin just sama öelda. Ise omalajal kah samasse orki lennanud. Pole midagi keerulist: lihtsalt asenda CSS'is ühed trellid punktiga ja HTML'is id= tekstiga class=
_________________
Ärifoorumi tehingud alaealistega vaid vanemate kirjaliku nõusoleku esitamisel!
Kommentaarid: 138 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 110
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  CSS-s väike mure
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.