ugrás a tartalomhoz

div height

jordapeti · 2007. Május. 8. (K), 16.20
Hello!

Segítségre lenne szükségem.
Ha van egy div-em, akkor annak hogy mondom meg, hogy a magassága ugyan akkora legyen, mint a mellete lévő divnek (ami persze változó magasságú)?

előre is köszönöm:

Peti
‹ Like Google Maps 1px elcsúszik ›
 ■
1

google és link

Táskai Zsolt · 2007. Május. 8. (K), 18.23
http://www.google.hu/search?q=css+equal+div+height

ebből választok is neked egy elmagyarázósat: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

jó munkát!
T
2

köszönöm

jordapeti · 2007. Május. 9. (Sze), 18.01
Köszönöm szépen. De ezzel csak annyi a problémám, hogy egy megírthonlapot szét kéne hozzá bombázni, hog ytudja hogy mit szeretnék.

ennél egy kicsit szolídabb módszer nincs?

Peti

ja: +ha esetleg lenne magyar az sokat lendítene
3

van magyar

Táskai Zsolt · 2007. Május. 9. (Sze), 19.31
rrd, a közösség egyik tagja szokott jó leírásokat készíteni magyarul. ebben a témában például: http://rrd.1108.cc/oldalhasabok-magassaga/

mindenképp át kell viszont túrnod, erre készülj fel. viszont ez mindennek jót szokott tenni...

jó munkát,
T
6

érdekes

jordapeti · 2007. Május. 10. (Cs), 13.40
Ez a megldás elég érdekes.
az hogy egy képpel oldom meg, az szerintem nem a leg megfelelőbb módszer lenne.
4

js

zzrek · 2007. Május. 9. (Sze), 19.33
Csináld meg js-sel. Adj id-t mindkét divnek, aztán az egyiknek a heightjét beállítod a másik offsetHeightjére:
document.getElemetById("egyik").style.height=document.getElemetById("maisk").offsetHeight+"px"; (body onload után)
5

ne js-sel

Táskai Zsolt · 2007. Május. 10. (Cs), 07.51
formázásra használjunk inkább CSS-t. a JS-t inkább tartsuk meg a dinamikus viselkedés leírására.
10

Egyértelmű, de egyszerű?

zzrek · 2007. Május. 10. (Cs), 15.29
Voltak CSS megoldásra linkek, de egyik sem volt "szolid módszer" a kérdező számára, a JS-sel meg gondoltam nem kell "szétbombáznia" a meglévő oldalát (persze ez mostmár kicsit mulatságosan hangzik azok után, hogy lentebb megismerkedtem a "szétbombázatlan" oldallal :-)
Mindenesetre nekem úgy tűnik, hogy a jelenlegi böngészők CSS ismerete nem nyújt igazán megoldást az ilyen problémákra. Eléggé hekkelgetni kell; a jelenlegi, működő CSS szabályzók közt nincs olyan, hogy "legyen olyan magas, mint a másik". De ha tudsz frappáns CSS megoldást, engem is érdekel.
13

parancsolj

gex · 2007. Május. 10. (Cs), 17.15
Eléggé hekkelgetni kell; a jelenlegi, működő CSS szabályzók közt nincs olyan, hogy "legyen olyan magas, mint a másik". De ha tudsz frappáns CSS megoldást, engem is érdekel.

http://www.456bereastreet.com/lab/equal_height/

u.i.: ha "jelenlegi működő"-t ie-re is értetted akkor persze igazad van... ;]
14

sajnos

zzrek · 2007. Május. 10. (Cs), 20.17
Sajnos muszáj az IEre is értenem, így a link amit küldtél, nem sokat ér, de azért köszi (talán majd jövőre, vagy azután, ha az IE8 kiszorítja az IE7-et is) (egyébként hallottam már erről a módszerről)
Persze tudom, hogy igazam van ;-)
(Mellesleg van egy csomó más stílus-beállítás-igény is, amit sokkal egyszerűbben lehet JSsel megoldani, sajnos nincs rá használható, egyszerű, frappáns CSS megoldás. Szvsz nem biztos, hogy mindig erőltetni kell a CSS hackeket - lehet, hogy pont attól lesz átláthatatlanabb, hosszabb a HTML kód...)
11

hopp

zzrek · 2007. Május. 10. (Cs), 15.39
Most nézem, hogy a link, amit javasoltál, szintén mintha JSsel oldaná meg a dolgot ;-)
12

igazad van

Táskai Zsolt · 2007. Május. 10. (Cs), 15.46
bocs, több oldalt néztem, és nem a legjobb megoldást tettem be... akkor a másik linkemre módosítanám inkább a javaslatot, vagyis az rrd féle CSS-re. amúgy persze nem annyira fekete-fehér ez a vita, mindegyik gányolás egy kicsit, csak máshogyan.
7

...

jordapeti · 2007. Május. 10. (Cs), 13.42
ez a megoldás már jobban tetszene de sajnos nem műkszik.
nem tudom mért nem.

mellékelek forráskódot.
8

forráskód

jordapeti · 2007. Május. 10. (Cs), 13.45
css:
  1. /* CSS Document */  
  2.   
  3. /*txt design*/  
  4. .style1{  
  5.     font-weight: bold;  
  6. }  
  7.   
  8. .style2{  
  9.     color:#FF0000;  
  10.     font-weight:bold  
  11. }  
  12.   
  13. /*style*/  
  14. .torzs{  
  15.     margin:0 auto;  
  16.     display:block;  
  17.     width:860px;  
  18.     height:auto;  
  19. }  
  20.   
  21. .border_t{  
  22.     height:20px;  
  23. }  
  24.   
  25. .border_l{  
  26.     position:absolute;  
  27.     width:20px;  
  28.     height:100%;  
  29.     background:url(elemek/border_left.jpg) repeat-y;  
  30.     margin-top:20px;  
  31. }  
  32.   
  33. .border_r{  
  34.     position:absolute;  
  35.     width:20px;  
  36.     height:100%;  
  37.     background:url(elemek/border_right.jpg) repeat-y right;  
  38.     margin-left:839px;  
  39.     margin-top:20px;  
  40. }  
  41.   
  42. .t{  
  43.     margin:0 auto;  
  44.     display:block;  
  45.     width:820px;  
  46.     height:auto;  
  47. }  
  48.   
  49. .fej{  
  50.     height:105px;  
  51.     background:url(elemek/jorda.jpg) no-repeat;  
  52. }  
  53.   
  54. .hr{  
  55.     height:5px;  
  56.     background:#999999;  
  57. }  
  58.   
  59. .menu_h{  
  60.     height:0px;  
  61. }  
  62.   
  63. .left{  
  64.     width:160px;  
  65.     height:auto;  
  66.     position:absolute;  
  67. }  
  68.   
  69. ul.menu li {  
  70.       background-color: rgb(137,172,217);  
  71. }  
  72.   
  73. .right{  
  74.     width:160px;  
  75.     height:auto;  
  76.     margin-left:660px;  
  77.     position:absolute;  
  78. }  
  79.   
  80. .poll{  
  81.     border:0px;  
  82.     border-color:white;  
  83.     width:155px;  
  84.     height:330;  
  85. }  
  86.   
  87. .lc_border{  
  88.     background:url(elemek/td_bg.jpg);  
  89.     border-right:1px dashed gray;  
  90.     border-left:1px dashed gray;  
  91.     margin-left:160px;  
  92.     width:15px;  
  93.     position:absolute;  
  94. }  
  95.   
  96. .rc_border{  
  97.     background:url(elemek/td_bg.jpg);  
  98.     border-right:1px dashed gray;  
  99.     border-left:1px dashed gray;  
  100.     margin-left:645px;  
  101.     width:15px;  
  102.     height:auto;  
  103.     position:absolute;  
  104. }  
  105.   
  106. .body{  
  107.     width:470px;  
  108.     margin:0 auto;  
  109. }  
