Søg
Avatar billede fangel Nybegynder
11. juni 2003 - 16:24 Der er 30 kommentarer og
1 løsning

<div> på 20px konstant i bunden af siden

Hej

jeg er ved at lave en side bestående udenlukkende af <div> layers der bliver positioneret med CSS (link: http://80.161.80.103/Deviant/)...

nu vil jeg gerne have en bjæle som i toppen, bare i bunden... altså en 20px bjælke som konstant ligge i bunden...

der gives kun point hvis det virker i mindst IE 6.0, Mozilla 1.5a, Netscape 7 og Opera 7

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 16:31 #1
Jeg vil tro at du kan gøre sådan her:

#ID {
position: absolute
top: 100%;
margin-top: -20px;
}
Avatar billede roenving Novice
11. juni 2003 - 16:33 #2
Kan du ikke bruge

bottom:0px
Avatar billede fangel Nybegynder
11. juni 2003 - 16:36 #3
pixeldude => jo, hvis jeg nu gerne vil have bg-color på, er det så bare med

background : #farve;

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 16:36 #4
Yep
Avatar billede schaefner Juniormester
11. juni 2003 - 16:38 #5
Den vil jo så bare ikke ligge i bunden konstant.
Avatar billede pixeldude Nybegynder
11. juni 2003 - 16:41 #6
Hvor vil den så ligge?
Avatar billede fangel Nybegynder
11. juni 2003 - 16:41 #7
OK... virker ret godt nu...

MEN, når siden køres STØRRER en den er, så bliver stregen stående midt på skærmen! nogle der kender noget mod det? (i Mozilla)

Morten
Avatar billede schaefner Juniormester
11. juni 2003 - 16:42 #8
Hvis der er mere indhold på siden, og der scrolles, så vil den ikke blive i bunden. Jeg går udfra det var der mentes med konstant i bunden.
Avatar billede fangel Nybegynder
11. juni 2003 - 16:42 #9
rettelse, hvis der scrooles på siden...

Morten
Avatar billede fangel Nybegynder
11. juni 2003 - 16:43 #10
schaefner => du fandt fejlen ;) kender du noget mod det?

Morten
Avatar billede fangel Nybegynder
11. juni 2003 - 16:46 #11
I kan se siden,
kan man evt få det der skal scrolles (enten div.content eller div.textbody) til at scrolle istedet for hele siden? (15 extra p for det)

Morten
Avatar billede roenving Novice
11. juni 2003 - 16:50 #12
position:static skulle lave nummeret, men den er vist ikke cross-browser ...
Avatar billede fangel Nybegynder
11. juni 2003 - 16:52 #13
jeg ændrede absolute til static, og nu hænger den oppe i toppen istedet!

hvad er så problemet

Morten
Avatar billede fangel Nybegynder
11. juni 2003 - 16:55 #14
altså, det virker fint med det nuværende style til at holde den i bunden, men hvis der er tilpads meget tekst går det ikke helt,

derfor, tænker jeg at jeg vil angive en height på div.content til (skærmens brede - 45px) og sætte overflow-y : auto, men hvordan laves højden så den er dette?

Morten
Avatar billede roenving Novice
11. juni 2003 - 16:58 #15
Kan du ikke sætte det med javascript onload og onresize
Avatar billede fangel Nybegynder
11. juni 2003 - 17:01 #16
tjo, men tænker der må være en nemmere metode...

fx:

heigth : 100%;
margin-top : 25px;
margin-bottom : 20px;
overflow-y : auto;

men ved ikke om dette vil virke! nogle der har en idee?

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 17:06 #17
Prøv dette, du skal bare sørge for at din top og bund har en z-index der er højere end 1.

.textbody {
position: absolute;
height: 100%
border-top: 20px solid white:
border-bottom: 20px solid white:
overflow: auto;
z-index: 1;
}
Avatar billede fangel Nybegynder
11. juni 2003 - 17:08 #18
kan man ikke bruge margin ?

men prøver (hvordan bliver z-index tildelt, den første for laves eller hva? eller skal jeg sætte dem manuelt?)

Morten
Avatar billede fangel Nybegynder
11. juni 2003 - 17:14 #19
pixeldude => seneste virker i hvert fald ik'...

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 17:14 #20
Jeg plejer at sætte dem manuelt. Så ved jeg hvad der sker.
Med border kan du styre området i en DIV som faktisk bruges til indhold.
Det er en skam at man ikke kan lave gennemsigtige borders.
Avatar billede fangel Nybegynder
11. juni 2003 - 17:18 #21
pixeldude => du kan jo se siden... (linket står her et sted)... vil du prøve at kigge på det? (bare kig på style-left.css (det andet stylesheet er kun for sjov (se _flyt den_ linket)

belønning skal slf. nok komme selv om du ikke laver dette... men hvem ved, måske du få lidt ekstra (ikke at man kan bruge point til noget, men alligevel)

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 17:26 #22
Prøv lige det her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>
<style type="text/css">
body {
    border: none;
    margin: 0px;
}

#container {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
}

#top {
    position: absolute;
    height: 20px;
    width: 100%;
    background: yellow;
    z-index: 3;
}

#middle {
    position: absolute;
    height: 100%;
    width: 100%;
    border-top: 20px solid black;
    border-bottom: 20px solid black;
    overflow: auto;
    z-index: 2;
}

#bottom {
    position: absolute;
    top: 100%;
    margin-top: -20px;
    height: 20px;
    width: 100%;
    background: yellow;
    z-index: 3;
}
</style>
<body>
<div id="container">
    <div id="top">top top top</div>
    <div id="middle">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.
Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.
Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Gratuitous octopus niacin, sodium glutimate.
Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
    </div>
    <div id="bottom">bottom bottom bottom</div>
</div>
</body>
</html>
Avatar billede fangel Nybegynder
11. juni 2003 - 17:30 #23
jeg skal desværre gå for idag... jeg kommer frygteligt tilbage i morgen...

Morten
Avatar billede pixeldude Nybegynder
11. juni 2003 - 17:32 #24
Tilføj lige det her på din middle selector:

box-sizing: border-box;
-moz-box-sizing: border-box;

Så virker det også i Netscape
Avatar billede pixeldude Nybegynder
11. juni 2003 - 17:34 #25
Nu virker det i Opera, Netscape, IE, Mozilla
Avatar billede fangel Nybegynder
12. juni 2003 - 13:26 #26
pixeldude => det virker fint nok i Mozilla, men i IE gør det ikke efter jeg har indsat det i min egen kode...

koden er som denne:

----
Div.top {
    position: absolute;
    height: 20px;
    width: 99.2%;
    z-index: 3;
    padding: 3px;

    color: White;
    background : #191970;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bolder;
}
Div.content{
    position: absolute;
    height: 100%;
    width: 100%;
    border-top: 30px solid white;
    border-bottom: 20px solid black;
    overflow: auto;
    z-index: 2;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
div.bottom{
    position: absolute;
    top: 100%;
    margin-top: -20px;
    height: 20px;
    width: 100%;
    z-index: 3;

    color : white;
    text-align : center;
    font : 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background : #191970;
}
---

dette virker fint nok i Mozilla, men ikke i IE... kan du se fejlen?

---

en anden ting, i Mozilla, hvis jeg sætter .top til width : 100%, så kommer der en scrollbar... (derfor den står til 99.2% som er den størst mulig værdi uden scrollbar)... ved du hvorfor?

---

http://80.161.80.19/deviant/bu/ <= nyeste version...

Morten
Avatar billede pixeldude Nybegynder
12. juni 2003 - 20:06 #27
Denne CSS laver det samme som din hvis du bruger den HTML som jeg postede:
<style type="text/css">
    body {
        border: none;
        margin: 0px;
        font-family: "Verdana";
    }

    #container {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

    #top {
        position: absolute;
        height: 26px;
        padding: 2px;
        width: 100%;
        background : #191970;
        font-size: 18px;
        color: white;
        z-index: 3;
    }

    #middle {
        position: absolute;
        height: 100%;
        width: 100%;
        border-top: 26px solid black;
        border-bottom: 20px solid black;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        font-size: 12px;
        overflow: auto;
        z-index: 2;
    }

    #bottom {
        position: absolute;
        top: 100%;
        margin-top: -20px;
        height: 20px;
        width: 100%;
        background : #191970;
        color: white;
        text-align: center;
        font-size: 10px;
        z-index: 3;
    }
</style>
Avatar billede fangel Nybegynder
12. juni 2003 - 20:40 #28
pixeldude => du er bare genial... du får lige 30p skudt efter dig ;)

Morten
Avatar billede fangel Nybegynder
12. juni 2003 - 20:47 #29
nu jeg har dig, hvorfor giver det så disse fejl?

    * Line: 32 Context : #content

      Property box-sizing doesn't exist : border-box
    * Line: 33 Context : #content

      Parse Error - -moz-box-sizing: border-box;
    * Line: 39

      Parse Error - : 12px; overflow: auto; z-index: 2; } #bottom

CSS filen starter med den nyeste du har skrevet...

Morten
Avatar billede pixeldude Nybegynder
12. juni 2003 - 22:12 #30
Du får fejl i linie 32 og 33 fordi at box-sizing ikke er med i CSS2 standarden, men den er med i CSS3.  Dette betyder ikke så meget da de fleste browsere har implementeret box-sizing.  Fejlen i linie 39 kommer også af samme grund.  Fjerner du de 2 box-sizing elementer så er der ingen fejl.
Avatar billede fangel Nybegynder
12. juni 2003 - 22:15 #31
OK... er der en måde hvorpå jeg kan sige "det er CSS3" (ala doctype til html?)

Morten
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
07/0916:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
06/0921:00 Libre Office Impress Af Frank i Andre styresystemer
White papers
Flere white papers »