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: 
/* CSS Document */

/*txt design*/
.style1{
	font-weight: bold;
}

.style2{
	color:#FF0000;
	font-weight:bold
}

/*style*/
.torzs{
	margin:0 auto;
	display:block;
	width:860px;
	height:auto;
}

.border_t{
	height:20px;
}

.border_l{
	position:absolute;
	width:20px;
	height:100%;
	background:url(elemek/border_left.jpg) repeat-y;
	margin-top:20px;
}

.border_r{
	position:absolute;
	width:20px;
	height:100%;
	background:url(elemek/border_right.jpg) repeat-y right;
	margin-left:839px;
	margin-top:20px;
}

.t{
	margin:0 auto;
	display:block;
	width:820px;
	height:auto;
}

.fej{
	height:105px;
	background:url(elemek/jorda.jpg) no-repeat;
}

.hr{
	height:5px;
	background:#999999;
}

.menu_h{
	height:0px;
}

.left{
	width:160px;
	height:auto;
	position:absolute;
}

ul.menu li {
	  background-color: rgb(137,172,217);
}

.right{
	width:160px;
	height:auto;
	margin-left:660px;
	position:absolute;
}

.poll{
	border:0px;
	border-color:white;
	width:155px;
	height:330;
}

.lc_border{
	background:url(elemek/td_bg.jpg);
	border-right:1px dashed gray;
	border-left:1px dashed gray;
	margin-left:160px;
	width:15px;
	position:absolute;
}

.rc_border{
	background:url(elemek/td_bg.jpg);
	border-right:1px dashed gray;
	border-left:1px dashed gray;
	margin-left:645px;
	width:15px;
	height:auto;
	position:absolute;
}

.body{
	width:470px;
	margin:0 auto;
}
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jorda.hu</title>
<link href="styles.css" rel="stylesheet" type="text/css" title="feher">
<link href="menu.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="script.js"></script>
<script language="javascript" type="text/javascript" src="styleswitcher.js"></script>
<link rel="shortcut icon" href="elemek/jn.jpg">

<link rel="alternate stylesheet" type="text/css" href="piros.css" title="piros" />
<link rel="alternate stylesheet" type="text/css" href="sarga.css" title="sarga" />
</head>

<body>
<script type="text/javascript" language="javascript">
document.getElemetById("body").style.height=document.getElemetById("lc_border").offsetHeight+"20px"
</script>

<div class="torzs">
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_t"></div>
<div class="t">
<div class="fej"></div>
<div class="hr"></div>
<div class="menu_h"></div>
<div class="left">
<span class="style1"><h1 align="center">Helló</h1></span>
</p>
<ul class="menu">
 <li><a href="#">Kilépés:&nbsp;</a></li>
 <li><a href="#">Kurzor:&nbsp;</a></li>
 <li>Komunikáció:&nbsp;
   <ul class="sub">
   	<li><a href="#">Üzi Füzi:&nbsp;</a></li>
   	<li><a href="#">Fórum:&nbsp;</a></li>
   	<li><a href="#">Chat:&nbsp;</li></a>
  </ul>
 </li>
 <li><a href="#">Linkek:&nbsp;</a></li>
 <li>Viccek:&nbsp;
   <ul class="sub">
   	<li><a href="#">Tele 2:&nbsp;</a></li>
   	<li><a href="#">Felmondólevél:&nbsp;</a></li>
  </ul>
 </li>
 <li><a href="#">Információ:&nbsp;</a></li>
</ul>

<br /><br />
<marquee behavior="scroll" direction="left" height="100%" width="100%" scrollamount="2" scrolldelay="20" align="center">
<span class="style2">Köszönöm hogy felnéztetek a lapomra.</span></marquee>
<p aling="center">
<embed src="elemek/ora.swf" wmode="transparent" width="160" height="160"></embed>
</p></div>

<div class="right">
<br>
<a onClick="changeFontSize(1);return false;"><img src="elemek/nagyit.png" alt="Make Text Bigger" width="30" height="16" border="0"></a>
<a onClick="changeFontSize(-1);return false;"><img src="elemek/kicsinyit.png" alt="Make Text Smaller" width="30" height="16" border="0"></a>
<a onClick="revertStyles(); return false;"><img src="elemek/reset.png" alt="Reset Text Size" width="46" height="16" border="0"></a>
  <br>
  <br>
  
  <form name="search"><select name="engines">
         <option value="0" selected>Google</option>
         <option value="1">AltaVista</option>
         <option value="2">Yahoo!</option>
         <option value="3">GoTo</option>
         <option value="4">HotBot</option>
         <option value="5">LookSmart</option>
         <option value="6">Lycos</option>
         <option value="7">MetaCrawler</option>
         <option value="8">Northern Light</option>
         <option value="9">Ask Jeeves</option>
       </select>
       <input type="text" size="20" value="Keresési szöveg..." onFocus=select(); name="queryText">
       <input type="button" value="Keres" onClick="searchWeb()">
</form>

<form name="design"><select name="design">
	<option value="0" selected onclick="setActiveStyleSheet('feher'); return false;" onmouseover="this.style.cursor='pointer'">Fehér</option>
	<option value="1" onclick="setActiveStyleSheet('sarga'); return false;" onmouseover="this.style.cursor='pointer'">Sárga</option>
    <option value="1" onclick="setActiveStyleSheet('piros'); return false;" onmouseover="this.style.cursor='pointer'">Piros</option>
</select></form>

<br><br>

<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>
</div>
																																													
<div class="lc_border"></div>
<div class="rc_border"></div>

<div class="body">a</div>

</div>
</div>


</body>
</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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jorda.hu</title>
<link href="styles.css" rel="stylesheet" type="text/css" title="feher" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="script.js"></script>
<script language="javascript" type="text/javascript" src="styleswitcher.js"></script>
<script language="javascript" type="text/javascript">
function init()
{
document.getElementById("body").style.height=document.getElementById("lc_border").offsetHeight+"px";
}
</script>

<link rel="shortcut icon" href="elemek/jn.jpg" />

<link rel="alternate stylesheet" type="text/css" href="piros.css" title="piros" />
<link rel="alternate stylesheet" type="text/css" href="sarga.css" title="sarga" />
</head>

<body onload="init()">

<div class="torzs">
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_t"></div>
<div class="t">
<div class="fej"></div>
<div class="hr"></div>
<div class="menu_h"></div>
<div class="left" align="center">
  <h1><span class="style1"> Hell&oacute;</span></h1>
  
 <ul class="menu">
 <li><a href="#">Kil&eacute;p&eacute;s:&nbsp;</a></li>
 <li><a href="#">Kurzor:&nbsp;</a></li>
 <li>Komunik&aacute;ci&oacute;:&nbsp;
   <ul class="sub">
   	<li><a href="#">&Uuml;zi F&uuml;zi:&nbsp;</a></li>
   	<li><a href="#">F&oacute;rum:&nbsp;</a></li>
   	<li><a href="#">Chat:&nbsp;</a></li>
  </ul>
 </li>
 <li><a href="#">Linkek:&nbsp;</a></li>
 <li>Viccek:&nbsp;
   <ul class="sub">
   	<li><a href="#">Tele 2:&nbsp;</a></li>
   	<li><a href="#">Felmond&oacute;lev&eacute;l:&nbsp;</a></li>
  </ul>
 </li>
 <li><a href="#">Inform&aacute;ci&oacute;:&nbsp;</a></li>
</ul>

<br />
<br />
<object data="elemek/ora.swf" type="application/x-shockwave-flash" width="150" height="150">
  <param name="SRC" value="elemek/ora.swf" />
</object>
</div>

<div class="right">
<br />
<a onclick="changeFontSize(1);return false;"> <img src="elemek/nagyit.png" alt="Make Text Bigger" width="30" height="16" border="0" /></a>
<a onclick="changeFontSize(-1);return false;"> <img src="elemek/kicsinyit.png" alt="Make Text Smaller" width="30" height="16" border="0" /></a>
<a onclick="revertStyles();return false;"> <img src="elemek/reset.png" alt="Reset Text Size" width="46" height="16" border="0" /></a>
  <br />
  <br />
  
  <form action="script.js" name="search" target="_blank"> <select name="engines">
         <option value="0">Google</option>
         <option value="1">AltaVista</option>
         <option value="2">Yahoo!</option>
         <option value="3">GoTo</option>
         <option value="4">HotBot</option>
         <option value="5">LookSmart</option>
         <option value="6">Lycos</option>
         <option value="7">MetaCrawler</option>
         <option value="8">Northern Light</option>
         <option value="9">Ask Jeeves</option>
       </select>
       <input type="text" size="20" name="queryText"  />
       <input type="button" value="Keres" onclick="searchWeb()" />
</form>


<div onclick="setActiveStyleSheet('feher'); return false;">feher</div>
<br /><br />

<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>
</div>
																																													
<div class="lc_border" id="lc_border"></div>
<div class="rc_border" id="rc_border"></div>

<div class="body" id="body">a</div>

</div>
</div>


</body>
</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:

if (document.getElementById("right").offsetHeight < document.getElementById("body").offsetHeight) {
document.getElementById("right").style.height=document.getElementById("body").offsetHeight+"px"
} else {
document.getElementById("body").style.height=document.getElementById("right").offsetHeight+"px"
}
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