Forum PHP.pl > [HTML,CSS] czy jest możliwy taki układ

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML,CSS] czy jest możliwy taki układ

krzychu0808

4.01.2008, 13:59:29

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

Cezar708

4.01.2008, 14:36:45

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 
<html>
<style>
body{
  padding: 0px;
  margin: 0px;
}
div#tab1{
  background-color: red;
  width: 700px;
  height: 200px;
}
 
div#tab2{
  background-color: blue;
  width: 700px;
  height: 400px;
}
div#tab3{
  background-color: yellow;
  position: absolute;
  left: 400px;
  top: 0px;
  width: 300px;
  height: 400px;
}
</style>
<script>
myWidth = 700;
function $S(id){
  return document.getElementById(id).style;
}
function setupDivs(){
  var leftMargin = parseInt((screen.width - myWidth)/2);
  $S('tab1').marginLeft = leftMargin;
  $S('tab2').marginLeft = leftMargin;
  $S('tab3').left = 400+leftMargin;
}
</script>
<body align="center" onload="setupDivs()">
  <div id="tab1">
    Tabelka 1
  </div>
  <div id="tab2">
    Tabelka 2
  </div>
  <div id="tab3">
    Tabelka 3
  </div>
</body>
</html>
[HTML] pobierz, plaintext

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

Pozdrawiam

nevt

4.01.2008, 18:49:47

a może nieco pościej?

[HTML] pobierz, plaintext 
<div class="a">
  <div class="b">
    <div class="c"></div>
    <div class="d"></div>
  </div>
</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.

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.