Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] lista rozwijana i problem z IE :/, lista rozwijana nie chce wskoczyc na tekst
InosU31
post
Post #1





Grupa: Zarejestrowani
Postów: 221
Pomógł: 14
Dołączył: 11.03.2009
Skąd: Lubaczów

Ostrzeżenie: (0%)
-----

Witam

Mam liste rozwijana ktora nie chce mi nachodzic na tekst. Wszystko jest ok jesli dam zdjecie w div'ie jako tlo to mi ladnie wszystko na siebie nachodzi ale gdy napisze tekst to juz nie chce - w miejscu gdzie sa jakies litery. Dziwne jest w tym wszystkim to ze mam tekst w jednym naglowku i na ten tekst mi wszystko nachodzi a pod naglowkiem juz nie chce. moze mial ktos podobny problem i go rozwiazal? z gory dzieki za podpowiedzi

ponizej daje kod:

[HTML] pobierz, plaintext 
  1. <head>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' />
  4.  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>
  7.         <link rel='stylesheet' type='text/css' href='przyklad.css' />
  8.  
  9.         <!-- compliance patch for microsoft browsers -->
  10.         <!--[if lt IE 7]>
  11.             <link rel='stylesheet' type='text/css' href='multi-column-ie.css' />
  12.             <script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
  13.         <![endif]-->
  14.  
  15.     <script type="text/javascript"  src="nifty_corners/javascript/niftycube.js"></script>
  16.  
  17. <script type="text/javascript">
  18. window.onload=function(){
  19. Nifty('div#headere_inner','transparent medium'); // medium rounded corners w/transparency for gradient background image
  20. Nifty('div#content,div#promo','medium same-height'); //medium rounded corners, same height cols
  21. Nifty('div#main_wrapper,div#headerr,div#footer,div#comment','medium');  //medium rounded corners
  22. AddCss ("nifty_corners/css/niftyCorners.css"); // location of Nifty CSS file relative to this page
  23. }
  24. </script>         
  25.  
  26.     </head>
  27.     <body>
  28.  
  29.  <div id="main_wrapper">
  30.  	<div id="header">
  31.  		<div id="header_inner">
  32.  
  33.  		</div>
  34.  	 </div>
  35.  
  36.  <div id="list_menu">	
  37. 	<div id="list">
  38.  		<div id="list_inner">
  39.  
  40.  		<ul>
  41.  		<li class="pusty_one"></li>
  42.    		<li><a href="#">panel</a>
  43.    		<ul>
  44.     	<li><a class="rozwijana" href="#">Element 1a</a></li>
  45.     	<li><a class="rozwijana" href="#">Element 1b</a></li>
  46.     	<li><a class="rozwijana" href="#">Element 1c</a></li>
  47.     	<li><a class="rozwijana" href="#">Element 1c</a></li>
  48.     </ul>
  49.     	</li>
  50.    		<li class="pusty_two"></li>
  51.    		<li><a href="#">Strona Glowna</a></li>
  52.    		<li class="line_menu"></li>
  53.     	<li><a href="#">galeria</a>
  54.     <ul>
  55.     	<li><a class="rozwijana" href="#">Element 1a</a></li>
  56.     	<li><a class="rozwijana" href="#">Element 1b</a></li>
  57.     	<li><a class="rozwijana" href="#">Element 1b</a></li>
  58.     </ul>
  59.     	</li>
  60.     <li class="line_menu"></li>
  61.     <li><a href="#">kosmetyki</a></li>
  62.     <li class="line_menu"></li>
  63.     <li><a href="#">kontakt</a></li>
  64.     <li class="line_menu"></li>
  65.     <li><a href="#">o nas</a></li>
  66.     <li class="line_menu"></li>
  67.  
  68.     </ul>
  69.  
  70.     	</div>
  71.  
  72.  	</div>
  73.  </div>
  74.  
  75.  
  76. <div id="content">
  77.  <div id="content_inner">
  78.  
  79.  	<div id="comment_box">
  80.  		<div id="comment_box_inner">
  81.  			<div id="comment">
  82.  
  83.  			<div id="comment_naglowek">
  84.  			<p> Tytul dfsdfsdfdsfdf dsfdfsf</p>                     --- to jest ten naglowek
  85.  			</div>
  86.  				<div id="comment_inner">
  87. <p> jhagdsghdsghdgashdgsad adbjsdbsaj ajsdasjkdnas jasndjasndjansd asjndjasndasdnas jasndjasndjasnd jasndjasndjasnd  </p>  ----- ten napis
  88.  				</div>
  89.  
  90.  			</div>
  91.  			<div id="linia_pionowa">
  92.  
  93.  			</div>
  94.  			<div id="right_box">
  95.  				 <div id="right_box_inner">
  96. <p>dfdsf</p>  ---- ten napis
  97.  				</div>
  98.  
  99.  			</div>
  100.  
  101.  		</div>	
  102.  	</div>
  103.  
  104.  
  105.  			<div id="linia_pozioma">
  106. 				<div id="linia_pozioma_inner">
  107.  
  108.  				</div>
  109.  			</div>
  110.  
  111.  	<div id="foto_reklama">
  112.  		<div id="foto_reklama_inner">			
  113.  		  <div id="damskie_meskie">	
  114.  			<div id="meskie_napis">
  115.  			jshds
  116.  			</div>
  117.  			<div id="damskie_napis">
  118.  			jshds
  119.  			</div>
  120. 				<div id="meskie">
  121. 					<div id="meskie_foto">
  122.  
  123.  					</div>
  124.  				</div>
  125.  
  126.  
  127.  				<div id="damskie">
  128. 					<div id="damskie_foto">
  129.  
  130.  					</div>
  131.  				</div>
  132.  			</div>	
  133.  
  134.  			<div id="reklama_napis">
  135.  			jhfsd
  136.  			</div>
  137.  				<div id="reklama">
  138. 				<p> mkajsdjkasdjkasd kasjdjkasjdhasda kasjdjkahsdahs sajhdkjashdjksad kjashdjkasasd kjashdjkas
  139. 				</p>
  140.  				</div>
  141.  
  142.  		</div>		
  143.  	</div>
  144.  
  145.  </div>
  146. </div>
  147.  
  148.     <div id="footer">
  149.  		<div id="footer_inner">
  150.  			<p> to jest stopka</p><br><br>
  151.  		</div>
  152.  	</div>
  153.  
  154.  </div>
  155.  
  156.     </body>
  157. </html>
  158.  
[HTML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. body {
  2. 	text-align:center;
  3. 	background-color:#cccc99;  /*-- ten*/
  4. 	/*background-color:#8f917a;*/
  5.  
  6. }
  7.  
  8. * {
  9. 	margin:0;
  10. 	padding:0;
  11.  
  12. }
  13.  
  14. #main_wrapper {
  15. 	width:840px;
  16. 	margin-left:auto;
  17. 	margin-right:auto;
  18. 	text-align:left;
  19. 	padding:10px 0;
  20. 	margin-top:10px;
  21. 	/*border: 1px solid black;
  22. 	background-color: acae95;*/
  23. }
  24.  
  25. #header {
  26.  
  27. 	background:url("logo.png") no-repeat;
  28. 	/*border: 1px solid black;*/
  29. 	margin:0 10px;
  30. 	/*background-color: blue;*/
  31. }
  32.  
  33. #header_inner {
  34.  
  35. 	height:160px;
  36.  
  37. }
  38.  
  39. /*------------------------------------------------------------------------------*/
  40. #list_menu {
  41. 	behavior:url(csshover.htc);
  42.  
  43. 	/*border: 1px solid black;*/
  44. 	margin:5px 10px 10px 10px;
  45. 	background:url("logo_menu.png") no-repeat;
  46. }
  47.  
  48. #list{
  49.  
  50. 	position:relative;
  51. 	z-index: 5;
  52. }
  53.  
  54. #list_inner * {
  55. 	margin:0;
  56. 	padding:0;
  57. }
  58.  
  59. #list_inner {
  60.  
  61. 	font-family:lucida, arial, sans-serif;
  62. 	/*border: 1px solid black;
  63. 	margin:5px 10px 10px 10px;*/
  64. 	height:40px;
  65. }
  66.  
  67. #list_inner ul {
  68. 	/*border: 1px solid green;*/
  69. 	float:left;
  70.  
  71. }
  72.  
  73. #list_inner li {
  74. 	border: 0px solid red;
  75. 	list-style-type:none;
  76. 	float:left;
  77. 	position:relative;
  78.  
  79. }
  80.  
  81. #list_inner li ul {
  82. 	position:absolute;
  83. 	width:7em;
  84. 	display:none;
  85.  
  86. }
  87.  
  88. #list_inner li ul li {
  89. 	width:100%;
  90.  
  91. }
  92.  
  93. #list_inner a {
  94. 	display:block;
  95. 	/*background-color:#DDD;*/
  96. 	padding:.55em 1em;
  97.  
  98. }
  99.  
  100. #list_inner a.rozwijana {
  101. 	display:block;
  102. 	background-color:#999966;
  103. 	padding:.55em 1em;
  104.  
  105. }
  106.  
  107. #list_inner a:hover {
  108. 	color:#666;  /*kolor czcionki a ponizej kolor tla najechanego elementu*/
  109. 	background-color:#CCCc99;
  110.  
  111. }
  112.  
  113. #list_inner li:hover ul {
  114. 	display:block;
  115.  
  116. }
  117.  
  118. .pusty_one {
  119. 	width:6em;
  120. 	height:1px;
  121. 	float:left;
  122. }
  123.  
  124. li.pusty_two {
  125. 	width:10em;
  126. 	height:1px;
  127. 	float:left;
  128. }
  129.  
  130. .line_menu {
  131. 	border: 2px solid red;
  132. 	width:5px;
  133. 	height:30px;
  134. 	background:url("linia4.png");
  135.  
  136. }
  137.  
  138. /*---------------------------------------------------------------------------------------*/
  139. #content {
  140. 	margin:10px 10px 10px 10px;
  141. 	/*border: 1px solid black;*/
  142.  
  143. 	/*background:url("tlo-srodek.png");*/
  144. 	/*background-color:#acae95;*/ /*--druki kolor*/
  145. 	background-color:#dde0bd;
  146. 	clear:both;	/*ta opcja powoduje ze srodkowy kontener nie naklada sie z pod menu - następna linia znajdzie się pod obiektem niezależnie od jego położenia */
  147.  
  148. }
  149.  
  150. #content_inner {
  151. 	position:relative;
  152. 	overflow:hidden;
  153. 	width:100%;
  154. 	z-index: 2;
  155. }
  156.  
  157. #comment_box {
  158.  
  159. 	/*border: 1px solid black;*/
  160. 	margin: 1em 1em 0 1em;
  161. 	height:100%;
  162. }
  163.  
  164. #comment_box_inner {
  165. 	position:relative;
  166. 	/*border: 1px solid black;*/
  167. 	overflow:hidden;
  168. 	width:100%;
  169.  
  170. }
  171.  
  172. #comment_naglowek {
  173.  
  174. 	width: 300px;
  175. 	padding:.5em 0 0 0;
  176. 	text-align:center;
  177. }
  178.  
  179. #comment_inner {
  180.  
  181. 	text-align: left;
  182. 	padding:.5em 1em 2em 1em;
  183.  
  184. }
  185.  
  186. #comment, #right_box {
  187. 	position: absolute;
  188. 	/*border: 1px solid black;*/
  189. 	top: 0;
  190.    z-index: 1;
  191.  
  192. }
  193.  
  194. #comment p{
  195. 	z-index: -1;
  196. }
  197.  
  198. #comment {
  199. 	/*border: 1px solid black;*/
  200. 	background-color: #cccc99;
  201. 	margin: .5em 0 2em 3em;
  202.     left:0;
  203.     width: 300px;
  204.  
  205. }
  206.  
  207. #right_box {
  208.  
  209. 	width:350px;
  210. 	height:220px;
  211.     right:0;
  212. }
  213.  
  214. #right_box_inner {
  215.  
  216.   margin:0 1em;
  217.   background:url("matrix-foto.png") no-repeat; 
  218.   /*kolor foto1 - b0b199  , kolor drugi - e6e9c4*/
  219.   /*border: 1px solid black;*/
  220.   height: 210px;
  221.   width:300px;
  222.  
  223. }
  224.  
  225. #linia_pionowa {
  226.  
  227. 	/*border: 1px solid #63645e;*/
  228. 	background-color: #63645e;
  229. 	width:2px;
  230. 	margin: 0 auto;
  231. 	height:220px;
  232. }
  233.  
  234. #linia_pozioma { 
  235.  
  236. 	width: 90%;
  237. 	margin: .5em 0;
  238. 	margin-left: auto;
  239. 	margin-right: auto;
  240. 	clear: both;
  241.  
  242. }
  243.  
  244. #linia_pozioma_inner { 
  245.  
  246. 	border: 1px solid #63645e;
  247.  
  248. }
  249.  
  250.  
  251. #foto_reklama { 
  252.  
  253.     margin: .5em 1em;
  254. 	height:100%;
  255. }
  256.  
  257. #foto_reklama_inner { 
  258. 	position:relative;
  259.    /* border: 1px solid gray;*/
  260.     overflow:hidden;
  261.     width:100%;
  262.     margin:0 auto;
  263. }
  264.  
  265. #damskie_meskie {
  266. 	position:relative;
  267.  
  268.      width:50%;
  269. 	overflow:hidden;
  270. 	padding:0 0 0 5em;
  271. }
  272.  
  273. #meskie_napis, #damskie_napis {
  274.  
  275.  
  276. 	width:120px;
  277. 	height:20px;
  278.     padding:0 .7em .7em .7em;
  279.     text-align:center;
  280. }
  281.  
  282.  
  283. #meskie_napis {
  284. 	margin:0 2em 0 0;
  285. 	float:left;
  286. }
  287.  
  288. #damskie_napis {
  289.  
  290. 	margin:0 auto;
  291. 	float:right;
  292. }
  293.  
  294. #meskie, #damskie { 
  295.  
  296. 	border: 1px solid black;
  297. 	width:120px;
  298. 	height:120px;
  299.     padding:.7em;
  300. 	overflow:hidden;
  301. }
  302.  
  303. #meskie {
  304.  
  305. 	 margin: 0 auto;
  306.      float:left;
  307. }
  308.  
  309.  
  310.  
  311. #damskie {
  312.  
  313. 	margin: 0 auto;
  314.     float:right;
  315. }
  316.  
  317. #meskie_foto, #damskie_foto { 
  318.  
  319. 	border: 1px solid black;
  320. 	width:100%;
  321. 	height:100%;
  322. 	margin:0 auto;
  323.  
  324. }
  325.  
  326. #reklama_napis { 
  327. 	position:absolute;
  328. 	width:200px;
  329. 	height:20px;
  330. 	top: 0;
  331.     bottom: 0;
  332.     right: 0;
  333.     margin:0 auto;
  334.     text-align:center;
  335.     padding:0 2em .7em .7em;
  336. }
  337.  
  338. #reklama { 
  339. 	position:absolute;
  340. 	/*border: 1px solid black;*/
  341. 	width:200px;
  342. 	height:200px;
  343. 	top: 20px;
  344.     bottom: 0;
  345.     right: 0;
  346.     margin:0 auto;
  347.     text-align:center;
  348.     padding:.7em 2em .7em .7em;
  349.     clear:both;
  350. }
  351.  
  352. /*#right_box {
  353.  
  354. 	border: 1px solid black;
  355. 	float:right;
  356. 	min-width:350px;
  357. 	max-width:400px;
  358. 	height:200px;
  359. }*/
  360.  
  361. #footer {
  362. 	/*border: 1px solid black;*/
  363. 	background-color: #999966;  /*zachowac kolor moze sie przyda do zmiany logo */
  364. 	margin:0 10px;
  365. 	clear:both;
  366. }
  367.  
  368.  
  369.  
[XML] pobierz, plaintext




pozdrawiam
Go to the top of the page
+Quote Post

Posty w temacie
- InosU31   [CSS][HTML] lista rozwijana i problem z IE :/   26.11.2010, 22:34:54

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 07:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn