Div style

[galskapen]

lurte helt enkelt og greit på hvordan man bruker bilder som ramme på en div....

[pgdx]

Det kan man ikke. Med mindre du vil lage en div fylt med fem diver inni som hver inneholder top, bunn, høyre og venstreramme og tekst.

[Arve Systad]

toolshed, eller litt h elementer, bakgrunn på p inni, og litt divs...

 

Gjort det på den måten på http://pink.absentvoid.com <= funker finfint i alle browsere som er testa. Og ja, innholdsfeltet er dynamisk.

[galskapen]

det er akkurat sånn som på den siden, arve, at jeg vil ha.

kan du gi meg kode eller litt hjelp?

[pgdx]

<div id="boks">
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
<div id="content">
<p>LOREM IPSUM</p>
</div>
</div>

#boks { width: 500px; }
#top { height: 2px; background-image: url("img/top.png"); }

Og så videre!

[galskapen]

meningen var at det ikke bare skulle bli sånne firkantede hjørner, men at de var litt buet (er jo sånn på veldig mange sider) ... skulle vel ikke være så vanskelig

[Jesper Karsrud]

Du må nok jobbe litt i PS, og lage et lite utkast, evt. lage hjørner som er avrundede manuelt...

[galskapen]

Du må nok jobbe litt i PS, og lage et lite utkast, evt. lage hjørner som er avrundede manuelt...

joda... men så var det koden da.....

[pgdx]

Du har fortsatt den måten jeg viste deg. Den "støtter" avrundede kanter....

[galskapen]

Du har fortsatt den måten jeg viste deg. Den "støtter" avrundede kanter....

men blir ikke de divsene i veien for innholdet? bare lurer

[pgdx]

Ingenting står i veien for noe hvis du plasserer det ut av veien for det.

[galskapen]

HUFF! Nå er jeg veldig forrvirret... kan noen hjelpe meg?

 

 

 

 

 

 

 

.....eller er det bare jeg som er trøtt allerede nå?

[Jesper Karsrud]

Det du gjør er å lage en div som har verdien float: left; som du plasserer bildet med de avrundede kantene som bakgrunnsbilde i... Så legger du inn en div som står i midten, som repeterer seg langs x-aksen (horisontalt)... Så kan du lage en som har verdien float: right; hvor du plasserer bildet med avrundede kanter på høyre side som bakgrunnsbilde...

 

Eksempel:

.left {
background: url('images/rundvenstre.gif'); /* Bakgrunnsbilde med avrundede kanter mot venstre */
float: left;
}

.center {
background: url('images/hoved.gif'); /* Bakgrunnsbilde som skal repeteres bortover lang x-aksen */
background-repeat: repeat-x;
}

.right {
background: url('images/rundhøyre'); /* Bakgrunnsbilde med avrundet kant mot høyre */
float: right;
}

 

Jeg tar forbehold om feil/mangler i koden, og folk får rette på meg hvis jeg har gjort/sagt noe galt nå

Endret 14. mai 2004 av Jibril2k

[Arve Systad]

Har boksen din en fast bredde, eller skal den vere dynamisk?

Litt kjekt å vite det først

 

Uansett, om du studerer koden på http://pink.absentvoid.com - så er der faktisk begge deler. Menyen har en statisk bredde, mens innholdsfeltet er dynamisk. Take a look

[galskapen]

foretrekker at bokser har en fast bredde, så.....

[Jesper Karsrud]

Men da er det i hvertfall ikke noe problem... Du setter bare en width tag i css'en Se på den jeg har over, den som heter .center... Hvis du legger til width: XXXpx; i den, så har du fast bredde vet du

[Arve Systad]

foretrekker at bokser har en fast bredde, så.....

da gjør du det slik, sett at du har en boks med en fast bredde på 400px.

 

<div class="main_container">

<div class="top_border"></div>

<div class="content">
<p>innhold kommer her, og boksen vil utvide seg jo meir innhold som er her.</p>
</div>

<div class="bottom_border"></div>

 

.main_container { width: 400px; }

.top_border { 
background-image: url(til/bilde.png);
width: 400px;
height: 20px;
display: block;
}

.bottom_border {
background-image: url(til/bilde.png);
width: 400px;
height: 20px;
display: block;
}

.content {
background-image: url(til/bilde.png) repeat-y;
color: #hexhex;
}

 

Skjønner prinsippet? En hovedboks til å inneholde heile greia.

 

En boks øverst, med bakgrunn som er "custom borders" , gjerne med avrunda hjørner.

 

En boks i midten, som har en bakgrunn som repeterer seg nedover. "oppå" denne legger du også innholdet i boksen.

 

En boks nederst, med bakgrunn som er "custom borders", på samme måte som toppen..

 

 

Så er det berre å lage grafikk som er tilpassa dine dimensjoner på boksen, farger og denslags - så er du i mål

[galskapen]

jaja.. takk for alle svar! tror jeg har forstått det nå

[magikern]

Tenker du noe sånt som jeg bruker her http://magikern.sytes.net/ (PS: ser litt rar ut i IE for tiden, jobber med det...) bare se i koden åssen jeg har gjort det hvis interressert...

[jorgis]

Ser litt rar ut i ff også, forresten.