Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] Problem z div'ami, błędne pozycjonowanie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
eunix
26.12.2006, 14:28:17
Witam,

Chce osiągnąć taki efekt:


Narazie wyskrobałem tyle, ale efekty trochę marne, bo nie znam się za bardzo na divach.
Proszę o pomoc w poprawieniu tego!

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  5.  <head>
  6.  <title></title>
  7.  <meta name="author" content="Święty Mikołaj :-)" />
  8.  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  9. <style type="text/css">
  10. body, html {
  11.   margin: 0;
  12.   text-align: center;
  13. }
  14.  
  15. #mainContainer {
  16.    border-spacing: 5px;
  17.    align: center;
  18.    width: 80%;
  19.    text-align: left;
  20.    overflow: auto;
  21.    border-left: 1px solid #717171;
  22.    border-right: 1px solid #717171;
  23. }
  24.  
  25. #siteLogo {
  26.    width: 100%;
  27.    height: 70px;
  28.    float: left;
  29.    background-color: #fbfbfb;
  30.    border: 1px solid #dadada;
  31. }
  32.  
  33. #leftColumn {
  34.    width: 60%;
  35.    height: 500px;
  36.    float: left;
  37.    background-color: #fbfbfb;
  38.    border: 1px solid #dadada;
  39. }
  40.  
  41. #rightColumn {
  42.    width: 40%;
  43.    float: right;
  44.    overflow: auto;
  45. }
  46.  
  47. #rightColumnMenu1 {
  48.    width: 20%;
  49.    float: right;
  50.    background-color: #fbfbfb;
  51.    border: 1px solid #dadada;
  52. }
  53.  
  54. #rightColumnMenu2 {
  55.    width: 20%;
  56.    float: right;
  57.    background-color: #fbfbfb;
  58.    border: 1px solid #dadada;
  59. }
  60.  
  61. #rightColumnMenu3 {
  62.    width: 40%;
  63.    float: right;
  64.    background-color: #fbfbfb;
  65.    border: 1px solid #dadada;
  66. }
  67.  
  68. #siteFooter {
  69.    width: 100%;
  70.    height: 60px;
  71.    float: left;
  72. }
  73.  
  74. </style>
  75. </head>
  76. <body>
  77.  
  78. <div id="mainContainer">
  79. 	<div id="siteLogo">Logo</div>
  80. 	<div id="leftColumn">teststest</div>
  81. 	<div id="rightColumn">
  82. 		<div id="rightColumnMenu1">Menu 1</div>
  83. 		<div id="rightColumnMenu2">Menu 2</div>
  84. 		<div id="rightColumnMenu3">Menu 3</div>
  85. 	</div>
  86. 	<div id="siteFooter">stopka</div>
  87. </div>
  88.  
  89. </body>
  90. </html>
[HTML] pobierz, plaintext
batman
26.12.2006, 19:31:05
Podany przez Ciebie przykład jest dowodem na to, że stosowanie div-ów na siłę (bo tak) mija się z celem. Zmień układ na tabelę i nie będziesz miał problemu. Ale jeśli się upierasz na div-y, oto rozwiązanie (pokombinuj z szerokościami i wysokościami, wedle własnego uznania):

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <title></title>
  6.   <style>
  7.  
  8.   #main {
  9.     width: 500px;
  10.   }
  11.  
  12.   #head {
  13.     background-color: #DBDBDB;
  14.   }
  15.  
  16.   #center {
  17.   }
  18.  
  19.   #center_left {
  20.     float: left;
  21.     width: 70%;
  22.     background-color: #BDBDBD;
  23.   }
  24.  
  25.   #center_right {
  26.     float: right;
  27.     width: 30%;
  28.   }
  29.  
  30.   #center_right_left {
  31.     float: left;
  32.     width: 50%;
  33.     background-color: #707070;
  34.   }
  35.  
  36.   #center_right_right {
  37.     float: right;
  38.     width: 50%;
  39.     background-color: #F3F3F3;
  40.   }
  41.  
  42.   #center_right_bottom {
  43.     background-color: #F0F0F0;
  44.   }
  45.  
  46.   #foot {
  47.     background-color: #DBDBDB;
  48.   }
  49.  
  50.   .cleaner {
  51.     clear: both;
  52.     border: 0px none;
  53.   }
  54.  
  55.  
  56.  
  57.   </style>
  58.   </head>
  59.   <body>
  60.  
  61.     <div id="main">
  62.  
  63.         <div id="head">head</div>
  64.         <div id="center">
  65.             <div id="center_left">left</div>
  66.             <div id="center_right">
  67.                 <div id="center_right_left">right left</div>
  68.                 <div id="center_right_right">right right</div>
  69.                 <div class="cleaner"></div>
  70.                 <div id="center_right_bottom">right foot</div>
  71.             </div>
  72.             <div class="cleaner"></div>
  73.         </div>
  74.         <div id="foot">foot</div>
  75.  
  76.     </div>
  77.  
  78.   </body>
  79. </html>
[HTML] pobierz, plaintext
Denver
26.12.2006, 19:37:29
Cytat(batman @ 26.12.2006, 21:31:05 ) *
Podany przez Ciebie przykład jest dowodem na to, że stosowanie div-ów na siłę (bo tak) mija się z celem. Zmień układ na tabelę i nie będziesz miał problemu.

Bzdury prawisz, batmanie. Tabelki nie powinno się stosować tylko i wyłącznie dlatego, że tak jest wygodniej. A to, że twórcy przeglądarek dopiero niedawno uświadomili sobie, jak dużo grzechów popełnili parę lat temu nie dostosowując ich (przeglądarek) do poprawnego interpretowania CSS, to już nie nasza (programistów) wina. Layout powinien być oparty na warstwach. Kropka.
batman
26.12.2006, 19:41:26
Cytat
Layout powinien być oparty na warstwach


Wiem, że powinien ale powyższy przykład jest dowodem na to, że nie warto się w to bawić. Skoro coś nie działa tak jak powinno lub działa inaczej na różnych przeglądarkach (np. margin, padding, width, border), to nie widzę sensu kombinować w css hacks, by obejść niedoskonałości przeglądarek. Wolę poświęcić ten czas na coś innego, niż na głowienie się jak to obejść. Kropka.
eunix
26.12.2006, 19:53:53
Tylko, że temat niżej zrobiłem taki szablon na tabelach, i powiedziano mi, że mam się przerzucić na divy winksmiley.jpg
Twój przykład jest dziwny, bo dodałem border i się posypał cały szablon, chce aby między komórkami były równe odstępy (ok 5px).
batman
26.12.2006, 20:19:21
Posypało się, ponieważ różne przeglądarki wstawiają w różnych miejscach obramowanie. Dlatego też nie słuchaj ludzi, którzy na siłę wciskają kit, że wszytko trzeba robić na div-ach. Sam widzisz jaki jest tego efekt i zamiast zajmować się czymś innym, ciągle siedzisz nad tym badziewiem. Owszem proste układy można robić na div-ach, ale nie takie potwory jak u Ciebie winksmiley.jpg

Wracając do tematu. Jeśli chcesz, by się nie rozjeżdżało, to zmniejsz szerokości, a najlepiej zapisz je w postaci pikseli. Wtedy będziesz miał większą kontrolę nad wyglądem. I pamiętaj, że w jedna przeglądarka dodaje wartość padding do width, a druga nie. Nie pamiętam tylko w której dodaje.
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.