Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwa divy jeden pod drugim - problem z położeniem
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
MrGohut
29.04.2013, 18:33:23
Mam problem z dwoma divami. Chcę dodać div pod już istniejącym divem, ma być po środku. Obecnie mam tak:
[HTML] pobierz, plaintext 
  1. <div id="newsy" clear="left">
  2. 				<script type="text/javascript">
  3. 					// <![CDATA[
  4. 						var news = new News();
  5.  
  6. 						/////
  7. 						// Dodawanie newsów w postaci:
  8. 						// news.dodaj(dzień,miesiąc,rok,
  9. 						//   'Tytuł','Treść newsa...',
  10. 						//   'adres','ramka',
  11. 						//   'autor','e-mail',
  12. 						//   'obrazek',szerokość,wysokość);
  13. 						/////
  14.  
  15. 						//////////
  16. 						// Dodawanie newsów:
  17. 						news.dodaj(29,04,2013, 'Testowy News', 'Testowy news');
  18. 						//////////
  19.  
  20. 						news.wyswietl();
  21. 					// ]]>
  22. 				</script>
  23. 			</div>
  24. 			<div id="formularz" clear="left">
  25. 				TEST
  26. 			</div>
[HTML] pobierz, plaintext

I CSS:
[HTML] pobierz, plaintext 
  1. #newsy { 
  2.  float: left;
  3.  color: #333;
  4.  border: 1px solid #ccc;
  5.  background: #F2F2E6;
  6.  margin: 0px 5px 5px 0px;
  7.  padding: 10px;
  8.  height: 350px;
  9.  width: 456px;
  10. }
  11. #formularz{ 
  12.  float: left;
  13.  color: #333;
  14.  border: 1px solid #ccc;
  15.  background: #F2F2E6;
  16.  margin: 0px 5px 5px 0px;
  17.  padding: 10px;
  18.  height: 350px;
  19.  width: 456px;
[HTML] pobierz, plaintext

Ale niestety ten drugi div (formularz) nie ukłąda się na środku pod newsami tylko jakoś wypycha go na lewo ;/ Kombinowałem godzine i już nie mam pomysłów : D (Pierwszy raz z divami tongue.gif )
ssstrz
29.04.2013, 19:50:44 
[PHP] pobierz, plaintext 
  1. #newsy {
  2. float: left;
  3. color: #333;
  4. border: 1px solid #ccc;
  5. background: #F2F2E6;
  6. margin: 0px 5px 5px 0px;
  7. padding: 10px;
  8. height: 350px;
  9. width: 456px;
  10. }
  11. #formularz{
  12. margin:auto;
  13. color: #333;
  14. border: 1px solid #ccc;
  15. background: #F2F2E6;
  16.  
  17.  
  18. height: 350px;
  19. width: 456px;
  20. }
[PHP] pobierz, plaintext

wywal to clear="left" z htmla <div id="formularz" clear="left">
sunpietro
29.04.2013, 19:51:13
Kłaniają się podstawy. Usuń float: left z divów.
Jak rozumiem, tym drugim div jest #formularz, w takim razie do niego daj margin: 0px auto 5px;
Z kodu HTML usuń: clear="left", to są style CSS ktore się daje do pliku CSS bezpośrednio.
MrGohut
29.04.2013, 19:59:54
Wszystko jest ok. kod css jest w pliku .css, spokojnie smile.gif

