Div scroll i anchor linkovi

HiMan · 30.07.2009

Za scroll u div tagu se koristi overflow:auto.
Kada kliknem na neki link u meniju on me prebaci gde treba u div, ali ne radi back dugme u browseru. Back ustvari prikazuje razlicite linkove ali ne prebacuje na njih.
Da napomenem jos da bez overflow:auto sve radi odlicno.
Ispod se moze videti primer koda strane. Znaci to nije moja strana ali problem je isti.
Konsultovao sam google ali nista nisam nasao. Molim pomoc.

Kod:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
<style type="text/css" media="screen">
body {
	background-color: #FFFFFF;
	font-size: 18px;
	_font-size: 14px;
	font-family: Arial;
	color:#000000;
	padding:0px;
	margin:0px;
	}
	
#text {
	background:#b4baad;
	min-height: 720px;
	height: auto;
	_height: 720px;
	padding:10px;
	margin-top:0px;
}

#inhalt {
	overflow: auto;
	height: 700px;
	background-color: #d6dbd6;
	width:849px;
	_width:840px;
	padding: 0px;
	}

#menu {width:155px;background: #e1e1e1;margin-right: 20px;border:0;float:left;}

</style>
</head>
<body>
   <div style="background-color:#d6dbd6; width:1024px;margin-left:10px;">
            <div id="menu">
               <ul>
                  <!-- MENU POSITION 1 -->
                  <li><a href="#Menu1">Menu1</a></li>
                  <!-- MENU POSITION 2 -->
                  <li><a href="#Menu2">Menu2</a>
                     <ul><!-- SUBMENU FUER MENU POSITION 2 -->
                        <li><a href="#Submenu1">Submenu1</a></li>
                        <li><a href="#Submenu2">Submenu2</a></li>
                     </ul>
                  </li>
               </ul>
          </div> <!-- ende div menu -->

   <div id="inhalt">
            <div id="text">
               <h1 id="Menu1">Menu1</h1>
               <p>Dummy Text <br />
    			  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 		
    			  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
    			  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
               </p>
            </div>
            <div id="text">
               <h1 id="Menu2">Menu2</h1>
               <p>Dummy Text <br />
                  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 		
                  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
                  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
                  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
                  Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
               </p>
            </div>
            <div id="text">
               <h2 id="Submenu1">Submenu1</h2>
               <p>Dummy Text <br />
      				Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 		
      				Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
      				Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
      				Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
      				Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
               </p>
            </div>
            <div id="text">
               <h2 id="Submenu2">Submenu2 </h2>
               <p>Dummy Text <br />
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 		
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
   				   Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text 
               </p>
            </div>
  </div> <!-- inhalt -->
</div>
</body>
</html>

sirNemanjapro · 30.07.2009

Probaj ovo.

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=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
		<!--
			body,td,th {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 14px;
				color: #666666;
			}
			body {
				background-color: #FFFFFF;
			}
				.main_holder
				{
					width: 1000px;
					height: auto;
					margin: 0 auto;
					padding: 0 0 0 10px;
					background: #FFFFCC;
					border: 4px solid #FF0000;
				}
					.main_menu
					{
						width: 160px;
						font-size: 18px;
						position: absolute;
						margin: 10px 0 0 0;
						letter-spacing: 1px;
						background: #FFCC99;
						border: 1px solid #333333;
					}
						.main_menu a:link, .main_menu a:visited
						{
							color: #333333;
							text-decoration: none;
						}
						.main_menu a:hover, .main_menu a:active
						{
							color: #FFFF00;
							text-decoration: underline;
						}
						.main_menu ul
						{
							list-style: none;
							padding: 0;
							margin: 0;
						}
						.main_menu ul li
						{
							padding: 4px;
						}
					#inhalt
					{
						float: right;
						overflow: hidden;
						height: 200px;
						width: 800px;
						background: #339900;
					}
						#text
						{
							padding: 10px;
							height: 220px;
							background: #FFCC66;
							border: 2px solid #006699;
						}
							#text p
							{
								color: #333333;
								font-size: 12px;
							}
		-->
		</style>
	</head>
	<body>
		<div class="main_holder">
			<!-- main menu -->
			<div class="main_menu">
				<ul>
					<li><a href="#menu1" title="#">Meni I</a></li>
					<li><a href="#menu2" title="#">Meni II</a></li>
					<ul>
						<li><a href="#sub_menu1" title="#">Sub - Meni III</a></li>
						<li><a href="#sub_menu2" title="#">Sub - Meni IV</a></li>
					</ul>
				</ul>
			</div>
			<!-- /main menu -->
			<div id="inhalt">
				<div id="text">
					<h1 id="menu1">Meni I</h1>
					<p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
				</div>
				<div id="text">
					<h1 id="menu2">Meni II</h1>
					<p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
				</div>
				<div id="text">
					<h2 id="sub_menu1">Sub - Meni III</h2>
					<p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
				</div>
				<div id="text">
					<h2 id="sub_menu2">Sub - Meni IV</h2>
					<p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
				</div>
			</div>
		</div>
	</body>
