Forum PHP.pl > Wysokość dla div'a

mike

21.07.2005, 16:31:20

Mam taką sytuację:

3 elementy div o następującym wyglądzie:

Kod

+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+

I teraz pytanie:

Jak zrobić aby element B lub chociażby C miał maxymalną wysokość na jaką pozwala A?
Element A równie dobrze może być elementem BODY.

Mówimy o XHTML'u i style="height: 100%" nie wchodzi w gre bo nie działa.

wassago

21.07.2005, 17:42:26

mi działa.

[HTML] pobierz, plaintext 
<div style="border: solid 1px red; height: 500px; width: 500px">
  <div style="border: solid 1px blue; height: 200px; width: 100px; float: left"></div>
  <div style="border: solid 1px green; height: 100%; width: 300px; float: right"></div>
</div>
[HTML] pobierz, plaintext

mike

21.07.2005, 20:49:22

Cytat

Dwie rzeczy są nieskończone: Wszechświat i ludzka głupota; z czego co do Wszechświata nie jestem pewien.

Albert Einstein

Nie mam pojęcia co robiłem źle :/

Dzieki za uświadomienie mnie o mojej ułomności

Dravo

21.07.2005, 21:49:03

Tworzenie ciekawych, ustandaryzowanych oraz `zhacowanych` i działających wszędzie layautów jest szeroko opisywane w serwisie A List Apart.

Polecam artykuł: Creating Liquid Layouts with Negative Margins.

mike

22.07.2005, 22:27:13

Za wcześnie się ucieszyłem.

Taki kod działa bez zarzutu.

[HTML] pobierz, plaintext 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
<head>
  <title>Test  </title>
 
<style type="text/css">
.main {
border: 1px solid red;
width: 500px;
margin: auto;
height: 100%;
}
</style>
</head>
 
<body>
<div class="main">Test diva</div>
</body>
[HTML] pobierz, plaintext

Ale po dodaniu:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  <head>
  <title>Test  </title>
 
<style type="text/css">
.main {
border: 1px solid red;
width: 500px;
margin: auto;
height: 100%;
}
</style>
</head>
 
<body>
<div class="main">Test diva</div>
</body>
[HTML] pobierz, plaintext

wszystko się chrzani.

No przecież nie zaczną pomijać Doctype'a :/

Pomocy raz jeszcze, bo ja już głupieję. A myślałem że znam CSS

FiDO

23.07.2005, 01:08:15

Dodaj

Kod

body, html {
height: 100%;
}

Diablos

23.07.2005, 08:42:44

Mam podobny problem, lecz u mnie cały problem tkwi w tym ze na jdnej przegladarce jest ok, na drugiej w miare ok, a na trzeciej nie do przyjecia

mianowicie:

http://e37.e2u.cc/daln/

kod:

Kod

Pod IE:
- teoretycznie wszystko ok, jedyne co psuje wyglad to to, ze szerokosci MENU sa jakos wieksze niz na reszcie przegladarek, tak jakby IE inaczej interpretował szerokosc w px

Pod Opera:
- prawe menu nie dojezdza do konca (nie wiem jak naprawic)

Pod FF:
- najgorzej wyglada, bloki menu po lewej stronie wyjezdzaja poza div, w którym sie znajduja, a przeciez div w ktorym sie znajduja powinien sie automatycznie wydłuzac.

Prosze o pomoc z gory dziekuje.

revyag

25.07.2005, 10:06:59

Miałem chwilkę więc wstępnie poprawiłem ten kod, bo to była masakra

Trzeba by jeszcze go zoptymalizowac, wyrzucić niepotrzebne divy, ale jak mówie miałem tylko chwilkę

Stosujesz mase niepotrzebnych styli, niektóre nieprawidłowo.
Np. div jest elementem blokowym, więc po co mu jeszcze styl display:block.
Co do wyświetlania trzech kolumn o takiej samej wysokości, to zajrzyj na ala, tam jest rozwiązanie problemu.

Kod

body {
    font-family: verdana, arial, serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: gray;
    font-size: 10px;
    text-align: center;
}

div#container {
    width:100%;
    margin: 0 auto;
    background: url(images/tlo.jpg) repeat-x;
}
div#logo {
    width: 717px;
    height: 134px;
    margin: 0 auto;
    background: url(images/logo.jpg) top center no-repeat;
}
div#cont {
    width: 100%;
    border: 0;
    background-color: #f1f1f1;
    text-align: center;
}
div#out {
    width: 715px;
    margin: 0 auto;
}
div#in {
    width: 100%;
    text-align: left;
    background-color: #e6e7eb;
}
div#left {
    width: 183px;
    background-color: #dadde2;
    float: left;
    padding-top: 10px;
    text-align:left;
}

div.box1,div.box2 {
    margin: 0 0 -1px 10px;
    width: 160px;
    height: auto;
    background: #9a9a9b;
    border: 1px solid #7e7e7e;
}
div.box2 {
    margin-bottom: 3px;
    height: 100px;
    background: #bfc0c1;
}

div#main {
    margin-top: 10px;
    margin-left: 3px;
    width: 320px;
    background: #f6f7f9;
    border: 1px solid #cacacc;
    float: left;
}
div#right {
    width: 183px;
    height: 100%;
    background: #dadde2;
    float: right;
}
div.box3 {
    margin: 7pt;
    width: 160px;
    height: auto;
    background: #bfc0c1;
    border: 1px solid #7e7e7e;
}

div#foot {
    width: 100%;
    height: auto;
    background: #dadde2 top center no-repeat;
}

[HTML] pobierz, plaintext 
<div id="container">
    <div id="logo"></div>
    <div id="cont">
        <div id="out">
            <div id="in">
                <div id="left">
                    <div class="box1">sadasd</div>
                    <div class="box2">asd</div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                </div>
                <div id="main">sadsadsad</div>
                <div id="right">
                    <div class="box3">sa</div>
                </div>
                <br style="clear:both" />
            </div>
            <div id="foot">Stopka Szczurebska</div>
        </div>
    <div>
</div>
[HTML] pobierz, plaintext

Diablos

25.07.2005, 11:04:29

ok, dzieki bardzo, jest ok w 99%... jeszcze tylko prawe menu sie nie dociaga nie wiem czemu :|

revyag

25.07.2005, 11:10:00

Nie dociąga się ? Chodzi o to że ma mniejszą wysokość niż to lewe ? To podałem Ci linka, gdzie jest opisane jak zrobić żeby było ok.

mike

5.08.2005, 14:29:27

W związku z tym że mam kolejny problem dotyczący wyskokości elementów blokowych a ten temat nie zjechał jszcze za nisko postanowiłem go kontynuować.

Problem jest następujący:
Mam trzy elementy blokowe A, B i C.
Wysokość dla elementu A nie jest ustawiona - zmienia się ona pod wpływem elementu B, w którym jest na przykład jakieś menu lub coś innego.
Jak sprawić że wysokość elementu C będzie zmieniała się wraz z wyskokością elementu A przyjmując maksymalną wartość, na którą może sobie pozwolić. Czyli teoretycznie 100%, ale 100% w ramach elementu A.

Kod

+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+

Kinool

6.08.2005, 16:50:20

pozwole sobie dolaczyc sie do tematu

mam sobie DIV-a (glownego) w niem sa osadzone inne DIV-y (kolumny z textem) jaz zrobic zeby ten kolumny mialy zawsze dlugosc glownego DIV-a??

po teraz np sa 3 kolumny w roznym stopniu wypelnione trescia i tlo dochodzi tylko do konca tresci, powstaja "schody" czego chialbym unkinac.

problem tylko w IE (gupi IE!!)

probowalem im dac height: 100% ale to nic nie daje, nadanie wysokosci glownemu DIV-owi tez odpada bo to zalezy od tego co tam wczytam, gupi IE chyba tez niezna atrybuty min-height:

PS. Ludzie apeluje przestancie uzywac IE a swiat stanie sie prostrzy i latwiejszy!!!!!!!!

tiraeth

6.08.2005, 17:07:37

IE nie zna wielu atrybutów. Nawet IE7, podobno, w wersji BETA 1 zamiast mieć naprawione poprawne wyświetlanie kodu, został dobudowany w niepotrzebne śmieci...

FiDO

6.08.2005, 22:49:59

Cytat(tiraeth @ 2005-08-06 18:07:37)

IE nie zna wielu atrybutów. Nawet IE7, podobno, w wersji BETA 1 zamiast mieć naprawione poprawne wyświetlanie kodu, został dobudowany w niepotrzebne śmieci...

Ja bym sie powstrzymal od tej krytyki wersji beta.. bo to zakrawa juz na bezsensowne tepienie wszystkiego co tylko wydal MS. Nie zebym za nimi przepadal, ale ostatnio chlopaki sie troche zrefrektowali i zauwazyli, ze istnieje cos takiego jak standardy i nie wymyslaja juz tyle swoich pierdol..
Juz w becie VS 2005 widac, ze zrobili duzy krok, bo kod generowany jest w XHTML'u, a jesli chodzi o IE7, to jest to pierwsza beta, w ktorej nawet nie zajmowali sie zbytnio poprawianiem obslugi CSS, ale w 2 becie ma juz byc poprawione wiekszosc slynnych bugow IE, a w finalu mozliwie duza zgodnosc z CSS2. Sugeruje zajrzec sobie na strone www.quirksmode.org, tam w ktoryms z brzegu newsie jest napisane co nieco o wersjach beta w historii przegladarek.
Tak ze ocenianie IE7 w tej chwili jest troche nierozsadne, trzeba poczekac na finala i dopiero wtedy, jesli nie wywiaza sie ze swoich obietnic, bedzie mozna znowu po nich troszke pojezdzic

kamiseq

16.08.2005, 20:03:59

no i co k nic nikt do konca nie wyjsanil:]
a ja tu zakladam kolejny temat i tez nic:-)
http://forum.php.pl/index.php?showtopic=34407