ugrás a tartalomhoz

Ragaszkodó réteg probléma.

Blöki · 2010. Május. 10. (H), 12.53
Sziasztok, van egy kis problémám. Létrehoztam egy egyszerű teszt html oldalt, mert előfordul, hogy belefutok egy hibába, és nem jövök rá mi az az apró gond ami miatt két réteg ragaszkodik egymáshoz.
Van, egy egyszerű tartalom div, amiben egy szoveg div van.
Ha megváltoztatom a #szoveg { margin:0 auto; ->> pl. margin: 10px auto; } akkor a fölötte lévő tartalom réteg is lejjebb megy 10px-ellel.
Ez mitől van?

HTML:
<div id="befoglalo">
	<div id="fejlec"><div class="rejtett"><h1>Teszter Pub</h1></div></div>
	<div id="tartalom"> <!-- <a href="index2.html"> -->
		<div id="szoveg">Belépés</div>
	</div>
	<div id="lablec"></div>
	<div id="plusz"></div>
</div>
CSS:
#befoglalo {
margin: 0 auto;
padding:0;
width:1180px;
height:800px;
}
#fejlec {
margin: 0 auto;
padding:0;
width:1180px;
height:200px;
background-image: url(elemek/ikep/fej.jpg);
z-index:1;
}
#tartalom {
margin:0 auto;
padding:0;
width:1180px;
height:400px;
background-image: url(elemek/ikep/kozep.jpg);
background-repeat: no-repeat;
z-index:2;
}
/*EZ A RÉTEG AMIT SZERETNÉK A TARTALOM KÖZEPÉRE IGAZÍTANI, DE NEM SIKERÜL..*/
#szoveg {
	margin: 20px auto;
	padding:0;
	width:82px;
	height:22px;
