Avatar billede christian- Nybegynder
18. juli 2004 - 15:05 Der er 76 kommentarer

Brug af height og margin.

Hej eksperter.

Jeg sidder og er ved at lave en side for et firma, men er allerede stødt på to problemer, som sådan set er de samme.

Problem nr. 1 er at jeg vil have min side til at kante med bunden af browseren.

http://silenceart.dk/hosted/akanell2/

Jeg tror at den markerede <td> skal have en højde der svarer til resten af browseren. Hvilket jo er afhængig af klientens opløsning. Hvis jeg sætter den markerede td's height til 100%, sker der intet. Hvad skal jeg gøre for at få den til at dække, så selve siden kanter med browseren.

Min body ser således ud:

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

(Ved godt margin forekommer et par gange ;-)

Problem nr. 2 er det samme, blot i en lidt fordrejet måde. Hvis man trykke ctrl-a vil man kunne se 2 markeringer i hver side. Hvordan fjerner jeg dem? Det sker da jeg ikke kan angive en width på 100% uden at have en &nbsp; i td'en. &nbsp; er nødvendig for at de to td'er i den tilhørende tr kan vises.

Håber det var forståeligt.

På forhånd tak.
Avatar billede christian- Nybegynder
18. juli 2004 - 15:10 #1
En anden ting er højden ude i siden, som i IE heller ikke er 100%.
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:10 #2
jeg ville sætte tabellen til 100% højde, og så sætte en fast højde på alle andre rækker end den den td er i. så vil den automatisk tilpasse sig resten af skærmen.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 15:12 #3
Sådan ser den allerede ud. Tabellen har en højde på 100% og samtlige td'er er angivet en højde i px, hvorefter den markerede ikke er.
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:13 #4
problem#2: du kan undgå at have de 'tomme' colonner ude i siderne ved at sætte din tabels margin til auto. så fordeler den den ledige plads på begge sider.

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:14 #5
body, html {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

så fylder den det hele i min firefox.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 15:16 #6
Aha, den kendte jeg ikke. Desværre er problemet der stadig i IE, så en fuldstændig løsning var det desværre ikke. :-)
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:16 #7
jo der er. skal lige rode mine arkiver igennem for at finde den. hæng på.

=)
Avatar billede roenving Novice
18. juli 2004 - 15:17 #8
Måske kan du bruge den type løsning, jeg viser i http://www.eksperten.dk/spm/488278 (lyder som om det er den sidste du har brug for ...
Avatar billede christian- Nybegynder
18. juli 2004 - 15:20 #9
Tak roenving.. Men tror allerede jeg har de mest nødvendige ting derfra. Prøver at tyde den.

3xm, jeg mente ikke der ikke var nogen løsning til det, men blot at dit tidligere forslag ikke lige dækkede det hele :-)
Avatar billede christian- Nybegynder
18. juli 2004 - 15:21 #10
Er ikke så glad for at bruge alt det der position css.
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:39 #11
okay... har et eksempel her der (så vidt jeg kan se) også virker i ie:

http://detfalskested.dk/exp/520876/
http://detfalskested.dk/exp/520876/morian.css

opbygningen er godt nok lidt anderledes end dit, men der burde være den css du har brug for.

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:42 #12
- og nu er alt overflødigt snask fjernet.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 15:48 #13
Tror ikke det hjalp.. Indsatte "display: table;" i body css, samt "margin: auto; og height: 100%" på begge mine tables.
Avatar billede christian- Nybegynder
18. juli 2004 - 15:50 #14
Måske gør jeg noget forkert?
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:51 #15
du skal ikke have display: table; på din body.

men på din table skal du sættes den margin: auto; - så er den centreret. skal vi ikke starte med den?

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 15:57 #16
Det er gjort. dispay: table er fjernet fra body css igen.
Avatar billede 3xm Nybegynder
18. juli 2004 - 15:59 #17
start med at fjerne din venstre og højre side (de to kolonner i tabellen). giv så tabellen en class, og sæt dennne class' margin til auto.

