Miten saisi venytettyä ihan tuon statusbaariin asti, eli ihan alas asti? Ulkoasuni ei millään näytä hyvältä, jollei se ylety ihan alas asti.
bodyn marginiksi 0
En tuota tarkoittanut, vaan että miten saan venytettyä divin ihan alas asti vaikka sisältöä ei olisi niin paljon?
Kyllä se tuota soveltamalla onnistuu.
Kyllä tiedän, että onnistuu koska olen sellaisia sivuja nähnyt. Nyt en vaan löytänyt mistään sellaista, niin kysyn neuvoa.
html {
min-width: 100%;
min-height: 100%;
}
div {
height: 100%;
}Juhkon mainitsemalla marginaalilla ei ole tässä osaa eikä arpaa.
voit painaa enter nappia tarpeeksi monta kertaa ja laittaa alas .-merkin. Tai <br/>-tageilla ilman enter nappeja
Metabolixille kiitos.
sammakkomies...
sammakkomies kirjoitti:
voit painaa enter nappia tarpeeksi monta kertaa ja laittaa alas .-merkin. Tai <br/>-tageilla ilman enter nappeja
Yritätkö tahallasi ärsyttää ihmisiä, koska tuo on ehkä typerin "ohje" koskaan. Pyydän sinua ihan todella lopettamaan tuon spammaamisen.
minä kerron omat ohjeet niin kuin itse tekisin. Sori jos ei kelpaa. Sain sen joulukalenterinki melkein toimiin. En laita kuvaa ku olisi huono neuvo
Pitäiskö tohon Metabolixin settiin mahdollisesti laittaa html-tagin kaveriksi body-tagi? En ole varma, mutta niin itse olen tehnyt...
Joskus tehdessäni keskitettyjä laatikoita se oli pakollinen, jotta 100% korkeuden sai periytymään, muuten laatikko jäi yläreunaan kun bodyn korkeuden määritti laatikon sisältö.
Nyt tuli samassa asiassa ongelma vastaan, eikä enään mikään näytä auttavan. Voisiko joku vilkaista tätä, ja sanoa miten oikeanpuoleisen divin (#right) saisi yhtä korkeaksi kuin kaverinsa #leftin? Lisäksi ainoastaan Explorer osaa näyttää tämän oikein.
Muokkaus. Aij, ai. Väärä doctype lipsahtanut.
Muokkaus. Koodit kunnossa, mutta silti vain Explorer osaa sen näyttää oikein.
#logo {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
width: 901px;
border: 1px solid black;
font-size: 20pt;
padding: 20px;
background-color: white;
padding-right: 0px;
}
#main {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: white;
padding-left: 5px;
padding-top: 0px;
margin-top: 10px;
text-align: left;
border: 1px solid black;
}
#left {
float: left;
max-width: 648px;
min-width: 648px;
padding-top: 7px;
padding-right: 7px;
}
#right {
padding-left: 10px;
padding-right: 7px;
background-position: left top;
padding-bottom: 25px;
float: right;
width: 250px;
text-align: left;
background-color: #DDDDDD;
border-left: 1px solid black;
padding-top: 7px;
}
#dokumentti {
text-align: center;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Otsikko</title> <!-- Meta --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="dokumentti"> <!-- Logo --> <h1 id="logo">Otsikko</h1> <div id="main"> <div id="left"> <p>Oikea palkki jää jostain syystä liian matalaksi. Tämän pitäisi olla yhtä korkea kuin tämäkin kohta.</p> <p>Firefoxilla ei näy tekstit main-divin sisällä, vaan ne ovat sen jälkeen. Missä korjaus?</p> </div> <div id="right"> Sivupalkki </div> </div> </div> </body> </html>
IE8 näyttää tuon sivusi yhtä huonosti kuin Firefox.
Jos nyt vaikka tekisit näin:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<title>Otsikko</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#logo {
background-color: white;
border: 1px solid black;
font-size: 20pt;
margin: 10px auto 0 auto;
padding: 20px;
text-align: center;
width: 900px;
}
#main {
background-color: white;
border: 1px solid black;
margin: 10px auto 0 auto;
position: relative;
width: 900px;
}
#left {
margin-right: 280px;
padding: 5px;
}
#right {
background-color: #DDDDDD;
border-left: 1px solid black;
height: 100%;
padding: 0 10px;
position: absolute;
right: 0;
top: 0;
width: 250px;
}
#right p {
margin: 0;
padding: 10px;
}
</style>
</head>
<body>
<div id="dokumentti">
<!-- Logo -->
<h1 id="logo">Otsikko</h1>
<div id="main">
<div id="left">
<p>Oikea palkki jää jostain syystä liian matalaksi. Tämän pitäisi olla yhtä korkea kuin tämäkin kohta.</p>
<p>Firefoxilla ei näy tekstit main-divin sisällä, vaan ne ovat sen jälkeen. Missä korjaus?</p>
</div>
<div id="right">
<p>Sivupalkki</p>
</div>
</div>
</div>
</body>
</html>Tämän juju on siinä, että left saa määrittää korkeuden, right vaan apinoi sitten korkeuden mukana. Joten right ei voi olla sisällöltään pidempi kuin left. Jos left saattaa olla sisällöltään vajaa, niin leftille voi määrittää min-heightin. Huom, rightille ei voi määrittää suoraan ylä- ja alapaddingia! Muutoin korkeus menee ylitse 100%. Paddingin voi kuitenkin määritellä lapsielementeille.
Kiitos sinulle, empäs huomannutkaan tätä aikaisemmin. =) En tiennyt miten IE8 näyttää, koska itse käytän IE7.
Tässä on vielä vähän eteenpäin kehitelty versio, jossa #dokumentti määrää leveyden: http://merri.net/xhtml/macro_divikorkeus.html
Vielä kun kehitettäisiin versio, jossa korkeampi elementti määrää dokumentin korkeuden... =)
Se onnistuu display: table;n voimin, mutta IE7 ja aiemmat eivät tue sitä. Tai hmm, voisin tietty sen perusfloatinkin laittaa, mutta sitten elementit eivät veny aina samanpituisiksi. Taustakuva pitäisi laittaa #mainiin.
Äh! Kun puhuit taustakuvasta, niin muistinkin juuri että voisihan sellaisen taustakuvan tehdä sinne ja venyttää pidemmän elementin mukaan. Kiitos muistutuksesta, alankin heti väsäämään.
Tässä tuli sellainen ongelma, että kun floatin nuo elementit oikeille paikoilleen ja laitoin taustakuvan mainiin, niin main on taas sellainen pikselin korkea. Kun otan floatit pois, niin näkyy oikein taustakuva mutta elementit ovat allekkain.
Jostain syystä on nettisivupuolen ohjelmointitaidot päässeet ruostumaan, kun olen nyt pari kuukautta säätänyt muilla kielillä. Onneksi sen oppii uudelleen.
Lue läpi tämä keskustelu siitä, miten se pitää tehdä.
Molempia ei kelluteta. (Ne voi kylläkin myös kelluttaa, mutta se aiheuttaa IE:n kanssa ongelmia ainakin joskus.)
Okei. En saanut molempia elementtejä vierekkäin (#mainin sisällä #left ja #right). Floatin #leftin vasemmalle ja #rightille annoin margin-left: 650px; jolloin tämä on ihan leftin jälkeen. Nyt kuitenkin käy niin, että elementti #right on ihan sivun oikeassa alareunassa heti sisällön loputtua vasemmalta eikä suinkaan yläreunassa kiinni.
Ongelmana oli ilman taustakuvaa toteutetussa versiossa se, että jos oikeanpuoleinen elementti on korkeampi kuin vasemmanpuoleinen, niin se menee ylipitkäksi yli mainin.
Tekisin tämän ilman taustakuvaa, jos vain se nyt menisi läpi...
Aihe on jo aika vanha, joten et voi enää vastata siihen.