|
|
 | Placering af baggrundsbilledet på CSS-desi~
Fra : Berit Kubel Andrease~ |
Dato : 05-03-08 11:27 |
|
Jeg er ved at lave en side, hvor jeg vil styre designet v.h.a.
CSS.
Jeg tager udgangspunkt på midten af siden, således siden altid er
centreret på brugers skærm.
Mit problem er at placere baggrundsbillede korrekt, jeg har
opgivet at anvende "background-position:" da jeg ikke kan flytte
billede 504 pixels til venstre for 50%.
I stedet placere jeg billede som et div-element, og styrer så
placeringen i stylesheet'et, problemet er bare at det nu laver
scroll-bars ved lille skærmopløsning.
Hvad skal jeg tilføje for at undgå dette?
StyleSheetet:
#baggrund
{
position:absolute;
left:50%;
top: 15px;
visible: false;
margin-left:-504px;
}
HTML-siden:
<body>
<div id="baggrund"><img src="./images/bgimg.gif"/></div>
På forhånd 1000 tak for hjælpen
Berit
--
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
| |
 Simon Hansen (05-03-2008)
| Kommentar
Fra : Simon Hansen |
Dato : 05-03-08 11:38 |
|
Berit Kubel Andreasen wrote in dk.edb.internet.webdesign.html:
> Jeg er ved at lave en side, hvor jeg vil styre designet v.h.a.
> CSS.
> Jeg tager udgangspunkt på midten af siden, således siden altid er
> centreret på brugers skærm.
>
> Mit problem er at placere baggrundsbillede korrekt, jeg har
> opgivet at anvende "background-position:" da jeg ikke kan flytte
> billede 504 pixels til venstre for 50%.
>
> I stedet placere jeg billede som et div-element, og styrer så
> placeringen i stylesheet'et, problemet er bare at det nu laver
> scroll-bars ved lille skærmopløsning.
>
> Hvad skal jeg tilføje for at undgå dette?
>
> StyleSheetet:
>
> #baggrund
> {
> position:absolute;
> left:50%;
> top: 15px;
> visible: false;
> margin-left:-504px;
> }
>
> HTML-siden:
>
> <body>
> <div id="baggrund"><img src="./images/bgimg.gif"/></div>
>
> På forhånd 1000 tak for hjælpen
>
> Berit
>
>
> --
> 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
du skal lægge dit baggrunds billede ind i din css sådan her
#baggrund
> {
background-image:url(./images/bgimg.gif);
> position:absolute;
> left:50%;
> top: 15px;
> visible: false;
> margin-left:-504px;
> }
og ikke i dit div element
hilsen
Simon
--
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
| |
Berit Kubel Andrease~ (05-03-2008)
| Kommentar
Fra : Berit Kubel Andrease~ |
Dato : 05-03-08 13:05 |
|
Simon Hansen wrote in dk.edb.internet.webdesign.html:
> Berit Kubel Andreasen wrote in dk.edb.internet.webdesign.html:
> > Jeg er ved at lave en side, hvor jeg vil styre designet v.h.a.
> > CSS.
> > Jeg tager udgangspunkt på midten af siden, således siden altid er
> > centreret på brugers skærm.
> >
> > Mit problem er at placere baggrundsbillede korrekt, jeg har
> > opgivet at anvende "background-position:" da jeg ikke kan flytte
> > billede 504 pixels til venstre for 50%.
> >
> > I stedet placere jeg billede som et div-element, og styrer så
> > placeringen i stylesheet'et, problemet er bare at det nu laver
> > scroll-bars ved lille skærmopløsning.
> >
> > Hvad skal jeg tilføje for at undgå dette?
> >
> > StyleSheetet:
> >
> > #baggrund
> > {
> > position:absolute;
> > left:50%;
> > top: 15px;
> > visible: false;
> > margin-left:-504px;
> > }
> >
> > HTML-siden:
> >
> > <body>
> > <div id="baggrund"><img src="./images/bgimg.gif"/></div>
> >
> > På forhånd 1000 tak for hjælpen
> >
> > Berit
> >
> >
> > --
> > 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
>
> du skal lægge dit baggrunds billede ind i din css sådan her
> #baggrund
> > {
> background-image:url(./images/bgimg.gif);
> > position:absolute;
> > left:50%;
> > top: 15px;
> > visible: false;
> > margin-left:-504px;
> > }
> og ikke i dit div element
> hilsen
> Simon
>
> Hej Simon
> Tak for det hurtige svar, det var desværre ikke godt nok.
> left:50% virker nemlig ikke på background-image, havde selv prøvet.
> (i hvert fald ikke i browser EI6 og FireFox2)
>
> Ps: du havde glemt en "background-repeat: no-repeat;" 
>
> Andre bud er velkomne...
> --
> 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
--
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
| |
 Jørgen Farum Jensen (05-03-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 05-03-08 13:13 |
|
Berit Kubel Andreasen skrev:
>> Tak for det hurtige svar, det var desværre ikke godt nok.
>> left:50% virker nemlig ikke på background-image, havde selv prøvet.
>> (i hvert fald ikke i browser EI6 og FireFox2)
>>
>> Ps: du havde glemt en "background-repeat: no-repeat;"
>>
>> Andre bud er velkomne...
Det ville lette meget, hvis du gav os et link til siden,
uanset om den virker eller ej.
Du kan finde en artikel om websiders baggrund her:
http://webdesign101.dk/www/background/index.php
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Berit Kubel Andrease~ (06-03-2008)
| Kommentar
Fra : Berit Kubel Andrease~ |
Dato : 06-03-08 08:03 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Berit Kubel Andreasen skrev:
>
> >> Tak for det hurtige svar, det var desværre ikke godt nok.
> >> left:50% virker nemlig ikke på background-image, havde selv prøvet.
> >> (i hvert fald ikke i browser EI6 og FireFox2)
> >>
> >> Ps: du havde glemt en "background-repeat: no-repeat;"
> >>
> >> Andre bud er velkomne...
>
> Det ville lette meget, hvis du gav os et link til siden,
> uanset om den virker eller ej.
>
> Du kan finde en artikel om websiders baggrund her:
> http://webdesign101.dk/www/background/index.php
>
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
> ..
Hej Jørgen
Grunden til jeg ikke skrev en url på igår er, at vi først
replikere over firewall'en om natten, så siden ville ikke være
synlig for jer.
Men her kan i se hvordan det så ud da jeg gik hjem igår:
http://www.soroe.dk/cms/site.aspx?p=3014
Det er det store "menu_bg"-billede til venstre jeg godt ville
have som baggrund.
Kærlig hilsen
Berit
--
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
| |
Jørgen Farum Jensen (06-03-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 06-03-08 12:09 |
|
Berit Kubel Andreasen skrev:
> http://www.soroe.dk/cms/site.aspx?p=3014
>
> Det er det store "menu_bg"-billede til venstre jeg godt ville
> have som baggrund.
>
Ok, nu har jeg set på din side. Det er
formodentlig et udkast til en skabelonside
for Sorø Kommunes websted?
Du griber sagen forkert an, imho.
Her er en opskrift på, hvordan du kunne få
styr på sagerne:
1. Opret en div#side, der omfatter *alt*
indhold på siden. Lav et stylesheet for denne
div:
div#side {
width:95%;max-width:50em;
margin:0 auto;
background-image:url/bgimage.png; /*note 1*/
background-repeat:no-repeat;
}
note 1: Alt det lysegrå, inkl. buen over
billederne.
2. I div#side indsætter du to nye div'er, div#menu
og div#indhold, der skal rumme henholdsvis venstre
og højre spalte.
div#menu {
float:left;
width:200px; /*note 2*/
}
note 2: bredden af den del af baggrundsgrafikken,
der skal være bag menuen og logotypen.
Obs at dette kun er en rå skitse, der er
forskellige finurligheder, det er rart at
vide noget om. Dem beskriver jeg i artiklen
http://webdesign101.dk/layout/
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Berit Kubel Andrease~ (07-03-2008)
| Kommentar
Fra : Berit Kubel Andrease~ |
Dato : 07-03-08 08:28 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Berit Kubel Andreasen skrev:
>
> > http://www.soroe.dk/cms/site.aspx?p=3014
> >
> > Det er det store "menu_bg"-billede til venstre jeg godt ville
> > have som baggrund.
> >
> Ok, nu har jeg set på din side. Det er
> formodentlig et udkast til en skabelonside
> for Sorø Kommunes websted?
>
> Du griber sagen forkert an, imho.
>
> Her er en opskrift på, hvordan du kunne få
> styr på sagerne:
>
> 1. Opret en div#side, der omfatter *alt*
> indhold på siden. Lav et stylesheet for denne
> div:
>
> div#side {
> width:95%;max-width:50em;
> margin:0 auto;
> background-image:url/bgimage.png; /*note 1*/
> background-repeat:no-repeat;
> }
> note 1: Alt det lysegrå, inkl. buen over
> billederne.
>
> 2. I div#side indsætter du to nye div'er, div#menu
> og div#indhold, der skal rumme henholdsvis venstre
> og højre spalte.
>
> div#menu {
> float:left;
> width:200px; /*note 2*/
> }
> note 2: bredden af den del af baggrundsgrafikken,
> der skal være bag menuen og logotypen.
>
> Obs at dette kun er en rå skitse, der er
> forskellige finurligheder, det er rart at
> vide noget om. Dem beskriver jeg i artiklen
> http://webdesign101.dk/layout/
>
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
> ..
Hej Jørgen
1000 tak for dit svar, jeg er faktisk allerede begyndt på en
lignede løsning takket være Tage Jørgensen svar, du kunne bare
ikke se den da replikeringen ikke havde kopieret den nye løsning
ud.
Du har ret i, at det er en skabelon til en CMS-side, vores
nuværende design er opbygget i tabeller, og med It og
Telestyrelsen nye retningslinjer/lov om tilgængelighed, er der
vist ingen vej udenom, desuden var der et par grafiske bøffer jeg
godt lige ville rette.
Når nok kommunalt brok
Endnu engang mange tak for svar og links - de vil blive studeret
nøje
Berit
--
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
| |
tage jørgensen (05-03-2008)
| Kommentar
Fra : tage jørgensen |
Dato : 05-03-08 13:30 |
|
Berit Kubel Andreasen wrote in dk.edb.internet.webdesign.html:
> Jeg er ved at lave en side, hvor jeg vil styre designet v.h.a.
> CSS.
> Jeg tager udgangspunkt på midten af siden, således siden altid er
> centreret på brugers skærm.
>
> Mit problem er at placere baggrundsbillede korrekt, jeg har
> opgivet at anvende "background-position:" da jeg ikke kan flytte
> billede 504 pixels til venstre for 50%.
>
> I stedet placere jeg billede som et div-element, og styrer så
> placeringen i stylesheet'et, problemet er bare at det nu laver
> scroll-bars ved lille skærmopløsning.
>
> Hvad skal jeg tilføje for at undgå dette?
>
> StyleSheetet:
>
> #baggrund
> {
> position:absolute;
> left:50%;
> top: 15px;
> visible: false;
> margin-left:-504px;
> }
>
> HTML-siden:
>
> <body>
> <div id="baggrund"><img src="./images/bgimg.gif"/></div>
>
> På forhånd 1000 tak for hjælpen
>
> Berit
>
>
>Hej Berit
hvis du bruger <div>baggrund</div>
så får du kun billedet i nøjagtigt den div og ikke andre steder.
start med at definere hvor stort et område skal din baggrund dække.
nu ved jeg ikke hvor stort dit img er, men gem det som .png i
detformat du ønsker st det skal vises i på siden, og lav så dit div
med den størrelse i bredde o g højde.
skal det være hele siden, så gør jeg det at jeg skriver i css'et
f.eks
#baggrund
{
> width:1004;
> hight:800;
> float left;
> position:absolute;
> left:-50%; (kan også være -502px)
> top: 15px;
> visible: false;
> //dette flytter det hele 504px mod venstre// margin-left:-504px;
> }
håber det er bare lidt forståeligt.
www.tage.wanthai.dk
start med en div som skal indeholde det hele,
--
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
| |
Erik Ginnerskov (06-03-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 06-03-08 08:17 |
| | |
Leif Neland (09-03-2008)
| Kommentar
Fra : Leif Neland |
Dato : 09-03-08 07:58 |
|
Erik Ginnerskov skrev:
> tage jørgensen wrote:
>
>> www.tage.wanthai.dk
>
> Du skal nok kigge lidt på din baggrund. Der er en lys plet midt på siden,
> hvor teksten kan læses. Udenfor den lyse plet drukner teksten i den mørke
> baggrund.
>
Jeg ville sige det samme.
Pletten er centreret i vinduet, men det er teksten ikke.
Så teksten er slut, før pletten begynder, når jeg ser siden i 1980*1080
på tv'et
Leif
| |
Allan Vebel (06-03-2008)
| Kommentar
Fra : Allan Vebel |
Dato : 06-03-08 01:11 |
|
Berit Kubel Andreasen skrev:
> #baggrund{
> position:absolute;
> left:50%;
> top: 15px;
> visible: false;
> margin-left:-504px;
> }
position:absolute; og negativ margin kan give mange
problemer. Prøv i stedet måden der er beskrevet på
http://html-faq.dk/2007.asp
Giv i øvrigt et link til din side, så er det meget nemmere
at fejlsøge.
--
Allan Vebel
http://html-faq.dk
http://vebel.dk
| |
Berit Kubel Andrease~ (06-03-2008)
| Kommentar
Fra : Berit Kubel Andrease~ |
Dato : 06-03-08 08:01 |
|
Allan Vebel wrote in dk.edb.internet.webdesign.html:
> Berit Kubel Andreasen skrev:
>
> > #baggrund{
> > position:absolute;
> > left:50%;
> > top: 15px;
> > visible: false;
> > margin-left:-504px;
> > }
>
> position:absolute; og negativ margin kan give mange
> problemer. Prøv i stedet måden der er beskrevet på
> http://html-faq.dk/2007.asp
>
> Giv i øvrigt et link til din side, så er det meget nemmere
> at fejlsøge.
>
> --
> Allan Vebel
> http://html-faq.dk
> http://vebel.dk
>
>
HEj Kære Venner
Tak for de mange kompetente svar, nu har jeg i hvært fald noget
at arbejde videre med.
Grunden til jeg ikke skrev en url på igår er, at vi først
replikere over firewall'en om natten, så siden ville ikke være
synlig for jer.
Men her kan i se hvordan det så ud da jeg gik hjem igår:
http://www.soroe.dk/cms/site.aspx?p=3014
Det er det store "menu_bg"-billede til venstre jeg godt ville
have som baggrund.
Kærlig hilsen
Berit
--
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
| |
|
|