Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z rozciąganiem diva - rozciąganie rodzica
zaajcu
post 29.01.2013, 08:37:08
Post #1





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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ć

Ten post edytował zaajcu 29.01.2013, 08:38:49
Go to the top of the page
+Quote Post
kristaps
post 29.01.2013, 08:47:13
Post #2





Grupa: Zarejestrowani
Postów: 279
Pomógł: 36
Dołączył: 1.03.2012

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

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.
Go to the top of the page
+Quote Post
zaajcu
post 29.01.2013, 08:51:22
Post #3





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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 :/
Go to the top of the page
+Quote Post
kristaps
post 29.01.2013, 09:01:40
Post #4





Grupa: Zarejestrowani
Postów: 279
Pomógł: 36
Dołączył: 1.03.2012

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

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.

Ten post edytował kristaps 29.01.2013, 10:14:42
Go to the top of the page
+Quote Post
zaajcu
post 29.01.2013, 09:28:58
Post #5





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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:/

Ten post edytował zaajcu 29.01.2013, 09:29:22
Go to the top of the page
+Quote Post
kristaps
post 29.01.2013, 10:03:57
Post #6





Grupa: Zarejestrowani
Postów: 279
Pomógł: 36
Dołączył: 1.03.2012

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

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
Go to the top of the page
+Quote Post
zaajcu
post 29.01.2013, 10:07:46
Post #7





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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;)
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 24.05.2024 - 12:32
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn