ugrás a tartalomhoz

CSS menü háttere legyen ugyanolyan magas, mint a tartalom

zoliky · 2007. Ápr. 5. (Cs), 10.31
A kovetkezo oldalon van egy CSS alapu menu, pontosan egy DIV amely bal oldalon talalhato : http://home.wplink.net/test/

Jobb oldalon tartalmi resz van. Igazabol azt szeretnem elerni, hogy a bal menu szine legyen egyforma a tartalom magasagaval.

Pontosan igy kene kinezen: http://img204.imageshack.us/img204/8125/73141604st4.jpg

Es ez egyforman valtozon mindig, a tartalom hosszusagaval.

Tudtok otleteket adni, segitseget ?
Koszonom!
‹ Google nem jeleníti meg a meta tag tartalmát opera 9.2 - eltörött a kanavász ›
 ■
1

Border

janoszen · 2007. Ápr. 5. (Cs), 10.59
A tartalom bal oldalának adsz egy bordert vagy egy container elembe teszed, aminek adsz egy hátteret és overflow:auto-val megnyújtod a float-okat befoglalóra.
2

Gyakori gond: equal height columns

Csiszár Attila · 2007. Ápr. 5. (Cs), 11.00
Körülbelül minden második héten előkerül a téma.

Keress rá google-n Equal Height Columns néven, több megoldás is született a problémára, a tiéd még egyszerűbb is a két oszloppal, de számíts rá, hogy vért fogsz izzadni, ha minden böngészőn egyforma működést akarsz elérni:)
3

fogalmazás

gex · 2007. Ápr. 5. (Cs), 11.17
igazán nem akarlak bántani, de ha pontosan fogalmazod meg a problémád, több ember tud segíteni. irigylem a többieket, hogy egyből megértették mit szeretnél, én csak átfutottam a kérdést, de ezt a mondatot még most se nagyon értem:
Igazabol azt szeretnem elerni, hogy a bal menu szine legyen egyforma a tartalom magasagaval.
4

koszonom

zoliky · 2007. Ápr. 5. (Cs), 11.47
Ha mukodik IE6 , IE7 es firefox 2.0-val boven eleg
5

lap

zoliky · 2007. Ápr. 5. (Cs), 11.59
Itt van a lap amelyen dolgozok: http://home.wplink.net/luxor/
Jelenleg mukodik IE es FF browszerben. Ami igazan idegesit az, hogy a #main-nek a kovetkezot adtam meg:
#main {
	border: 1px solid gray;
	margin: 10px auto;
	width: 820px;
	background-color: #007bbe;
	overflow:hidden;
}
A fent es lenti 10px tavolsagot a FF betartja, de az IE6 nem tartja be a lenti 10px tavolsagot.
Miert csinalja ezt ?
6

miert maszik ra?

zoliky · 2007. Ápr. 5. (Cs), 13.21
Ha valaki meg tudna mondani miert maszik ra a sarga szin a "Footer" szovegre nagyon orulnek! Kerestem egy csomot a googlen de nem talaltam valaszt.

Egy kis demo: http://home.wplink.net/luxor/2.html

Sehogy sem fogom fel miert tortenik ez. A CSS kod benne van a HTML fajlban.
7

Azt csinálja amit kértél

janoszen · 2007. Ápr. 5. (Cs), 15.07
Pontosan azt csinálta, amit kértél tőle. Egy elég hack-szagú megoldással megnyújtottad rettenetesen hosszúra a menüt és ez látszik ott is. Kapcsold be a wrapper-re a border:1px solid red;-et és akkor látod, miért. Javasoltam fentebb egy működőképes megoldást, Google-ban is találsz az utánam szólók alapján elég infót. Olvasd el és próbálkozz, mielőtt hosszabb monológokat folytatsz...
8

hack-szagu

zoliky · 2007. Ápr. 5. (Cs), 16.22
Szia. Lehet, hogy kicsit hack-szagu de sikerult megcsinalni amit akartam.
Elege surgosen kell a lap, ezert kapkodtam, elnezest a sok hozaszolasert!
9

Nem baj

janoszen · 2007. Ápr. 5. (Cs), 21.27
Semmi baj, csak ha nem kapkodtál volna és elolvastad volna a hozzászólásokat rendesen, kb max fele ennyi idő alatt sikerült volna megcsinálni és jobban.
10

