Avaleht
uus teema   vasta Tarkvara »  WWW »  CSS menüüga probleem. 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:  
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006




sõnum 20.06.2008 01:56:16 CSS menüüga probleem. vasta tsitaadiga

Tere.
Tekkis css-is selline probleem.
Nimelt lehe vasakul ääres on mul vertikaalne menüü(ülevalt alla) .
Asi toimib nii, et vajutades näiteks "uudised", tuleb kohe menüüsse uudiste alla uudiste nimekiri.
Probleem nüüd selles, et ma ei jaga matsu, kuidas ma saan teha nii, et sisu ja menüü üksteisest ei sõltuks.
Praegu proovisin teha positsion:absolute; -ga, aga see ei lahendanud samuti probleemi ja ma ei tea kas ma olen väga loll kuid mina asjaga hakkama ei saanud.
Kui absolute ära võtta, on leht nii, nagu peab, AGA sisu alustab alles sealt, kus menüü osa lõppeb.

Ei ole kindel, kas seletasin nii, nagu vaja.
Igaljuhul, kes aidata raatsib(asi ei tohiks olla tegelt raske, lihtsalt, minu loogika ei jõudnud sinna), siis siin on väga lihtne sama süsteemiga asi:
http://www.friday.ee/kethmar/Untitled-1.htm



Asi, mida tahan, et lõpuks saaks, on see, et kogu lehe osa tuleks menüüga kaasa, kui menüü pikem on. Seda saab teha nii, et võtan absolute ära, kuid siis läheb sisu osa valesse kohta, kuigi vajalik on, et ta jääks samasse kohta, kus ta oli siis, kui absolute oli peal.
Olen kindel, et see pole raske asi.
Väga suured tänud neile, kes abistavad!

_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 08:45:25 vasta tsitaadiga

#menyline { float: left; }
#osa sisse lõppu pane div, millel paned clear: both css'ga
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002




sõnum 20.06.2008 09:02:24 vasta tsitaadiga

kui teed XHTMLis asja siis saab asjad väga lihtsalt kõrvuti. mõlemale elemendile float:left; HTML 4 puhul ei mäleta enam hästi kuidas tegutseda icon_redface.gif
_________________
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
Renka
HV Guru
Renka

liitunud: 01.04.2002




sõnum 20.06.2008 09:04:01 vasta tsitaadiga

mikk36, proovisid hetkel ise järgi ka? See lahendus töötab XHTML'is ilusasti aga hetkel kiiruga firebugis proovides ma soovitud tulemust ei saanud (HTML 4 määranguga).
_________________
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
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 09:12:20 vasta tsitaadiga

Renka kirjutas:
mikk36, proovisid hetkel ise järgi ka? See lahendus töötab XHTML'is ilusasti aga hetkel kiiruga firebugis proovides ma soovitud tulemust ei saanud (HTML 4 määranguga).
avasin lingi, vaatasin mis lehel on, klikkisin firebugi ikooni peale ja asusin muutma (ehk siis lisasin menüüle float: left, keelasin ära position käsu ja siis lisasin #osa sisse ühe divi (edit käsuga) ja määrasin tolle stiiliks clear: both)
kõik
mingit salvestamist ega välist editori ma ei kasutanud
või on minu töövõtted valed ?
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006




sõnum 20.06.2008 09:23:42 vasta tsitaadiga

Mikk, proovisin, ei aidanud icon_sad.gif .
Kas mingi teise ehitusega ei saa samamoodi teha ?

_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 09:36:28 vasta tsitaadiga

mnjaa, firefox3'ga on kõik ok, ie7 lennutab ikka alla
eks siis teine lahendus on ka #sisuplace'le float: left panna (ja ära unusta siis marginit-paddingut uuesti paika ajada)
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006




sõnum 20.06.2008 10:10:14 vasta tsitaadiga

Mul ei olnud firefox3-ga ka korras, ma ei tea.
Tegin uue div-i <div id="clear"></div> ning nende tivide vahele jäi siis sisuplace.
clear css oli selline:
#clear {
clear:both;
}


positsion absolute võitsin menylt ära ning lisasin float left.
See, et sisuplacele float:left panin, ka ei aidanud.
Võtsin kõik muu ära, positsion:absolute ka, ning lisasin sisuplacele float:left.
Nii sai peaaegu soovitud tulemuse, ainult et sisu läheb alla icon_sad.gif .

