Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[css html]Faux columns problem - 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: [css html]Faux columns problem (/thread-css-html-faux-columns-problem)

[css html]Faux columns problem - wojtasm91 - 19-12-2011

Witam jak w temacie mam problem z Faux columns. Poniżej zostawiam Wam kod html oraz css. Zerknijcie i napiszcie co takiego robię źle i jak można to szybko poprawić.
Kod:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ZSSzamocin</title>
<LINK REL="Stylesheet" HREF="style.css" TYPE="text/css">
<link rel="Stylesheet" href="nawigacja.css" type="text/css"/>
<link rel="Stylesheet" href="menu.css" type="text/css" />
</head>

<body>
    <div id="naglowek"></div>
    
     <div id="nawigacja">
         <ul>
            <li><a href="link1.html">Plan lekcji</a></li>
            <li><a href="rodzice.html">Rodzice</a></li>
            <li><a href="statut.html">Statut</a></li>
            <li><a id="ostatni" href="kontakt.html">Kontakt</a></li>
        </ul>
     </div>
            
            <div id="glinia"></div>
            
                <div id="strona">
                    <div id="menu">
                        <ul id="menup">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="szkola.html">O szkole</a></li>
                            <li><a href="dyrekcja.html">Dyrekcja</a></li>
                            <li><a href="link4.html">Nauczyciele</a></li>
                            <li><a href="pedagog.html">Pedagog</a></li>
                            <li><a href="psycholog.html">Psycholog</a></li>
                            <li><a href="logopeda.html">Logopeda</a></li>
                            <li><a href="rada.html">Rada Rodziców</a></li>
                            <li><a href="biblioteka.html">Biblioteka</a></li>
                            <li><a href="swietlica.html">Świetlica</a></li>
                            <li><a href="link4.html">Dokumenty szkolne</a></li>
                            <li><a href="link4.html">Konkursy</a></li>
                            <li><a href="link4.html">Imprezy szkolne</a></li>
                            <li><a href="zawody.html">Zawody sportowe</a></li>
                            </ul>
                    </div>
                    
                        <div id="tresc">
                        <h1>Najnosze materiały:</h1>
                        <center><img src="Grafika/szkola1.gif" width="221px" height="219px" alt="idacy uczen" /></center>
                        </div>
            </div>
            
                <div id="dlinia"></div>
                
                <div id="stopka">
                ZSSzamocin | Wszystkie prawa zastrzeżone
                </div>
                
                    
</body>
</html>
A to css
Kod:
body{
background:#ffffcb;

}
    #naglowek{
        width:1010px;
        height:210px;
        background-image:url(Grafika/baner.png);
        margin-left:auto;
        margin-right:auto;
        margin-top:10px;
        
    }
    
        
        
            #glinia{
                width:auto;
                height:5px;
                background-color:#900;
            }
            
                #strona{
                    width:1010px;
                    height:auto;
                    margin-left:auto;
                    margin-right:auto;
                    background-image:url(tlo.JPG);
                    background-repeat:repeat-y;
                    
                    
                }
                
                    #menu{
                        width:250px;
                        height:auto;
                        margin-left:0px;
                        margin-right:0px;
                        background-color:#ad7b08;
                        float:left;
                        overflow:hidden;
                        
                    }
                    
                        #tresc{
                            width:720px;
                            height:auto;
                            margin-left:0px;
                            margin-right:0px;
                            background-color:#FFF;
                            float:right;
                            overflow:hidden;
                            padding-left:20px;
                            padding-right:20px;
                            padding-top:20px;
                            padding-bottom:20px;
                            }
                            
                            #stopka{
                                width:1010px;
                                height:30px;
                                margin-left:auto;
                                margin-right:auto;
                                background-image:url(Grafika/stopkat.jpg);
                                color:#FFF;
                                text-align:center;
                                margin-bottom:10px;
                                font-weight:bold;
                                clear:both;
                                }
                                
                                    #dlinia{
                                        width:auto;
                                        height:5px;
                                        background-color:#900;
                                        clear:both;
                                        }
                                        
                                            h1{
                                                text-align:center;
                                                color:#900;
                                                font-family:Tahoma, Geneva, sans-serif;
                                                font-size:24px;
                                                font-weight:bold;
                                                text-decoration:underline;
                                            }
                                            
                                                p{
                                                    color:#000;
                                                    text-align:justify;
                                                    font-family:Tahoma, Geneva, sans-serif;
                                                    font-size:16px;
                                                }
                                                
                                                    h2{text-align:center;
                                                        color:#900;
                                                        font-family:Tahoma, Geneva, sans-serif;
                                                        font-size:18px;
                                                        font-weight:bold;
                                                        
                                            }


RE: [css html]Faux columns problem - Kartofelek - 19-12-2011

Chodzi ci o równe kolumny? Takim podejściem na pewno tego nie uzyskasz. Skąd przeglądarka ma wiedzieć, że "height:auto" to jest to samo co "weź długość dłuższego i ustaw krótszemu"?

Ogólnie najpopularniejsze sposoby są takie:

1) menu - position:absolute; 0,0 content - padding-left na szerokość menu (lub margin-left)
2) menu - float:left; content:float:left; background- tlo dla menu i contentu (symulujace)
3) dla menu i content height:100%; - praktycznie nie do użycia
4) jquery equal height

Gotowca nie podaję, bo w necie pod podanym w tytule haśle jest milion pińset tutoriali.

RE: [css html]Faux columns problem - wojtasm91 - 19-12-2011

Zgodzę z tobą że w ten sposób nie uzyskam kolumn o równej wysokości. Ale ja wcale nie chce aby one rzeczywiście były równe bo i po co skoro i tak nie ma w nich odpowiedniej do ich wysokości ilości treści. Ja chcę tylko uzyskać złudzenie że kolumny są równej wysokości. Jak widać div o id="menu" i div o id="tresc" zawarte są w div o id="strona". Więc myśląc logicznie wysokość div'a o id="strona" jest równa wysokości wyższego z div'ów znajdujących się wewnątrz niego. Więc jeśli jako tło div'a o id="tresc" damy pliczek o szerokości równej szerokości div'a i wysokości=1px i ustawimy odpowiednie dublowanie tego tła zawierającego kolory wypełnienia obu kolumn powinniśmy uzyskać pozorne wyrównanie wysokości kolumn. Tylko dlaczego przeglądarka nie ustawia tła z pliku dla div'a o id="strona" tak jak jest to zdeklarowane w arkuszu stylu tylko ustawia kolor tła przypisany dla body?

RE: [css html]Faux columns problem - Kartofelek - 20-12-2011

Twoja #strona ma wysokość 0. Floaty pływają w dokumencie i przez to nie wpływają na wymiary dokumentu. Czyli jeżeli dany element ma dzieci które są wszystkie floatowane (albo pozycjonowane absolutnie), to równoznaczne jest to z tym, że nie ma elementu który by miał jakąś wysokość. Czyli nic go nie rozciąga. Hmmm. Tak - muszę opatentować tą definicję Big Grin

Aby temu zapobiec stosuj albo overflow:hidden (tylko dla floatów), albo clearfix (też tylko dla floatów). To pierwsze nie zawsze jest ok, bo np ukrywa rozwinięte selekty. To drugie jest lepsze od piersi szlachcianki. Znajdziesz je w stylach dołączonych do "boilerplate html5"

Kod:
    .clearfix:before, .clearfix:after {content:"\0020"; display:block; height:0; visibility:hidden;}     
    .clearfix:after {clear:both;}
    .clearfix {zoom:1;}
Czyli twoja strona powinna dostać klasę clearfix.

To jest przykładowy clearfix, ale w boilerplate jest chyba nowszy z tego co pamiętam. Tak więc zobacz sobie w google Smile.

RE: [css html]Faux columns problem - wojtasm91 - 20-12-2011

Dobra napiszemy dla potomnych. Tak jak pisał kolego można zastosować klasę. Ale nie dawało mi to spokoju bo jak pamiętałem realizowałem to w sposób taki jak ten w kodzie z pierwszego postu. Sposób działa tylko pod pływającymi elementami trzeba dodać kolejnego div'a z parametrem clear:both co spowoduje rozciągnięcie naszego div'a a co za tym idzie wypełnienie go wskazanym tłem. Wspomniany div nie zawiera żadnej treści. Jednak czasem warto odkopać stare książki z których się kiedyś uczyło Big Grin Pozdrawiam i dziękuje za pomoc.

RE: [css html]Faux columns problem - Kartofelek - 20-12-2011

Ale to zły sposób. Zamiast dodatkowego diva używa się teraz właśnie clearfix, albo rezygnuje z floata dla jednego z divów.
Twoja metoda też oczywiście nie jest zła, ale claarfix jest lepszy. Chyba byś nie chciał w kodzie strony co rusz wstawiać pustych divów class="clear" Big Grin

RE: [css html]Faux columns problem - wojtasm91 - 20-12-2011

Zleży jak na to patrzeć jak dla mnie metody absorbują taką samą ilość czasu jeśli chodzi o kod. jeżeli w odpowiedni sposób napiszesz kod wystarczy dodać tylko raz wpis o którym mowa. A powiedzmy sobie szczerze że nikt poza osobami zajmującymi się stronkami ewentualnie pasjonatami takimi jak ja nikt nie zerka w kod a część nawet nie ma pojęcia że jest taka możliwość albo że jest coś takiego jak kod strony :p