Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Divy nie w jednej lini
Forum PHP.pl > Forum > Po stronie przeglądarki
Mlodycompany
24.08.2008, 20:36:59
Witam. Zaczłem bawić się divami i na wstępie mam problem. Mam taki kod: 
[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. html, body {
  4.  background-color: #fff;
  5.  color: #000;
  6.  margin: 0;
  7.  padding: 0;
  8. }
  9.  
  10. #top {
  11.  width: 780px;
  12. }
  13.  
  14. #NAGLOWEK {
  15.  background-color: #888;
  16. }
  17.  
  18. #MENU {
  19.  width: 150px;
  20.  float: left;
  21.  overflow: hidden;
  22.  background-color: #ccc;
  23. }
  24.  
  25. #TRESC {
  26.  width: 630px;
  27.  float: left;
  28.  overflow: hidden;
  29.  background-color: #fff;
  30. }
  31.  
  32. #STOPKA {
  33.  clear: both;
  34.  width: 100%;
  35.  background-color: #888;
  36. }
  37. #INFORMACJE {
  38.  width: 150px;
  39.  float: right;
  40.  overflow: hidden;
  41.  background-color: #ccc;
  42. }
  43. </style>
  44. <div id="top">
  45.  <div id="NAGLOWEK">Nagłówek szablonu</div>
  46.  <div id="MENU">Menu nawigacyjne</div>
  47.  <div id="TRESC">Treść strony</div>
  48.  <div id="INFORMACJE">Treasdasdady</div>
  49.  <div id="STOPKA">Stopka serwisu</div>
  50. </div>
  51. </html>
[HTML] pobierz, plaintext


Menu, treść, informacje powinny być w jednej lini, a nie są ponieważ informacje jest niżej od reszty.

Czy ktoś może wie dlaczego??
paziek
24.08.2008, 22:22:57
Nie zmieściły się.
Dałeś na top width = 780px;
A menu (150px) + treść (630px) + informacje (150px) = 930px

Ale sądzę, że tak czy siak może być problemz tymi floatmi ;-)
Mlodycompany
25.08.2008, 10:07:03
no z tym juz sobie poradzilem, ale teraz mam inny problem. chciałbym wycentrować cała strone a nie tylko tekst. jak to zrobic??
adamson
25.08.2008, 10:30:20
div#top {margin: auto}
winksmiley.jpg
Gryf
25.08.2008, 10:43:39
Cytat
div#top {margin: auto}

tak ale to nie załatwi sprawy pod ie7
Cytat
html, body
{
background-color : #fff;
color : #000;
margin : 0;
padding : 0;
text-align : center;
}


Pozdr.
paziek
25.08.2008, 11:06:38
trzeba pamiętać, aby później skontrować te text-align: center

np.
Kod
body * {text-align: left;}
Mlodycompany
25.08.2008, 20:46:45
nic nie pomaga. kod: 
[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. html, body
  4. {
  5. background-color : #fff;
  6. color : #000;
  7. margin : 0;
  8. padding : 0;
  9. text-align : center;
  10. }
  11. .div{
  12.  width: 800px;
  13.  background-color: #fff;
  14.  color: black;
  15.  margin: 1em 0;}
  16. #div .top {
  17.  background-color: #888;
  18.  margin: auto;
  19. }
  20. #div .menu {
  21.  width: 200px;
  22.  float: left;
  23.  overflow: hidden;
  24.  background-color: #ccc;
  25. }
  26. #div .menu2 {
  27.  width: 200px;
  28.  float: right;
  29.  overflow: hidden;
  30.  background-color: #ccc;
  31. }
  32. #div .tresc {
  33.  width: 400px;
  34.  float: left;
  35.  overflow: hidden;
  36.  background-color: #fff;
  37. }
  38. #div .bottom {
  39.  clear: both;
  40.  width: 100%;
  41.  background-color: #888;
  42. }
  43.  
  44.  
  45. </style>
  46. <div class="div" id="div">
  47. <div class="top">Nagłówek szablonu</div>
  48. <div class="menu">Menu nawigacyjne</div>
  49. <div class="menu2">Dodatkowe informacje</div>
  50. <div class="tresc">Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony </div>
  51. <div class="szablon_stopka">Stopka serwisu</div>
  52. </div>
  53. </html>
[HTML] pobierz, plaintext
phpion
25.08.2008, 21:00:28 
[HTML] pobierz, plaintext 
  1. body {
  2. margin: 0px auto;
  3. width: 900px;
  4. }
[HTML] pobierz, plaintext
Mlodycompany
25.08.2008, 21:09:40
mam tak: 
[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. html, body
  4. {
  5. background-color : #fff;
  6. color : #000;
  7. margin : 0 auto;
  8. padding : 0;
  9. text-align : center;
  10. }
  11. .div{
  12.  width: 100%;
  13.  background-color: #fff;
  14.  color: black;
  15.  margin: 1em 0;}
  16. #div .top {
  17.  background-color: #888;
  18.  margin: auto;
  19. }
  20. #div .page{
  21.  width: 800px;
  22. }
  23. #div .menu {
  24.  width: 20%;
  25.  float: left;
  26.  overflow: hidden;
  27.  background-color: #ccc;
  28. }
  29. #div .menu2 {
  30.  width: 20%;
  31.  float: right;
  32.  overflow: hidden;
  33.  background-color: #ccc;
  34. }
  35. #div .tresc {
  36.  width: 60%;
  37.  float: left;
  38.  overflow: hidden;
  39.  background-color: #fff;
  40.  text-align: center;
  41. }
  42. #div .bottom {
  43.  clear: both;
  44.  width: 100%;
  45.  background-color: #888;
  46. }
  47.  
  48.  
  49. </style>
  50. <div class="div" id="div">
  51. <div class="page">
  52. <div class="top">Nagłówek szablonu</div>
  53. <div class="menu">Menu nawigacyjne</div>
  54. <div class="menu2">Dodatkowe informacje</div>
  55. <div class="tresc">Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony </div>
  56. <div class="bottom">Stopka serwisu</div>
  57. </div>
  58. </div>
  59. </html>
[HTML] pobierz, plaintext


i nic nie pomogło. Nadal jest po lewej stronie.
Gryf
25.08.2008, 21:30:57
tak powinno działać
Kod
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page</title>
</head>
<style>
html, body
{
    background-color : #fff;
    color : #000;
    margin : 0;
    padding : 0;
    text-align : center;
}
#INFORMACJE
{
    background-color : #ccc;
    float : right;
    height : auto;
    overflow : auto;
    width : 150px;
}
#MENU
{
    background-color : #ccc;
    float : left;
    height : auto;
    overflow : auto;
    width : 150px;
}
#NAGLOWEK
{
    background-color : #888;
}
#STOPKA
{
    background-color : #888;
    clear : both;
    width : 780px;
}
#top
{
    margin : auto;
    width : 780px;
}
#TRESC
{
    background-color : #fff;
    float : left;
    height : auto;
    overflow : auto;
    width : 480px;
}
</style>
<body>
<div id="top">
<div id="NAGLOWEK">Nagłówek szablonu</div>
<div id="MENU">Menu nawigacyjne</div>
<div id="TRESC">Treść strony
    Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony
    Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony
    Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony
    Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony Treść strony
</div>
<div id="INFORMACJE">T. dnia, T. dnia, T. dnia, T. dnia, T. dnia,
    T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia,
    T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia, T. dnia,
    T. dnia, T. dnia,
</div>
<div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>
Mlodycompany
25.08.2008, 21:33:38
no wreszcie działa. thx
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.