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

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: 15.10.2025 - 14:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn