Avatar billede moejensen Nybegynder
16. oktober 2003 - 11:41 Der er 29 kommentarer og
2 løsninger

frameset til div og css

Jeg er begyndt at se mulighederne med css til layout, og synes det er rigtig spændende.

Jeg har nedenstående frameset, som jeg vil forsøge at lave om til css og div's. Er der nogen der kan hjælpe mig lidt på vej?

Jeg vil gerne lave det så alle div's får en bestemt position, så rækkefælgen er underordnede, og de stadig kommer til at stå rigtigt.

Håber der en nogen der kan hjælpe mig.

<frameset cols="*,750,*" frameborder="0" border="0" framespacing="0">
    <frameset rows="59,*" frameborder="0" framespacing="0" cols="*">
        <frame name="SideTopLeft" src="SideTopLeft.htm" noresize scrolling="NO">
        <frame name="SideBotLeft" src="SideBotLeft.htm" noresize scrolling="NO">
    </frameset>
    <frameset rows="59,*,30" frameborder="0" framespacing="0">
        <frame name="Top" src="top.htm" noresize frameborder="0" framespacing="0" marginwidth="0" marginheight="0" scrolling="NO">
        <frame name="Middle" src="middle.htm" frameborder="0" framespacing="0" marginwidth="0" marginheight="0">
        <frame name="Bottom" src="bottom.htm" noresize frameborder="0" framespacing="0" marginwidth="0" marginheight="0" scrolling="NO">
    </frameset>
        <frameset rows="59,*" frameborder="0" framespacing="0" cols="*">
        <frame name="SideTopRight" src="SideTopRight.htm" noresize frameborder="0" framespacing="0" marginwidth="0" marginheight="0" scrolling="NO">
        <frame name="SideBotRight" src="SideBotRight.htm" noresize frameborder="0" framespacing="0" marginwidth="0" marginheight="0" scrolling="NO">
    </frameset>
</frameset>
Avatar billede roenving Novice
16. oktober 2003 - 11:51 #1
Når du så meget bruger både centrering og 'brug resten af pladsen' kan du da kun lave det ved hjælp af intensiv scripting onload !-)
Avatar billede kaptajnb Nybegynder
16. oktober 2003 - 11:57 #2
Avatar billede bjuhl Nybegynder
16. oktober 2003 - 14:31 #3
Drop alle de frames, det er til at få røde knopper af.
Avatar billede moejensen Nybegynder
16. oktober 2003 - 20:08 #4
bjul --> nemlig, det er derfor jeg vil lave det i css


-->roenving: jeg ved ikke hel hvad det er du snakker om, kan du uddybe det lidt

Jeg er lidt ude efter et konkret bud hvordan jeg avet det, når nogle af siderne skal være skallerbare og andre ikke skal
Avatar billede bjuhl Nybegynder
17. oktober 2003 - 08:36 #5
moejensen --> Jeg tror at det er dette du leder efter.
http://www.html.dk/tutorials/css/lektion14.asp

Jeg bruger selv CSS positionering, men det er utrolig svær at styre, HVIS ikke din side er gennemtænkt og layoutet "fremtidssikret", da en enkelt rettelse ellers vil "fucke" hele siden op.
Jeg kan ikke gi dig en færdig løsning på ovenstående framesets, jeg synes istedet du selv skal gå i krig.

Et lille hint kan jeg da komme med:
Det er alt for voldsomt at begynde med at placere hvert objekt med CSS. Del heller din side op i seperate tabeller, som du så placere med CSS.
Avatar billede moejensen Nybegynder
17. oktober 2003 - 13:20 #6
nu er jeg kommet lidt igang, men hvordan laver jeg en box der altid er i bunden af siden?

samt en bog der når helt ned til den box der er i bunden?
Avatar billede bjuhl Nybegynder
17. oktober 2003 - 13:41 #7
Lave en tabel til bund-boxen.
<table class="bundbox">

Tilføj dette til css filen.
--------------------------
#bund {
    position:absolute;
    bottom: 0px;
}
--------------------------
Avatar billede bjuhl Nybegynder
17. oktober 2003 - 13:50 #8
Min fejl.....

Når man bruger # er det id="bundbox", ved punktum er det class.
Avatar billede moejensen Nybegynder
17. oktober 2003 - 14:01 #9
så jeg har en tabel uden om det hele??

Er der ikke en måde, så man kun kan bruge css
Avatar billede bjuhl Nybegynder
17. oktober 2003 - 14:05 #10
Nej, ikke en tabel uden om det hele, hvis du vil bruge positionering. For så kan du jo ikke hive elementerne fra hinanden hvis de er bundet af en tabel.
Avatar billede moejensen Nybegynder
17. oktober 2003 - 14:05 #11
og hvordan får jeg få main boxen til at gå ned til bund boxe?
Avatar billede moejensen Nybegynder
17. oktober 2003 - 14:09 #12
hvad er forskellen på om jeg bruger en div eller en table?
Avatar billede bjuhl Nybegynder
17. oktober 2003 - 15:37 #13
div er et lag, men en table kan du bedre arbejde med. Men det er i bund og grund lige meget, bare din css henvisning har et tag at binde sig til.
Avatar billede moejensen Nybegynder
17. oktober 2003 - 15:43 #14
okay,

jeg ved bare ikke om jeg helt har forstået hvordan jeg får det til at virke.

Jeg kan ikke få bund delen til at være i bunden uanset hvor høj siden er. og heller ikke få main delen til at være variabel, så den går helt ned til toppen af bunddelen
Avatar billede roenving Novice
17. oktober 2003 - 15:48 #15
#main{
bottom:120px;/*højden på din bundbox*/
}
Avatar billede moejensen Nybegynder
18. oktober 2003 - 09:36 #16
det virker desværre ikke. jeg har følgende nu:

#main {
    width: 700px;
    bottom: 30px;
    overflow: auto;
    text-align: left;}
   
#bottom {
    height: 30px;
    background-image: url(/images/bottom_bg.gif);
    background-repeat: repeat-x;}
Avatar billede moejensen Nybegynder
18. oktober 2003 - 10:52 #17
i føle dokumentationen til css, er der ingen property der hedder bottom?
Avatar billede roenving Novice
18. oktober 2003 - 10:55 #18
Avatar billede moejensen Nybegynder
18. oktober 2003 - 11:00 #19
der kan man bare se, men kan du sige mig hvorfor det så ikke virker?
Avatar billede roenving Novice
18. oktober 2003 - 11:06 #20
-- det er een af de ting som ikke er fuldt implementeret ...

-- måske derfor !-)

-- men css2 har jo ikke så mange år på bagen, så det kommer vel på et tidspunkt ...
Avatar billede roenving Novice
18. oktober 2003 - 11:07 #21
-- ikke engang 5 år: 12-May-1998

http://www.w3.org/TR/REC-CSS2/
Avatar billede moejensen Nybegynder
18. oktober 2003 - 11:17 #22
det er fint, men hvordan løse jeg mit problem :-D
Avatar billede moejensen Nybegynder
18. oktober 2003 - 12:07 #23
så har jeg næsten fundet et svar i følgende spørgsmål:

http://www.eksperten.dk/spm/363550

svaret er:

<!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>

----------------------------

Det laver så godt som det jeg skal bruge, min middle skal bare kun være 700 px bred og kassen skal så stå centreret på siden. og dete kan jeg simpelthen ikke få den til uden at ødelæge hele layoutet.
Avatar billede roenving Novice
18. oktober 2003 - 12:15 #24
#container {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -350px;
    height: 100%;
    width: 700px;
    z-index: 1;
}
Avatar billede moejensen Nybegynder
18. oktober 2003 - 14:13 #25
den er ikke helt god, da den centrere det hele. Top og bund  skal stadig fylde hele bredden. Det er kun main der skal stå i midten.
Avatar billede roenving Novice
18. oktober 2003 - 14:18 #26
Så tilpasser du bare middle:

#middle {
    position: absolute;
    height: 100%;
    width: 700px;
    left: 50%;
    margin-left: -350px;
    border-top: 20px solid black;
    border-bottom: 20px solid black;
    overflow: auto;
    z-index: 2;
}
Avatar billede moejensen Nybegynder
18. oktober 2003 - 18:46 #27
yep, så virker det

laver du ikke et svar
Avatar billede roenving Novice
19. oktober 2003 - 05:54 #28
Velbekomme '-)
Avatar billede moejensen Nybegynder
19. oktober 2003 - 13:01 #29
jeg forstår bare ikke lige helt, hvordan følgende kan gøre at det bliver centreret:

width: 700px;
left: 50%;
margin-left: -350px;
Avatar billede moejensen Nybegynder
19. oktober 2003 - 16:44 #30
hvir i har tid må i gerne kigge med her:

http://www.eksperten.dk/spm/416002
Avatar billede roenving Novice
20. oktober 2003 - 00:42 #31
Fidusen i konstruktionen er, at man kan finde det præcise midtpunkt af en container med 50%, og så vil en negativ margen med præcis halvdelen af dit element sørge for at midtpunktet af elementet befinder sig lige over midtpunktet af containeren (altså være centreret !-)

Bagdelen er, at det vil den også være, hvis der ikke er plads til hele elementet, så en bruger, som laver et meget lille vindue vil kun se den midterste del, derfor er mine egne sider lavet med en tabel med centrering ...

Men kig iøvrigt på http://www.w3.org/TR/REC-CSS2/ -- der er oceaner af viden at hente !-)
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