Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] tekst w div'ie
Forum PHP.pl > Forum > Przedszkole
!*!
21.02.2007, 15:12:59
powiedzmy że mam coś takiego:



div żółty to div głowny z zawartościa strony
div niebieski odpowiada za menu

gdy okno przegladarki sie zmiejszy / zmieni sie rozdzielczosc to div żółty zostaje dopasowany do niej a div niebieski pozostaje bez zmian i oto mi własnie chodzi i tak jest...

ale jakbym chciał dodać tekst do diva zółtego to wjedzie on na div niebieski:



a ja bym chciał aby tekst miescił sie tylko w divie zółtym i pomniejszałby sie do rozmaru strony:



css:

[HTML] pobierz, plaintext 
  1. #zolty{
  2.  
  3. width: 100%; 
  4. height:200px; 
  5. position:absolute; 
  6. left:0px; 
  7. top: 30px; 
  8. border-top: 1px solid #fad163;
  9. border-bottom: 1px solid #fad163;
  10.  
  11. }
  12.  
  13. #niebieski{
  14.  
  15. 	 position:absolute;
  16. 	 width: 250px; 
  17. 	 height: 100%; 
  18. 	 right:0px; 
  19. 	 top: 0px;
  20. 	 border-left: 1px solid #fad163;
  21.  
  22. }
[HTML] pobierz, plaintext


wiecie może jak uzyskać taki efekt?
Saddam92
21.02.2007, 17:06:59
może do #zolty dodaj jeszcze margin-right: 250px; gdzie te pixele to szerokość niebieskiego diva..
misiek172
21.02.2007, 17:52:55
margin nic takiego nei da chyba, najlepiej daj mi rozmiar w %
Saddam92
21.02.2007, 18:21:05
nie mów chyba tylko sprawdź..
!*!
21.02.2007, 18:48:34
fakt, margin wogole nieraguje na to... a w procentach? to pod każda rozdzielczoscia bedzie inny odstęp...
tansky
22.02.2007, 11:40:30
Masz w ogóle dziwaczną strukturę, która wynika z przyjętego css-a.

Nie wiem po co deklarujesz display:absolute;, a żółty div robisz na 100%;

Weź sobie zrób 2 divy:

[HTML] pobierz, plaintext 
  1. .zolty {
  2. width: 450px;
  3. float: left:
  4. }
  5. .niebieski {
  6. width: 600px;
  7. }
  8.  
  9. <div class="niebieski">
  10.    <div class="zolty">
  11.        Content zoltego
  12.    </div>
  13.     Menu
  14. </div>
[HTML] pobierz, plaintext
!*!
22.02.2007, 13:41:09
tansky i niezrozumiałeś, wtedy przy innej rozdzielczośći zółty bedzie zawsze miał 450px a ja chce aby tekst w nim rozciągał sie to niebieskiego a nie wykraczał poza jego obszar...
radeksnara
22.02.2007, 13:56:07
Ja osobiscie nie sadze aby dalo sie to wykonac absolute'em . Sproboj % a jak nie to chyba tylko JS.
!*!
22.02.2007, 13:58:55
radeksnara w % to mi mało daje, poniewaz przy zmianie rozdzielczosci sypie sie cały układ, w js? hmm ewentualnie zostaje tabelka... heh naprawde nieda sie tego wykonać w divie?
Saddam92
22.02.2007, 14:00:11
nie wiem co ci nie działało z margin prosze zobacz tu:
http://saddam.h4e.pl/problemy/aa.htm
mike
22.02.2007, 14:11:13 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<title>Example</title>
  5. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. 		<style type="text/css" media="screen">
  7. 		/*<![CDATA[*/
  8.  
  9. 		div#mainContainer {
  10. 			margin: auto;
  11. 			width: 80%;
  12. 		}
  13.  
  14. 		div#wrapper {
  15. 			overflow: hidden;
  16. 		}
  17.  
  18. 		div#contentContainer {
  19. 			margin-left: -200px;
  20. 			float: left;
  21. 			width: 100%;
  22. 			background-color: #ff0;
  23. 		}
  24.  
  25. 		div#content {
  26. 			margin-left: 200px;
  27. 		}
  28.  
  29. 		div#sidebar {
  30. 			float: right;
  31. 			width: 200px;
  32. 			height: 300px;
  33. 			background-color: #00f;
  34. 		}
  35.  
  36. 		/*]]>*/
  37. 		</style>
  38. 	</head>
  39. 	<body>
  40.  
  41. 	<div id="mainContainer">
  42. 		<div id="wrapper">
  43. 			<div id="contentContainer">
  44. 				<div id="content">
  45. 					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut ligula. Praesent eros. Donec pulvinar. Quisque nec nulla a ligula varius vehicula. Morbi ultricies interdum nisl. Quisque varius vehicula erat. Morbi rhoncus. Duis tempus eleifend metus. Nullam rhoncus tristique sapien. Ut in lorem et nulla ornare viverra. Duis nulla orci, malesuada sed, sagittis euismod, sodales blandit, ipsum. Duis fringilla dui ut pede. Nulla facilisi.</p>
  46. 					<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eget eros eu felis pellentesque tempor. Mauris nonummy congue magna. Pellentesque adipiscing diam eu dolor. Nunc sagittis eleifend nisl. Quisque rhoncus faucibus mauris. Donec id neque. Aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi eget ipsum nec mauris dignissim eleifend. Fusce euismod hendrerit turpis. Integer nulla.</p>
  47. 				</div>
  48. 			</div>
  49. 			<div id="sidebar"></div>
  50. 		</div>
  51. 	</div>
  52.  
  53. 	</body>
  54. </html>
[HTML] pobierz, plaintext


Coś takiego?

Dłuższa wersja tego co dął ~Saddam92 biggrin.gif
!*!
22.02.2007, 16:06:41
mike_mech - o właśnie o to mi chodziło smile.gif hmm a da sie to jeszcze zrobić aby wyrównywałoby sie te divy ale w pionie na tej samej zasadzie? tak jak np. jest to w gmailu podczas pisania wiadomosci, wielkość "notatnika" jest zależna od wielkości okna... chodzi o wyrównanie do pionu czyli dołu przegladarki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.