ezt nem ertem

zoliky · 2007. Ápr. 5. (Cs), 23.07
a fentiekbol amit irtal ezt nem ertem:

"overflow:auto-val megnyújtod a float-okat befoglalóra."
11

Overflow:auto

janoszen · 2007. Ápr. 5. (Cs), 23.32
Tfh van a következő HTML kódod:

<div id="befoglalo">
 <div id="menu"></div>
 <div id="tartalom"></div>
</div>
és hozzá ez a CSS:

#befoglalo
{
 overflow:auto;
 background:url("sarga.png") repeat-y;
}

#menu
{
 float:left;
 width:200px;
}

#tartalom
{
 margin-left:200px;
}
Az overflow:auto azt csinálja, hogy a körbefoglaló div megnőjön úgy, hogy a float is benne maradjon (ellenkező esetben a float kilóg belőle). Ehhez kell még a 6-os IE-nek egy height:1%, amit conditional commentekkel betehetsz.
12

feher

zoliky · 2007. Ápr. 6. (P), 00.08
A #tartalom-nak adhatok egy feher background szint? Azert kerdem, mert ha :

#befoglalo
{
 overflow:auto;
 background-color: yellow;
}
Akkor a tartalom is orokli a sarga szint.
13

Nem

janoszen · 2007. Ápr. 6. (P), 09.41
Adhatsz, hiszen ha sárgát adnál, akkor az egész mindenség háttere sárga lenne. Le kell gyártanod egy 200 px széles sárga képet mondjuk 5 px magasan és azt kell háttérnek adnod. Ha ez nem tetszik, akkor viszont marad a borderes megoldás.
14

Koszonom

zoliky · 2007. Ápr. 6. (P), 10.26
Ok, most mar vilagos :) tanultam valamit.
Koszonom a sok turelmet es segitseget!
15

Two column equal height

zoliky · 2007. Ápr. 13. (P), 19.02
Irtam egy kodot amely mukodne a kovetekzo browszereken:

- Internet Explorer 7 (IE 6 - nem probaltam)
- Firefox 2.0.0.3
- Opera 9.20

Itt van a kod: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Equal Height Columns</title>
<style type="text/css">
#main {
	width: 760px;
	border: 1px solid #000;
}

#wrapper {
	background: url('wrapper.gif') repeat-y;
}

#leftmenu {
	float: left;
	width: 200px;
}

#leftmenu ul {
	list-style: none;
	padding: 0;
	margin: 2px 2px;
}

#content {
	float: left;
	width: 550px;
	text-align: justify;
	margin-left: 4px;
}

#header, #footer {
	background-color: #ababab;
}

.clearfix {
	display: block;
}

.clearfix:after {
	content: ".";
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

/* Fixes IE / Mac */
.clearfix {
	display: inline-block;
}

/* Hides from IE-Mac */
* html .clearfix {
	height: 1%;
}
</style>
</head>
<body>
<div id="main">
	<div id="header">
	Header text
	</div>

		<div id="wrapper" class="clearfix">	
			<div id="leftmenu">
			<ul>
				<li>Menu Item 1</li>
				<li>Menu Item 2</li>
			</ul>
			</div>
	
			<div id="content">
			In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe
			the presentation of a document written in a markup language. Its most common application
			is to style web pages written in HTML and XHTML, but the language can be applied to any
			kind of XML document, including SVG and XUL. The CSS specifications are maintained by
			the World Wide Web Consortium (W3C).
			</div>
		</div>
		
	<div id="footer">
	Footer text
	</div>
</div>
</body>
</html>
Meg lehet tekinteni itt: http://zoliky.xenweb.net/examples/twocolumn.html

Kivancsi vagyok velemenyekre, nalatok mukodik a lap ?
Koszonom !
16

azért nem árt tesztelni IE6-on

Marcell · 2007. Ápr. 14. (Szo), 12.55
Ha valami IE6-on nem működik, akkor semmit sem ér. Minden webfejlesztő utálja, de felhasználók nagy része (~70%) használja. Majd ha tömegesen átállnak IE7-re akkor pezsgőt bonthatunk, de kompatibilitás miatt még akkor is támogatni kéne egy ideig.