/* 	background-image: url(elemek/ikep/belep.jpg);
	background-repeat:no-repeat; */
	text-align: center;
	z-index:4;
}
#lablec {
margin:0 auto;
padding:0;
width:1180px;
height:200px;
background-image: url(elemek/ikep/lab.jpg);
z-index:3;
}
#plusz { clear:both; } /*A lebegések ne kavarjanak be...*/
.rejtett { display:none; }
.kiemelt { font-weight: bolder; color:#ff6600;}
‹ Javascript+div=probléma TinyBrowser license? ›
 ■
1

Elfelejtettem:

Blöki · 2010. Május. 10. (H), 12.54
Bőngészőfüggetlen a hiba, szóval tuti én hibázok vmi nagyot, de nem tudom mit..
2

nem látszik a hiba

ironwill · 2010. Május. 10. (H), 13.53
Szia!

Nálam nem jelentkezik a hiba.

FF 3.6.3
IE 8
Opera 10.53

Esetleg lehet, hogy abban a részben van a hiba, amit nem szúrtál be..?

Nálam a kód:
<html>
    <head>
        <style type="text/css">
#befoglalo {  
                margin: 0 auto;  
                padding:0;  
                width:1180px;  
                height:800px;  
                background: #ff0000;
            }  
            #fejlec {  
                margin: 0 auto;  
                padding:0;  
                width:1180px;  
                height:200px;  
                background-image: url(elemek/ikep/fej.jpg);  
                z-index:1;  
                background: #00ff00;
            }  
            #tartalom {  
                margin:0 auto;  
                padding:0;  
                width:1180px;  
                height:400px;  
                background-image: url(elemek/ikep/kozep.jpg);  
                background-repeat: no-repeat;  
                z-index:2;  
                background: #0000ff;
            }  
            /*<span style="font-weight: bold;">EZ A RÉTEG AMIT SZERETNÉK A TARTALOM KÖZEPÉRE IGAZÍTANI, DE NEM SIKERÜL..</span>*/  
            #szoveg {  
                margin: 20px auto;  
                padding:0;  
                width:82px;  
                height:22px;  
                /*  background-image: url(elemek/ikep/belep.jpg); 
                background-repeat:no-repeat; */  
                text-align: center;  
                z-index:4;  
            }  
            #lablec {  
                margin:0 auto;  
                padding:0;  
                width:1180px;  
                height:200px;  
                background-image: url(elemek/ikep/lab.jpg);  
                z-index:3;  
            }  
            #plusz { clear:both; } /*A lebegések ne kavarjanak be...*/  
            .rejtett { display:none; }  
            .kiemelt { font-weight: bolder; color:#ff6600;}  
</style>
    </head>
    <body>
        <div id="befoglalo">  
            <div id="fejlec"><div class="rejtett"><h1>Teszter Pub</h1></div></div>  
            <div id="tartalom">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus commodo nisl, sed fermentum lectus accumsan vel. Ut at orci dolor, eu aliquam ante. Duis ut turpis at eros ultricies malesuada. Pellentesque blandit pretium risus, quis feugiat metus commodo eget. Cras quam lectus, adipiscing nec fermentum id, laoreet nec velit. Duis molestie ornare metus ac volutpat. Praesent gravida lobortis neque at placerat. Proin neque lacus, iaculis at egestas at, volutpat quis est. Sed imperdiet justo nisi, sit amet ultricies sapien. Mauris non tortor enim.
                <!-- <a href="index2.html"> -->  
                <div id="szoveg">Belépés</div>  
            </div>  
            <div id="lablec"></div>  
            <div id="plusz"></div>
        </div>
    </body>
</html>
Én olyankor tapasztaltam hasonló "tapadást", ha float-olt elem volt és utánna nem volt "clear:both"-al feloldva. Esetleg megpróbálhatod, hogy a "tartalom" elé beteszel egy
<div style="clear: both"></div>
üdv, Gábor
3

Nem értem

Poetro · 2010. Május. 10. (H), 14.34
Ha megváltoztatom a #szoveg { margin:0 auto; ->> pl. margin: 10px auto; } akkor a fölötte lévő tartalom réteg is lejjebb megy 10px-ellel.

A #szoveg CSS-e eleve a következőképp néz ki:
#szoveg {
    margin: 20px auto;
Akkor hogyan változtatod meg? És mi volt az eredeti? Vagy nem is a #szoveg-re vonatkozik? És mi van a #szoveg fölött? Jó lenne látni egy teljesebb HTML-t mert ennek így nem sok értelme van.
4

Nézd meg újra...

Blöki · 2010. Május. 10. (H), 15.28
Ott van az egész, erre vonatkozó html-kód.
A szöveg benne van a tartalom rétegben, és akkor néz ki jól a háttér meg mnden ha a #szoveg teteje 0px-en van, ha megnövelem akkor lehúzza a szöveg réteg a tartalom réteget is, és mindent ami alatta van eltol..

Gábor
Részben megvan a hiba, oka. Nem akartam bnele semmi mást a tartalom rétegbe, ha beleírok egy kis szöveget, akkor is lesz térköz (gondolom mert <p> még nem igazán van css-ben leírva), de már nem ragaszkodik.. Viszont ez egy főként köszöntő oldalként funkcionáló index lapnál nekem nem kell, hameg display:none;-t használok megint ragasztózik...
Az alap weboldalt ami miatt készült ez a tesztoldal azt most nem raknám be kicsit sok lenne, de itt az egész tester..
Ez is sok, de előre is köszi, elég idegesítő hiba, az eddigi weboldalaimnál, nem ütköztem ebbe a problémával, néha bezavart egy-egy float de ekkora hülyeséget, még nem csináltam... XD

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" xml:lang="hu" lang="hu">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Teszter</title>
<meta name="description" content="Leiras" />
<meta name="keywords" content="googli" />
<meta name="author" content="Blöki" />
<meta name="publisher" content="tulaj név" />
<meta name="robots" content="index, follow" />
<link href="i_style.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="befoglalo">
	<div id="fejlec"><div class="rejtett"><h1>Címszöveg..</h1></div></div>
	<div id="tartalom"> <!-- <a href="index2.html"> --><p>Lorem ipsum dolor ebéd...</p>
		<div id="szoveg">Belépés</div>
	</div>
	<div id="lablec"></div>
	<div id="plusz"></div>
</div>
</body
>

CSS:
body {
	margin:0;
        padding:0;
	background-color: #990099;
	font-family:Verdana;
	color: #ccc ;
	font-size: 16px;
}
a {
	color: #ccc ;
	text-decoration: none;
}
h1 {
	margin: 0 auto;
	text-align: center;
	font-size: 22px;
}
p {
	font-size: 11px;
}
ul {list-style-type: none;}
li  { padding-left: 10px; }
img { border: none;}

#befoglalo {
margin: 0 auto;
padding:0;
width:1180px;
height:800px;
}
#fejlec {
margin: 0 auto;
padding:0;
width:1180px;
height:200px;
background-image: url(elemek/ikep/fej.jpg);
z-index:1;
}
#tartalom {
margin:0 auto;
padding:0;
width:1180px;
height:400px;
background-image: url(elemek/ikep/kozep.jpg);
background-repeat: no-repeat;
z-index:2;
}
#szoveg {
	margin: 100px auto;
	padding:0;
	width:82px;
	height:22px;
