Ramme omkring side med CSS

vil du have det lidt sådan ála:

BODY{
	border:1px solid red;
}

ellers se det da us til at de du har virker

adam

Køb en zebra - og kald den plet

Du blir, når du vil bruge egen grafik nok nødt til at bruge tabeller i dit design hvor du i de 2 celler i siderne bruger:

td.grafikside
{
  background-image: url('sidekantsgrafik.jpg');
  background-repeat: repeat-y;
}

og i top og bund bruger

td.grafiktopbund
{
  background-image: url('topbundgrafik.jpg');
  background-repeat: repeat-x;
}

i hjørnerne er det bare at indsætte et billede

jeg er her gået ud fra, at dine celler har fået et "default udseende" i css, a la:

td
{
  margin:0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  osv...
}

Casper

vil du have det lidt sådan ála:

Kode 

BODY{
	border:1px solid red;
}

ellers se det da us til at de du har virker

adam

Køb en zebra - og kald den plet

Nej, jeg skal ikke bruge en ramme med en streg, men er af grafik. Og nej igen, det jeg har virker ikke, da jeg ikke kan bestemme bundens position relativt i forhold til indholdets længde.

/Andreas Møgelmose

----
Don\\'t take life too serious, you\\'ll never escape it alive anyway.

Du blir, når du vil bruge egen grafik nok nødt til at bruge tabeller i dit design hvor du i de 2 celler i siderne bruger:

Kode 

td.grafikside
{
  background-image: url('sidekantsgrafik.jpg');
  background-repeat: repeat-y;
}

og i top og bund bruger

Kode 

td.grafiktopbund
{
  background-image: url('topbundgrafik.jpg');
  background-repeat: repeat-x;
}

i hjørnerne er det bare at indsætte et billede

jeg er her gået ud fra, at dine celler har fået et "default udseende" i css, a la:

Kode 

td
{
  margin:0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  osv...
}

Casper

Ja, det kan jeg fint finde ud af. Pointen var jo at jeg gerne ville have det i CSS. Det er der ingen der kan hjælpe med??
/Andreas Møgelmose

----
Don\\'t take life too serious, you\\'ll never escape it alive anyway.

det er jo CSS, men du kan da bruge <div> tags istedet, det er vist dét du mener...

Casper

[Redigeret d. 18/10-03 12:59:31 af Casper Steinmann]

Hej Andreas,

Du vil formodentlig få lidt ud af at læse artiklen om positionering på www.brainjar.com

Umiddelbart ville du formodentlig kunne løse dit problem ved at indsætte nogle div container tags som f.eks

<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>

Derefter giver du dem en gang absolut positionering og placerer dem, i de respektive hjørner:

f.eks

#top{
positioning:absolute;
top:0px;
left:0px;
}

#bottom{
positioning:absolute;
bottom:0px;
left:0px;
}

#left{
positioning:absolute;
top:0px;
left:0px;
}

#right{
positioning:absolute;
top:0px;
right:0px;
}

Husk også at give dem en width og at ting der er absolut positioneret er det i forhold til det første parent element der er relativt eller absolut positioneret. (læs brainjar.com)

Det betyder at det nok vil være praktisk at lave en "div container" til dit indhold som du også kan sørge for at flytte rundt med i forhold til ramme div'sne da disse ikke optager noget plads i selve dokumentflowet og dermed ikke skubber til noget andet. (i modsætning til normalt ike positioneret elelr relativ positioneret).

Jeg håber det kan hjælpe dig lidt på vej.

De bedste ønsker
Oscar Eg Gensmann



[Redigeret d. 26/10-03 16:58:55 af Oscar Eg Gensmann]

Hej Andreas,

Du vil formodentlig få lidt ud af at læse artiklen om positionering på www.brainjar.com

Umiddelbart ville du formodentlig kunne løse dit problem ved at indsætte nogle div container tags som f.eks

<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>

Derefter giver du dem en gang absolut positionering og placerer dem, i de respektive hjørner:

f.eks

#top{
positioning:absolute;
top:0px;
left:0px;
}

#bottom{
positioning:absolute;
bottom:0px;
left:0px;
}

#left{
positioning:absolute;
top:0px;
left:0px;
}

#right{
positioning:absolute;
top:0px;
right:0px;
}

Husk også at give dem en width og at ting der er absolut positioneret er det i forhold til det første parent element der er relativt eller absolut positioneret. (læs brainjar.com)

Det betyder at det nok vil være praktisk at lave en "div container" til dit indhold som du også kan sørge for at flytte rundt med i forhold til ramme div'sne da disse ikke optager noget plads i selve dokumentflowet og dermed ikke skubber til noget andet. (i modsætning til normalt ike positioneret elelr relativ positioneret).

Jeg håber det kan hjælpe dig lidt på vej.

De bedste ønsker
Oscar Eg Gensmann



[Redigeret d. 26/10-03 16:58:55 af Oscar Eg Gensmann]

/Andreas Møgelmose

----
Don\\'t take life too serious, you\\'ll never escape it alive anyway.