Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html][css] Lewa kolumna na całą szerokosć
230005
post
Post #1





Grupa: Zarejestrowani
Postów: 316
Pomógł: 36
Dołączył: 2.04.2008

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

Może tytuł wątku głupi, ale nic mądrzejszego nie przychodzi mi na myśl winksmiley.jpg.

Otóż chodzi mi o osiągnięcie takiego efektu, że lewa kolumna (są dwie) miałaby się rozciągać na całą przestrzeń nie zajętą przez kolumnę prawą, ale elementy w niej poustawiane byłyby na stałym margin-left - konkretnie znajdowałyby się dokładnie na lewym marginesie wycentrowanego diva o szerokości 960px. Obecnie sprawę załatwiłem javascriptem i wyciągnięciem tej kolumny poza cały układ dokumentu. Moje pytanie brzmi - czy da się to zrobić w samym css? Próbowałem paru sposobów, ale nawet jak było ok wszędzie, to i tak Explorery poniżej 8 miały problemy. Obecnie kod wygląda tak (lewa kolumna, jak się pewnie domyślacie patrząc na kod, to leftNav winksmiley.jpg):

[HTML] pobierz, plaintext 
  1.  
  2. <body>
  3.  
  4. 	<div id="leftNav">
  5. 		<jdoc:include type="modules" name="leftmenu" />
  6. 	</div>
  7.  
  8. 	<div id="container">	
  9. 		<div id="header">
  10. 			<a href="index.php" id="logo">
  11. 				<img src="templates/portfolio_index/images/logo.jpg" alt="logo" />
  12. 			</a>
  13. 			<div id="nav">
  14. 				<jdoc:include type="modules" name="mainmenu" />
  15. 			</div>
  16. 		</div>		
  17.  
  18. 		<div id="content">
  19. 			<div id="rightPanel">
  20. 				<jdoc:include type="component" />
  21. 			</div>
  22. 		</div>
  23. 		<div class="clearfooter"></div>
  24. 	</div>
  25.  
  26. 	<div id="footer">
  27. 		<div id="footer_container">
  28. 			<div id="copyright"><jdoc:include type="modules" name="copyright" /></div>
  29. 			<div id="project"><jdoc:include type="modules" name="project" /></div>
  30. 			<div id="contact_footer"><jdoc:include type="modules" name="contact_footer" /></div>
  31. 		</div>
  32. 	</div>
  33.  
  34. </body>
  35.  
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1.  
  2. //tu zostawiłem tylko to, co uważam za zajistotniejsze
  3.  
  4. div#leftNav {
  5. 	position: absolute;
  6. 	margin-top: 325px;
  7. 	z-index: 999;
  8. }
  9.  
  10. div#leftNav li {
  11. 	border-top: 1px solid #e7e7e7;
  12. }
  13.  
  14. div#leftNav ul, div#leftNav li {
  15. 	list-style: none;
  16. 	font-size: 14px;
  17. }
  18.  
  19. div#leftNav li#current a {
  20. 	color: white;
  21. 	background-color: #9f1f63;
  22. }
  23.  
  24. div#rightPanel {
  25. 	float: right;
  26. 	width: 725px;
  27. 	padding-left: 50px;
  28. }
  29.  
  30. #container {
  31. 	min-height: 100%;
  32. 	margin: 0 auto;
  33. 	margin-bottom: -50px;
  34. 	position: relative;
  35. 	color: #636363;
  36. }
  37.  
  38. #content {
  39. 	width: 960px;
  40. 	margin: 0 auto;
  41. 	padding-top: 55px;
  42. }
  43.  
[CSS] pobierz, plaintext


Jakieś rady?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
AdIoS_Neo
post
Post #2





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

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

Jeśli inne kolumny mają nadaną szerokość to do leftNav można dodać regułę 
[CSS] pobierz, plaintext 
  1. width: auto;
[CSS] pobierz, plaintext
co znaczy że element będzie tak szeroki jak to tylko możliwe.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Najlepiej jak byś zaprezentował to na jakimś przykładowym obrazku co chcesz osiągnąć .
Go to the top of the page
+Quote Post
230005
post
Post #4





Grupa: Zarejestrowani
Postów: 316
Pomógł: 36
Dołączył: 2.04.2008

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

http://img202.imageshack.us/i/imgxi.jpg/
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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 · Linearny+ · Przełącz na: Drzewo

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

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