</html>

HiMan · 31.07.2009

Ni ovako ne radi back dugme. Pored toga treba korisniku omoguciti da pregleda ceo dokument a ako hoce sa leve strane moze da se prebaci na jedan deo. U sustini nesto kao sadrzaj.
Evo slike kako je to uradjeno.
http://img74.imageshack.us/img74/6087/primer.jpg

sirNemanjapro · 31.07.2009

Slike stavljaj u atačment.

Kod koji sam napisao i postavio, a zasnovan na tvom problemu, funkcioniše u Safariju i IEu, istini za volju, nisam proverio u FF i Ch i O (izvini).

Bilo bi mnogo efikasnije da si postavio link, umesto slike, jer ovde ne može da se vidi o čemu je reč, ali meni to miriše na frejmove i JS.

Pogledaj ovaj JS kod, možda ti pomogne.
Pogledaću još malo oko ovog tvog problema.

HiMan · 31.07.2009

Izvinjavam se za sliku.
Ne mogu da postavim link jer je sajt secured.
Nisu korisceni frejmovi mada je cilj bio da se postigne takav evekat.
Kao sto sam prethodno napisao sve je stavljano u div tagove sa overflow:auto opcijom.
Inace sadrzaj se dinamicki generise.
Evo u attachmentu primera strane, s tim sto se i sadrzaj skroluje kad predje granice div-a.
Pogledajte prilog primer.zip

Zaboravih da napomenem da ovo sto ja hocu jedino radi u safariju ali i to nije bas kako treba. U safariju jedino radi back izmedju dva bookmarka ali ne i na pocetak kad se strana otvorila.

sirNemanjapro · 31.07.2009

Testirano na Mac-u - Firefox, Safari, Opera. TEST OK

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=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
		<!--
			body,td,th {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 14px;
				color: #666666;
			}
			body {
				background-color: #FFFFFF;
			}
				.main_holder
				{
					position: relative;
					width: 800px;
					height: auto;
					margin: 0 auto;
					overflow: hidden;
					padding: 0 0 0 10px;
					background: #FFFFCC;
					border: 4px solid #FF0000;
				}
					.main_menu
					{
						width: 160px;
						font-size: 18px;
						position: absolute;
						margin: 10px 0 0 0;
						letter-spacing: 1px;
						background: #FFCC99;
						border: 1px solid #333333;
					}
						.main_menu a:link, .main_menu a:visited
						{
							color: #333333;
							text-decoration: none;
						}
						.main_menu a:hover, .main_menu a:active
						{
							color: #FFFF00;
							text-decoration: underline;
						}
						.main_menu ul
						{
							list-style: none;
							padding: 0;
							margin: 0;
						}
						.main_menu ul li
						{
							padding: 4px;
						}
					#inhalt
					{
						overflow: hidden;
						width: 500px;
						float: right;
						background: #339900;
					}
						#text
						{
							padding: 10px;
							height: 220px;
							background: #FFCC66;
							border: 2px solid #006699;
						}
							#text p
							{
								color: #333333;
								font-size: 12px;
							}
		-->
		</style>
	</head>
	<body>
		<div class="main_holder">
            <!-- main menu -->
            <div class="main_menu">
                <ul>
                    <li><a href="#menu1" title="#">Meni I</a></li>
                    <li><a href="#menu2" title="#">Meni II</a></li>
                    <ul>
                        <li><a href="#sub_menu1" title="#">Sub - Meni III</a></li>
                        <li><a href="#sub_menu2" title="#">Sub - Meni IV</a></li>
                    </ul>
                </ul>
            </div>
            <!-- /main menu -->
            <!-- content -->
            <div id="inhalt">
                <div id="text">
                    <h1><a id="menu1"> </a>Meni I</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div id="text">
                    <h1><a id="menu2"> </a>>Meni II</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div>
                    <h2><a id="sub_menu1"> </a>Sub - Meni III</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div>
                    <h2><a id="sub_menu2"> </a>Sub - Meni IV</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
            </div>
            <!-- /content -->
		</div>
	</body>
</html>

HiMan · 31.07.2009

Znam da radi kad nije overflow:auto, tj. kad nema scrolla.
Meni treba nesto slicno ovom.

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=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
		<!--
			body,td,th {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 14px;
				color: #666666;
			}
			body {
				background-color: #FFFFFF;
			}
				.main_holder
				{
					position: relative;
					width: 800px;
					height: auto;
					margin: 0 auto;
					overflow: hidden;
					padding: 0 0 0 10px;
					background: #FFFFCC;
					border: 4px solid #FF0000;
				}
					.main_menu
					{
						width: 160px;
						font-size: 18px;
						overflow:auto;
						height:100px;
						position: absolute;
						margin: 10px 0 0 0;
						letter-spacing: 1px;
						background: #FFCC99;
						border: 1px solid #333333;
					}
						.main_menu a:link, .main_menu a:visited
						{
							color: #333333;
							text-decoration: none;
						}
						.main_menu a:hover, .main_menu a:active
						{
							color: #FFFF00;
							text-decoration: underline;
						}
						.main_menu ul
						{
							list-style: none;
							padding: 0;
							margin: 0;
						}
						.main_menu ul li
						{
							padding: 4px;
						}
					#inhalt
					{
						overflow: auto;
						width: 500px;
						height:500px;
						float: right;
						background: #339900;
					}
						#text
						{
							padding: 10px;
							height: 220px;
							background: #FFCC66;
							border: 2px solid #006699;
						}
							#text p
							{
								color: #333333;
								font-size: 12px;
							}
		-->
		</style>
	</head>
	<body>
		<div class="main_holder">
            <!-- main menu -->
            <div class="main_menu">
                <ul>
                    <li><a href="#menu1" title="#">Meni I</a></li>
                    <li><a href="#menu2" title="#">Meni II</a></li>
                    <ul>
                        <li><a href="#sub_menu1" title="#">Sub - Meni III</a></li>
                        <li><a href="#sub_menu2" title="#">Sub - Meni IV</a></li>
                    </ul>
                </ul>
            </div>
            <!-- /main menu -->
            <!-- content -->
            <div id="inhalt">
                <div id="text">
                    <h1><a id="menu1"> </a>Meni I</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div id="text">
                    <h1><a id="menu2"> </a>>Meni II</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div>
                    <h2><a id="sub_menu1"> </a>Sub - Meni III</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.
Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.

</p>
                </div>
                <div>
                    <h2><a id="sub_menu2"> </a>Sub - Meni IV</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
            </div>
            <!-- /content -->
		</div>
	</body>
</html>

U svakom slucaju hvala puno.

sirNemanjapro · 31.07.2009

Ček, jesi ti uopšte pogledao to što sam okačio malopre? Tu ima overflow.

Dao sam ti ideju, možda je nisi shvatio.
Ne moraš da primeniš overflow direktno na kontejner koji nosi sadržaj, već iznad njega (u hijerarhiji), tj. kao stavljanje kutije unutar druge kutije.

Tako treba da odradiš i za meni, ako hoćeš.

HiMan · 31.07.2009

Jesam pogledao ali nije to ono sto mi treba.
Menu mora da uvek ostane na istoj poziciji dok se skroluje dokument.
Probao sam sa position:fixed ali ni to nije dobro.

sirNemanjapro · 31.07.2009

Kako kod tebe neće, a kod mene hoće, majka mu stara.

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=utf-8" />
		<title>Acnchors Test x6</title>
		<style type="text/css">
		<!--
			body,td,th {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 14px;
				color: #666666;
			}
			body {
				background-color: #FFFFFF;
			}
				.main_holder
				{
					position: relative;
					width: 800px;
					height: auto;
					margin: 0 auto;
					overflow: hidden;
					padding: 0 0 0 10px;
					background: #FFFFCC;
					border: 4px solid #FF0000;
				}
					.main_menu
					{
						z-index: 100;
						width: 160px;
						font-size: 18px;
						position: fixed;
						margin: 10px 0 0 0;
						letter-spacing: 1px;
						background: #FFCC99;
						border: 1px solid #333333;
					}
						.main_menu a:link, .main_menu a:visited
						{
							color: #333333;
							text-decoration: none;
						}
						.main_menu a:hover, .main_menu a:active
						{
							color: #FFFF00;
							text-decoration: underline;
						}
						.main_menu ul
						{
							list-style: none;
							padding: 0;
							margin: 0;
						}
						.main_menu ul li
						{
							padding: 4px;
						}
					#inhalt
					{
						overflow: hidden;
						width: 500px;
						float: right;
						background: #339900;
					}
						#text
						{
							padding: 10px;
							height: 220px;
							background: #FFCC66;
							border: 2px solid #006699;
						}
							#text p
							{
								color: #333333;
								font-size: 12px;
							}
		-->
		</style>
	</head>
	<body>
		<div class="main_holder">
            <!-- main menu -->
            <div class="main_menu">
                <ul>
                    <li><a href="#menu1" title="#">Meni I</a></li>
                    <li><a href="#menu2" title="#">Meni II</a></li>
                    <ul>
                        <li><a href="#sub_menu1" title="#">Sub - Meni III</a></li>
                        <li><a href="#sub_menu2" title="#">Sub - Meni IV</a></li>
                    </ul>
                </ul>
            </div>
            <!-- /main menu -->
            <!-- content -->
            <div id="inhalt">
                <div id="text">
                    <h1><a id="menu1"> </a>Meni I</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div id="text">
                    <h1><a id="menu2"> </a>>Meni II</h1>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div>
                    <h2><a id="sub_menu1"> </a>Sub - Meni III</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
                <div>
                    <h2><a id="sub_menu2"> </a>Sub - Meni IV</h2>
                    <p>MENI GRUPA I<br />Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem.</p>
                </div>
            </div>
            <!-- /content -->
		</div>
	</body>
</html>

HiMan · 01.08.2009

Sad stigoh iz grada. E ovako je super

. Jedino ostaje problem sto treba da imam i header na vrhu koji bi bio takodje fixed pa bi se onda tekst podvlacio pod njega, ali tada kad kliknem na menu naslov bi bio ispod headera.

Evo sredio sam. Ovde se vidi jos taj valjda mali problem.
Pogledajte prilog primer.rar

Pretraga

Pretraga

Div scroll i anchor linkovi

HiMan

Čuven

sirNemanjapro

Slavan

HiMan

Čuven

sirNemanjapro

Slavan

HiMan

Čuven

sirNemanjapro

Slavan

HiMan

Čuven

sirNemanjapro

Slavan

HiMan

Čuven

sirNemanjapro

Slavan

HiMan

Čuven