|
|
 | Problemer med margin på body
Fra : Rasmus Aagaard |
Dato : 13-07-04 21:50 |
|
Jeg har opbygget en side hvor selve indholdet positioneres af
margin på body-elementet. Det virker også umiddelbart fint.
Problemet opstår ved de øvrige elementer (menu, logo, overskrift
osv.). Disse positioneres vha. "position: absolute". Hvis et
element placeres i body-elementets margin (f.eks. "margin-left:
200px;" og "left: 100px;") bliver den "uudnyttede " margin i
venstre side lagt til i højre side, hvilket resultere i at boksen
klapper sammen unødvendigt tidligt når browservinduet gøres
mindre.
Jeg har opbyget et forenklet eksempel til at lette forståelsen:
CSS:
body {
margin: 0px 0px 0px 200px;
}
boks {
position: absolute;
top: 0px;
left: 20px;
background: #ffff00;
}
HTML:
<body>
<div class="boks">Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur</div>
</body>
http://odds.users.whitehat.dk/eks.htm
Jeg kunne selvfølgelig omgå problemet ved også, at placere selve
indholdet vha. absolut positionering, men er der andre måde det
kan gøres på?
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Bertel Lund Hansen (13-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 13-07-04 23:04 |
|
Rasmus Aagaard skrev:
>Jeg har opbyget et forenklet eksempel til at lette forståelsen:
Jeg kan ikke se noget problem ved dit eksempel, hverken i IE,
Firefox eller Opera.
>indholdet vha. absolut positionering, men er der andre måde det
>kan gøres på?
På Fidusos sider har jeg lavet en ramme indeni en ramme. Den
yderste ramme får fuld bredde, den inderste gør også, men er sat
med en venstremargin på X.
Menuen har fået absolut placering indeni den yderste ramme og
bredden X.
X har jeg specificeret i em således at menuen passer uanset
hvilken skriftstørrelse man bruger.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Rasmus Aagaard (13-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 13-07-04 23:40 |
|
> >Jeg har opbyget et forenklet eksempel til at lette
forståelsen:
>
> Jeg kan ikke se noget problem ved dit eksempel, hverken i IE,
> Firefox eller Opera.
Nu ved jeg selvfølgelig ikke om der kan være en forskel fordi du
bruger et andet styresystem el.l., men problemet er, at der
opstår en margin til højre for boksen, hvilket der ikke burde
være (jf. "margin: 0px 0px 0px 200px;").
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Bertel Lund Hansen (14-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 14-07-04 02:13 |
|
Rasmus Aagaard skrev:
>bruger et andet styresystem el.l., men problemet er, at der
>opstår en margin til højre for boksen, hvilket der ikke burde
>være (jf. "margin: 0px 0px 0px 200px;").
Nu fes den ind. Men er problemet ikke at du sætter en margin og
alligevel skriver i den?
Hvad er det reelt du vil opnå ved din konstruktion?
Var min kortfattede forklaring om Fiduso brugbar? Du kan evt. se
på hjemmesiden.
At højre margin ikke er udnyttet fuldt ud, skyldes at IE flytter
rundt på boksene længe før det er nødvendigt hvis man indsnævrer
siden, og derfor har jeg sat spalternes bredde til mindre end
halvdelen af den plads de har til rådighed. Så er IE lidt mindre
hidsig.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Rasmus Aagaard (14-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 14-07-04 11:19 |
|
> Hvad er det reelt du vil opnå ved din konstruktion?
Jeg har opdateret eksemplet:
http://odds.users.whitehat.dk/eks.htm , det skulle nu gerne
fremgå havde jeg har i tankerne.
Det er dog nu lidt sværere at se problemet, idet det først
opstår, når man indsnævre browservinduet, hvor den uønskede
margin for menuen til at klappe sammen inden det reelt er
nødvendig.
> Var min kortfattede forklaring om Fiduso brugbar? Du kan evt.
se
> på hjemmesiden.
Jeg går ud fra du har valgt, at opbygge siden sådan for, at opnå
et samlet 'hvidt areal' hvorpå menuen er placeret. Min siden har
samme baggrundsfarve på hele siden, hvorfor en lidt mere
avanceret konstruktion som din ikke er nødvendig.
Grunden til jeg gerne vil have mit egentlige indhold positioneret
vha. margin på body er vel lidt idealistisk og spørgsmålet går
også lidt på hvorfor den opfører sig sådan, idet jeg allerede har
en brugbar løsning, hvor indholdet placeres vha. position:
absolute.
> At højre margin ikke er udnyttet fuldt ud, skyldes at IE
flytter
> rundt på boksene længe før det er nødvendigt hvis man
indsnævrer
> siden, og derfor har jeg sat spalternes bredde til mindre end
> halvdelen af den plads de har til rådighed. Så er IE lidt
mindre
> hidsig.
Det kan godt være du har ret men problemet opstår i alle browsere
(IE, Mozilla og Opera).
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Bertel Lund Hansen (14-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 14-07-04 11:52 |
|
Rasmus Aagaard skrev:
>Jeg går ud fra du har valgt, at opbygge siden sådan for, at opnå
>et samlet 'hvidt areal' hvorpå menuen er placeret.
Nej ,jeg ville faktisk helst have menufarven til at gå hele vejen
ned til bunden, men det har jeg opgivet.
Den komplekse konstruktion er nødvendig fordi jeg bruger
forskellige div'er til at styre spalter og fuld bredde skiftevis.
Det ville give bokse der hoppede ud under menuen hvis ikke den
ekstra ramme spærrede dem væk derfra.
Og det blev jo ikke mindre komplekst af at jeg skulle bruge andre
rammer til at lave runde hjørner med.
>Min siden har samme baggrundsfarve på hele siden, hvorfor en lidt mere
>avanceret konstruktion som din ikke er nødvendig.
Så vil du heller ikke få problemer med at give menuen en fast
bredde i em.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Per Rasmussen (13-07-2004)
| Kommentar
Fra : Per Rasmussen |
Dato : 13-07-04 23:10 |
|
Rasmus Aagaard wrote in dk.edb.internet.webdesign.html:
> Jeg har opbygget en side hvor selve indholdet positioneres af
> margin på body-elementet. Det virker også umiddelbart fint.
>
> Problemet opstår ved de øvrige elementer (menu, logo, overskrift
> osv.). Disse positioneres vha. "position: absolute". Hvis et
> element placeres i body-elementets margin (f.eks. "margin-left:
> 200px;" og "left: 100px;") bliver den "uudnyttede " margin i
> venstre side lagt til i højre side, hvilket resultere i at boksen
> klapper sammen unødvendigt tidligt når browservinduet gøres
> mindre.
>
>>
> Jeg kunne selvfølgelig omgå problemet ved også, at placere selve
> indholdet vha. absolut positionering, men er der andre måde det
> kan gøres på?
>
sæt width ind i boksen
PerR
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Rasmus Aagaard (13-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 13-07-04 23:43 |
|
Per Rasmussen wrote in dk.edb.internet.webdesign.html:
> >>
> > Jeg kunne selvfølgelig omgå problemet ved også, at placere selve
> > indholdet vha. absolut positionering, men er der andre måde det
> > kan gøres på?
> >
>
> sæt width ind i boksen
>
Det kunne jeg selvfølgelig, men det vil ikke være fleksibelt nok, i
det brugeren har mulighed for, at ændre på standart skriftstørrelsen i
IE, hvorfor boksen vil skulle udvides.
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Per Rasmussen (14-07-2004)
| Kommentar
Fra : Per Rasmussen |
Dato : 14-07-04 00:06 |
|
Rasmus Aagaard wrote in dk.edb.internet.webdesign.html:
> >
> > sæt width ind i boksen
> >
>
> Det kunne jeg selvfølgelig, men det vil ikke være fleksibelt nok, i
> det brugeren har mulighed for, at ændre på standart skriftstørrelsen i
> IE, hvorfor boksen vil skulle udvides.
>
Du kan da ikke få margin i body til at styre størrelsen på boksen, hvis
du vil have bodys margin til det, så skal du droppe boksen, og ja skrive
det direkte på siden.
PerR
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Rasmus Aagaard (14-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 14-07-04 00:49 |
|
Per Rasmussen wrote in dk.edb.internet.webdesign.html:
> Du kan da ikke få margin i body til at styre størrelsen på boksen, hvis
> du vil have bodys margin til det, så skal du droppe boksen, og ja skrive
> det direkte på siden.
Nej, det vil jeg hellere ikke. Eksemplet illustrerer ikke den grundlæggende
opbygning af min side, men belyser blot det konkrete problem. Boksen i
eksemplet skal altså ikke forstås som, der hvor det 'egentlige' indhold skal
placeres. Det skal som jeg prøvede at forklare positioneres vha. af marginen
på body (det er altså derfor jeg behøver den margin der skaber problemet).
Boksen i eksemplet skulle bare gerne gå helt ud til kanten i højre side, da
det ellers skaber problemer med den grundlæggende opbygning af min side. Man
behøver ikke forstå andet end det for at se problemet, hvorfor jeg ikke har
postet koderne til den konkrete opbygning.
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Bertel Lund Hansen (14-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 14-07-04 11:49 |
|
Rasmus Aagaard skrev:
>Det kunne jeg selvfølgelig, men det vil ikke være fleksibelt nok, i
>det brugeren har mulighed for, at ændre på standart skriftstørrelsen i
>IE, hvorfor boksen vil skulle udvides.
Det er ikke noget problem. Angiv width i em i stedet for pixels,
så er den låst til skriftstørrelsen. Prøv selv.
Sidebemærkning: En størrelse på 0 behøver ingen enhed.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Rasmus Aagaard (14-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 14-07-04 12:21 |
|
Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:
> Det er ikke noget problem. Angiv width i em i stedet for pixels,
> så er den låst til skriftstørrelsen. Prøv selv.
Hvis du har et link hvor jeg kan læse lidt om enheden vil det være meget
behjælpeligt.
Dog er der det problem, at når der angives en 'width' låses den fast og
der opstår en vertical-scrollbar istedet for, at boksen klapper sammen, og
indholdet placeres på flere linier. (det er nemlig ikke menuen der er
problemet i mit design, men i stedet en form for overskrift, der gerne må
fylde flere linier.)
> Sidebemærkning: En størrelse på 0 behøver ingen enhed.
Nej, men det hjælper tit på overblikket, når jeg skal foretage ændringer.
Det er vel ikke direkte forkert?
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Bertel Lund Hansen (14-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 14-07-04 12:35 |
|
Rasmus Aagaard skrev:
>> Det er ikke noget problem. Angiv width i em i stedet for pixels,
>Hvis du har et link hvor jeg kan læse lidt om enheden vil det være meget
>behjælpeligt.
Det har jeg ikke umiddelbart, men 1em er bredden af bogstavet m -
med den størrelse som skriften nu engang har. Jeg betragter det
bare som en enhed der er relateret til bogstavstørrelsen, og så
fedter jeg rundt med tallet til det passer med det jeg skal
bruge.
>indholdet placeres på flere linier. (det er nemlig ikke menuen der er
>problemet i mit design, men i stedet en form for overskrift, der gerne må
>fylde flere linier.)
Har du et link til din egentlige side?
>> Sidebemærkning: En størrelse på 0 behøver ingen enhed.
>Nej, men det hjælper tit på overblikket, når jeg skal foretage ændringer.
>Det er vel ikke direkte forkert?
Absolut ikke. Jeg er bare vokset op med små computere med
begrænset hukommelse. Hvis jeg kan spare 2 byte pr. talangivelse,
og det ikke går ud over overblikket, så gør jeg det. Desuden er
det et mikrosekund hurtigere at hente.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Rasmus Aagaard (14-07-2004)
| Kommentar
Fra : Rasmus Aagaard |
Dato : 14-07-04 12:53 |
|
Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:
> >Hvis du har et link hvor jeg kan læse lidt om enheden vil det være meget
> >behjælpeligt.
>
> Det har jeg ikke umiddelbart, men 1em er bredden af bogstavet m -
> med den størrelse som skriften nu engang har. Jeg betragter det
> bare som en enhed der er relateret til bogstavstørrelsen, og så
> fedter jeg rundt med tallet til det passer med det jeg skal
> bruge.
Ok, det var også mest betydning af enheden jeg var ude efter, den har jeg
fået på plads nu.
> >> Sidebemærkning: En størrelse på 0 behøver ingen enhed.
>
> >Nej, men det hjælper tit på overblikket, når jeg skal foretage ændringer.
> >Det er vel ikke direkte forkert?
>
> Absolut ikke. Jeg er bare vokset op med små computere med
> begrænset hukommelse. Hvis jeg kan spare 2 byte pr. talangivelse,
> og det ikke går ud over overblikket, så gør jeg det. Desuden er
> det et mikrosekund hurtigere at hente.
Havde ikke lige tænkt over størrelsesaspektet, det vil jeg gøre fremover.
Mange tak for hjælpen.
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Lasse Reichstein Nie~ (14-07-2004)
| Kommentar
Fra : Lasse Reichstein Nie~ |
Dato : 14-07-04 13:02 |
|
Bertel Lund Hansen <nospamius@lundhansen.dk> writes:
> Rasmus Aagaard skrev:
>>Nej, men det hjælper tit på overblikket, når jeg skal foretage ændringer.
>>Det er vel ikke direkte forkert?
>
> Absolut ikke. Jeg er bare vokset op med små computere med
> begrænset hukommelse. Hvis jeg kan spare 2 byte pr. talangivelse,
> og det ikke går ud over overblikket, så gør jeg det. Desuden er
> det et mikrosekund hurtigere at hente.
Her vil jeg holde med Rasmus :) Det rigtige tidspunkt at fjerne de to
bytes, er når siden er færdig. Så kan man også bruge andre
komprimerings-metoder (fjern fx unødvendige mellemrum og linjeskift)
som nedsætter læsbarheden. Man skal bare gemme originalen til hvis man
vil arbejde videre med siden.
<URL: http://c2.com/cgi/wiki?PrematureOptimization>
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Bertel Lund Hansen (14-07-2004)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 14-07-04 13:15 |
|
Lasse Reichstein Nielsen skrev:
>Her vil jeg holde med Rasmus :) Det rigtige tidspunkt at fjerne de to
>bytes, er når siden er færdig.
Det er slet ikke vigtigt for mig om man tager enhed med eller ej,
men hvis man mener at det giver bedre overblik, synes jeg aldeles
ikke man skal fjerne den, og heller ikke mellemrum og linjeskift.
Når jeg laver en side styret af PHP, sørger jeg for at udskriften
er nem at læse for mennesker.
Jeg husker med rædsel da nogle syntes at det var 'smart' at kode
Basic sådan her til 64'eren:
FORT=1TO256;?"TALLET ER NU",T;IFPEEK(53248)>0GOTO311ELSEGOTO734
osv.
><URL: http://c2.com/cgi/wiki?PrematureOptimization>
Jeg snakker slet ikke optimering. Jeg snakker om hvad jeg bruger
hele tiden.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
|
|