/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS positionering med div
Fra : Kristine Bangsø


Dato : 21-05-07 09:15

Jeg forsøger at optimere min hjemmeside til forskellige
opløsninger. Jeg har forsøgt mig frem med en div som holder på
hele indholdet på siden og det fungerer i sig selv godt nok. Jeg
har bare lidt problemer med at tilpasse procenten.

Det største probem er at jeg har et baggrundsbillede, hvor det er
livsnødvendigt at det følger med sidens indhold.

Derfor skal både indholdet samt baggrundsbilledet kunne rykke
rundt på sig, og selvfølgelig helst i samme retning. Lige i
øjeblikket ligger det bare fast oppe i venstre hjørne.

Min css ser ud som følgende:

body
{
   background-image:url(billeder/design.gif);
   background-repeat:no-repeat;
   font-family:"Verdana";
   text-align: center;
   margin:0px;
}

#side
{
   width: 80%;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   test-align: left;
   padding: 0px;
   position:relative;
}

--
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

 
 
Ukendt (21-05-2007)
Kommentar
Fra : Ukendt


Dato : 21-05-07 11:49


"Kristine Bangsø" <k.skaar@gmail.com> skrev i en meddelelse
news:465154eb$0$90266$14726298@news.sunsite.dk...

> Det største probem er at jeg har et baggrundsbillede, hvor det er
> livsnødvendigt at det følger med sidens indhold.
>
> Derfor skal både indholdet samt baggrundsbilledet kunne rykke
> rundt på sig, og selvfølgelig helst i samme retning. Lige i
> øjeblikket ligger det bare fast oppe i venstre hjørne.
>
> Min css ser ud som følgende:
>
> body
> {
> background-image:url(billeder/design.gif);

Uden et link til siden bliver det rent gætværk, men som jeg læser det skal
du flytte baggrunden fra body til #side. Og så følges baggrund og indhold
ad.


--
Med venlig hilsen
Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/



Kristine Bangsø (21-05-2007)
Kommentar
Fra : Kristine Bangsø


Dato : 21-05-07 11:59

Carsten Sørensen wrote in dk.edb.internet.webdesign.html:
>
> Uden et link til siden bliver det rent gætværk, men som jeg læser det skal
> du flytte baggrunden fra body til #side. Og så følges baggrund og indhold
> ad.
>

linket til hjemmesiden er her:
http://iistest.noea.dk/mmd10/philosophine/hjemmesiden/

min css ser nu ud som følgende:
#side
{
   background-image:url(billeder/design.gif);
   background-repeat:no-repeat;
   font-family:"Verdana";
   text-align: center;
   margin:0px;
   background-position: center;
   width: 100%;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;   
   text-align: left;
   padding: 0px;
   position:relative;
}

Og som du kan se, virker det stadig ikke...teksten flyder rundt over 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

Ukendt (21-05-2007)
Kommentar
Fra : Ukendt


Dato : 21-05-07 12:32


"Kristine Bangsø" <k.skaar@gmail.com> skrev i en meddelelse
news:46517b57$0$90270$14726298@news.sunsite.dk...

> linket til hjemmesiden er her:
> http://iistest.noea.dk/mmd10/philosophine/hjemmesiden/

ja det gav syn for sagen

> background-position: center;

denne centrerer baggrunden på siden, så derfor det går galt. Prøv i stedet
med

background-position: 115px 40px; /* Tilpas selv værdierne */

Jeg ville dog genoverveje sidens opbygning, for tror du får flere sære
problemer med den opbygning der. Jeg ville droppe den iframe til fordel for
noget serverside indkludring, så du slipper af med alle de rullepaneler. En
sådan side som din vises kun optimalt ved en bestemt vinduevinduestørrelse,
nemlig den den er designet til. Alle andre ville skulle kæmpe med
overflødige rullepaneler. Så jeg ville klippe baggrunden over i nogle dele
og lade siden få den længde indholdet giver den.

Jeg hjælper gerne, hvis det er

OBS. Du bør også få valideret din kode


--
Med venlig hilsen
Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/



Kristine Bangsø (21-05-2007)
Kommentar
Fra : Kristine Bangsø


Dato : 21-05-07 12:44

Carsten Sørensen wrote in dk.edb.internet.webdesign.html:
>
> background-position: 115px 40px; /* Tilpas selv værdierne */
>
> Jeg ville dog genoverveje sidens opbygning, for tror du får flere sære
> problemer med den opbygning der. Jeg ville droppe den iframe til fordel for
> noget serverside indkludring, så du slipper af med alle de rullepaneler. En
> sådan side som din vises kun optimalt ved en bestemt vinduevinduestørrelse,
> nemlig den den er designet til. Alle andre ville skulle kæmpe med
> overflødige rullepaneler. Så jeg ville klippe baggrunden over i nogle dele
> og lade siden få den længde indholdet giver den.
>

Den måde havde jeg også prøvet før. Jeg ville bare gerne have haft at den selv
fandt ud af at position sig center lige meget hvor meget man så trak i
browservinduet. Derfor jeg overhovedet prøvede med relative. Det andet kan
nemlig sagtens laves i absolute. :)

Ja jeg ved at mange ikke kan lige brugen af den iframe, men jeg må indrømme at
jeg endnu ikke aner hvordan man ellers gør det optimalt, hvis du skulle have
lyst til at sende mig et eksempel på hvordan du ville lave det, må du meget
gerne det.

Og så må jeg vidst tage til takke med at jeg bare ikke kan få den
positionering som jeg vil ha den. ;)

Tak for hjælpen!

--
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

Ukendt (22-05-2007)
Kommentar
Fra : Ukendt


Dato : 22-05-07 20:47


"Kristine Bangsø" <k.skaar@gmail.com> skrev i en meddelelse
news:465185e4$0$90264$14726298@news.sunsite.dk...

>> Jeg ville dog genoverveje sidens opbygning, for tror du får flere sære
>> problemer med den opbygning der. Jeg ville droppe den iframe til fordel
>> for
>> noget serverside indkludring, så du slipper af med alle de rullepaneler.
>> En
>> sådan side som din vises kun optimalt ved en bestemt
>> vinduevinduestørrelse,
>> nemlig den den er designet til. Alle andre ville skulle kæmpe med
>> overflødige rullepaneler. Så jeg ville klippe baggrunden over i nogle
>> dele
>> og lade siden få den længde indholdet giver den.
>>
>
> Den måde havde jeg også prøvet før. Jeg ville bare gerne have haft at den
> selv
> fandt ud af at position sig center lige meget hvor meget man så trak i
> browservinduet. Derfor jeg overhovedet prøvede med relative. Det andet kan
> nemlig sagtens laves i absolute. :)

Det forstår jeg ikke helt? Normalt er det bedst at lade indholdet tage sin
naturlige plads, og det er sjældent nødvendigt at bruge absolute positioner.
Du nævner noget med centrering, og her kunne dette være interessant:
http://html-faq.dk/2007.asp

> Ja jeg ved at mange ikke kan lige brugen af den iframe, men jeg må
> indrømme at
> jeg endnu ikke aner hvordan man ellers gør det optimalt, hvis du skulle
> have
> lyst til at sende mig et eksempel på hvordan du ville lave det, må du
> meget
> gerne det.

Jeg ville klippe det billede der udgør din baggrund ud i flere dele. 1. del
er selve toppen, 2. del skal så være selve bunden. Og den sidste midten
mellem top og bund. Ideen er så at lade midten af siden tage højde efter det
indhold der måtte være. Det giver en lille udfordring i det din baggrund så
vidt jeg kan se varierer lidt i farvenyancen fra top til bund. Men så vidt
jeg lige kan vurdere kan det nu nemt løses med noget minimumshøjde og en
ekstra div.

> Og så må jeg vidst tage til takke med at jeg bare ikke kan få den
> positionering som jeg vil ha den. ;)

Arh mon dog, alt kan næsten lade sig gøre. Men tag lige et kig på siden i FF

> Tak for hjælpen!

Velbekom


--
Med venlig hilsen
Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/



Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408526
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste