Avatar billede webrex Nybegynder
24. august 2005 - 16:05 Der er 32 kommentarer og
1 løsning

Banalt spgm. angiv margin for side

Hvorfor viser den ikke bottom-margin i dette eks.?

Dette virker fx ikke:
<body style="width: 100%; height: 100%; margin: 0px; background-color: #FFFFFF; text-align: center;">
<div style="width: 770px; height: 100%; margin: 0px; background-color: #000000;""></div>
</body>

Div'en er selve siden.

Siden skal fylde en 1024-skærm helt ud på nær x-antal margin og uden scroll!
Avatar billede netro Nybegynder
24. august 2005 - 16:08 #1
Du har sat margin til 0?
Avatar billede webrex Nybegynder
24. august 2005 - 16:16 #2
Så prøv dette om det skulle hjælpe!? :)
<body style="width: 100%; height: 100%; margin: 0px; background-color: #FFFFFF; text-align: center;">
<div style="width: 770px; height: 100%; margin: 0px 0px 30px 0px ; background-color: #000000;""></div>
</body>
Avatar billede netro Nybegynder
24. august 2005 - 16:23 #3
Body er jo altid 100%. Mit bud er:

<body marginwidth="0" marginheight="0" style="margin: 0px 0px 30px 0px; background-color: #FFFFFF; text-align: center;">
<div style="width: 770px; height: 100%; margin: auto; background-color: #000000;"">ABC</div>
</body>
Avatar billede softspot Forsker
24. august 2005 - 16:24 #4
margin må så være (1024-770) / 2...?

Hvis det er centrering af siden du søger, så prøv med:
margin:0px auto;
Avatar billede webrex Nybegynder
24. august 2005 - 16:30 #5
Det er ikke centrering jeg søger - det gøre med text-align:center og det du skriver. Det jeg søger er såmænd bare, at denne div som skal indeholde min side, skal have en bottom-margin - men det er åbenbart så let at det er svært ;)

Mht. body - så mener jeg at det er god kodestil at skriv 100% i body, da ikke alle browsere sætter den til 100%.
Avatar billede netro Nybegynder
24. august 2005 - 16:33 #6
Gør mit eksempel ikke, hvad du ønsker?
Avatar billede roenving Novice
24. august 2005 - 16:34 #7
-- og det skal da tilføjes, at du også skal sætte den for html-elementet, hvis du tvinger IE til at understøtte det mest basale html med en fuldt kvalificeret doctype inklusive dtd-link !-)

-- men hvad skal du opnå, for umiddelbart vil det være nemmest at sætte noget inde i dit element, som lukker hullet, f.eks. ved at lave en div inde i din site-div:

<div style="position:absolute;width:100%;height:20px;bottom:0;">&nbsp;</div>
Avatar billede webrex Nybegynder
24. august 2005 - 16:51 #8
>Netro, jo det er sådan den skal se ud! Men der er ikke doctype på din - og når den sættes på, så ændres det... + du bruger marginwidth, +marginheight - dem kender jeg ikke lige?

Men tror efterhånden det er nemmest, hvis i kodede det ud fra denne liste:
Siden skal ligge i en div, som skal have en width på 770 px. og have en minimum x-afstand til top, right, bottom, left, fx 10px). Height på denne div skal være så den ses i 1024 browser-vindue uden scroll! - Kan I klare den? ;)
Avatar billede roenving Novice
24. august 2005 - 16:56 #9
marginwidth og -height er de gamle html3.2-attributter og gør det samme som margin i style !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:770px;height:728px;margin:20px auto;background:#abc;}
</style>
<title>Tomt dokument</title>
</head>
<body>
  <div id="site">
    <!-- Indholdet -->
  </div>
</body>
</html>
Avatar billede roenving Novice
24. august 2005 - 16:59 #10
-- problemet er bare, at vi jo ikke kender brugerens indstillinger for hans browser-vindue, så vinduet kan være mellem ca. 600 og ca 700 pixels højt !-)
Avatar billede webrex Nybegynder
24. august 2005 - 17:09 #11
1. Der er en stor vertikal-scroll på, når jeg ser den.
2. Der er ikke bottom-margin på?
3. Hvad vil du råde mig til at give den for en højde i px?
Avatar billede roenving Novice
24. august 2005 - 17:11 #12
En, som tilpasser sig brugerens skærmstørrelse involverer noget med skygger af andre elementer:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:770px;height:100%;margin:0 auto;position:relative;border:0px;}
#container{width:770px;height:100%;background:#abc;border:0px;}
#topShadow{height:20px;}
#bundShadow{height:20px;}
#topMarg{width:100%;height:20px;position:absolute;background:white;top:0;left:0;}
#bund{width:100%;position:absolute;bottom:0;left:0;height:20px;background:white;border:0px;}
</style>
<title>Tomt dokument</title>
</head>
<body>
  <div id="site">
    <div id="container">
      <div id="topShadow">&nbsp;</div>
      <!-- Indholdet -->
      <div id="bundShadow">&nbsp;</div>
    </div>
    <div id="topMarg">&nbsp;</div>
    <div id="bund">&nbsp;</div>
  </div>
</body>
</html>
Avatar billede webrex Nybegynder
24. august 2005 - 17:23 #13
1.Det ser ok ud - der er dog en lille streg i bunden af skærmbillede - kan du ikke fjerne den.
2. Hvis du kunne putte en max-height på den - ville det være perfekt!
3. Skal der ikke også være width: 100%; i body style?
Avatar billede roenving Novice
24. august 2005 - 17:28 #14
Stregen forneden kæmpede jeg med i et par minutter, lige pludseligt går det nok op for mig, hvad der forårsager den !-)

-- tjah, så skal man tilføje noget javascript, som onload ændrer højden, hvis den er over et eller andet !o]

-- og body fylder faktisk altid 100% af bredden (hvilket f.eks. en div også gør, hvis den ikke er positioneret eller positioneret relativt !-)
Avatar billede webrex Nybegynder
24. august 2005 - 17:59 #15
Giver du mig så ikke indirekte ret i, at man ikke kan lave noget så banalt som bottommargin i IE?
Avatar billede netro Nybegynder
24. august 2005 - 18:31 #16
Opera vil have marginwidth og marginheight sat til 0, for at du kan regne med marginværdierne i dit style sheet.
Avatar billede webrex Nybegynder
25. august 2005 - 20:55 #17
Meget logisk ville nogle sige: Men man kan kun angive margin for siden ved at undlade at skrive height: 100%; width: 100%;

Og så holder ikke den regel med at man netop skal skrive dette for at alle browsere bruger hele browservinduet!? -
Avatar billede olebole Juniormester
25. august 2005 - 21:24 #18
<ole>

Nej, det burde vel være klart. Hvis vi to tjener 1.000 kr - og du skal have 100% ... hvormeget mon så der er tilbage til mig?

Du må vælge, om du vil have mel i munden - eller om du vil fløjte  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
25. august 2005 - 21:27 #19
netro >> det er ikke korrekt - Opera bruger bare padding på body-elementet i stedet for margin  :)
Avatar billede netro Nybegynder
25. august 2005 - 21:28 #20
Okay - men så bliver den padding åbenbart elimineret ved samme lejlighed.
Avatar billede olebole Juniormester
25. august 2005 - 21:29 #21
- ehhhhh .... hvad?  :)
Avatar billede netro Nybegynder
25. august 2005 - 21:35 #22
Hvis jeg sætter marginwidth og marginheight til 0, får jeg indholdet helt ud til browserens kant i Opera. I IE behøver jeg kun at definere det med CSS. Præcis hvorfor, skal jeg så ikke gøre mig klog på, med det gør i hvertfald en forskel.
Avatar billede webrex Nybegynder
25. august 2005 - 21:45 #23
Men jeg er åbenbart ikke den eneste, der havde overset det!?
Avatar billede webrex Nybegynder
25. august 2005 - 21:47 #24
I skriver altså heller ikke i body height: 100%; width: 100%; - Er det ikke nødvendig i nogle browsere!?
Avatar billede olebole Juniormester
25. august 2005 - 21:54 #25
netro >> som roenving viser - og jeg forklarede - så bruger Opera padding i stedet for margin på body-elementet:

body {margin:0;padding:0; /* og hvad du ellers har */}

webrex >> CSS foreskriver, at når et element får sat dets højde med en relativ værdi (en værdi i procent), skal denne udregnes på baggrund af det omkransende elements højde.
Det betyder, at det omkransende element eksplicit skal have sin højde sat. Det gælder også, hvis det omkransende element er body-elementet ... og det gælder alle browsere  :)
Avatar billede netro Nybegynder
25. august 2005 - 21:57 #26
Jeg tror jer gerne. Jeg får bare ikke den samme effekt med CSS alene.
Avatar billede webrex Nybegynder
25. august 2005 - 22:07 #27
Men så er det vel stadig ok kodestil at skrive sådan, ik? Der har jeg ikke angivet height - eller width i body !? - Dette virker!

body {
    margin: 5px 5px 5px 5px;
    background-color: #FFFFFF;
    text-align: center;
    font-family: arial, helvetica, verdana;
    font-size: 11px;
    color: #FFFFFF;
}
#indhold {
    height: 460px;
    width: 760px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 1px solid #000000;
    background-color: #FFFFFF;
    background-image: url(../image/);
    background-repeat: no-repeat;
    background-color: #BC0929; 
    padding: 0px;
}
Avatar billede olebole Juniormester
25. august 2005 - 22:21 #28
netro >> Det er 'CSS alene', jeg har skrevet - og det virker fint  :)

webrex >> Jo, det er fint. Når du ikke bruger højden af body'en til at beregne andre højder udfra, behøver du ikke sætte den  :)
Avatar billede netro Nybegynder
25. august 2005 - 23:53 #29
Ja, det ved jeg. Jeg tror også godt på, at det fungerer. Men jeg prøver blot på at sige, at brug af marginwidth og marginheight skulle give samme resultat som din padding i CSS, når vi taler om Opera.
Avatar billede olebole Juniormester
26. august 2005 - 00:18 #30
Ja, men det er bare ikke så fikst at bruge, da de attributter aldrig har været lovlige på body-elementet i HTML  :)
Avatar billede netro Nybegynder
26. august 2005 - 00:35 #31
Helt enig - fremover vil jeg da også bruge padding i stedet til Opera ;)
Avatar billede olebole Juniormester
26. august 2005 - 01:47 #32
- og enigheden stod truende lige om hjørnet ... da.da.da.daaaaaaaa  ;D
Avatar billede webrex Nybegynder
26. august 2005 - 17:51 #33
Da jeg selv fandt fejlen, lukker jeg, men tak til alle som prøvede at forstå og hjælpe! ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester