Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]3 kolumny i problem o_O
Forum PHP.pl > Forum > Przedszkole
Marcek190891
19.10.2008, 18:34:24
Witam,



obię szablon html z 3 kolumnami ale... No właśnie, 3 kolumna...

Nie mam pojęcia co zrobić... Mam zrobioną grafikę i pocięty szablon i wygląda to mniej więcej tak...



_________________________________

|                 Logo                            |

|________________________________|

|Kontakt:|------------------|  Menu:  |

|           |  Tresc strony       |            |

|           |   Lorem Ipsum      |            |

|Zasady:|     Ipsum Lorem    |            |

|           |                         |            |

|           |                         |            |

_________________________________



Zakodowałem już logo i teraz koduje reszte pocięte mam to w ten sposób

Lewa kolumna:

-Kontakt

-Tresc_kontaktu

-Zasady

-Tresc zasad



Środkowa kolumna:

-linia ----

-tresc



Prawa kolumna:

-menu

-tresc_menu



I gdy wydivuje kontakt za pomocą float:left mam go pod logiem po lewej stronie, następnie dałem "linie" ze środkowej kolumny też float:left; no i jako ostatni dałem menu-float:right;...

Do tej pory było ok ale... Nooo...

Następnie daję "tresc kontaktu" float: left; potem chcę dać tresc ze środkowej kolumny ale wydłużoną na wyliczoną długość strony i jest na środku największa, do tego dodaje float: right; z treścią menu, a już następny div tzn. "Zasady" idzie na lewo ale pod treść  czyli między treścią kontaktu a zasadami jest luka o wielkości tej środkowej treści...

Mam wielką prośbę o pomoc... Jest to strona robiona pod aukcje dla firmy i zależy mi na czasie.

Z góry serdecznie dziękuję...

Poniżej przedstawiam kod.

[HTML] pobierz, plaintext 
  1. body
  2. {
  3.  color: black;
  4.  font-family: Times New Roman;
  5.  font-size: 14px;
  6. }
  7. div#center
  8. {
  9.  width: 900px;
  10.  margin: 0px auto;
  11.  position: relative;
  12. }
  13. div#aukcja_01
  14. {
  15.  float: left;
  16.  background-image: url('img/aukcja_01.gif');
  17.  width: 201px;
  18.  height: 85px;
  19.  margin: 0px;
  20. }
  21. div#aukcja_02
  22. {
  23.  float: left;
  24.  background-image: url('img/aukcja_02.jpg');
  25.  width: 276px;
  26.  height: 85px;
  27.  margin: 0px;
  28. }
  29. div#aukcja_03
  30. {
  31.  float: left;
  32.  background-image: url('img/aukcja_03.jpg');
  33.  width: 227px;
  34.  height: 85px;
  35.  margin: 0px;
  36. }
  37. div#aukcja_04
  38. {
  39.  float: left;
  40.  background-image: url('img/aukcja_04.gif');
  41.  width: 196px;
  42.  height: 85px;
  43.  margin: 0px;
  44. }
  45. div#aukcja_05
  46. {
  47.  float: left;
  48.  background-image: url('img/aukcja_05.jpg');
  49.  width: 201px;
  50.  height: 86px;
  51.  margin: 0px;
  52. }
  53. div#aukcja_06
  54. {
  55.  float: left;
  56.  background-image: url('img/aukcja_06.jpg');
  57.  width: 503px;
  58.  height: 86px;
  59.  margin: 0px;
  60. }
  61. div#aukcja_07
  62. {
  63.  float: left;
  64.  background-image: url('img/aukcja_07.jpg');
  65.  width: 196px;
  66.  height: 86px;
  67.  margin: 0px;
  68. }
  69. div#aukcja_08
  70. {
  71.  float: left;
  72.  background-image: url('img/aukcja_08.jpg');
  73.  width: 900px;
  74.  height: 17px;
  75.  margin: 0px;
  76. }
  77. div#aukcja_09
  78. {
  79.  float: left;
  80.  background-image: url('img/aukcja_09.jpg');
  81.  width: 218px;
  82.  height: 36px;
  83.  margin: 0px;
  84. }
  85. div#aukcja_11
  86. {
  87.  float: right;
  88.  background-image: url('img/aukcja_11.jpg');
  89.  width: 170px;
  90.  height: 36px;
  91.  margin: 0px;
  92. }
  93. div#linia
  94. {
  95.  float: left;
  96.  background-image: url('img/linia.jpg');
  97.  width: 512px;
  98.  height: 2px;
  99.  margin: 0px;
  100. }
  101. div#aukcja_10
  102. {
  103.  float: left;
  104.  background-image: url('img/aukcja_10.jpg');
  105.  width: 512px;
  106.  height: 34px;
  107.  margin: 0px;
  108. }
  109. div#aukcja_12
  110. {
  111.  float: left;
  112.  background-image: url('img/aukcja_12.jpg');
  113.  width: 218px;
  114.  height: 238px;
  115.  margin: 0px;
  116. }
[HTML] pobierz, plaintext 




[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  <link rel="stylesheet" href="style.css" type="text/css" />
  6.  <title>Dociepleniowiec</title>
  7. </head>
  8. <body>
  9.  
  10.  
  11. <div id="center">
  12.  
  13.  
  14. <div id="aukcja_01"></div>
  15.  <a href="http://www.dociepleniowiec.pl"><div id="aukcja_02"></div></a>
  16.  	<div id="aukcja_03"></div>
  17.  		<div id="aukcja_04"></div>
  18.  	 
  19. <div id="aukcja_05"></div>
  20.  <div id="aukcja_06"></div>
  21.  	<div id="aukcja_07"></div>
  22.  
  23. <div id="aukcja_08"></div>
  24.  
  25. <div id="aukcja_09"></div>
  26.  
  27. <div id="aukcja_11"></div>
  28.  
  29. <div id="linia"></div>
  30.  
  31. <div id="aukcja_10"></div>
  32.  
  33. <div id="aukcja_12"></div>
  34.  <div id="aukcja_15"></div>
[HTML] pobierz, plaintext
trucksweb
19.10.2008, 18:53:26
tam gdzie chcesz miec 3kolumny, umiesc je wszystkie w jedym duzym divie.
W divach w ktorych amsz kolumny usun position i daj im float:left oraz szerokosci.

i wsio
marcok
19.10.2008, 20:08:02
Witam, oto kod

[HTML] pobierz, plaintext 
  1. <style type="text/css">#middle_column {
  2.  
  3.  
  4.  padding:0;
  5.  float:left;
  6. }
  7. html>body #middle_column {padding: 0 170px 0 170px;float:none}
  8.  
  9. #left_column {
  10.  float:left;
  11.  width:169px;
  12. }
  13. #right_column {
  14.  float:right;
  15.  width:169px;
  16.  
  17. }
  18. </style>
  19.  
  20. <div id="left_column">{LEFT_MENU}</div>
  21. <div id="right_column">{RIGHT_MENU}</div>
  22. <div id="middle_column">{BODY}</div>
[HTML] pobierz, plaintext


W efekcje otrzymasz trzy kolumny z czego środkowa będzie zmieniała szerokość w zależności od rozdzielczośći na jakiej pracuje użytkownik.
Marcek190891
19.10.2008, 20:52:35
Dzięki wam wielkie winksmiley.jpg

Jutro będę działał bo dziś już nie pociągne...

Jeszcze raz dzięki wam... I oczywiście "Pomógł"
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.