html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Jorda.hu</title>  
  5. <link href="styles.css" rel="stylesheet" type="text/css" title="feher">  
  6. <link href="menu.css" rel="stylesheet" type="text/css">  
  7. <script language="javascript" type="text/javascript" src="script.js"></script>  
  8. <script language="javascript" type="text/javascript" src="styleswitcher.js"></script>  
  9. <link rel="shortcut icon" href="elemek/jn.jpg">  
  10.   
  11. <link rel="alternate stylesheet" type="text/css" href="piros.css" title="piros" />  
  12. <link rel="alternate stylesheet" type="text/css" href="sarga.css" title="sarga" />  
  13. </head>  
  14.   
  15. <body>  
  16. <script type="text/javascript" language="javascript">  
  17. document.getElemetById("body").style.height=document.getElemetById("lc_border").offsetHeight+"20px"  
  18. </script>  
  19.   
  20. <div class="torzs">  
  21. <div class="border_l"></div>  
  22. <div class="border_r"></div>  
  23. <div class="border_t"></div>  
  24. <div class="t">  
  25. <div class="fej"></div>  
  26. <div class="hr"></div>  
  27. <div class="menu_h"></div>  
  28. <div class="left">  
  29. <span class="style1"><h1 align="center">Helló</h1></span>  
  30. </p>  
  31. <ul class="menu">  
  32.  <li><a href="#">Kilépés:&nbsp;</a></li>  
  33.  <li><a href="#">Kurzor:&nbsp;</a></li>  
  34.  <li>Komunikáció:&nbsp;  
  35.    <ul class="sub">  
  36.     <li><a href="#">Üzi Füzi:&nbsp;</a></li>  
  37.     <li><a href="#">Fórum:&nbsp;</a></li>  
  38.     <li><a href="#">Chat:&nbsp;</li></a>  
  39.   </ul>  
  40.  </li>  
  41.  <li><a href="#">Linkek:&nbsp;</a></li>  
  42.  <li>Viccek:&nbsp;  
  43.    <ul class="sub">  
  44.     <li><a href="#">Tele 2:&nbsp;</a></li>  
  45.     <li><a href="#">Felmondólevél:&nbsp;</a></li>  
  46.   </ul>  
  47.  </li>  
  48.  <li><a href="#">Információ:&nbsp;</a></li>  
  49. </ul>  
  50.   
  51. <br /><br />  
  52. <marquee behavior="scroll" direction="left" height="100%" width="100%" scrollamount="2" scrolldelay="20" align="center">  
  53. <span class="style2">Köszönöm hogy felnéztetek a lapomra.</span></marquee>  
  54. <p aling="center">  
  55. <embed src="elemek/ora.swf" wmode="transparent" width="160" height="160"></embed>  
  56. </p></div>  
  57.   
  58. <div class="right">  
  59. <br>  
  60. <a onClick="changeFontSize(1);return false;"><img src="elemek/nagyit.png" alt="Make Text Bigger" width="30" height="16" border="0"></a>  
  61. <a onClick="changeFontSize(-1);return false;"><img src="elemek/kicsinyit.png" alt="Make Text Smaller" width="30" height="16" border="0"></a>  
  62. <a onClick="revertStyles(); return false;"><img src="elemek/reset.png" alt="Reset Text Size" width="46" height="16" border="0"></a>  
  63.   <br>  
  64.   <br>  
  65.     
  66.   <form name="search"><select name="engines">  
  67.          <option value="0" selected>Google</option>  
  68.          <option value="1">AltaVista</option>  
  69.          <option value="2">Yahoo!</option>  
  70.          <option value="3">GoTo</option>  
  71.          <option value="4">HotBot</option>  
  72.          <option value="5">LookSmart</option>  
  73.          <option value="6">Lycos</option>  
  74.          <option value="7">MetaCrawler</option>  
  75.          <option value="8">Northern Light</option>  
  76.          <option value="9">Ask Jeeves</option>  
  77.        </select>  
  78.        <input type="text" size="20" value="Keresési szöveg..." onFocus=select(); name="queryText">  
  79.        <input type="button" value="Keres" onClick="searchWeb()">  
  80. </form>  
  81.   
  82. <form name="design"><select name="design">  
  83.     <option value="0" selected onclick="setActiveStyleSheet('feher'); return false;" onmouseover="this.style.cursor='pointer'">Fehér</option>  
  84.     <option value="1" onclick="setActiveStyleSheet('sarga'); return false;" onmouseover="this.style.cursor='pointer'">Sárga</option>  
  85.     <option value="1" onclick="setActiveStyleSheet('piros'); return false;" onmouseover="this.style.cursor='pointer'">Piros</option>  
  86. </select></form>  
  87.   
  88. <br><br>  
  89.   
  90. <iframe src="poll/" class="poll" height="335px">bocs de a böngészod erre nem alkalmas<br><a href="http://www.firefox.hu">használj Firefoxot</a></iframe>  
  91. </div>  
  92.                                                                                                                                                                                       
  93. <div class="lc_border"></div>  
  94. <div class="rc_border"></div>  
  95.   
  96. <div class="body">a</div>  
  97.   
  98. </div>  
  99. </div>  
  100.   
  101.   
  102. </body>  
  103. </html>  
9

finoman

zzrek · 2007. Május. 10. (Cs), 15.22
Hát hogy is mondjam finoman: hemzseg a hibáktól. Ez így nem fog menni, alapvető szabályokat be kell tartani. Kezd el a HTML alapokkal. Javaslom, hogy tegyél fel egy firefoxot magadnak, tegyél hozzá egy HTML validátort meg persze a firebugot; vagy keress egy megfelelő előkészített mintát (template) és kezdd előről.
De hogy csak a kérdésedet vizsgáljuk:
Nem működik természetesen, mert nem is úgy csináltad, ahogy mondtam:
1: nem adtál id tulajdonságot a diveknek, így persze nem "találja meg" a getElementById. pl. így kell: <div id="body" class="body">a</div>
2: Nem a body onloadba tetted a scriptet, hanem a <body> után közvetlenül. A betöltés folyamán ebben az időpillanatban még nem léteznek azok az elemek, amikre utalna a getElementById. A <head> részbe tegyél egy függvényt, pl:
function init()
{
document.getElementById("kody").style.height=document.getElementById("lc_border").offsetHeight+"px";
}
és a body pedig így kezdődjön:
<body onload="init()">
3: (el is gépeltem, mert kihagytam az "n"-et a getElementById-ből)
4: De IE-ben még így sem működik, mert annyi a hiba, hogy az onload esemény nem is történik meg (nem is gondoltam, hogy ilyen lehetséges). Szóval a legfontosabb az összes html hiba kijavítása. (firefoxon még így is "működik", de IEn is fog persze, ha kitisztítod a hibás részeket)

Szóval a legjobb ha elölről kezded és folyamatosan nézed a HTML validátort, hogy milyen hibákat ad ki.
15

hiba

jordapeti · 2007. Május. 11. (P), 14.57
kijavítottam a hibákat.
a html vladiator már azt jelzi, hogy nincs 1 hiba se.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Jorda.hu</title>  
  5. <link href="styles.css" rel="stylesheet" type="text/css" title="feher" />  
  6. <link href="menu.css" rel="stylesheet" type="text/css" />  
  7. <script language="javascript" type="text/javascript" src="script.js"></script>  
  8. <script language="javascript" type="text/javascript" src="styleswitcher.js"></script>  
  9. <script language="javascript" type="text/javascript">  
  10. function init()  
  11. {  
  12. document.getElementById("body").style.height=document.getElementById("lc_border").offsetHeight+"px";  
  13. }  
  14. </script>  
  15.   
  16. <link rel="shortcut icon" href="elemek/jn.jpg" />  
  17.   
  18. <link rel="alternate stylesheet" type="text/css" href="piros.css" title="piros" />  
  19. <link rel="alternate stylesheet" type="text/css" href="sarga.css" title="sarga" />  
  20. </head>  
  21.   
  22. <body onload="init()">  
  23.   
  24. <div class="torzs">  
  25. <div class="border_l"></div>  
  26. <div class="border_r"></div>  
  27. <div class="border_t"></div>  
  28. <div class="t">  
  29. <div class="fej"></div>  
  30. <div class="hr"></div>  
  31. <div class="menu_h"></div>  
  32. <div class="left" align="center">  
  33.   <h1><span class="style1"> Hell&oacute;</span></h1>  
  34.     
  35.  <ul class="menu">  
  36.  <li><a href="#">Kil&eacute;p&eacute;s:&nbsp;</a></li>  
  37.  <li><a href="#">Kurzor:&nbsp;</a></li>  
  38.  <li>Komunik&aacute;ci&oacute;:&nbsp;  
  39.    <ul class="sub">  
  40.     <li><a href="#">&Uuml;zi F&uuml;zi:&nbsp;</a></li>  
  41.     <li><a href="#">F&oacute;rum:&nbsp;</a></li>  
  42.     <li><a href="#">Chat:&nbsp;</a></li>  
  43.   </ul>  
  44.  </li>  
  45.  <li><a href="#">Linkek:&nbsp;</a></li>  
  46.  <li>Viccek:&nbsp;  
  47.    <ul class="sub">  
  48.     <li><a href="#">Tele 2:&nbsp;</a></li>  
  49.     <li><a href="#">Felmond&oacute;lev&eacute;l:&nbsp;</a></li>  
  50.   </ul>  
  51.  </li>  
  52.  <li><a href="#">Inform&aacute;ci&oacute;:&nbsp;</a></li>  
  53. </ul>  
  54.   
  55. <br />  
  56. <br />  
  57. <object data="elemek/ora.swf" type="application/x-shockwave-flash" width="150" height="150">  
  58.   <param name="SRC" value="elemek/ora.swf" />  
  59. </object>  
  60. </div>  
  61.   
  62. <div class="right">  
  63. <br />  
  64. <a onclick="changeFontSize(1);return false;"> <img src="elemek/nagyit.png" alt="Make Text Bigger" width="30" height="16" border="0" /></a>  
  65. <a onclick="changeFontSize(-1);return false;"> <img src="elemek/kicsinyit.png" alt="Make Text Smaller" width="30" height="16" border="0" /></a>  
  66. <a onclick="revertStyles();return false;"> <img src="elemek/reset.png" alt="Reset Text Size" width="46" height="16" border="0" /></a>  
  67.   <br />  
  68.   <br />  
  69.     
  70.   <form action="script.js" name="search" target="_blank"> <select name="engines">  
  71.          <option value="0">Google</option>  
  72.          <option value="1">AltaVista</option>  
  73.          <option value="2">Yahoo!</option>  
  74.          <option value="3">GoTo</option>  
  75.          <option value="4">HotBot</option>  
  76.          <option value="5">LookSmart</option>  
  77.          <option value="6">Lycos</option>  
  78.          <option value="7">MetaCrawler</option>  
  79.          <option value="8">Northern Light</option>  
  80.          <option value="9">Ask Jeeves</option>  
  81.        </select>  
  82.        <input type="text" size="20" name="queryText"  />  
  83.        <input type="button" value="Keres" onclick="searchWeb()" />  
  84. </form>  
  85.   
  86.   
  87. <div onclick="setActiveStyleSheet('feher'); return false;">feher</div>  
  88. <br /><br />  
  89.   
  90. <iframe src="poll/" class="poll" height="335px">bocs de a b&ouml;ng&eacute;sz&#337;d erre nem alkalmas<br /><a href="http://www.firefox.hu">haszn&aacute;lj Firefoxot</a></iframe>  
  91. </div>  
  92.                                                                                                                                                                                       
  93. <div class="lc_border" id="lc_border"></div>  
  94. <div class="rc_border" id="rc_border"></div>  
  95.   
  96. <div class="body" id="body">a</div>  
  97.   
  98. </div>  
  99. </div>  
  100.   
  101.   
  102. </body>  
  103. </html>  
