Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML,CSS] czy jest możliwy taki układ
krzychu0808
post
Post #1





Grupa: Zarejestrowani
Postów: 428
Pomógł: 2
Dołączył: 1.04.2007
Skąd: Pogorzelica

Ostrzeżenie: (10%)
X----

Mam pytanie bo chcę zrobić strone o takim układzie div:


Ale nie wiem czy wogóle jest możliwe ustawienie takiego układu bo strona ma być wyśrodkowana...
Bardzo proszę o pomoc....
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
Cezar708
post
Post #2





Grupa: Zarejestrowani
Postów: 1 116
Pomógł: 119
Dołączył: 10.05.2005
Skąd: Poznań

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

hmm... zawsze możesz użyć do wyśrodkowania prostego JavaScript i CSS, wiem, że na niektórych rzeglądarkach są rozbieżności, ale to powinno zadziałać:

[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. body{
  4.   padding: 0px;
  5.   margin: 0px;
  6. }
  7. div#tab1{
  8.   background-color: red;
  9.   width: 700px;
  10.   height: 200px;
  11. }
  12.  
  13. div#tab2{
  14.   background-color: blue;
  15.   width: 700px;
  16.   height: 400px;
  17. }
  18. div#tab3{
  19.   background-color: yellow;
  20.   position: absolute;
  21.   left: 400px;
  22.   top: 0px;
  23.   width: 300px;
  24.   height: 400px;
  25. }
  26. </style>
  27. <script>
  28. myWidth = 700;
  29. function $S(id){
  30.   return document.getElementById(id).style;
  31. }
  32. function setupDivs(){
  33.   var leftMargin = parseInt((screen.width - myWidth)/2);
  34.   $S('tab1').marginLeft = leftMargin;
  35.   $S('tab2').marginLeft = leftMargin;
  36.   $S('tab3').left = 400+leftMargin;
  37. }
  38. </script>
  39. <body align="center" onload="setupDivs()">
  40.   <div id="tab1">
  41.     Tabelka 1
  42.   </div>
  43.   <div id="tab2">
  44.     Tabelka 2
  45.   </div>
  46.   <div id="tab3">
  47.     Tabelka 3
  48.   </div>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext


oczywiście zmienne są zahardkodowane, ale nic nie szkodzi na przeszkodzie aby je zmienić lub troche przerobić kod.

Pozdrawiam
Go to the top of the page
+Quote Post
nevt
post
Post #3





Grupa: Przyjaciele php.pl
Postów: 1 595
Pomógł: 282
Dołączył: 24.09.2007
Skąd: Reda, Pomorskie.

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

a może nieco pościej?
[HTML] pobierz, plaintext 
  1. <div class="a">
  2.   <div class="b">
  3.     <div class="c"></div>
  4.     <div class="d"></div>
  5.   </div>
  6. </div>
[HTML] pobierz, plaintext

oraz CSS
Kod
* { margin: 0px; padding: 0px; }
.a { width: 600px; margin: 0px auto; }
.b { width: 100%; height: 400px; background: blue; float: left; }
.c { width: 500px; height: 100px; background: red; float: left; }
.d { width: 100px; height: 300px; background: yellow; float: right;}

powodzenia.

Ten post edytował nevt 4.01.2008, 18:50:44


--------------------

- Oh no, my young coder. You will find that it is you who are mistaken, about a great many things... -
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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