Forum PHP.pl > [html] Pozycjonowanie diva, dlaczego w IE inaczej?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html] Pozycjonowanie diva, dlaczego w IE inaczej?

right6

9.03.2006, 15:42:53

te zolte prostokaciki to wlasnie divy ktore chce jakos spozycjonowac, zeby sie nie rozjezdzalo, zeby pod rownymi przegladarkami wygladalo jak na lezy. Kazdego diva teraz ustawilem tak:

Kod

ale to nic z tego ... sypie sie pod ie, a przy powiekszeniu scroolem wogule tragedia.

jak wiec wypoziomowac te divy ?

easy

9.03.2006, 16:43:10

Kodzik na szybko ale dziala

tla sa tylko dla przykladu.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-2" />
<title>Div page</title>
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div class="site-form">
  <div class="form-head">head</div>
  <div class="form-content">
    <div class="content-up">
    <div class="content-up-left">
      <div class="up-left-up">
        <div class="left-up-left">
          <div class="left-up-left-up">upz</div>
          <div class="left-up-left-down">downz</div>
        </div>
        <div class="left-up-right">up-right</div>
      </div>
      <div class="up-left-down">
        <div class="left-down-left">down-left</div>
        <div class="left-down-right">
        <div class="down-right-up">right-up</div>
        <div class="down-right-down">right-down</div>
        </div>
      </div>
    </div>
    <div class="content-up-right">gorna prawa </div>
    </div>
    <div class="content-down">
      <div class="content-down-left">lewa dolna</div>
      <div class="content-down-right">prawa dolna</div>
    </div>
  </div>
  <div class="form-foo">foo</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Kod

body {
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #FFFFFF;
}
div.site-form {
  width: 760px;
  \width: 760px;
  w\idth: 760px;
  margin-left: auto;
    margin-right: auto;
}
div.form-head {
  background-color: #EEE8AA;
}
div.form-foo {
  clear: both;
  background-color: #B0C4DE;
}
div.content-down-left {
  width: 560px;
  float: left;
  background-color: #F0FFFF;
}
div.content-down-right {
  width: 200px;
  float: left;
  background-color: #FFEBCD;
}
div.content-up-left {
  width: 460px;
  float: left;
  background-color: #DEB887;
}
div.content-up-right {
  width: 300px;
  float: left;
  background-color: #5F9EA0;
}
div.left-down-left{
  width: 300px;
  float: left;
  background-color: #BDB76B;
}
div.left-down-right{
  width: 160px;
  float: left;
  background-color: #556B2F;
}
div.left-up-left {
  width: 160px;
  float: left;
  background-color: #DC143C;
}
div.left-up-right {
  width: 300px;
  float: left;
  background-color: #FF8C00;
}
div.up-left-down {
  clear: both;
}

Tak wiem jest pokrecony

right6

9.03.2006, 18:58:09

eehhh, to nie jest tak jak chcialem. pionowo OK trzyma, alt to mi nic nie daje ...

potrzebuje taki uklad

i nie jestem tego w stanie osiagnac ...

easy

9.03.2006, 21:44:32

Jest dokladnie taki jaki chciales, tyle ze nie porozciagany, wyciagnij wnioski i sprobuj sam

right6

9.03.2006, 22:23:20

[HTML] pobierz, plaintext 
<div style=\"float:left;background:blue;\">
 
 
 
      <div style=\"float:left;background:violet\">
        <div style=\"background:red\">1 aaaaaaa<br><br></div>
       <div style=\"background:darkred\">2 aaaaaaa</div>
      </div>
 
 
      <div style=\"float:left;background:violet\">
        <div style=\"background:red\">4<br><br></div>
       <div style=\"background:darkred\">5</div>
      </div>
 
      </div>
[HTML] pobierz, plaintext

i mam cos takiego ... i sie *** zlewa ;/
mialo by tak:
1 3
2 3

4 6
5 6

czli dwa wiersze, w kazdym diwe kolumny, i ta pierwsza podzielona poziomo na dwa wiersze.
i jak bym nie robl sie zlewa ... nie wiem co Ty porobiles w w/w przykladzie, ale nie potrafie tego odwzorowac ... godzine z tymi paroma divami sie mordowalem ... i nic

easy

9.03.2006, 23:21:06

[HTML] pobierz, plaintext 
<div style="background-color: #FFEBCD;">
  <div style="float: left; width: 40%; background-color: #5F9EA0;">
    <div style="">1 oddzielny box</div> 
    <div style="">2 oddzielny box</div>
  </div>
  <div style="float: left; width: 60%; background-color: #DC143C;">1 box<br />1 box</div>
</div>
<div style="clear: both; ">
  <div style="float: left; width: 40%; background-color: #DEB887;">
    <div style="">1 oddzielny box</div> 
    <div style="">2 oddzielny box</div>
  </div>
  <div style="float: left; width: 60%; background-color: #FF8C00;">1 box<br />1 box</div>
</div>
[HTML] pobierz, plaintext

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.