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
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

Posty w temacie
- eunix   [xhtml] Problem z div'ami, błędne pozycjonowanie   26.12.2006, 14:28:17
- - batman   Podany przez Ciebie przykład jest dowodem na to, ż...   26.12.2006, 19:31:05
|- - Denver   Cytat(batman @ 26.12.2006, 21:31:05 )...   26.12.2006, 19:37:29
- - batman   CytatLayout powinien być oparty na warstwach Wiem...   26.12.2006, 19:41:26
- - eunix   Tylko, że temat niżej zrobiłem taki szablon na tab...   26.12.2006, 19:53:53
- - batman   Posypało się, ponieważ różne przeglądarki wstawiaj...   26.12.2006, 20:19:21

« 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 · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 17.10.2025 - 13:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn