HTML-dokumentin muotoilu CSS:llä: kaksi aluetta vierekkäin

wanders · Viesti Kirjoittaja **wanders** » 1.8.2006 klo 20.28

Ongelma liittyy HTML-muotoiluun - päätin viimein opetella dokumenttien ulkoasumuotoilun ilman taulukoita. Kohtuullisen hyvin menee jo, mutta nyt tuli ongelma: pitäisi saada kaksi div-aluetta vierekkäin vaakasuunnassa. Ei onnistu, vaan toinen sijoittuu ensimmäisen alapuolelle viereen. Tulee ns. nelikenttä.

Olen tehnyt molemmat div-alueet kolmannen emo-alueen sisään ja tämä emoalue keskittyy (tai ainakin on tarkoitettu keskittyväksi). Eli selainikkunaan keskittyvä ratkaisu.

Tässä koodi, jos joku haluaa ja osaa jelppiä:

Koodi: Valitse kaikki

<!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-1" />
<title>Testeri</title>
<style type="text/css">
<!--
body {
	text-align: center;
	background-color: #999999;
}
#pohja {
	width:930px;
	height:200px;
	margin: 0 auto;
	background-color: #FF0000;
	visibility: visible;
	z-index:1;
}
#tausta {
	position:relative;
	left:0px;
	top:0px;
	width:630px;
	height:200px;
	background-color: #FFFFFF;
	visibility: visible;
	z-index:2;
}
#saatimet  {
	text-align: left;
	position:relative;
	left:630px;
	top:0px;
	width:300px;
	height:200px;
	background-color: #FFFFFF;
	border: 1px #CCCCCC dotted;
	visibility: visible;
	z-index:4;
}
-->
</style>
</head>
<body>

<div id="pohja">
	<div id="tausta">kikkuli
	</div>
	<div id="saatimet">
		<p class="left">Elokuun 1. päivänä, 2006</p>
	</div>
</div>


</body>
</html>

Macco · Viesti Kirjoittaja **Macco** » 1.8.2006 klo 20.33

taustaan

Koodi: Valitse kaikki

float: left;

ja saatimiin

Koodi: Valitse kaikki

float: right;

wanders · Viesti Kirjoittaja **wanders** » 1.8.2006 klo 20.43

Macco kirjoitti:taustaan
Koodi: Valitse kaikki
float: left;
ja saatimiin
Koodi: Valitse kaikki
float: right;

Kiitos vinkistä. Ei aivan asettunut vielä niinkuin halusin, mutta eiköhän se float ole tässä ratkaisu...

Edit:
Joo, en saanut kahta div-laatikkoa vierekkäin. Mutta tein toisesta alueesta erillisen laatikon, jolla floattasin muun matskun sinne oikeaan reunaan. Kyllä tämä tästä.

wanders · Viesti Kirjoittaja **wanders** » 1.8.2006 klo 21.50

Seuraava ongelma tuli vastaan:

Haluan div-alueet aivan selaimen yläreunaan kiinni. Taulukkohommissa tämä onnistuu leftmargin ja topmargin määrittelyillä bodyssa.

Olen yrittänyt erilaisia margin: 0; -määrityksiä sekä bodyn että ulommaisen kehyksen css-määrittelyssä, muttei onnistu. Vinkkejä?

MiniMe · Viesti Kirjoittaja **MiniMe** » 1.8.2006 klo 22.37

Koodi: Valitse kaikki

body {
   padding: 0;
   margin: 0;
   text-align: center;
   background-color: #999;
}

#pohja {
   width:930px;
   height:200px;
   margin: auto;
   background-color: #F00;
}

#tausta {
   float: left;
   position:relative;
   width:630px;
   height:200px;
   background-color: #FFF;
}

#saatimet  {
   float: left;
   text-align: left;
   position:relative;
   width:300px;
   height:200px;
   background-color: #FFF;
   border: 1px  dotted #CCC;
}

Olisikohan jotakuinkin näin... vaikuttikohan tuo border tuohon leveyteen, eli toinen div voi hypätä alle. Jos näin, kavenna jompaa kumpaa diviä.

wanders · Viesti Kirjoittaja **wanders** » 1.8.2006 klo 23.32

MiniMe kirjoitti: Olisikohan jotakuinkin näin... vaikuttikohan tuo border tuohon leveyteen, eli toinen div voi hypätä alle. Jos näin, kavenna jompaa kumpaa diviä.

You're the MAN, MiniMe!
Ohjeidesi avulla sain ratkaistua molemmat tämän illan ongelmat, tosiaan toinen palsta kanitti sen kehyksen verran. Otin sen pois, se oli vain kopioitunut toisesta. Jes, kiitoksia!

wanders · Viesti Kirjoittaja **wanders** » 3.8.2006 klo 15.43

No nyt nuo edelliset layer-jutut alkavat toimia.

Mutta seuraava ongelma:
Haluan kolmannen layerin aikaisempien päälle niin että tämä layer "kelluu" edellisten päällä. Löysin javascriptin, jolla layerin saa liikuteltavaksi (tämän takia se voi kellua muiden päällä). Ongelma on nyt se, etten pysty tekemään uutta layeria ilman että se vaatii tilaa - ajatukseni on laittaa se aluksi johonkin reunaan josta sitä voi siirrellä. Ja sen voi myös poistaa näkyvistä (ohje-ikkuna siis).

Edit:
Ok, yksinpuhelukin joskus auttaa. Se oli relative -> absolute -ongelma.

HTML-dokumentin muotoilu CSS:llä: kaksi aluetta vierekkäin

HTML-dokumentin muotoilu CSS:llä: kaksi aluetta vierekkäin

Jatkokysymys: Kuinka kolmas HTML-layer edellisten päälle