/ 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
Problemer med en div hvor "width" er sat t~
Fra : Anders


Dato : 07-01-08 10:14

Hej
Jeg har sidet og bøvlet lidt med en <div> hvor breden er sat til
100% og en padding til fx 20px.
Problemet er så at <div>'en pludselig fylder 100% + 2*20px,
hvilket jeg ikke synes jeg kan komme uden om.

Findes der en måde hvor man kan definere som fx:
#box {
padding:20px;
width:100% - 20px;
}

--
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 (07-01-2008)
Kommentar
Fra : Birger


Dato : 07-01-08 10:58

"Anders" <andersanker@hotmail.con> skrev i en meddelelse
news:4781ed3f$0$90270$14726298@news.sunsite.dk...
> Hej
> Jeg har sidet og bøvlet lidt med en <div> hvor breden er sat til
> 100% og en padding til fx 20px.
> Problemet er så at <div>'en pludselig fylder 100% + 2*20px,
> hvilket jeg ikke synes jeg kan komme uden om.
>
> Findes der en måde hvor man kan definere som fx:
> #box {
> padding:20px;
> width:100% - 20px;
> }
>
> --
> 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


Ikke umiddelbart, med mindre du vil ud i noget javascript.

Eller kan undlade at blande størrelser sammen :
#box {
padding : 2%;
width : 96%;
}

Jeg mener at en <div> er 100%, også hvis du ikke angiver nogen width.
Ellers så clear, så alting kommer under (<br style="clear:both">).
Problemet med det er, at width er bredde excl. margin, border og padding.
Eller sagt på en anden måde: width er den bredde der skal være til rådighed
for indhold inde i elementet.


Birger
-----
http://bbsorensen.dk



Anders (07-01-2008)
Kommentar
Fra : Anders


Dato : 07-01-08 13:40

Birger wrote in dk.edb.internet.webdesign.html:
> "Anders" <andersanker@hotmail.con> skrev i en meddelelse
> news:4781ed3f$0$90270$14726298@news.sunsite.dk...
> > Hej
> > Jeg har sidet og bøvlet lidt med en <div> hvor breden er sat til
> > 100% og en padding til fx 20px.
> > Problemet er så at <div>'en pludselig fylder 100% + 2*20px,
> > hvilket jeg ikke synes jeg kan komme uden om.
> >
> > Findes der en måde hvor man kan definere som fx:
> > #box {
> > padding:20px;
> > width:100% - 20px;
> > }
> >
> > --
> > 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
>
>
> Ikke umiddelbart, med mindre du vil ud i noget javascript.
>
> Eller kan undlade at blande størrelser sammen :
> #box {
> padding : 2%;
> width : 96%;
> }
>
> Jeg mener at en <div> er 100%, også hvis du ikke angiver nogen width.
> Ellers så clear, så alting kommer under (<br style="clear:both">).
> Problemet med det er, at width er bredde excl. margin, border og padding.
> Eller sagt på en anden måde: width er den bredde der skal være til rådighed
> for indhold inde i elementet.
>
>
> Birger
> -----
> http://bbsorensen.dk
>
>
tak, det ser ud til jeg kan definere "width: .5%", så det er da en mulighed :)
Jeg var ellers ved at kigge på at lave en <div> mere indeni hvor jeg definerede
siderne med margin istedet for, men kunne heller ikke helt få det til at se
nogenlunde ens ud i forskellige browsers.

--
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 (07-01-2008)
Kommentar
Fra : Birger


Dato : 07-01-08 19:34

"Anders" <andersanker@hotmail.con> skrev i en meddelelse
news:47821d87$0$90265$14726298@news.sunsite.dk...
8X
> tak, det ser ud til jeg kan definere "width: .5%", så det er da en
> mulighed :)
> Jeg var ellers ved at kigge på at lave en <div> mere indeni hvor jeg
> definerede
> siderne med margin istedet for, men kunne heller ikke helt få det til at
> se
> nogenlunde ens ud i forskellige browsers.
>

Nu har vi ikke en side at se på, så det er lidt vanskeligt, at give dig
råd...

Du har formentlig ikke sat margin og padding på body til 0.
Default margin/padding er ikke ens i forskellige browsere.
Hvis den ikke sættes, vil tingene se forskellige ud i forskellige browsere,
alene af den grund.

Jeg mente sådan set, et en div fylder det hele vandret - så du kan lade helt
være med at angive width - så skulle de 20px padding ikke udgøre et problem.

Du kan godt sætte en ekstra div indeni, og give den margin 20px - men du
skal så igen lade være med at give den en width - ellers ender du i det
præcis samme problem.

Du kan også give din div width 100% (så får du vandret scrollbar, hvis din
side er højere end brugerens vindue, fordi der så kommer lodret scrollbar),
og sætte margin 20px på de elementer du sætter inde i den. Og igen skal du
undlade width - ellers ender du igen i problemer... ;>)

Alternativt, sæt det hele ind i en div med en kendt bredde. Så kan du regne
pix på det alt sammen.

Sider flyder nemmest i HTML med % angivelser.
Men så er man nødt til at bruge % hele vejen. Det er meget vanskeligt at
blande % med faste værdier.
Det kan lade sig gøre med scripting - men hvis du på nogen måde kan, så
undgå det.


Birger
-----
http://bbsorensen.dk



Jørgen Farum Jensen (07-01-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 07-01-08 13:30

Anders skrev:
> Hej
> Jeg har sidet og bøvlet lidt med en <div> hvor breden er sat til
> 100% og en padding til fx 20px.
> Problemet er så at <div>'en pludselig fylder 100% + 2*20px,
> hvilket jeg ikke synes jeg kan komme uden om.
>
> Findes der en måde hvor man kan definere som fx:
> #box {
> padding:20px;
> width:100% - 20px;
> }
>

Yes, på samme måde som du kan
trække 20 pærer fra en posefuld
æbler

Hvis du yderligere har en border
bliver regnestykkket en posefuld æbler minus 20 bananer
minus 2 kiwifrugter

Gør som Birger forslår eller sæt
margin på boksens indhold.

Fsv angår Birgers forslag synes
jeg at huske, at IE5/6 har et
lille problem med procentregning.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Erik Ginnerskov (08-01-2008)
Kommentar
Fra : Erik Ginnerskov


Dato : 08-01-08 06:03

Jørgen Farum Jensen wrote:

> Fsv angår Birgers forslag synes
> jeg at huske, at IE5/6 har et
> lille problem med procentregning.

Jeg synes, at vores største problem for at kunne hjælpe er, at Anders slet
ikke er kommet med en url, vi kan kigge på. Problemet ligger måske i, at
hans kode sætter IE i quirks, men det kan vi ikke vide uden at se siden.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408925
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste