Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Automatyczna wysokość diva menu względem treści. - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Automatyczna wysokość diva menu względem treści. (/thread-automatyczna-wysoko%C5%9Bc-diva-menu-wzgledem-tre%C5%9Bci)

Automatyczna wysokość diva menu względem treści. - AdwiL - 18-11-2009

Witam!

Mam pewien problem natury technicznej podczas tworzenia templatki do joomli. Od kilku godzin nad tym siedzę i nie wytrzymuje już. Tutaj CSS:
Kod:
body {
    margin: 0 auto;
    background-image: url(../images/bg-down.gif)
}

#body1 {
    width: 100%;
    height: 140px;
    background-image: url(../images/bg-toper.gif);
    position: absolute;
    z-index: 1;
}

#body2 {
    margin-top: 140px;
    width: 100%;
    height: 287px;
    background-image: url(../images/bg-top-center.gif);
    position: absolute;
    z-index: 1;
}

#body3 {
    margin-top: 427px;
    width: 100%;
    height: 298px;
    background-image: url(../images/bg-top.gif);
    position: absolute;
    z-index: 1;
}

#wraper {
    
    margin-top: 23px;
    margin-left: -439px;
    width: 877px;
    left: 50%;
    position: absolute;
    float: left;
    z-index: 2;
}    

#logo {
    background-image: url(../images/index_01.jpg);
    top: 0;
    left: 0;
    width: 265px;
    height: 117px;
    position: absolute;
    float: left;
    overflow: hidden;
    text-align: center;
}

#topbar {
    background-image: url(../images/index_02.jpg);
    top: 0;
    left: 265px;
    width: 612px;
    height: 62px;
    float: left;
    position: absolute;
    overflow: hidden;
}

#topmenu {
    background-image: url(../images/index_03.jpg);
    top: 62px;
    left: 265px;
    width: 612px;
    height: 55px;
    float: left;
    position: absolute;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

#mainmenu {
    background-color: #e9e0d0;
    top: 117px;
    left: 0px;
    width: 265px;
    height: 287px;
    float: left;
    position: absolute;
    overflow: hidden;
    vertical-align: middle;
}

#rotator {
    background-color: #e9e0d0;
    top: 117px;
    left: 265px;
    width: 612px;
    height: 287px;
    float: left;
    position: absolute;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

#left1 {
    background-color: #462e1f;
    top: 404px;
    left: 0;
    width: 265px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    float: left;
}

#medbar {
    top: 404px;
    left: 265px;
    width: 612px;
    height: 44px;
    float: left;
    position: absolute;
    overflow: hidden;
}

#online {
    background-color: #1a100b;
    top: 0;
    left: 0;
    width: 321px;
    height: 44px;
    float: left;
    position: absolute;
    overflow: hidden;
    vertical-align: middle;
}

#find {
    background-color: #1a100b;
    top: 0;
    left: 321px;
    width: 291px;
    height: 44px;
    float: left;
    position: absolute;
    overflow: hidden;
    vertical-align: middle;
    text-align: right;
}

#contentbox {
    width: 877px;
    top: 448px;
    left: 0;
    position: absolute;
    overflow: hidden;
    float: left;
}

#transparent {
    width: 265px;
    height: 156px;
    top: 0;
    left: 0;
    position: absolute;
    float: left;
    overflow: hidden;
}

#left2 {
    background-color: #301e15;
    top: 156px;
    left: 0;
    width: 265px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    float: left;
}

#content {
    background-color: #25160f;
    top: 0;
    left: 265px;
    width: 612px;
    height: 400px;
    float: left;
    position: absolute;
    overflow: hidden;
}

#downbar {
    background-image: url(../images/foot.gif);
    top: auto;
    left: 0;
    width: 877px;
    height: 13px;
    float: left;
    overflow: hidden;
    position: absolute;
}

.inside1 {
    padding: 25px;
}

.inside2 {
    padding-left: 30px;
}

.inside3 {
    padding-right: 30px;
}

.inside4 {
    padding: 17px;
}

.logocenter {
    margin-top: 8px;
}

.topmenucenter {
    margin-top: 27px;
}

A tutaj stronka:
Kod PHP:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="css/template2.css" type="text/css" />
</head>
<body>
    <div id="body1"></div>
    <div id="body2"></div>
    <div id="body3"></div>
        <div id="wraper">
                    <div id="logo">
                        <img src="images/logo1.png" alt="Mazowieckie Wnętrza" class="logocenter" />
                    </div>
            <div id="topbar">
            </div>
                    <div id="topmenu">
                        <div class="topmenucenter">
                            
                        </div>
                    </div>
                    <div id="mainmenu">
                    
                    </div>
                    <div id="rotator">
                    
                    </div>
                    <div id="left1">
                        <div class="inside1">
                            
                        </div>
                    </div>
                   <div id="medbar">
                        <div id="online">
                            <div class="inside2">
                        
                            </div>
                        </div>
                    <div id="find">
                        <div class="inside3">
                            
                        </div>
                    </div>
                </div>
                <div id="contentbox">
                    <div id="transparent">
                    </div>
                    <div id="left2">
                        
                    </div>
                    <div id="content">
                        <div class="inside4">
                            
                        </div>
                    </div>
                    <div id="downbar">
                    </div>
                </div>
        </div>
</body>
</html> 

Mam problem z takim ustawieniem divów 'left2' i 'content żeby po zwiększeniu wysokości 'content' wydłużała się także kolumna 'left2'. W tej chwili nad 'left2' jest jeszcze 'transparent' , który dopełnia diva 'contentbox' w którym siedzi cały ten problem. Chciałbym, żeby jeszcze na dole doczepiony był div 'downbar' i zmieniał położenie razem z resztą tej "ekipy". Nie mam już pomysłów jak to wykonać. Byłbym wdzięczny za pomoc oraz ew. sugestie co jest nie tak w kodzie, bo pierwszy raz biorę się za xhtml i css.

RE: Automatyczna wysokość diva menu względem treści. - Labsta.com - 18-11-2009

Nie wiem jak wygląda Twój layout, ale najprościej zastosować pewien trik http://www.alistapart.com/articles/fauxcolumns/
Kolumny nie będą równe, ale będą tak wyglądać.
Z innej beczki: dlaczego używasz jednocześnie float i position?

RE: Automatyczna wysokość diva menu względem treści. - AdwiL - 20-11-2009

W sumie to nie wiem czemu jednocześnie używam obu, to mój pierwszy kontakt z tak zaawansowanymi divami, więc po prostu popełniłem błąd Wink

Zaraz próbuje coś kombinować z tym linkiem, który mi podesłałeś i dam znać co wykombinowałem Smile

EDIT:
Niestety u mnie to nie daje rady, tak wygląda mój layout:
[Obrazek: templateor.jpg]

1. Ma stałą wysokość
2. Ma się rozciągać razem z 3. w dół

Nie daje rady z tym. Nie wiem kto powiedział, że divy są lepsze od tabelek Tongue lay na tabelkach robię w godzinę, a tu tak się męczyć trzeba... Jeszcze na dodatek Internet Explorer wyświetla wszystko nieco inaczej niż Firefox, Chrome, Safari i Opera, więc trzeba się bawić w oszukiwanie go Tongue

EDIT2:
Chyba wpadłem na pomysł jak to zrobić Smile Użyję sposobu z linku, utworzę prostokąt (tak, aby wyglądał jak elementy 2. i 3. , ale bez elementu oznaczonego 1.) dokładnie tak jak było w poradniku podesłanym przez Labsta.com Potem stworzę ten element 1. i nadam mu wyższy z-index. Do diva #right, który będzie wyświetlał zawartość elementu 2. dodam właściwość margin-top o takiej samej wartości jaką ma wysokość elementu 1. + jeszcze troszkę na marginesy. Powinno śmigać Smile

EDIT3:
<diaboliczny śmiech> on żyje! Dzięki za pomoc, dałem radę tym upartym divom ;D

EDIT4:
Przedwczesna radość, bo IE8 i Opera10 nie dają sobie z tym rady, dalsze modyfikacje mnie czekają >.<

EDIT5:
Wystarczyło wrzucić margin-top do oddzielnego diva, dziwne to to, ale działa, jeszcze teraz stopkę na dole dodać i viola Wink