Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z rozciąganiem diva - rozciąganie rodzica
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
zaajcu
29.01.2013, 08:37:08
Cześć mam mały problem z div'ami i css pewnie trywialny ale jakoś nie mogę wpaść na to jak to zrobić :/
Mam taki kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl-PL">
  3. <head>
  4. </head>
  5. <body style="margin:0; padding:0;">
  6. 	<div id="pages" style="border: 1px solid red;">
  7. 		<div id="top" style="white-space: nowrap; border: 1px solid pink;">
  8. 			asdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfa sfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasda sdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaad
    sdfasfasdasdaadsdfa sfasdasdaadsdfasfasdasdaadsdfasfasd asdaadsdfasfasdasdaa dsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfa
    sfasdasdaadsdfasfasdasdaadsdfasfasdas daadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaadsdfasfasdasdaads
    dfasfasdasdaadsdfasf
  9. 		</div>
  10. 		<div id="content">
  11. 		</div>
  12. 	</div>
  13. </body>
  14. </html>
[HTML] pobierz, plaintext


#page i #top ustawiają się na całą szerokość okna, tekst wychodzi poza obydwa divy nie rozciągając ich :/
ktoś ma pomysł dlaczego tak jest i jak temu można zaradzić?

gdy ustawie #page display:inline-block to jest ok ale nie wiem czy jest to dobry pomysł aby tak to robić
kristaps
29.01.2013, 08:47:13
Dzieje się tak, bo użyłeś:
[CSS] pobierz, plaintext 
  1. white-space:nowrap;
[CSS] pobierz, plaintext
dodaj do css float: left i problem z głowy.
zaajcu
29.01.2013, 08:51:22
dałem to specjalnie aby nie załamało mi lini bo zamiast tego dziwnego tekstu w środku mam tam bardzo dużą tabelkę która nie mieści się na całej stronie i muszę ją przewinąć a div mi się wówczas nie rozszerza :/
kristaps
29.01.2013, 09:01:40
Wcześniej napisałeś, że tekst wychodzi z diva, czyli rozumiem, że ma się rozciągać w poziomie. Chyba, że czegoś nie łapię, w takim wypadku jak możesz to wrzuć tę tabelę i zaznacz o co chodzi.
zaajcu
29.01.2013, 09:28:58
Mam dokładnie taką strukturę
[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <html lang="pl-PL">
  4. <head>
  5. </head>
  6. <body>
  7. <div id="page" style="background: pink; height: 200px;">
  8. 	<div id="top" style="background: red">
  9. 		<div id="user">Jakiś user</div>
  10. 		<div id="menu">
  11. 			<a href="link1">Link1</a>
  12. 			<a href="link2">Link2</a>
  13. 			<a href="link3">Link3</a>
  14. 			<a href="link4">Link4</a>
  15. 			<a href="link5">Link5</a>
  16. 		</div>
  17. 	</div>
  18. 	<div id="content" style="background: blue">
  19. 		<table border="1">
  20. 			<thead>
  21. 			</thead>
  22. 			<tbody>
  23. 				<tr>
  24. 					<td>asdasdasafsfasfnaskjfakfas</td>
  25. 					<td>asdasdasafsfasfnaskjfakfas</td>
  26. 					<td>asdasdasafsfasfnaskjfakfas</td>
  27. 					<td>asdasdasafsfasfnaskjfakfas</td>
  28. 					<td>asdasdasafsfasfnaskjfakfas</td>
  29. 					<td>asdasdasafsfasfnaskjfakfas</td>
  30. 					<td>asdasdasafsfasfnaskjfakfas</td>
  31. 					<td>asdasdasafsfasfnaskjfakfas</td>
  32. 					<td>asdasdasafsfasfnaskjfakfas</td>
  33. 					<td>asdasdasafsfasfnaskjfakfas</td>
  34. 					<td>asdasdasafsfasfnaskjfakfas</td>
  35. 					<td>asdasdasafsfasfnaskjfakfas</td>
  36. 					<td>asdasdasafsfasfnaskjfakfas</td>
  37. 					<td>asdasdasafsfasfnaskjfakfas</td>
  38. 					<td>asdasdasafsfasfnaskjfakfas</td>
  39. 					<td>asdasdasafsfasfnaskjfakfas</td>
  40. 					<td>asdasdasafsfasfnaskjfakfas</td>
  41. 					<td>asdasdasafsfasfnaskjfakfas</td>
  42. 					<td>asdasdasafsfasfnaskjfakfas</td>
  43. 					<td>asdasdasafsfasfnaskjfakfas</td>
  44. 					<td>asdasdasafsfasfnaskjfakfas</td>
  45. 					<td>asdasdasafsfasfnaskjfakfas</td>
  46. 				</tr>
  47. 			</tbody>
  48.                   </table>
  49. 	</div>
  50. </div>
[HTML] pobierz, plaintext


wklej sobie ten kod do http://htmledit.squarefree.com/ i zobaczysz co jest nie tak

#content nie rozciąga się na szerokość jak tabelka jest za szeroka zatem pewnie #page i # top też się nie rozciąga:/
kristaps
29.01.2013, 10:03:57
Aaa, więc o to chodzi. Jeżeli mogę coś doradzić, to dodaj wewnętrzny czy zewnętrzny arkusz stylów i trzymaj css w jednym miejscu. Co do problemu to jednym z rozwiązań może być:
[CSS] pobierz, plaintext 
  1. body{
  2.   width: 100%;
  3.   display: table; 
  4. }
[CSS] pobierz, plaintext
zaajcu
29.01.2013, 10:07:46
Zrobiłem teraz tak:

#page display: inline-block; min-width: 100%;

co spowodowało automatyczne rozszerzanie się tego diva. Tylko pytanie czy takie rozwiązanie jest ok?

Cytat(kristaps @ 29.01.2013, 10:03:57 ) *
Aaa, więc o to chodzi. Jeżeli mogę coś doradzić, to dodaj wewnętrzny czy zewnętrzny arkusz stylów i trzymaj css w jednym miejscu. Co do problemu to jednym z rozwiązań może być:


Ależ oczywiście style trzymam osobno wink.gif teraz zrobiłem to razem, żeby było szybciej;)
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.