så burde du have centreret den uden brug af spacere eller tomme celler.

- så snart centreringen er på plads får vi den til at fylde hele vinduet i ie også...

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 16:02 #18
Men så ryger toppen jo også ude i siderne
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:04 #19
alt det der visuelle snask skal vi nok sørge for kommer tilbage...

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:05 #20
åhh nej... du bruger jo en eller anden form for tekstur i toppen... damn... er den evt tilet?

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 16:07 #21
Ja, og jeg bruger den også i siden.. Hele vejen ned :-)
Avatar billede christian- Nybegynder
18. juli 2004 - 16:09 #22
Desuden virker margin: auto; umidlbart også kun i firefox. Du kan se forskellen nu
Avatar billede christian- Nybegynder
18. juli 2004 - 16:13 #23
Toppen vil jeg evt. kunne fixe med en overall baggrundsbillede, men selve den "border" der var omkring siden, er nu fjernet da den var en del af det andet. (Du ved, den skygge )
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:14 #24
du skal også lige sætte body, html's width til 100%;
Avatar billede christian- Nybegynder
18. juli 2004 - 16:16 #25
Det er den nu. Da jeg sagde border omkring, mente jeg på hver side af selve siden.
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:19 #26
hmm... det kan også skyldes at vi ikke bruger den samme dtd. er der en speciel grund til at du bruger html 4.01 og ikke en nyere?

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 16:23 #27
Nej, det er noget dreamweaver selv har lavet. Men har det indflydelse på resultatet?
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:23 #28
og hvorfor bruger style-tags i stedet for class/id og samling af det hele i din css-fil?

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 16:24 #29
nej, det havde det så ikke. jeg forstår faktisk ikke helt hvorfor den ikke gør som den får besked på. jeg roder lige lidt videre...

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 16:25 #30
Tak, skal du have. Har en backup af det tidligere, hvis du vil tilbage til noget
Avatar billede christian- Nybegynder
18. juli 2004 - 16:41 #31
Så har jeg ryddet lidt op i de styles.
Avatar billede 3xm Nybegynder
18. juli 2004 - 17:55 #32
nu har jeg ryddet lidt op i din kode, og nu centrerer den også i ie. lægger du ikke lige det ud, så kigger vi på resten af problemerne.

du havde sat en tabel i en tabel med kun 1 celle, men det er der ingen grund til. det er dobbeltkonfekt.

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 17:56 #33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Akanell</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="include/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" class="sitetable">
    <!-- Midter side -->
    <tr>
        <td height="31" width="592" colspan="3" class="topborder_middle"></td>

    </tr>
    <tr>
        <td width="197" height="154" class="left_logo"></td>
        <td width="198" height="154" class="middle_logo"></td>                   
        <td width="197" height="154" class="right_logo"></td>                   
    </tr>
   
    <tr>
        <td height="18" width="592" colspan="3" class="languagebar"></td>
    </tr>       
    <tr>

        <td height="21" width="592" colspan="3" class="menubar"></td>
    </tr>
    <tr>
        <td height="11" width="592" colspan="3" class="menushadow"></td>
    </tr>
   
    <tr>
        <td colspan="3" bgcolor="#DBDBDB">
            <!-- Main site START-->
            dsdsds
            <!-- Main site END-->                       
        </td>

    </tr>
    <tr>
        <td height="63" width="592" colspan="3" class="bottomtext"></td>               
    </tr>
</table>

</body>
</html>
Avatar billede christian- Nybegynder
18. juli 2004 - 18:00 #34
Har lagt det op. Kan godt være der lige går et par minutter mellem mine svar. Er ved at lave mad :-)
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:02 #35
det er helt i orden. var også lige selv væk en times tid på telefonen.

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:04 #36
kan du overtales til midlertidigt at sætte denne på din sitetable-class?

border: 2px solid red;

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:06 #37
Njaa, det kan nok godt lige komme på tale. Prøvede at sætte en vertical align: top, på samme class, uden det hjalp. (Siden er lidt forskudt)
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:08 #38
den hedder vertical-align med bindestreg.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:11 #39
Ja, det var også det jeg indsatte. Skrev bare lidt for hurtigt herinde.
Avatar billede christian- Nybegynder
18. juli 2004 - 18:14 #40
Grunden til at jeg havde 2 tables inde i hinanden, er at jeg tidligere havde de to sidekanter som var tables. Det vil sige, selve hovedtablen bar på i alt 3 tables.
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:15 #41
men den fuckede bare med margin: auto; nu virker den del. nu skal vi bare have ie til at forstå højderne på de forskellige rækker. jeg roder videre...

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:28 #42
ie kan virkeligt give mig grå hår af og til. den lader til fuldstændigt at ignorere højdedefinitionerne. eller i hvert fald ikke at rette sig korrekt efter dem.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:28 #43
Det er ligesom om IE udregner højden på en hel tåbelig måde. Den finder først højden angivet i %, hvorefter den så tillægger de andre højder som er angivet i px. Se fx nu.
Avatar billede christian- Nybegynder
18. juli 2004 - 18:29 #44
Ja lige præcis
Avatar billede roenving Novice
18. juli 2004 - 18:31 #45
Er det problemet med at IE udvider relativt, når der er plads i overskud ?-)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:34 #46
Ja det tror jeg.. Den er ikke så god til de procenter når der er tale om flere td'er over og under.
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:36 #47
roenving, ja. men det burde den ikke hvis man angiver en af rækkerne til * i højden. men det gør den alligevel.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:36 #48
Hvis vi, som jeg, har 5 td'er hvor den i midten har en procentværdi (højde) på 60% mens de andre har en pixelværdi på 20px, så er det som om IE først finder den td hvis højde er angivet i procent. Når den så har fundet den, og den måske er 60%, jamen så laver den TD'en 60% af browseren. Herefter finder den så de yderligere 4 td'er hvis højde er angivet i pixel pludselig er siden langt større end beregnet.
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:43 #49
christian, den i midten skal i hvert fald ikke have 100% højde.

=)
Avatar billede christian- Nybegynder
18. juli 2004 - 18:44 #50
Men er det ikke kun ved frames man kan bruge * ?
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:45 #51
nej... men den burde - når man undlader at definere højden på den ene række - give den række resten af pladsen.

=)
Avatar billede 3xm Nybegynder
18. juli 2004 - 18:52 #52
æhrj, hvor jeg ikke kan lide ie.

=(
Avatar billede christian- Nybegynder
18. juli 2004 - 18:54 #53
Nej, det er godt nok problematisk!
Avatar billede christian- Nybegynder
18. juli 2004 - 19:10 #54
Roenving, har du ikke nogle forslag ? :-)
Avatar billede 3xm Nybegynder
18. juli 2004 - 19:13 #55
ja, roenving. kom og øs af din ekspertise. jeg er helt lost.

=)
Avatar billede roenving Novice
18. juli 2004 - 19:21 #56
Avatar billede christian- Nybegynder
18. juli 2004 - 19:31 #57
#content{position:relative;height:100%;width:760px;margin:0 auto;}
#banner{position:absolute;top:0px;left:0px;height:125px;width:100%;background:yellow;z-index:10;}
osv..

Er det dette du mener jeg skal benytte?
Avatar billede roenving Novice
18. juli 2004 - 20:06 #58
Jeg har ikke fulgt diskussionen her i detaljer, men ja, jeg tror, det er der, du kan finde noget, du kan bruge !-)
Avatar billede christian- Nybegynder
18. juli 2004 - 20:12 #59
Ifølge W3 burde man ikke bruge højde 100% på en table.
Avatar billede roenving Novice
18. juli 2004 - 20:13 #60
Jo, men kun hvis du bruger det som style-property !-)
Avatar billede christian- Nybegynder
18. juli 2004 - 20:15 #61
Okay.
Avatar billede christian- Nybegynder
18. juli 2004 - 20:17 #62
Min teori er at det er mine colspan der forudsager det. Vil prøve at fjerne dem.
Avatar billede christian- Nybegynder
18. juli 2004 - 20:20 #63
Hmpf..! Hjalp heller ikke
Avatar billede christian- Nybegynder
19. juli 2004 - 21:44 #64
Hvis nu jeg begyndte forfra, hvordan ville i så anbefale jeg gjorde? Så samme konflikt helst ikke skulle opstå?
Avatar billede roenving Novice
19. juli 2004 - 21:54 #65
Jeg ville anbefale, at du med højden gjorde sådan, som jeg viste i linket:

http://www.eksperten.dk/spm/488278#rid4511606

-- og så tilføjede den to-delte centrering med text-align på body til ie og margin:0 auto; til de regelrette browsere !-)
Avatar billede christian- Nybegynder
19. juli 2004 - 23:03 #66
Jeg skal prøve. Men det ser lidt indviklet ud med alt det <div> "i stedet" for td.
Avatar billede roenving Novice
19. juli 2004 - 23:08 #67
Du skal bare stille det bedre op, end jeg har gjort, for det er faktisk simplere i antal tags !-)
Avatar billede christian- Nybegynder
19. juli 2004 - 23:11 #68
Nu har jeg prøvet at flytte rundt på det så det ligner min side (Bredde mæssigt) og fjernet banner og newsbag, men det er ikke til at arbejde med. Hvis jeg piller lidt i de forskellige bredder, så forsvinder det helt.

Vil du være sød at lave en, som du lavede før, hvor layoutet bare ligner min. Midten har  512px bredde, mens siderne højre og venstre har en bredde der er defineret efter browserens størrelse.
Avatar billede christian- Nybegynder
19. juli 2004 - 23:12 #69
Så kan jeg så bagefter sætte det ind i de 3 td'er du laver, som jeg havde i den gamle
Avatar billede christian- Nybegynder
19. juli 2004 - 23:14 #70
http://silenceart.dk/hosted/akanell2/eksempel.htm

Jeg skal bare have byttet det rundt så det ikke er midten der har en bredde på 100%, men  en bredde på 512. Og de andre en bredde der afhænger af browser-vinduet.
Avatar billede christian- Nybegynder
19. juli 2004 - 23:30 #71
Havde du tænkt dig at skulle opbygge hele siden i disse <div>?
Som jeg kan se bliver det fuldstændig det samme om jeg bruger tables på denne side, eller den anden. :-)

http://silenceart.dk/hosted/akanell2/eksempel.htm
Avatar billede roenving Novice
19. juli 2004 - 23:48 #72
Et sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
    "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Fuld højde centreret simpelt</title>
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/520876">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;text-align:center;}
#container{position:relative;height:100%;width:512px;margin:0px auto;text-align:left;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:125px;}
#bottom{position:absolute;left:0px;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
  <div id="container">
    <div id="banner">
      <div id="top1">top1</div>
      <div id="top2">top2</div>
    </div>
    <div id="main">
      <div id="spacer">Usynligt</div>
      Hovedside</div>
    <div id="bottom">
      <div id="bund1">bund1</div>
      <div id="bund2">bund2</div>
    </div>
  </div>
</body>
</html>
Avatar billede christian- Nybegynder
19. juli 2004 - 23:55 #73
Okay, jeg prøver at arbejde lidt med det. Tak for det
Avatar billede christian- Nybegynder
19. juli 2004 - 23:59 #74
Er det umidlbart nemt at indsætte siderne bagefter?

http://silenceart.dk/hosted/akanell2/index2.php

Her kan du se hvordan den skal se ud, brug evt. firefox til at se den.
Avatar billede christian- Nybegynder
20. juli 2004 - 00:08 #75
Umidlbart ser det fint ud, der er bare lidt problemer med bredden, som burde være 512px.
Avatar billede roenving Novice
14. december 2005 - 16:39 #76
Mon ikke det er ved at være lukketid ?-)
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