[css] Div oddalony od dolu/bottom o n px, chce go miec na dole Opcje

[Pucy]

Sluchajcie probowalem na wiele sposobow zrobic by div trzymal mi sie dolu diva w ktorym sie znajduje... nie chce tak reagowac poniewaz mam marginesy na -20k xp i overflow wylaczone a stopka jest na clear:both...

DIV o ktorym mowie znajduje sie w dobrej pozycji z pionie, ale jako ze stopka jest stala i niezmienna, moglbym go zmusic aby odstawal od dolu strony o np. 95px, wtedy znalazlby sie na dobrym miejjscu... teraz troche kodu

[HTML] pobierz, plaintext 
<div id="container">
      <div id="links" class="column">         
 
            <div class="category"><br />START</div>
            <div class="sep"><br /></div>
 
            <div class="category">STRONY INTERNETOWE
               <div class="link"><a href="#">KONSULTING, SZKOLENIA</a></div>
               <div class="link"><a href="#">AKTUALIZACJA PORTALI</a></div>
               <div class="link"><a href="#">NARZEDZIA</a></div>         
            </div>
            <div class="sep"><br /></div>
 
            <div class="category">STRONY INTERNETOWE
               <div class="link"><a href="#">KONSULTING, SZKOLENIA</a></div>
               <div class="link"><a href="#">AKTUALIZACJA PORTALI</a></div>
               <div class="link"><a href="#">NARZEDZIA</a></div>         
            </div>
 
      <div id="news">
         NEWSLETTER
      </div>
 
      </div>
 
 
 
      <div id="center" class="column">   
 
         <div id="centerx">
 
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br /><br />
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
            sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
 
         </div>
 
      </div>
 
 
   </div>      
<div id="fotter">
 
      <div class="fleft"><img src="./templates/page/images/fot1.gif" alt="" /></div>
      <div class="fright">xxx</div>
 
   </div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#container {
width:780px;
overflow:hidden;
}
 
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
 
#center {
border:0px solid black;
width:566px;
 float:right;
}
 
#links {
padding-bottom:100px;
 width:214px;
border:0px solid black;
 float: left; background-image:url('../page/images/bglinks.gif');
background-repeat:no-repeat;
 background-color:#535353;
}
 
#news {
border:1px solid black;
width:214px;
postion:relative;
margin-left:10px;
 padding-bottom:100px;
height:50px;
}
 
/*** IE Fix ***/
* html #left {
  left: 214px;           /* RC fullwidth */
}
#fotter { padding:0px; width:780px; border:0px solid black; clear:both;}
#fotter .fleft { width:214px; height:95px; float:left; }
#fotter .fright { width:566px; height:95px; float:right; background-image:url('../page/images/fot2.gif'); }
[HTML] pobierz, plaintext 

P.S Ogolnie chodzi mi o taki rezultat jak na tym pliku
http://republika.pl/pucal/1.JPG

zielony - rozszerze czerwony (zaleznie od tresci)
czerwony - rozszerza zielone (zaleznie od tresci)
brazowy - jest zawsze na dole zielonego bez wzgledu na tresci w poprzednich dwoch prostokatach.

Kto mi pomoze osiagnac taki rezultat?

[s_w_ir]

Kod

position : absolute;
bottom:0;

Teraz tak, kod ten tyczy się stopki. Jesli na stronie będziesz miał wystarczająco dużo zawartości aby zawsze było zajęte minimum całe okno przeglądarki to na pewno siądzie na dole diva głownego.
Dla gównego diva:

Kod

position : absolute;
top:0;

[Pucy]

MOze przetestuje, ale pytalem sie znajomego to mi powiedzial tak: "sztuka dla sztuki. Albo sie wykrwawisz zrobisz to i zapomnisz, albo zrobisz to na tabeli..."

[s_w_ir]

Bez obrazy dla Twojego znajomego, ale...
Tabele zostały stworzone do odpowiedniego prezentowania danych tabelarycznych, i to jest ich miejsce. Kiedyś nie było CSS i programiści tworzyli odpowiedni layouty za pomocą mnóstwa tabel zagnieżdżanych oraz przeźroczystych gifów. Kod był pajęczyną tabel w której gubiłeś następnego dnia gdy chciałeś edytować jakieś dane. Dziś dązymy do oddzielenia wyglądu strony od jej treści, co daje nam właśnie CSS. Inna sprawa że trzeba się troche napracować żeby uzyskać to co dostalibyśmy w "krótszym" czasie za pomocą tabel, ale...
WARTO!!! Dwa, pięć , dziesięć projektów i już nie będzie to dla Ciebie stanowić problemu, a zyskasz bardzo wiele na czytelności kodu.
Jednak wybór jak zawsze należy do Ciebie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Pozdrawiam.

[mike]

zielony - rozszerze czerwony (zaleznie od tresci)
czerwony - rozszerza zielone (zaleznie od tresci)
brazowy - jest zawsze na dole zielonego bez wzgledu na tresci w poprzednich dwoch prostokatach.

Kto mi pomoze osiagnac taki rezultat?

Czyżby chodzio o to: example ?

P.S.
Powiedz koledze żeby się rozpędził i walnął głową w kaloryfer a nie takie pierdoły o tabelkach plecie.

[nasty]

inna sprawa że trzeba się troche napracować żeby uzyskać to co dostalibyśmy w "krótszym" czasie za pomocą tabel, ale...

no, niewiem czy w tabelkach jest szybciej, bo domyslne to maja paskudne bordery, spacingin itd, nie mowiac o colspanach i rowspanach. w css niema takich problemow.

[s_w_ir]

Mowa oczywiście o pierwszych próbach, przy przejściu z modelowania tabelowego na <div> + CSS (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[Pucy]

Znam definicje i zastosowanie tabel...

mike_mech: no prawie tylko chodzi oto ze jak masz czerwony ktory rozciagnal calosc, to ten niebieski blok powinien byc na samym dole, a co za tym idzie to zielony blok powienien pokazac puste miejsce (wez to szare miejsce na dole zmien na zielony i walnij miedzy zielonym i niebieskiem) - i oto mi chodzi.

Mowicie CSS, ok zgodze sie, ale czy aby na pewno WSZYSTKO da sie przedstawic za pomoca tego? A co jesli nie potrafisz tego zrobic i nikt inny tez nie porafi Ci w tym pomoc? Nie lepiej jest dodac minimum socjalne z tabelli z dwoma <tr> i trzema <td>, hm? Chociaz chodzi tutaj o przejrzystosc kodu, ale wstawienie takiej tabeli wcale kodu nie zasmieca. A czy mysla przewodnia nie jest rowniez to, zeby pisalo sie latwo i przyjemnie? Aby programowanie sprwialo radosc, a nie generowalo zhizofreniczne mysle po tygodniach rozkminiania: "jak to zrobic, czemu oni nie odpisuja... (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) "

Ja na przyklad czerpie przyjemnosc z tego co robie... nie poswiece wakacji aby rozkminic ten jeen konkretny pomysl, ktorego moge juz nigdy nie zastosowac. Stad sie wzielo postanowienie: zrobie to lepiej na tabeli.

P.S CSS dla ludzi, programistow, dla kodu... sa pewnestandardy? Ale czy wstawienie tabeli zburzy jakikolwiek standard xHTMLa?

[s_w_ir]

Jesli jestes programista to naturalna cechą programisty jest ciągłe poszerzanie swojej wiedzy, a poświęcenia wakacji na to żeby poznać nowe techniki da Ci to że za dwa lata nie wypadniesz z rynku ze swoim modelowaniem tabelami.

Później zerkne na Twój kod i zobacze co da sie zrobić żebyś uzyskał to poprawną metodą. Pozdrawiam.

[Pucy]

Jestem programistą , tylko dlaczego mam poswiecac caly czas na jeden problem, jezeli ejst jeszcze wiele innych przeciwnosci losu? Jednak wole przyswoic 56 innych rzeczy w tydzien, niz 1 w 3 miechy, a jezeli tak mowisz to wlasnie moze pomozesz rozwiazac ten problem... Jak uda Ci sie rozwiazac to, to ja zastanowie sie jeszcze raz nad swoim podejsciem:> Poza tym spojrz na moja sygnature... wierze w to bezgranicznie, a jednak zrezygnowalem z podejscia pelnego Css


P.s Mam pytanie apropos forum samego, nie wiecie czy jest tu jakies zabezpieczenie przed wyprzedzaniem psotow? tzn jezeli ja jestemw trakcie pisania jakiegos posta a ktos pisze i skonczyl przede mna, a to mogloby zmienic moj poglad lub cala odpowiedz, to czy bede o tym poinformowany?(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

Ten post edytował Pucy 22.08.2006, 18:20:17

[s_w_ir]

Masz, jeśli coś CI nie pasuje to pisz

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
	<head>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<!-- Main view !-->
	<body>
		<div id="container">
			<div id="links">
				<div class="category"><strong>STRONY INTERNETOWE</strong></br>
					<a href="#">KONSULTING, SZKOLENIA</a><br />
					<a href="#">AKTUALIZACJA PORTALI</a><br />
					<a href="#">NARZEDZIA</a><br />
				</div>
				<div id="news">
					NEWSLETTER
				</div>
			</div>
 
			<div id="fotter">
				<img src="./templates/page/images/fot1.gif" alt="" />
				<span>xxx</span>
			</div>
			<div id="center">
				<div id="centerx">
					sda <br />sda <br />sda <br />sda <br />sda <br />
					sda sda sda sda sda 
					sda <br />sda <br />sda <br />sda <br />sda <br />
					sda sda sda sda sda 
					sda <br />sda <br />sda <br />sda <br />sda <br />
					sda sda sda sda sda 
					sda <br />sda <br />sda <br />sda <br />sda <br />
					sda sda sda sda sda 
				</div>
			</div>
		</div>
	</body>
</html>
[HTML] pobierz, plaintext 

Kod

body
{
    margin: 0;
    padding: 0;
}

html, body, #container
{
    min-height: 100%;
    width: 100%;
    height: 100%;
}
html>body, html>body #contents {
    height: auto;
}

#container
{
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
    
#links
{
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: green;
    width: 13em;
}

#center
{    
    border: 0;
    margin: 0;
    margin-left: 13em;
    background: red;
}

#fotter
{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 13em;
    background: brown;
}

Ps. nic Cie nie ostrzeże.

Ten post edytował s_w_ir 22.08.2006, 21:42:43

[Pucy]

Czy ja naprawde zle tlumacze? s_w_ir to nie tak:( Otwieram w FF a tam zonk. Czerwonie nie rozciaga zielonego, brazowe w ogole jest na dole ekranu, a jego dolny border powinine byc na równi z dolnym borderem czerwonego... Zaloze sie ze zielone gdyby wypelnicz tekstem to wcale by nie pociagnelo czerwonego....

P.S. mike_mech byl najblizej, ale to i tak nie to... A ja dalej czekam na pomoc, i ewentualnie rozwiazania.

P.S 2

Jesli jestes programista to naturalna cechą programisty jest ciągłe poszerzanie swojej wiedzy, a poświęcenia wakacji na to żeby poznać nowe techniki da Ci to że za dwa lata nie wypadniesz z rynku ze swoim modelowaniem tabelami.

Rozumiem ze mam czekac na kolejne pomysly?

Ten post edytował Pucy 23.08.2006, 12:42:50

[s_w_ir]

Jak tłumaczysz tak masz: w kodzie mike_mech'a brakowało Ci tego żeby szare(puste miejsce) pole zamienić z niebieskim, a teraz nagle chcesz żeby jedno rozciągało drugie.

Możesz czekać...

[Pucy]

(wez to szare miejsce na dole zmien na zielony i walnij miedzy zielonym i niebieskiem) - i oto mi chodzi.

Mamy blok na srodku strony.... po lewej jest zielone, na dole zielonego jest brązowe, po peawej jest niebieskie... Jezeli wpisujemy w zielone to brazowe ejst zawsze na dole zielonego, a rozciagane jest niebieskie wieksze po prawej... w momencie gdy w zielonym jest mniej tekstu, a w niebieskim jest wiecej, to niebieskie rozciaga zielone, pozotawiajac puste miejsce W ZIELONYM!! a brazowe jest zawsze na dole zielonego, na rowni z niebieskim ( dolna krawedz brazowego jest na rowni z dolna krawedzia niebieskiego - ZAWSZE)