/* 	background-image: url(elemek/ikep/belep.jpg);
	background-repeat:no-repeat; */
	text-align: center;
	z-index:4;
}
#lablec {
margin:0 auto;
padding:0;
width:1180px;
height:200px;
background-image: url(elemek/ikep/lab.jpg);
z-index:3;
}
#plusz { clear:both; }
.rejtett { display:none; }
.kiemelt { font-weight: bolder; color:#ff6600;}
5

Teteje

Poetro · 2010. Május. 10. (H), 18.25
Nem tudom, számodra mit jelent a teteje. De képzeld el, hogy nem látom:
akkor néz ki jól a háttér meg mnden ha a #szoveg teteje 0px-en van, ha megnövelem akkor lehúzza a szöveg réteg a tartalom réteget is, és mindent ami alatta van eltol..

Mivel nem tudom hozzáképzelni mi az ami hiányzik, és mi van eltolva. Nem lehet, hogy paddingot akarsz használni? Tudod, mivel nem látszanak a háttér képeid, és az egész egy nagy lila háttéren 2 sor szöveg, nehéz elképzelni, hol lehet hiba. Mondjuk ha linket adtál volna, akkor talán lehetne látni is, mi a problémád.
7

Margin..

Blöki · 2010. Május. 12. (Sze), 10.36
margin: 0 auto 0 auto;
teteje jobb alsó bal térköz most komolyan ennyire nem volt értehető?
Ha igen akkor bocs..

Ami a baj, hogy a belső #szoveg réteg ragaszkodik, a tartalom réteghez, azóta úgy oldottam meg, hogy nem üres a tartalom réteg, hanem, van a tartalomban egy <br> és már nem ragaszkodik, hozzá.

Linket, sajnos nem tudok, mutatni..
6

1/2 megoldás

ironwill · 2010. Május. 11. (K), 19.18
Szia!

A baj, hogy a "#tartalom" doboznak, mintha nem lenne teteje.
Nem túl szép, de működő megoldás, ha border-t ("border-top"-ot) állítasz a "#tartalomra".

Talán valaki ismer valami elegánsabb megoldást..

üdv, Gábor
8

Köszönet

Blöki · 2010. Május. 12. (Sze), 10.40
Köszönöm, mindenkinek a segítséget, a probléma megoldva!
Ha, nem csak maga a #szoveg réteg van, a #tartalom rétegben, akkor rendesen működik a pozícionálás.
Ha rejtett tartalmat rakok bele akkor sem működik ( display: none; ), viszont én nem akartam csak pár háttérből álló képet összerakni, ezért egy <br>-t raktam be és így már működik.
Nem elegáns, de múködik.
Azért, ha valaki tud jobbat szebbet, az írja már meg! Köszi!