Edit:
Aa, clear pidi ka peal olema, aga sisu jah, jääb ikka alla.

Arvan, et kõige lihtsam on öelda, et need kõrgused peaksid üksteisest sõltuma.
Kui sisu on lühem, kui menüü, siis selle(sisu) pikkus(mis on auto) läheb samaks, mis menüül.



Sellel lehel see sinine kast ääres funktsioneerib samamoodi, nagu mul peaks:
http://www.kaivitrans.ee/?id=1&keel=ee

_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 11:59:56 vasta tsitaadiga

no ma ei tea
html:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <style type="text/css">
  6. body {
  7. margin-top:30px;
  8. background-color:#000000;
  9. background-repeat:repeat-x;
  10. }
  11. #konteiner {
  12. width:738px;
  13. height:auto;
  14. background-color:#FFFFFF;
  15. margin-left:auto;
  16. margin-right:auto;
  17. }
  18. #valgekast {
  19. width:738px;
  20. height:auto;
  21. background-color:#FFFFFF;
  22. }
  23. #logoimage {
  24. width:738px;
  25. height:169px;
  26. background-color:#990000;
  27. margin-top:0px;
  28. margin-left:0px;
  29. }
  30. #menyline {
  31. float:left;
  32. width:200px;
  33. height:auto;
  34. min-height:500px;
  35. background-color:#999900;
  36. }
  37. ul#nav {
  38.         font-size : 12px;
  39.         font-family:Tahoma;
  40.         list-style:none;
  41.                 color:#FFFFFF;
  42.                 line-height:20px;
  43.                 text-decoration:none;
  44. }
  45. ul#nav li {
  46.         font-size : 12px;
  47.         font-family:Tahoma;
  48.         list-style:none;
  49.                 color:#FFFFFF;
  50.                 line-height:20px;
  51.                 text-decoration:none;
  52.                 border-bottom-width:1px;
  53.                 border-bottom-color:#ffffff;
  54.                 border-bottom-style:dotted;
  55. }
  56. ul#nav li a {
  57.         font-size : 12px;
  58.         font-family:Tahoma;
  59.         list-style:none;
  60.                 color:#FFFFFF;
  61.                 line-height:20px;
  62.                 text-decoration:none;
  63.                
  64. }
  65. ul#nav li a:hover {
  66.         font-size : 12px;
  67.         font-family:Tahoma;
  68.         list-style:none;
  69.                 color:#ffa200;
  70.                 line-height:20px;
  71.                 text-decoration:none;
  72. }
  73. #osa {
  74. background-color:#999900;
  75. width:738px;
  76. height:auto;
  77. min-height:500px;
  78. }
  79. #sisuplace {
  80. float:left;
  81. height:auto;
  82. width:300px;
  83. color:#FFFFFF;
  84. font-family:Verdana;
  85. font-size:12px;
  86. }
  87. #menu {
  88. width:200px;
  89. height:auto;
  90. min-height:2px;
  91. padding-left:0px;
  92. }
  93. #footer {
  94. width:738px;
  95. height:32px;
  96. background-color:#0066FF;
  97. color:#FFFFFF;
  98. text-align:right;
  99. font-size:24px;
  100. }
  101. .clear {
  102. clear: both;
  103. }
  104. </style>
  105. </head>
  106.  
  107. <div id="konteiner">
  108. <div id="valgekast">
  109.  
  110. <div id="logoimage">YLAOSA</div>
  111. <div id="osa">
  112.  
  113. <div id="menyline">
  114. <div id="menu">
  115. <ul id="nav">
  116. <li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li>
  117.  
  118. <li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li>
  119. <li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li><li><a href="" >Kontakt</a></li>
  120.  
  121. </ul></div>
  122.  
  123.        
  124.  
  125.        
  126.  
  127. </div><div id="sisuplace">
  128. SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>SEE SIIN ON SISU<br>
  129.  
  130.  
  131. </div><div class="clear"></div></div>
  132.  
  133. <div id="footer">FOOTER</div>
  134. </div></div>
  135. </body>
  136. </html>
  137.  

btw, sinu lingitud näiteleht on katki Fx3'ga, mitmel pool suurused paigast ära


viimati muutis mikk36 20.06.2008 12:01:25, muudetud 1 kord
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002




sõnum 20.06.2008 12:00:43 vasta tsitaadiga

mikk36 kirjutas:
Renka kirjutas:
mikk36, proovisid hetkel ise järgi ka? See lahendus töötab XHTML'is ilusasti aga hetkel kiiruga firebugis proovides ma soovitud tulemust ei saanud (HTML 4 määranguga).
avasin lingi, vaatasin mis lehel on, klikkisin firebugi ikooni peale ja asusin muutma (ehk siis lisasin menüüle float: left, keelasin ära position käsu ja siis lisasin #osa sisse ühe divi (edit käsuga) ja määrasin tolle stiiliks clear: both)
kõik
mingit salvestamist ega välist editori ma ei kasutanud
või on minu töövõtted valed ?
Ei mitte töövõtted ei ole valed aga mul OSX ja FF3'ga samad töövõtted sellist tulemust ei andnud. Minuarust oli probleemiks HTML 4 Doctype.


Kethmar kirjutas:

Sellel lehel see sinine kast ääres funktsioneerib samamoodi, nagu mul peaks:
http://www.kaivitrans.ee/?id=1&keel=ee


Ja seal on kasutuses XHTML icon_wink.gif

Soovitan sul ka muuda doctype XHTMLiks ja siis ehita sealt edasi.
Minu kogemused näitavad, et sellega kaob ka eri brauserite (no IE on ikka vahest erand) vahelised probleemid ära - seda kõike muidugi kui kood valideerub.

_________________
There is no place like 127.0.0.1


viimati muutis Renka 20.06.2008 12:06:21, muudetud 1 kord
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 12:19:29 vasta tsitaadiga

xhtml1.0 transitional annab kõige paremaid tulemusi IE'ga, kuigi ma eelistaksin stricti
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006




sõnum 20.06.2008 12:20:56 vasta tsitaadiga

Ma ei tea, kas XHTML-iks saan muuta, sest TigerCMS võib asjad jälle tuksi keerata...sest seal paljud asjad ei valideeru.


Muide, kuidas XHTML-iks muuta icon_razz.gif ?

_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 20.06.2008 12:35:27 vasta tsitaadiga

1) muudad doctype ära
2) muudad tigercms's template'i ja kontrollid et seal oleks piisavalt uus fckeditor, mis väljastab xhtml1.0 standardset koodi (eeldusel et seal ikka see kasutusel)

edit: ma vist liiga tark hetkel ja ei suuda nagu leida tiger cms'i kodulehte, et kust seda üldse alla saaks laadida icon_rolleyes.gif icon_redface.gif
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002




sõnum 20.06.2008 13:31:29 vasta tsitaadiga

mikk36, minuteada ei olegi see enam kättesaadav. Kunagi sai seda aadressilt: www.tiger.ee
_________________
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
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006




sõnum 20.06.2008 13:56:46 vasta tsitaadiga

Jep, ise otsisin ka, ei olnud.
Kasutasin eelnevalt tehtud koduka faile, et TigerCMS tööle saada.

_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 20.06.2008 20:18:41 vasta tsitaadiga

Kui veel hädas oled, siis see peaks toimima.
Mikul on tegelikult sarnane lahendus juba pakutud.
<style>

#konteiner {
position:relative;
border:solid 1px #000;
left:200px;
width:600px;
}
#vasak {
float:left;
background:#33FFCC;
width:200px;

}
#parem {
float:left;
background:#CCCCCC;
width:388px;

}

#all {
height:50px;
width:600px;
background:#CffCCC;
margin-top:5px;
clear:both;
}
</style>
<body>


<div id="konteiner">
<div id="vasak">Vasak kast</div>
<div id="parem" >Parem kast. <br><br><br>Siin on siis palju teksti </div>
<div id="all">rrr</div>
</div>

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

liitunud: 21.06.2006




sõnum 20.06.2008 21:03:14 vasta tsitaadiga

Sain asja lahendatud. Teema võib kustutada ja suured tänud teile kõigile, aitasite mind JÄLLE hädast välja .
_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  CSS menüüga probleem.
[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.