Zmieniłem ten css na ten co mi podałeś no i po części niby jest dobrze, napis jest we właściwym miejscu, jednak tło wywaliło do góry, sami zobaczcie:
http://img547.imageshack.us/img547/8523/beztytuuiow.png
wywaliłem też clear="left" z divów
joordan
29.04.2013, 20:03:25
chodzi o coś takiego..questionmark.gif


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <STYLE type="text/css">
  4. #newsy { 
  5.  
  6.  color: #333;
  7.  border: 1px solid #ccc;
  8.  background: #F2F2E6;
  9.  margin-right: auto;
  10.  margin-left: auto;
  11.  margin-bottom:5px;
  12.  padding: 10px;
  13.  height: 350px;
  14.  width: 456px;
  15. }
  16. #formularz{ 
  17. clear:both;
  18.  color: #333;
  19.  border: 1px solid #ccc;
  20.  background: #F2F2E6;
  21.  margin-left: auto;
  22.  margin-right: auto;
  23.  padding: 10px;
  24.  height: 350px;
  25.  width: 456px;
  26.  </STYLE>
  27. </head>
  28. <body>
  29. <div id="newsy" >
  30. aaaaaa
  31. 			</div>
  32. 			<div id="formularz" >
  33. 				TEST
  34. 			</div>
  35.  
  36.  
  37. </body>
  38. </html>
[HTML] pobierz, plaintext
MrGohut
29.04.2013, 20:21:45
Teraz to już w ogóle wszystko się poprzestawiało na stronce ;/

Chodzi o to, żeby ten napis TEST z tym tłem kremowym (takie samo tło jak na newsach) był pod tymi newsami . Prostokąt pod prostokątem ; P
joordan
29.04.2013, 20:29:23
Jak mam ci pomóc jak nie dajesz kodu całej strony z kont mam wiedzieć w której klasie albo identyfikatorze jest błąd...? A jak mówisz o konkretnych divach to pisz blok "id=formularz" bo tak to bez sensu....
MrGohut
29.04.2013, 20:55:41
Proszę bardzo, macie indexa i css\'a :
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Tytul</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <link rel="stylesheet" type="text/css" href="menu.css" />
        <link rel="Stylesheet" type="text/css" href="galeria.css" />
        <link rel="Stylesheet" type="text/css" href="news.css" />
        <script type="text/javascript" charset="iso-8859-2" src="news.js"></script>
        <script type="text/javascript" src="galeria.js"></script>
    </head>
    <body>
        <!-- Begin Wrapper -->
        <div id="wrapper">
            <!-- Begin Header -->
            <div id="header">
                <center>
                    TUTAJ JEST LOGO
                </center>
            </div>
            <!-- End Header -->
            <!-- Begin Left Column -->
            <div id="leftcolumn">
                <center>
                    <table>
                        <ul>
                            <li><a href="#">Menu1</a></li>
                            <li><a href="#">Menu2</a></li>
                            <li><a href="#">Menu3</a></li>
                            <li><a href="#">Menu4</a></li>
                        </ul>
                    </table>
                </center>
            </div>
            <!-- End Left Column -->
            <!-- Begin Content Column -->
            <div id="newsy">
                <script type="text/javascript">
                    // <![CDATA[
                        var news = new News();
                        
                        /////
                        // Dodawanie newsów w postaci:
                        // news.dodaj(dzien,miesiac,rok,
                        //   'Tytul','Tresc newsa...',
                        //   'adres','ramka',
                        //   'autor','e-mail',
                        //   'obrazek',szerokosc,wysokosc);
                        /////

                        //////////
                        // Dodawanie newsów:
                        news.dodaj(29,04,2013, 'Testowy News', 'Testowy news');
                        //////////

                        news.wyswietl();
                    // ]]>
                </script>
            </div>
            <div id="formularz">
                TEST
            </div>
            <!-- End Content Column -->
            <!-- Begin Right Column -->
            <div id="rightcolumn">
                <script type="text/javascript">
                    // <![CDATA[
                        var galeria = new Galeria('galeria', new Array(
                            new Array('midk.jpg', '', 'Tytul', ''),
                            new Array('mwola.jpg', '', 'Tytul', ''),
                            new Array('mtablica.jpg', '', 'Tytul', ''),
                            new Array('mmieszkanie.jpg', '', 'Tytul', '')
                        ), 'galeria.css', true);
                    // ]]>
                </script>
            </div>
            <!-- End Right Column -->
            <!-- Begin Footer -->
            <div id="footer">
                ? 2013 - <?php echo date("Y"); ?>   qwerty
            </div>
            <!-- End Footer -->
        </div>
        <!-- End Wrapper -->
    </body>
</html>

Kod
/*
      Created by Keith Donegan of Code-Sucks.com
      
      E-Mail: Keithdonegan@gmail.com
      
      You can do whatever you want with these layouts,
      but it would be greatly appreciated if you gave a link
      back to http://www.code-sucks.com
      
*/

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header {
color: #333;
width: 940px; /*szerokość loga*/
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px; /*wyskokość loga*/
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 128px;
width: 195px;
float: left;
}
#newsy {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
}
#formularz{
margin: auto;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
height: 350px;
width: 456px;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 752px;
width: 235px;
float: left;
}
#footer {
width: 940px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}
joordan
29.04.2013, 21:37:32
Musisz robić kolumny w ten sposób

_______
|top|
______
|lewa|srodek|prwa|
|lewa|srodek|prwa|
|lewa|srodek|prwa|
|lewa|srodek|prwa|
_______
|fotter|
______


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <STYLE type="text/css">
  4. * { padding: 0; margin: 0; }
  5.  
  6. body {
  7. font-family: Arial, Helvetica, sans-serif;
  8. font-size: 13px;
  9. }
  10. #wrapper { 
  11. margin: 0 auto;
  12. width: 1000px;
  13. }
  14. #header {
  15. color: #333;
  16. width: 940px; /*szerokość loga*/
  17. float: left;
  18. padding: 10px;
  19. border: 1px solid #ccc;
  20. height: 100px; /*wyskokość loga*/
  21. margin: 10px 0px 5px 0px;
  22. background: #BD9C8C;
  23. }
  24. #leftcolumn { 
  25. color: #333;
  26. border: 1px solid #ccc;
  27. background: #E7DBD5;
  28. margin: 0px 5px 5px 0px;
  29. padding: 10px;
  30. height: 128px;
  31. width: 195px;
  32. float: left;
  33. }
  34. #newsy { 
  35. float: left;
  36.  
  37. color: #333;
  38. border: 1px solid #ccc;
  39. background: #F2F2E6;
  40. margin: 0px 5px 5px 0px;
  41. padding: 10px;
  42. height: 350px;
  43. width: 456px;
  44. }
  45.  
  46. #columna_srodek { 
  47. float: left;
  48. padding-right:16px;
  49.  
  50. min-height: 360px;
  51. width: 466px;
  52. }
  53. #formularz{ 
  54. float: left;
  55.  color: #333;
  56.  border: 1px solid #ccc;
  57.  background: #F2F2E6;
  58.  margin-left: auto;
  59.  margin-right: auto;
  60.  padding: 10px;
  61.  height: 350px;
  62.  width: 456px;
  63.  }
  64. #rightcolumn { 
  65. color: #333;
  66. border: 1px solid #ccc;
  67. background: #E7DBD5;
  68. margin: 0px 0px 5px 0px;
  69. padding: 10px;
  70. height: 752px;
  71. width: 235px;
  72. float: left;
  73. }
  74. #footer { 
  75. width: 940px;
  76. clear: both;
  77. color: #333;
  78. border: 1px solid #ccc;
  79. background: #BD9C8C;
  80. margin: 0px 0px 10px 0px;
  81. padding: 10px;
  82. }
  83.  </STYLE>
  84. </head>
  85. <body>
  86. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  87. <html xmlns="http://www.w3.org/1999/xhtml">
  88.     <head>
  89.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  90.         <title>Tytul</title>
  91.  
  92.     </head>
  93.     <body>
  94.         <!-- Begin Wrapper -->
  95.         <div id="wrapper">
  96.             <!-- Begin Header -->
  97.             <div id="header">
  98.                 <center>
  99.                     TUTAJ JEST LOGO
  100.                 </center>
  101.             </div>
  102.             <!-- End Header -->
  103.             <!-- Begin Left Column -->
  104.             <div id="leftcolumn">
  105.                 <center>
  106.                     <table>
  107.                         <ul>
  108.                             <li><a href="#">Menu1</a></li>
  109.                             <li><a href="#">Menu2</a></li>
  110.                             <li><a href="#">Menu3</a></li>
  111.                             <li><a href="#">Menu4</a></li>
  112.                         </ul>
  113.                     </table>
  114.                 </center>
  115.             </div>
  116.             <!-- End Left Column -->
  117.             <!-- Begin Content Column -->
  118. 			<div id="columna_srodek">
  119. 				<div id="newsy">
  120. 					<script type="text/javascript">
  121. 						// <![CDATA[
  122. 							var news = new News();
  123.  
  124. 							/////
  125. 							// Dodawanie newsów w postaci:
  126. 							// news.dodaj(dzien,miesiac,rok,
  127. 							//   'Tytul','Tresc newsa...',
  128. 							//   'adres','ramka',
  129. 							//   'autor','e-mail',
  130. 							//   'obrazek',szerokosc,wysokosc);
  131. 							/////
  132.  
  133. 							//////////
  134. 							// Dodawanie newsów:
  135. 							news.dodaj(29,04,2013, 'Testowy News', 'Testowy news');
  136. 							//////////
  137.  
  138. 							news.wyswietl();
  139. 						// ]]>
  140. 					</script>
  141.  
  142. 			     </div>
  143. 				<div id="formularz">
  144. 					TEST
  145. 				</div>
  146. 			</div>
  147.             <!-- End Content Column -->
  148.             <!-- Begin Right Column -->
  149.             <div id="rightcolumn">
  150.                 <script type="text/javascript">
  151.                     // <![CDATA[
  152.                         var galeria = new Galeria('galeria', new Array(
  153.                             new Array('midk.jpg', '', 'Tytul', ''),
  154.                             new Array('mwola.jpg', '', 'Tytul', ''),
  155.                             new Array('mtablica.jpg', '', 'Tytul', ''),
  156.                             new Array('mmieszkanie.jpg', '', 'Tytul', '')
  157.                         ), 'galeria.css', true);
  158.                     // ]]>
  159.                 </script>
  160.             </div>
  161.             <!-- End Right Column -->
  162.             <!-- Begin Footer -->
  163.             <div id="footer">
  164.                 ? 2013 - <?php echo date("Y"); ?>   qwerty
  165.             </div>
  166.             <!-- End Footer -->
  167.         </div>
  168.         <!-- End Wrapper -->
  169.     </body>
  170. </html>
  171.  
  172.  
  173. </body>
  174. </html>
[HTML] pobierz, plaintext


Skasuj ten <center> i zamień na coś sęnsownego. Poczytaj jakiś współczesny kurs html css
MrGohut
30.04.2013, 13:03:49
Dzięki wielkie ! smile.gif
Z tym center też dzięki za radę, zrobiłem tak:
[HTML] pobierz, plaintext 
  1. <div id="leftcolumn" align="center">
[HTML] pobierz, plaintext

zamiast tego <center></center>
joordan
30.04.2013, 14:08:48
Te <table> też usuń bo nic nie wprowadza brak <tr><tb> Pamiętaj że align stosowany jest tylko przy tekście tongue.gif
MrGohut
30.04.2013, 16:30:55
Aha, ok dzięki za radę smile.gif

Może mi ktoś jeszcze powiedzieć jak mogę wrzucić tło na stronę ale tak, żeby nie powielało się i jak przewijam stronę, to żeby tło zostało w miejscu ?
joordan
30.04.2013, 17:02:33
zobacz

Więcej na ten temat
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-2024 Invision Power Services, Inc.