Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z Divami
Forum PHP.pl > Forum > Po stronie przeglądarki
majestiq
1.03.2007, 10:56:16
Witam wszystkich

Robie stronę opartą na divach jednak mam mały problem.

Mimo usilnych starań nie mogę umieścić elementu z górnego lewego rogu (left) na poziomie
pozostałych czyli 'newsy' i 'right'.

Z prawą stroną nie miałem problemów, natomiast z lewą mam wielkie :/

Teoretycznie mogę to zrobić 'sztucznie' dodając parametr position=absolute w css dla elementu górnego lewego rogu (lewog w css), ustawić odpowiednie marginesy i obniżyć elementy które są pod spodem i wtedy jest ok, ale wolałbym zrobić to normalnie, tzn tak żeby automatycznie wszystko się ustawiało i wyrównywało tak jak po prawej stronie bez position=absolute.

Bardzo proszę o jakieś wskazówki.

Tutaj można zobaczyć tą stronę ---> http://www.monitorek.pl/atlas/forum/


Oto kod html:

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  4. 		<meta http-equiv="content-language" content="pl" />
  5. 		<meta name="description" content="" />
  6. 		<meta name="keywords" content="" />
  7. 		<meta name="robots" content="index,follow" />
  8. 		<meta name="revisit-after" content="3 days" />
  9. 			<title>Atlas kulturystyczny</title>
  10. 		<link rel="stylesheet" type="text/css" href="style.css" />
  11. 	</head>
  12.  
  13.  
  14.  
  15.     <body>
  16.     <div id="container">
  17.  
  18.     <div id="naglowek">  
  19.  
  20.     <div id="lewofeststopka"> </div>
  21.   <div id="lewofeststopka2"> <P><center>Atlas Kulturystyczny</center></p> </div>
  22.     <div id="prawofeststopka">  </div>
  23.  
  24.  
  25.     </div>
  26. <!--
  27. <div id="pasek"> <p><font size="-2">&nbsp;</font></p> </div>
  28. -->
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35. 	<div id="lewog">left</div> 
  36. 	<div id="lewofest">  </div>
  37.     <div id="lewo"><div id="news"></div></div>
  38.  
  39.     <div id="srodek"> <center>    
  40.  
  41.  
  42.     <table frame="void" valign="top" border="0" width="100%" style="margin-top: 0px;"><tr><th height="100%" style="background-color: #585380;  font-color: #ffffff; font-family: Times New Roman, Arial, Helvetica; font-size: 10px; padding: 4px;"><font color="ffffff">Newsy</font></th></tr>
  43.     <tr><td style="background-color: #6f69a2; font-family: Tahoma; font-size: 12px;">1 news</td></tr>
  44. <html>
  45. 	<head>
  46. 		<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  47. 		<meta http-equiv="content-language" content="pl" />
  48. 		<meta name="description" content="" />
  49. 		<meta name="keywords" content="" />
  50. 		<meta name="robots" content="index,follow" />
  51. 		<meta name="revisit-after" content="3 days" />
  52. 			<title>Atlas kulturystyczny</title>
  53. 		<link rel="stylesheet" type="text/css" href="style.css" />
  54. 	</head>
  55.  
  56.  
  57.  
  58.     <body>
  59.     <div id="container">
  60.  
  61.     <div id="naglowek">  
  62.  
  63.     <div id="lewofeststopka"> </div>
  64.   <div id="lewofeststopka2"> <P><center>Atlas Kulturystyczny</center></p> </div>
  65.     <div id="prawofeststopka">  </div>
  66.  
  67.  
  68.     </div>
  69. <!--
  70. <div id="pasek"> <p><font size="-2">&nbsp;</font></p> </div>
  71. -->
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78. 	<div id="lewog">left</div> 
  79. 	<div id="lewofest">  </div>
  80.     <div id="lewo"><div id="news"></div></div>
  81.  
  82.     <div id="srodek"> <center>    
  83.  
  84.  
  85.     <table frame="void" valign="top" border="0" width="100%" style="margin-top: 0px;"><tr><th height="100%" style="background-color: #585380;  font-color: #ffffff; font-family: Times New Roman, Arial, Helvetica; font-size: 10px; padding: 4px;"><font color="ffffff">Newsy</font></th></tr>
  86.     <tr><td style="background-color: #6f69a2; font-family: Tahoma; font-size: 12px;">1 news</td></tr>
  87.  
  88. 	 <tr><td style="background-color: #847ec2; font-family: Tahoma; font-size: 12px;">2 news</td></tr>
  89. 	 <tr><td style="background-color: #9d95e5; font-family: Tahoma; font-size: 12px;">3 news</td></tr>
  90. </table> 
  91.  
  92.  
  93. </td></tr></table>
  94.  
  95. </center> 
  96.  
  97.  
  98.  
  99. </div>
  100.  
  101. 	<div id="prawog">right</div> <div id="prawogkwadrat"></div>
  102.     <div id="prawo"><div id="news">dsd</div></div>
  103.  
  104.  
  105. <div id="prawofest">  </div>
  106.  
  107.     <div id="stopka" style="font-fmaily: tahoma; font-size: 13px; font-color: #FFFFFF;"><font face="Verdana, 'Times New Roman', Arial" color="FFFFFF"><B>Powered by Notepad</B></font></div> 
  108.  
  109.  
  110.     </div>    
  111. </body>
  112.  
  113. </html>[html]
  114. 	 <tr><td style="background-color: #847ec2; font-family: Tahoma; font-size: 12px;">2 news</td></tr>
  115. 	 <tr><td style="background-color: #9d95e5; font-family: Tahoma; font-size: 12px;">3 news</td></tr>
  116. </table> 
  117.  
  118.  
  119. </td></tr></table>
  120.  
  121. </center> 
  122.  
  123.  
  124.  
  125. </div>
  126.  
  127. 	<div id="prawog">right</div> <div id="prawogkwadrat"></div>
  128.     <div id="prawo"><div id="news">dsd</div></div>
  129.  
  130.  
  131. <div id="prawofest">  </div>
  132.  
  133.     <div id="stopka" style="font-fmaily: tahoma; font-size: 13px; font-color: #FFFFFF;"><font face="Verdana, 'Times New Roman', Arial" color="FFFFFF"><B>Powered by Notepad</B></font></div> 
  134.  
  135.  
  136.     </div>    
  137. </body>
  138.  
  139. </html>
[HTML] pobierz, plaintext



i css:

[HTML] pobierz, plaintext 
  1. body {
  2.         background-color: #c0c0c0;
  3.         margin: 0;
  4.         padding: 0;
  5.         text-align:center;
  6.     }
  7.  
  8. div {
  9.         font: verdana 12px #000000;
  10.         position:relative;
  11.     }
  12.  
  13. #container {
  14.         margin:0 auto;
  15.         padding:0 5px 0 5px;
  16.         position:relative;
  17.         width:730px;
  18.  
  19.         background-color:#ffffff;
  20.         text-align:left;
  21.         clear: both;
  22.     }
  23.  
  24. #naglowek {
  25.         background: #fff url(bodys.jpg) no-repeat;
  26.         width:730px;
  27.         height:150px;
  28.         margin-bottom:10px;
  29.         float:center;
  30.  
  31.  
  32.  
  33.     }
  34.  
  35.  
  36. #pasek  {background: #6f69a2;
  37. 			margin-top: 2px;
  38. 			margin-bottom: 2px;
  39.          width:100%;
  40.          height:5px
  41.         float:left;
  42.         vertical-align: top;	
  43.          }
  44.  
  45. #centrums {
  46.         background: #fff;
  47.         width:100px;
  48.         height:100px;
  49.         vertical-align: top;
  50.         float:center;
  51.     }
  52.  
  53.  
  54.  
  55.  
  56.  
  57. #lewofeststopka  {
  58. 			background: #9d95e5 url(body.jpg) no-repeat;
  59. 			margin-right: 0px;
  60. 			margin-top: 0px;
  61.          width:70px;
  62.          height:100%;
  63.         float:left;
  64.         vertical-align: top;	
  65.  
  66.  
  67.     }
  68.  
  69.  
  70.  
  71. #lewofeststopka2  {
  72. 			background: #9d95e5 url(bodyd.jpg) no-repeat;
  73. 			font-color: #000000;
  74. 			margin-right: 0px;
  75. 			margin-top: 0px;
  76.          width:590px;
  77.          height:100%;
  78.         float:left;
  79.         vertical-align: top;
  80.     }
  81.  
  82.  
  83.  
  84. #news  {
  85. 			background: #dedeff;
  86. 			font-color: #000000;
  87. 			margin-right: 0px;
  88. 			margin-top: 0px;
  89.          width:150px;
  90.          height:99%;
  91.         float:left;
  92.         vertical-align: top;
  93.     }
  94.  
  95.  
  96. #news2  {
  97. 			background: #dfdfee;
  98. 			font-color: #000000;
  99. 			margin-right: 0px;
  100. 			margin-top: 0px;
  101.          width:150px;
  102.          height:70px;
  103.         float:left;
  104.         vertical-align: top;
  105.     }
  106.  
  107.  
  108. #news3  {
  109. 			background: #dedeff;
  110. 			font-color: #000000;
  111. 			margin-right: 0px;
  112. 			margin-top: 0px;
  113.          width:150px;
  114.          height:100px;
  115.         float:left;
  116.         vertical-align: top;
  117.     }
  118.  
  119.  
  120. #news4  {
  121. 			background: #cceefd;
  122. 			font-color: #000000;
  123. 			margin-right: 0px;
  124. 			margin-top: 0px;
  125.          width:150px;
  126.          height:100px;
  127.         float:left;
  128.         vertical-align: top;
  129.     }
  130.  
  131. #news5  {
  132. 			background: #dedeff;
  133. 			font-color: #000000;
  134. 			margin-right: 0px;
  135. 			margin-top: 0px;
  136.          width:150px;
  137.          height:107px;
  138.         float:left;
  139.         vertical-align: top;
  140.     }
  141.  
  142.  
  143. #lewo {
  144.         width:150px;
  145.         height:89%;
  146.         float:left;
  147.         margin-top: 2px;
  148.  
  149.     }
  150.  
  151. #lewomenu {
  152.         width:150px;
  153.         float:left;
  154.         margin-top: 2px;
  155.     }
  156.  
  157.  
  158. #prawog {
  159.         width:150px;         
  160.         float:left;
  161.         height:4%;
  162.         margin-top: 2px;
  163.         background-color:#585380;
  164.     }
  165.  
  166.  
  167. #lewog {
  168.  
  169.         width:150px;         
  170.         float:center;
  171.         height:4%;
  172.         margin-top: 2px;
  173.         background-color:#585380;
  174.         vertical-align: top;
  175.  
  176.     }
  177.  
  178.  
  179. #lewofest {
  180. 			background: #6f69a2;
  181. 			margin-right: 5px;
  182. 			margin-top: 2px;
  183. 		  width:10px;
  184.         height:99%;
  185.         float:left;
  186.  
  187.  
  188.     }
  189.  
  190.  
  191. #prawofest {
  192. 			background: #6f69a2;
  193. 			margin-top: 2px;
  194.         width:10px;
  195.          height:99%;
  196.         float:right;
  197.     }
  198.  
  199.  
  200. #prawofeststopka {
  201. 			background: #9d95e5 url(body.jpg) no-repeat;
  202. 			margin-right: 0px;
  203. 			margin-top: 0px;
  204.         width:70px;
  205.          height:100%;
  206.         float:right;
  207.         vertical-align: top;
  208.     }
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215. #prawogkwadrat {
  216.         width:10px;         
  217.         float:right;
  218.         height:4%;
  219.         margin-top: 2px;
  220.         background-color:#985380;
  221.     }
  222.  
  223.  
  224. #lewogkwadrat {
  225.         width:10px;         
  226.         float:left;
  227.         height:4%;
  228.         margin-top: 2px;
  229.         background-color:#985380;
  230.     }
  231.  
  232.  
  233. #prawo {
  234.         width:150px;         
  235.         float:left;
  236.         height:89%;
  237.         margin-top: 2px;
  238.     }
  239.  
  240. #srodek {
  241.         width:400px;
  242.         height:98.4%;
  243.         float:left;
  244.         background-color:#f1f1f1;
  245. }
  246.  
  247. #stopka {
  248.  
  249. 		background-color:#6f69a2;
  250.        clear:both;
  251.         text-align:center;
  252.         margin-bottom: 0px;
  253. }
[HTML] pobierz, plaintext



Mam nadzieję że poradzicie sobie z nazwami w stylach winksmiley.jpg

Z góry dzięki za pomoc !





Coś nie ma chętnych do pomocy :/

To może inaczej.
Wiadomo jak zrobić strone na divach podzielona na 3 części: lewa, środek, prawa
No i nie ma z tym problemu:


|==========|=========================|==========|
| LEWA | ŚRODEK | PRAWA |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
|==========|=========================|==========|

Ale jak zrobić stronę podzieloną na 3 częśći w poziomie jak wyżej
i dodatkowo na 2 takie częśći w pionie (połączone):

|==========|=========================|==========|
| LEWA | ŚRODEK | PRAWA |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
|==========|=========================|==========|
| | | |
| LEWA | ŚRODEK | PRAWA |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
|==========|=========================|==========|

Dzięki za info :-)
gekon
1.03.2007, 11:01:34
http://kurs.browsehappy.pl/Krok/Float
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.