Avaleht
uus teema   vasta Tarkvara »  WWW »  Probleem keskele joondumisega 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
otsing:  
c3ltic
HV kasutaja

liitunud: 21.04.2007
sõnum 31.01.2008 23:50:31 Probleem keskele joondumisega vasta tsitaadiga
Probleem esineb Firefoxis, IE7 näitab nii nagu tahan, ehk siis DIV mille nimi on frame kuvatakse lehe keskele. Firefoxis on kogu kupatus aga vasakul.

Kood ise on järgmine:

css:
  1. body {
  2.     background: url('background.jpg') repeat-x;
  3.         background-color: #C4C5BF;
  4.         padding: 0;
  5.         font-family: tahoma;
  6.         font-size: 13px;
  7.         height: 100%;
  8.         position: absolute;
  9.         }
  10.  
  11. #frame {
  12.         width: 800px;
  13.         margin: 0 auto;
  14.         border: 0px solid;
  15.         padding: 0;
  16.         position: relative;
  17.         height: 100%;
  18. }


html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4" />
  5.         <link rel="stylesheet" type="text/css" href="stiil.css" media="screen" />
  6. </head><body class="body">
  7.  
  8. <div id="frame">
  9.        
  10. </div>
  11.  
  12. </body></html>


Seega, mida ma valesti teen, et Firefoxis asi keskel ei ole. Või on probleem Firefoxis?
Kommentaarid: 10 loe/lisa Kasutajad arvavad:  :: 2 :: 0 :: 8
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
iceincube
HV veteran
iceincube

liitunud: 18.11.2005
sõnum 31.01.2008 23:55:32 vasta tsitaadiga
margin-left: auto;
margin-right: auto;
juurde panna css-i #frame-ile. peaks aitama
Keegi teadjam võiks kommenteerida kas on nõige lahendus..


-e-
position: relative;
äkki see korra maha võtta kui see ei toimi. Mul oli ilma
Kommentaarid: 39 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 37
tagasi üles
vaata kasutaja infot saada privaatsõnum
c3ltic
HV kasutaja

liitunud: 21.04.2007
sõnum 01.02.2008 00:02:33 vasta tsitaadiga
on juba olemas ju

margin: 0 auto;

positioni eemaldamine ei aita.



edit: asi lahenes. body-le oli vaja lisada width: 100%

viimati muutis c3ltic 01.02.2008 00:04:51, muudetud 1 kord
Kommentaarid: 10 loe/lisa Kasutajad arvavad:  :: 2 :: 0 :: 8
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mks
HV veteran

liitunud: 27.09.2004
sõnum 01.02.2008 00:04:09 vasta tsitaadiga
#frame
{
position: absolute;
width: SIIA LAIUS, kas px või %;
left: 50%;
margin-left: siia miinusmärgiga pool laiusest;
}



Kui width on näiteks 60%, siis margin-left on -30%, kui width on 600px, siis margin-left on -300px... on küll natuke kakase häki muljega, aga kõik vastab standarditele ja levinud brauseritega probleeme pole olnud...
Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 9
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 01.02.2008 00:23:39 vasta tsitaadiga
tsitaat:
kui width on 600px, siis margin-left on -300px.

See vist nati jama. Kui nüüd erineva resoga vaatad, või lehte suurendad vähendad, jookseb kujundus ju täiesti paigast. Ärge sedsi küll tehke!
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
raido357
HV veteran

liitunud: 26.09.2002
sõnum 01.02.2008 00:28:16 vasta tsitaadiga
Tee eraldi konteiner div, mille sees kõik ülejäänud divid.

margin-left ja right määra auto ja peaks toimima.
Kommentaarid: 78 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 70
tagasi üles
vaata kasutaja infot saada privaatsõnum
Telempe
Kreisi kasutaja
Telempe

liitunud: 02.11.2002
sõnum 01.02.2008 01:37:52 vasta tsitaadiga
body {
position: absolute;
}

rikub ära.
_________________
ORLY? I hardly know her!
Kommentaarid: 22 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 21
tagasi üles
vaata kasutaja infot saada privaatsõnum
mks
HV veteran

liitunud: 27.09.2004
sõnum 01.02.2008 09:41:41 vasta tsitaadiga
andrusny kirjutas:
tsitaat:
kui width on 600px, siis margin-left on -300px.

See vist nati jama. Kui nüüd erineva resoga vaatad, või lehte suurendad vähendad, jookseb kujundus ju täiesti paigast. Ärge sedsi küll tehke!

bah, ei ole ju, ise kasutan seda koguaeg... pealegi on see igasuguste IE'de vanemate versioonide osas ka võrdlemisi lollikindel... kui sa ei tea, siis kontrolli, enne kui kommenteerid icon_wink.gif

mõtle loogiliselt natuke... left: 50% määrab selle, et selle 600px kasti vasak äär asub täpselt poole peal brauseris... ja kuna me tahame saada kasti keskele, lükkame lihtsalt seda kasti poole võrra tagasi vasakule oma laiusest...

alumisel pildil on kaks brauseriakent... ülemises on lükatud see 600px kast nii, et vasak äär asub täpselt keskel, alumisel on ta margin-left abil õigesse kohta joondatud... kuna kast asub alati vasakult 50% ja joondatakse tagasi, nii et kasti keskpunkt asub alati 50% kaugusel äärest, ei jookse ju midagi paigast...

edit: tutvu ka http://tutorials.alsacreations.com/centrer/ (lehe allosas, Negative margins)... niimoodi saab ka kõrgusega mängida


Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 9
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 01.02.2008 13:52:09 vasta tsitaadiga
icon_sad.gif Vabandust, minu viga.
Mul selle position absolutega kurvad kogemused, ei saanud asju paigale keskoha suhtes. Ise kasutan sellist mitme divi sees koodi.

</head>
<style type="text/css" media="all">

* {
   padding: 0;
   margin: 0;
   }
body {
   text-align: center;
   }
#main {
      width: 200px;
   height:200px;
   text-align: left;
   margin: 0 auto;   
   background: #66FF33;
}
#f {
   position: relative;
   }
#sisu1 {
   position: absolute;
   width:100px;
   height:100px;
   background: #FF0066;
   left:24px;
   top:100px;
   }
#sisu2 {
   position: absolute;
   width:300px;
   height:100px;
   background: #9900FF;
   left:224px;
   top:50px;
   }       
</style>
<body>
<div id="main">
<div id="f">
<div id="sisu1">Esimene sisu kast</div>
<div id="sisu2">Teine sisu kast, mis seisavad keskohasuhtes paigal
olenemata resolutsioonist või suurendamisest-vähendamisest.</div>
</div>
</div>

</body>

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  Probleem keskele joondumisega
[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.