ha még találsz szólj.
a scriptet majd most nézem. de eddig nem megy

(amúgy adtam id-t a diveknek csak a beküldött kódból már kiszedtem)
16

object, érdekes

zzrek · 2007. Május. 11. (P), 17.02
Ez érdekes, az onload esemény tényleg nem fut le még mindig (IE-n). Valami miatt az <object> résszel van gondja. Talán egy nálam okosabb valaki tudja, hogy miért. (?) Mindenesetre láthatod, hogy ha teszel egy alert("itt vagyok"); -ot az init fvbe, és kiveszed az <object>..</object> részt, akkor már szépen lefut (és beállítja a "body" magasságát is persze). Azt még megjegyzem, hogy ha a "body" (div) nagyobb (a benne lévő szöveg) , mint a másik, lefelé túl fog lógni (a benne lévő szöveg), hiába veszed vissza a magasságát. Ha ezt meg akarod akadályozni, használd az overflow:"hidden" CSS tulajdonságot (vagy persze lehet úgy is, hogy a másik div magasságát állítod a bodyéhoz)
Más megjegyzésem most nincs.
17

köszönöm

jordapeti · 2007. Május. 11. (P), 17.19
kösz szépen!

akkor már csak az lenne a kérdésem, hogy akkor hogy rakjak hozzá flash órat, hogy ne akadjon el a js és a html vladiator se szólja meg.
18

nem tudom

zzrek · 2007. Május. 11. (P), 17.36
Nem tudom. Valaki más esetleg?
20

+

jordapeti · 2007. Május. 11. (P), 17.56
még egy kérdésm lenne.

ha megadom a body div-nek a position:absolute kifejezést, akkor nem tudok alá új diveket rakni.
ha nem adom meg, akkor ie-ben szétcsúszik.

tudsz esetleg valami megoldást?
22

++

jordapeti · 2007. Május. 11. (P), 18.15
(bocs hogy ennyit írok de egyre jönnak az újabb problémák ahogy haladok)

egy ojan megoldás esetleg lenne, hogy:

a body elem magasabb mint a right elem

ha igaz: semmit nem csinál

ha hamis: document.getElementById("body").style.height=document.getElementById("right").offsetHeight+"px";
24

bocs

zzrek · 2007. Május. 11. (P), 22.59
Bocs, de belefáradtam. A fejlesztéssel meg kell küzdeni, sok problémád lesz még (mint ahogy nekem is volt és lesz is). Hajrá!
25

?

jordapeti · 2007. Május. 12. (Szo), 15.40
esetleg valaki másnak lenne ötlete?
26

köszönöm

jordapeti · 2007. Május. 12. (Szo), 15.40
Köszönöm szépen amit eddig segítettél
27

megoldás

jordapeti · 2007. Május. 12. (Szo), 19.20
ez lett a megoldás:
  1. if (document.getElementById("right").offsetHeight < document.getElementById("body").offsetHeight) {  
  2. document.getElementById("right").style.height=document.getElementById("body").offsetHeight+"px"  
  3. } else {  
  4. document.getElementById("body").style.height=document.getElementById("right").offsetHeight+"px"  
  5. }  
19

SRC → movie?

attlad · 2007. Május. 11. (P), 17.54
<param name="SRC" value="elemek/ora.swf" />
helyett
<param name="movie" value="elemek/ora.swf" />
21

kösz

jordapeti · 2007. Május. 11. (P), 18.00
köszi szépen

és esetleg hogy tudnám megadni neki ezt a paramétrt?
wmode="transparent" (ez az embed-ben használható, de azt nem szereti a html vladiator)
23

Kereső

attlad · 2007. Május. 11. (P), 19.53
Fenti keresőbe: object wmode transparent