Gradueret baggrund - top OG bund
Jahirah
Jeg var rundt at kigge templates idag, for at f� lidt
inspiration. Jeg faldt over dette template fra Template World:
http://demo.templateworld.com/zero/in_action/new_rise/
Lig venligst m�rke til baggrunden.
Som I kan se s� har den en gradient fyld b�de i toppen OG for
neden. Jeg synes det er flot, men jeg har endnu ikke kunnet
gennemskue hvordan de har opn�et det.
Templaten er gratis, men selvom jeg downloadede den og fors�gte
at skille bukkene fra f�rene kunne jeg ikke helt se hvordan...
Er der nogen der kan fort�lle mig, hvordan det er opn�et? M�ske
endda give en kort, simpel opskrift? P� forh�nd tak :)
//Jahirah
--
Vil du l�re at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- P�dagogiske tutorials p� dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
Birger Sørensen
> Hej,
>
> Jeg var rundt at kigge templates idag, for at fￜ lidt
> inspiration. Jeg faldt over dette template fra Template World:
> http://demo.templateworld.com/zero/in_action/new_rise/
>
> Som I kan se sￜ har den en gradient fyld bￜde i toppen OG for
> neden. Jeg synes det er flot, men jeg har endnu ikke kunnet
>
> Templaten er gratis, men selvom jeg downloadede den og forsï¿œgte
> at skille bukkene fra fï¿œrene kunne jeg ikke helt se hvordan...
>
> Er der nogen der kan fortï¿œlle mig, hvordan det er opnï¿œet? Mï¿œske
> endda give en kort, simpel opskrift? Pￜ forhￜnd tak :)
>
> //Jahirah
Det er et billede, indsat i baggrund pￜ body - 1x1413 pixels, gentaget
i x-retningen.
Og man kan for ￜvrigt se at det ikke passer i bunden, med baggrunden pￜ
footeren.
Lidt fixfax, med top og footer, hvor baggrund er den del de skal dï¿œkke.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
Ib K. Jensen
> Hej,
> Er der nogen der kan fort�lle mig, hvordan det er opn�et? M�ske
> endda give en kort, simpel opskrift? P� forh�nd tak :)
Jeg ved ikke om det er det her du eventuelt leder efter ?
/*--------------------------------body start---------------------*/
#body{
background:url(images/body_bg_mid.gif) 0 0 repeat-y;
width:631px;
margin:0 auto;
}
#body p.top{
display:block;
background:url(images/body_top_bg.gif) 0 0 no-repeat;
width:631px;
height:75px;
float:left;
}
#body p.bot{
display:block;
background:url(images/body_bottom_bg.gif) 0 0 no-repeat;
width:631px;
height:78px;
float:left;
}
--
Ib K. Jensen :: www.ikjensen.dk
Only a Genealogist regards a step backwards as progress.
Jahirah
>
> Jeg ved ikke om det er det her du eventuelt leder efter ?
>
> background:url(images/body_bg_mid.gif) 0 0 repeat-y;
> width:631px;
> margin:0 auto;
> }
> #body p.top{
> display:block;
> background:url(images/body_top_bg.gif) 0 0 no-repeat;
> width:631px;
> height:75px;
> float:left;
> }
> #body p.bot{
> display:block;
> background:url(images/body_bottom_bg.gif) 0 0 no-repeat;
> width:631px;
> height:78px;
> float:left;
> }
Hvis jeg vidste hvad det var, kunne jeg svare :)
Nested divs eller?
Jeg kan ikke umiddelbart f� dit eksempel til at passe top et
vertikalt "stablet" layout? Eller?
Forklar gerne...
Ib K. Jensen
> Ib K. Jensen wrote in dk.edb.internet.webdesign:
>> Jeg ved ikke om det er det her du eventuelt leder efter ?
>> /*---------------------body start---------------------*/
Dette billede bliver brugt i midten af skabelonen
>> #body{
>> background:url(images/body_bg_mid.gif) 0 0 repeat-y;
>> width:631px;
>> margin:0 auto;
>> }
Dette billede bliver brugt i toppen af skabelonen
>> #body p.top{
>> display:block;
>> background:url(images/body_top_bg.gif) 0 0 no-repeat;
>> width:631px;
>> height:75px;
>> float:left;
>> }
Dette billede bliver brugt i bunden af skabelonen
>> #body p.bot{
>> display:block;
>> background:url(images/body_bottom_bg.gif) 0 0 no-repeat;
>> width:631px;
>> height:78px;
>> float:left;
>> }
> --------8<----------------
>
> Jeg kan ikke umiddelbart f� dit eksempel til at passe top et
> vertikalt "stablet" layout? Eller?
> Forklar gerne...
De tre ovenn�vnte css-deklarationer bliver brugt til at placere tre
forskellige billeder som baggrund i Body-sektionen, der hvor du kan se
at de ligesom glider / fader ind i hinanden.
Derudover er der brugt et billede til baggrund for indholdet.
Jeg ved ikke om det er forklaring nok.
Se ogs� svar fra Birger S�rensen.
Jahirah
>
> forskellige billeder som baggrund i Body-sektionen, der hvor du kan se
> at de ligesom glider / fader ind i hinanden.
>
> Derudover er der brugt et billede til baggrund for indholdet.
>
> Jeg ved ikke om det er forklaring nok.
> Se ogs� svar fra Birger S�rensen.
>
Tak for forklaringen.
Ud fra det du siger kan jeg godt se hvad du mener, og jeg tror at jeg
tillod manglen p� posisionering forvirre mig.
Eftersom det kan v�re sv�rt at styre den totale h�jde p� en hjemmeside, da
indholdet kan udvide sig, er der s� en m�de hvormed man kan "ankre" top og
bottom div'en til hver deres ende, s� midt sektionen bare kan blive ved
med at fylde p�?
//Jahirah
Birger Sørensen
> Ib K. Jensen wrote in dk.edb.internet.webdesign:
>>
>> at de ligesom glider / fader ind i hinanden.
>>
>> Derudover er der brugt et billede til baggrund for indholdet.
>>
>> Jeg ved ikke om det er forklaring nok.
> ---------------------8<--------------------------
>
> Tak for forklaringen.
> Ud fra det du siger kan jeg godt se hvad du mener, og jeg tror at jeg
>
> Eftersom det kan vￜre svￜrt at styre den totale hￜjde pￜ en hjemmeside, da
> indholdet kan udvide sig, er der sￜ en mￜde hvormed man kan "ankre" top og
> bottom div'en til hver deres ende, sￜ midt sektionen bare kan blive ved
> med at fylde pￜ?
>
> //Jahirah
Med absolut positionering, burde det kunne lade sig gï¿œre.
Top give vel sig sel...
Men i bunden
#footer {
position : absolute;
width : 100%;
bottom : 0px;
background : url(...) ...;
}
Man kan ogsￜ lￜgge billedet ind som <img> i #footer div, og der mￜ
blive noget med z-index - mï¿œske er det nok hvis rï¿œkkefï¿œlgen i
dokumentet er rigtigt (#top og #footer fï¿œr andet) - men det er ikke
altid smart for sï¿œgemaskinerne...