Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dwa divy jeden pod drugim - problem z położeniem
MrGohut
post
Post #1





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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 )
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 12)
ssstrz
post
Post #2





Grupa: Zarejestrowani
Postów: 103
Pomógł: 17
Dołączył: 15.12.2012

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

[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">
Go to the top of the page
+Quote Post
sunpietro
post
Post #3





Grupa: Zarejestrowani
Postów: 262
Pomógł: 26
Dołączył: 23.01.2009
Skąd: eZ Systems

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

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.


--------------------
Blog webmasterski | Porady i tutoriale CSS, JavaScript
Podkłady kolejowe sprzedaż, części do wagonów - Biuro Handlu i Marketingu NALEPA
Go to the top of the page
+Quote Post
MrGohut
post
Post #4





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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

Ten post edytował MrGohut 29.04.2013, 20:01:07
Go to the top of the page
+Quote Post
joordan
post
Post #5





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 15.06.2010

Ostrzeżenie: (10%)
X----

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


Ten post edytował joordan 29.04.2013, 20:09:54
Go to the top of the page
+Quote Post
MrGohut
post
Post #6





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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

Ten post edytował MrGohut 29.04.2013, 20:22:31
Go to the top of the page
+Quote Post
joordan
post
Post #7





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 15.06.2010

Ostrzeżenie: (10%)
X----

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....
Go to the top of the page
+Quote Post
MrGohut
post
Post #8





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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;
}

Ten post edytował MrGohut 29.04.2013, 20:58:56
Go to the top of the page
+Quote Post
joordan
post
Post #9





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 15.06.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
MrGohut
post
Post #10





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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>
Go to the top of the page
+Quote Post
joordan
post
Post #11





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 15.06.2010

Ostrzeżenie: (10%)
X----

Te <table> też usuń bo nic nie wprowadza brak <tr><tb> Pamiętaj że align stosowany jest tylko przy tekście tongue.gif
Go to the top of the page
+Quote Post
MrGohut
post
Post #12





Grupa: Zarejestrowani
Postów: 32
Pomógł: 0
Dołączył: 29.04.2013

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

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 ?
Go to the top of the page
+Quote Post
joordan
post
Post #13





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 15.06.2010

Ostrzeżenie: (10%)
X----

zobacz

Więcej na ten temat
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: 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: 22.08.2025 - 10:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn