Just nu i M3-nätverket
Jump to content

CSS + div + fönster placering?


dkz

Recommended Posts

Jag har en html sida där jag placerar ut 4 olika fönster med <div> taggar och CSS. Problemet är att jag får inte rätt på plaseringen.

 

Layouten ska vara se ut som nedan, foot:en ska inte vara statisk utan ska följa med det högsta fönstert av left+right.

 

*****************

******HEAD*******

*****************

 

******** ********

******** ********

**LEFT** **RIGHT*

******** ********

******** ********

******** ********

 

*****************

******FOOT*******

*****************

 

CSS koden ser ut så här:

 

.head
{	padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 400px; height: 60px; left: 10px; top: 10px;
position: absolute; 
z-index: 1;
border: 1px solid #aaa;
}

.left
{	padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 200px; 
left: 10px; top: 85px; bottom: auto; 
position: absolute; 
z-index: 1;
border: 1px solid #000;
}

.right
{	padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 200px;
width: 200px;
left: 0px; top: 70px; bottom: auto; 
z-index: 0;
position: relative; 
border: 1px solid #000;
}

.foot
{	padding: 0px 0px 0px 0px;
margin: 110px 0px 0px 0px;
width: 400px; left: 0px; top: 0px;
position: relative; 
z-index: 1;
border: 1px solid #000;
}

 

Link to comment
Share on other sites

Det är inte helt lätt att göra det med css... men jag tycker att det borde fungera om du lägger "head", "left" och "right" i en yttre div som du positionerar med float: left.

 

Sen borde det funka om du lägger till clear: all i din "foot".

 

Jag har sett nån artikel om det som jag ska försöka leta upp...

 

Tillägg:

Det var inte denna länken jag letade efter, men det verkar vara ett vettigt upplägg:

http://www.treetrybe.com/imm/tests/nn4_3cols_x.html

 

css-koden kan du ju se här:

http://www.treetrybe.com/imm/tests/3col-main.css

http://www.treetrybe.com/imm/tests/3col-nn4-layout.css

http://www.treetrybe.com/imm/tests/3col-styles.css

 

Hoppas det kan hjälpa!

 

 

 

[inlägget ändrat 2003-07-03 11:10:28 av query]

Link to comment
Share on other sites

Tack för infon.. ;-)

 

Men jag förstår inte vad du menar.. Har du något färdigt exempel som inte är så stort som www.treetrybe.com

 

Link to comment
Share on other sites

BoEriksson

Var det ungefär så här du menade? (osäker)!

Nedanstående kod visas lika i alla upplösningar.

Dina positionsangivelser ska väl stå innan värdena för left oct top gissar jag.

Vad gör dina Z-index i koden?

Detta har jag tidigare bara använt vid lager och boxar.

 

<HTML>

<HEAD>

 

<STYLE TYPE=TEXT/CSS>

<!--

body {

margin: 0px;

background: lightgreen;

width: 100%;

height: 100%;

}

 

#head

{padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: lightblue;

width:90%; height:15%; position:absolute; left:5%; top:5%; border:1px solid black;}

#left

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; margin: 0px 0px 0px 0px; background:green;

width:45%; height:50%; position:absolute; left:5%; top:20%; bottom:auto; border:1px solid black;}

#right

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:silver; width:45%; height:50%;

position:absolute; left:50%; top:20%; bottom:auto; border:1px solid black;}

#foot

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:blue; width:90%; height:25%;

position:absolute; left:5%; top:70%; border: 1px solid black;}

-->

</STYLE>

<body>

<div id="head">

div top

</div>

<div id="left">

div vänster

</div>

<div id="right">

div höger

</div>

<div id="foot">

div botten

</div>

</body>

</html>

 

 

[inlägget ändrat 2003-07-03 12:49:19 av BoEriksson]

Link to comment
Share on other sites

PRECIS!!! ;-) min huvudvärk kommer nu släppa... Tack.... Jag ropade nog hej innan jag kom över bäcken..

 

[inlägget ändrat 2003-07-03 13:16:41 av dkz]

Link to comment
Share on other sites

Men din lösning så fungerade det mycket bra med re-size av fönstert. Men det jag också är ute efter är att "div botten" automatiskt trycks ner när text i "div vänster & höger" matas in.

 

 

Link to comment
Share on other sites

BoEriksson

Ok, då blir det att köra med position relative.

Om texten ej ryms i en div så skjuts div:en under neråt, samma effekt blir det om man ökar höjden på en div.

Testa att ändra höjd i en div eller lägg in en massa text för att kolla.

 

<HTML>

<HEAD>

<STYLE TYPE=TEXT/CSS>

<!--

body {margin:0px; background:lightgreen; width:100%; height: 100%;

}

#head

{padding:0px 0px 0px 0px; margin: 10px 0px 0px 0px; background: lightblue; width:90%; height:15%; position:relative; left:5%; top:0%; border:1px solid black;}

#left

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; margin: 0px 0px 0px 0px; background:green;

width:45%; height:50%; position:relative; left:5%; top:0%; border:1px solid black;}

#right

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:silver; width:45%; height:50%;

position:relative; left:50%; top:-50%; border:1px solid black;}

#foot

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:blue; width:90%; height:25%;

position:relative; left:5%; top:-50%; border:1px solid black;}

-->

</STYLE>

<body>

<div id="head"> div top </div>

<div id="left"> div vänster </div>

<div id="right"> div höger </div>

<div id="foot"> div botten </div>

</body>

</html>

 

 

Link to comment
Share on other sites

om jag fyller på med text i <vänster/höger> förflyttas fönsterna så att det bildas ett mellanrum mellan top och höger.

 

så här.

 

 

****************************

****************************

****************************

 

************

************

************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

*************

*************

 

****************************

****************************

****************************

 

 

 

Link to comment
Share on other sites

om jag fyller på med text i <vänster/höger> förflyttas fönsterna så att det bildas ett mellanrum mellan top och höger.

 

så här.

 

 

****************************

****************************

****************************

 

************

************

************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

************ *************

*************

*************

 

****************************

****************************

****************************

 

 

 

Link to comment
Share on other sites

BoEriksson

Jodå, jag kände till det problemet, men då testar vi en modell med scrollning då !

 

<HTML>

<HEAD>

 

<STYLE TYPE=TEXT/CSS>

<!--

body {margin:0px;background:lightgreen;width:100%;height:100%;color:yellow;font-size:16pt;}

 

#head

{padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: lightblue;

width:90%; height:15%; position:absolute; left:5%; top:5%; border:1px solid black;}

#left

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; margin: 0px 0px 0px 0px; background:green;

position:relative; left:5%; top:20%; bottom:auto; border:1px solid black;}

#right

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:silver;

position:absolute; left:50%; top:20%; bottom:auto; border:1px solid black;}

#foot

{padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:blue;

position:absolute; left:5%; top:70%; border: 1px solid black;}

-->

</STYLE>

<body>

<div id="head"> div top </div>

<div id="left" style="width: 45%; height: 60%; overflow: auto;"> div vänster </div>

<div id="right" style="width: 45%; height: 50%; overflow: auto;"> div höger </div>

<div id="foot" style="width: 90%; height: 25%; overflow: auto;"> div botten

<BR> Då försöker vi med detta då <BR>

Om det finns för mycket text så den ej <BR>

får plats så kommer det fram en scrollist <BR>

Samma sak får du även om du <BR>

lägger in en massa text i vänster eller höger <BR>

Du kan dessutom ha olika höjd på vänster och höger<BR>

Kan detta bli bra då månne?<BR>

Alla div utom top får i detta exempel <BR

en scrollist till höger när den behövs.<BR>

Du kan även klicka i den blå rutan <BR>

och använda piltangenterna för rullning.

</div>

</body>

</html>

 

 

 

 

[inlägget ändrat 2003-07-03 19:18:22 av BoEriksson]

Link to comment
Share on other sites

Jag har hållt på med en liknande desig idag, fast med tre kolumner. Jag använde mig av en template som jag hittade på nätet, och anpassade den sedan efter mina behov. Har fått det att funka på följande sätt:

 

CSS-filen:

/* ------ huvud ---------- */
#header {
width: 755px;
border-top: 2px solid #727272;
border-bottom: 7px solid #0099CC;
}

/* -------- Innehåll --------- */
#content-wrap {
width: 755px;
padding-top: 15px;
margin-bottom: 30px;
text-align: center;
}

/* -------- fot  ---------- */
#footer {
width: 755px;
padding: 0px;
border-top: 1px solid #0099CC;
}

.clear {
clear: both;
}

/* --- Meny ---------- */
div#content-sub-1 {
float: left;
width: 150px; /* for browsers with no escapes at all */
\width: 150px; /* for IE5/Win */
w\idth: 150px; /* for good browsers */
text-align: left;
}

/* --- Högerkolumn ---------- */
div#content-sub-2 {
float: right;
width: 110px; /* for browsers with no escapes at all */
\width: 120px; /* for IE5/Win */
w\idth: 110px; /* for good browsers */
text-align: center;
padding-left: 10px;
font-size: 85%;
}

/* --- Mitten ---------- */
div#content-main {
width: auto; /* for browsers with no escapes at all */
\width: 98%; /* for IE5/Win */
w\idth: auto; /* for good browsers */
margin: 0px 120px 0px 150px;
padding-left: 10px;
padding-right: 10px;
min-width: 125px;
border-left: 1px dashed #CCCCCC;
border-right: 1px dashed #CCCCCC;
text-align: left;
}

 

Och sen den viktiga biten av html-koden:

<div id="header"><a href="index.html"><img src="bilder/huvud2.gif" alt="sidhuvud"/></a></div>

<!-- Behållare för de tre mittenkolumnerna -->
<div id="content-wrap">

<!-- Meny -->
<div id="content-sub-1">Menyn...</div>
<!-- Slut Meny -->

<!-- Här finns innehållet i högerkolumnen -->
<div id="content-sub-2">Höger...</div>
<!-- Slut på innehållet i högerkolumnen -->

<!-- Här finns innehållet i mittenkolumnen -->
<div id="content-main"></div>
<!-- Slut på innehållet i mittenkolumnen -->

</div>
<!-- Slut på Behållare för de tre mittenkolumnerna -->

<!-- Sidfot -->
<div class="clear"> 
<div id="footer">Sidfoten...</div>
</div>

 

Sidan är alltså uppbyggd med ett sidhuvud. Därefter kommer en behållare (content-wrap) som innehåller de i mitt fall tre kolumnerna. Efter detta kommer sidfoten som flyttar sig beroende på hur mycket innehåll det finns i content-wrap. Jag har valt att sätta en fast bredd på sidan, men det går precis lika bra att köra med en "dynamisk" bredd.

 

Gick det att förstå något? :-)

 

Tillägg:

Den vänstra och högra kolumnen är positionerad med float: left respketive right. Mittkolumnen får sen ta upp så mycket plats den vill däremellan, men jag har som sagt satt den maximala bredden för hela sidan till ett fast värde.

 

[inlägget ändrat 2003-07-03 19:50:16 av query]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...