Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [xhtml] Problem z div'ami, błędne pozycjonowanie
eunix
post
Post #1





Grupa: Zarejestrowani
Postów: 85
Pomógł: 0
Dołączył: 22.02.2006

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

Witam,

Chce osiągnąć taki efekt:
(IMG:http://img253.imageshack.us/img253/4409/costakiegohc5.png)

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


Ten post edytował eunix 26.12.2006, 14:29:18
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
batman
post
Post #2





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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
Go to the top of the page
+Quote Post
Denver
post
Post #3





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 24.09.2003
Skąd: Giżycko / Wrocław

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

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





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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.
Go to the top of the page
+Quote Post
eunix
post
Post #5





Grupa: Zarejestrowani
Postów: 85
Pomógł: 0
Dołączył: 22.02.2006

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

Tylko, że temat niżej zrobiłem taki szablon na tabelach, i powiedziano mi, że mam się przerzucić na divy (IMG:http://forum.php.pl/style_emoticons/default/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).
Go to the top of the page
+Quote Post
batman
post
Post #6





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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 (IMG:http://forum.php.pl/style_emoticons/default/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.
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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: 14.09.2025 - 19:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn