|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
| autor |
|
jnt
HV Guru
liitunud: 10.05.2005
|
06.07.2008 22:25:50
div'i vertikaalne asukoht alumise ääre suhtes |
|
|
Nimelt div'ide ja css'iga möllates satusin sellise komistuskivi otsa, et ei suuda div'i panna nö alumise äärega suhtesse. Hetkel tolkneb ülemise ääre järgi, kuid oleks vaja div alla äärde saada. (antud juhul siis nö vastu footerit) Jutt käib keskel olevast alumisest div'ist.
Kood järgmine:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257">
<title>asd</title>
<style type="text/css">
body {
background-color: #FFFFFF;
color: #000000;
}
#container {
width: 95%;
margin: auto;
}
#top {
text-align: center;
}
#leftnav {
float: left;
margin: 0;
}
#rightnav {
float: right;
margin: 0;
}
#content {
margin-left: 145px;
margin-right: 165px;
}
#chatbox {
margin-left: 145px;
margin-right: 165px;
}
#footer {
clear: both;
margin: 0px;
}
.titlebar {
background-color: #999999;
color: #FFFFFF;
border: 1px solid #999999;
padding: 0px;
font-weight: bold;
text-align: center;
}
.text {
color: #000000;
border: 1px solid #999999;
padding: 5px;
margin-bottom: 5px;
}
.footer{
background-color: #999999;
color: #FFFFFF;
border: 1px solid #999999;
padding: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav" style="width:140px;">
<div class="titlebar">Lorem ipsum</div>
<div class="text" style="text-align:center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
<div class="titlebar">Lorem ipsum</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
</div>
<div id="rightnav" style="width:160px;">
<div class="titlebar">Lorem ipsum</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div>
</div>
<div id="content">
<div class="titlebar">Lorem ipsum</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div id="chatbox">
<div class="titlebar">Lorem ipsum</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div>
</div>
<div id="footer">
<div class="footer">Lorem ipsum dolor sit</div>
</div>
</div>
</body>
</html> |
Ehk oskab keegi välja aidata?
_________________
Progemisest: https://byteaether.github.io/
Seisab keldris vana 386-486-Pentium1? Räägime! Ehk saan vanakesele uue elu anda. 
Vaata siia, äkki müün midagi põnevat -> https://www.osta.ee/index.php?fuseaction=listing.seller&q[seller]=jnt |
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
   |
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
 |
mikk36
HV Guru
liitunud: 21.02.2004
|
|
06.07.2008 22:33:51
|
|
|
tahad staatiliselt siduda brauseri alumise äärega ?
kui jah, siis position: fixed ja bottom: 0 näiteks
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
06.07.2008 22:38:50
|
|
|
mikk36, brauseri äärega ei tahaks siduda. tahaks ta panna paika nii, et kui keskmises ülemises aknas pmst teksti polegi, et siis see alumine keskmine ei läeks üles vaid jääks footerile ikka nii lähedale, kui siis, kui see keskmine ülemine kast "lükkab" ta vastu footerit.
_________________
Progemisest: https://byteaether.github.io/
Seisab keldris vana 386-486-Pentium1? Räägime! Ehk saan vanakesele uue elu anda.
Vaata siia, äkki müün midagi põnevat -> https://www.osta.ee/index.php?fuseaction=listing.seller&q[seller]=jnt |
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
outcast
HV kasutaja
liitunud: 04.12.2003
|
|
07.07.2008 11:50:23
|
|
|
pane position: relative siis
_________________
www.lemps.pri.ee |
|
| Kommentaarid: 10 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
9 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
karu
HV kasutaja
liitunud: 08.08.2002
|
|
07.07.2008 12:59:21
|
|
|
| jnt kirjutas: |
| outcast, proovitud... mul vaja, et ta oleks relatiivne container'i alumise ääre suhtes või siis footeri suhtes, kuid kui panna position:relative, on ta relatiivne keskmise ülemise kasti suhtes... aga just seda ma ei taha. |
<div id="footer">
<div style="position: relative;"> <!-- fikseerib footeri ülemise ääre -->
<div id="chatbox"> <!-- position: absolute; bottom: 0; left: 0; -->
<div class="titlebar">Lorem ipsum 5</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</div>
</div>
<div class="footer">Lorem ipsum dolor sit</div>
|
|
|
| Kommentaarid: 1 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
1 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
07.07.2008 13:24:35
|
|
|
karu, ka see ple see, mida vaja. nimelt on siis chatbox alati all pool, kui kõige alumine kõrval olev tabel... Seda aga samuti ei tahaks...
tabelitega oli omal ajal lihtne. lükkasin sinna keskele 2 lahtrit: ülemisele valign top ja alumisele valign bottom... kuidas aga seda css'i ja div'idega teha... ei tea...
_________________
Progemisest: https://byteaether.github.io/
Seisab keldris vana 386-486-Pentium1? Räägime! Ehk saan vanakesele uue elu anda.
Vaata siia, äkki müün midagi põnevat -> https://www.osta.ee/index.php?fuseaction=listing.seller&q[seller]=jnt |
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
karu
HV kasutaja
liitunud: 08.08.2002
|
|
07.07.2008 13:46:01
|
|
|
| jnt kirjutas: |
| karu, ka see ple see, mida vaja. nimelt on siis chatbox alati all pool, kui kõige alumine kõrval olev tabel... Seda aga samuti ei tahaks... |
kuhu sa soovid chatbox'i kinnitada siis ?
|
|
| Kommentaarid: 1 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
1 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
07.07.2008 21:17:37
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257">
<title>asd</title>
<style type="text/css">
body {
background-color: #FFFFFF;
color: #000000;
}
#container {
width: 95%;
margin: auto;
}
#top {
text-align: center;
}
#leftnav {
float: left;
margin: 0;
}
#rightnav {
float: right;
margin: 0;
}
#content {
margin-left: 145px;
margin-right: 165px;
}
#chatbox {
margin-left: 145px;
margin-right: 165px;
}
#footer {
clear: both;
margin: 0px;
}
.titlebar {
background-color: #999999;
color: #FFFFFF;
border: 1px solid #999999;
padding: 0px;
font-weight: bold;
text-align: center;
}
.text {
color: #000000;
border: 1px solid #999999;
padding: 5px;
margin-bottom: 5px;
}
.footer{
background-color: #999999;
color: #FFFFFF;
border: 1px solid #999999;
padding: 0px;
text-align: center;
}
#s1 {
min-height:115px;
}
</style>
<!--[if ie]>
<style type="text/css" media="all">
#s1 {
height:115px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav" style="width:140px;">
<div class="titlebar">Lorem ipsum</div>
<div class="text" style="text-align:center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
<div class="titlebar">Lorem ipsum</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
</div>
<div id="rightnav" style="width:160px;">
<div class="titlebar">Lorem ipsum</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div>
</div>
<div id="content" >
<div class="titlebar">Sisu ala</div>
<div class="text" id="s1">
Lorem ipsum suscipit lobortis nisl ut aliquip ex ea commodo
vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div id="chatbox">
<div class="titlebar">Lorem ipsum</div>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</div>
</div>
<div id="footer">
<div class="footer">Lorem ipsum dolor sit</div>
</div>
</div>
</body>
</html> |
_________________
 |
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
08.07.2008 12:58:36
|
|
|
FF'i ja IE'ga oli sellega nüüd niisugune lugu, et lihtsalt minimaalne kõrgus oleks nagu seatud sisul...
Muidu natuke möllasin karu koodiga ja sain nagu asja paika, vaid kipub sisu kast minema chatbox'i taha, enne kui venima hakkab... kuid selle saab vast ära parandada margin-bottomiga.
_________________
Progemisest: https://byteaether.github.io/
Seisab keldris vana 386-486-Pentium1? Räägime! Ehk saan vanakesele uue elu anda.
Vaata siia, äkki müün midagi põnevat -> https://www.osta.ee/index.php?fuseaction=listing.seller&q[seller]=jnt |
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
08.07.2008 17:25:06
|
|
|
Seda ta ongi, kas sa siis ei tahtnud, et jääks see alumine osa sealmaal pidama, kui sisu vähem on? Võta border maha sellelt min-height iga osalt, siis ei ole serv näha. Pane sisule eraldi div borderiga ümber ja peaks toimima.
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
jnt
HV Guru
liitunud: 10.05.2005
|
|
08.07.2008 18:23:13
|
|
|
andrusny, njh, kuid see ei ole siiski kõige parem variant, kui ka ääres olevate kastide suurused võivad muutuda. Kuid sain juba asja nii, et mul vaja sisu lahtrile vaid margin-bottom panna piisavalt suur, et asi ei läeks chatboxi taha/peale. (muidugi, kas sellel on oma miinus - margin-bottom on kindel arv ja chatbox'i suurus seega ei tohiks muutuda, kuid selle elab üle)
Igastahes tänud kõigile, kes vaevusid üldse siia teemasse vaatama ja isegi üht-teist kribama. 
_________________
Progemisest: https://byteaether.github.io/
Seisab keldris vana 386-486-Pentium1? Räägime! Ehk saan vanakesele uue elu anda.
Vaata siia, äkki müün midagi põnevat -> https://www.osta.ee/index.php?fuseaction=listing.seller&q[seller]=jnt |
|
| Kommentaarid: 110 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
0 :: |
102 |
|
| tagasi üles |
|
|
.Eestlane.
HV kasutaja
liitunud: 14.01.2006
|
|
10.07.2008 01:03:42
|
|
|
position:absolute;
bottom:0;
ja footerit sisalduvale kastile position:relative;
|
|
| Kommentaarid: 3 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
3 |
|
| tagasi üles |
|
|
|
:: KKK
:: otsing 
:: statistika
:: kasutajate nimekiri
:: kasutajate grupid
:: registreeri
teata moderaatorile
