/ Forside/ Teknologi / Udvikling / CSS / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
CSS
#NavnPoint
molokyle 2854
Klaudi 720
bentjuul 510
smorch 310
Benjamin... 310
e.c 300
EXTERMINA.. 210
stone47 200
danielsko.. 100
10  ME.alexan.. 100
Efterabning af frames
Fra : Kasper_Hviid
Vist : 948 gange
321 point
Dato : 19-01-07 17:41

Jeg vil gerne "genskabe" den gamle frame-opbygning, fra dengang man brugte ren html. Altså en hjemmeside med en menu ude til højre, som bliver stående, selv om man scrooler siden ned.

Jeg har eksperimenteret med det, men er bare ikke nået frem til noget der reelt virkede. Men det burde da kunne laves ... det burde da slet ikke være svært?

Jeg har 300 af de dersens points, så dem kan folk da så få!

Venlig hilsen
Kasper

 
 
Kommentar
Fra : disken


Dato : 19-01-07 18:44

Kan dette bruges, på en eller anden måde.
http://www.steenmartinsen.dk/dex/skrald/frames.rar

Kommentar
Fra : disken


Dato : 19-01-07 18:45

UPS, denne sidder til venstre, men bare flyt den.


Kommentar
Fra : Kasper_Hviid


Dato : 19-01-07 18:56

Ups sorry ... jeg udtrykte mig vist forkert. Det jeg mente, var at jeg gerne ville genskabe frame-effekten i CSS ... Frames er blevet rakket så meget ned, at jeg helst ville undgå at benytte det.

Men tak alligevel!

Kommentar
Fra : e.c


Dato : 19-01-07 21:15

Du må håbe at Molokyle kigger forbi - css er nemlig hans kæphest.

Kommentar
Fra : disken


Dato : 19-01-07 22:00






Kommentar
Fra : natmaden


Dato : 20-01-07 00:03

frames bruges da heldigvis stadig,
http://www.w3.org/TR/html4/present/frames.html

I forbinedelse med CSS er det nok <DIV></DIV> du skal arbejde med.
http://www.w3.org/TR/html4/struct/global.html#edef-DIV (se hele siden)

--
http://www.w3.org/TR/html4/index/list.html
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS2/
http://www.w3.org/TR/CSS21/

http://www.google.com/custom?q=css&cof=T%3Ablack%3BLW%3A72%3BALC%3A%23ff3300%3BL%3Ahttp%3A%2F%2Fwww.w3.org%2FIcons%2Fw3c_home%3BLC%3A%23000099%3BLH%3A48%3BBGC%3Awhite%3BAH%3Aleft%3BVLC%3A%23660066%3BGL%3A0%3BAWFID%3A0b9847e42caf283e%3B&sitesearch=www.w3.org&domains=www.w3.org

http://www.google.com/custom?hl=da&cof=AH%3Aleft%3BL%3Ahttp%3A%2F%2Fwww.w3.org%2FIcons%2Fw3c_home%3BLH%3A48%3BLW%3A72%3BLC%3A%23000099%3BVLC%3A%23660066%3BALC%3A%23ff3300%3B&domains=www.w3.org&q=frameset&sitesearch=www.w3.org

Mvh. Jørgen

Kommentar
Fra : molokyle


Dato : 20-01-07 14:29

Det er ikke så svært. Nu kender jeg ikke dit layout, men 'det normale' er:

En smal frame i venstre side med navigationsmenu.
En bred frame til højre med indhold.

Det 'smarte' er at menuen i den venstre side bliver stående uanset indholdet i den højre frame udskiftes med en ny side eller der scrolles i den højre frame.

I css laver du i stedet en <div> ... </div> sektioner som opdeler siden. Dette kan gøres på utallige måder, men en meget simpel kunne være noget alá:
Kode
<style type="text/css">
<--
#left
{
position:absolute;
margin:0;
padding:0;
left:0;
top:0;
width:200px;
}

#right
{
position:absolute;
margin:0;
padding:0;
top:0;
left:201px;
}
//->>


Nu kan siden deles med:
Kode
<div id="left"> ... </div>
<div id="right"> ... </div>


For at få f.eks. en menu til at 'låse fast' i venstre sektion laver du et stylesheet til denne.
Kode
#menu
{
position:fixed:
top:32px;
margin-left:32px;
}


..som placeres i venstre div:
Kode
<div id="left"> .. <div id="menu"> HER ER KODEN TIL DIN MENU </div> .. </div>


Der findes mange eksempler på sådanne layout modeller rundt omkring

http://www.webdesign101.dk/csslayout/oversigt.php

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-01-07 14:36

Her nogenlunde det samme som mit eksempel: http://www.webdesign101.dk/csslayout/ex/principlayout_2.html

Flere layout's og menuer i ren CSS finder du her: http://www.cssplay.co.uk/

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-01-07 14:57

...mere her lavet i Stones Webwriter:
Citat
Rammer uden rammer.
Det næste eksempel er også meget anvendeligt, især hvis man vil undgå rammer (Frames), hvilket der kan være flere gode grunde til, men alligevel gerne vil have en opbygning der ligner Frames. Lav først et typografiark med følgende linier, forklaringer i kursiv skal udelades.

.TDMain{
padding-right:10;      Afstand fra tekst til kant
padding-top:10;
padding-left:10;
vertical-align:top;      Starter øverst i cellen
font-size:14;
background-image:URL(email.gif);   Baggrundsbillede
background-attachment:fixed;      fastlåses
background-repeat : no-repeat;      uden gentagelse
background-position : center center;   midt i cellen
}
.TDTop{
font-family:fantasy;   Fantasifuld skrifttype
vertical-align:middle;   Centrer i fht. top/bund
text-align:center;      Centreres i midten af cellen
font-size:26;
}
.TDLeft{
padding-left:10;
padding-top:20;
font-family:sans-serif;
font-size:12;
vertical-align:top;
}

Gem typografiarket og lav en tilhørende HTML-side med denne tabel:
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="3">
<TR>
<TD CLASS="TDLeft" ROWSPAN="2" WIDTH="130">Menu</TD>
<TD CLASS="TDTop" HEIGHT="60">Overskrift</TD>
</TR>
<TR>
<TD CLASS="TDMain">Indhold
</TD></TR></TABLE>

Forklaringer:
1. Tabellen skal altid fylde hele browservinduets bredde og højde (100%). Kantan BORDER="3" er kun taget med for at gøre det nemmere at overskue resultatet.
3. ROWSPAN fordi cellen spænder over to rækker. Bredden på 130 er god plads til menupunkter.
4. Højden på 60 er god plads til den valgt skriftstørrelse


http://home.worldonline.dk/rufus/htmlkurs/Lektion7.html

..selvom man også bør undgå tabeller

1.) http://webmaster.hephey.dk/guide/45/
2.) http://www.htmlite.com/SD008.php
3.) http://www.stylesheets.dk/seybold/everything.html

</MOLOKYLE>

Kommentar
Fra : Kasper_Hviid


Dato : 20-01-07 18:27

Wow, der er mange fine forsøg ... men jeg kan altså stadig ikke få menuen til at holde samme vertikale position, når jeg scrooler ned på siden.

Hm ... jeg tror måske det jeg leder efter er her:
http://tagsoup.com/cookbook/css/fixed/

Accepteret svar
Fra : molokyle

Modtaget 321 point
Dato : 20-01-07 20:26

Vi ta'r det lidt af gangen

(Hvilken browser bruger du forøvrigt og skal koden virke i alle browsere uanset version?)

Glem lige Javascripts mm.

Først iflg. HTML 4.01 strict DTD og CSS2 standarden:

Lad os prøve at 'fastholde' en tekst:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Default</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Default">
<meta name="keywords" content="Default">
<style type="text/css">
<!--
.hold_fast_hr_svend
{
position:fixed;
}
//-->
</style>
</head>
<body>
<pre>
.
.
.
.
.
.
.
.
.
.
</pre>
<span class="hold_fast_hr_svend">Denne tekst flytter sig ikke en meter.</span>
<br /><br />
<pre>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
</pre>
</body>
</html>


Gem ovenstående som fixed.html

Sådan ...prøv det!

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-01-07 20:45

..og en MEGET simpel menu:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Default</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Default">
<meta name="keywords" content="Default">
<style type="text/css">
<!--
.hold_fast_hr_svend
{
position:fixed;
margin:32px;
padding:8px;
background:#000;
color:#fff;
}

a:link{color:green;}
a:visited{color:red;}
a:active{color:white}
a:hover{color:yellow;}
//-->
</style>
</head>
<body>
<pre>
.
.
<div class="hold_fast_hr_svend">
MENU
<br /><br />
<a href="http://www.dmi.dk" title="DMI">DMI</a>
<br /><br />
<a href="http://www.dr.dk" title="Dr">Dr</a>
<br /><br />
<a href="http://www.tv2.dk" title="TV2">TV2</a>
<br /><br />
<a href="http://www.eb.dk" title="Ekstrabladet">Ekstra Bladet</a>
<br /><br />
<a href="http://www.politiken.dk" title="Politiken">Politiken</a>
</div>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
</pre>
</body>
</html>


Prøv den ..og vend så tilbage med dit 'problem'

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-01-07 20:55

Skal du endelige bruge et script, så brug et som får al CSS kode afviklet i Internet Explorers 'gamle' versioner til at overholde standarden og som kun indlæses, hvis brugeren har en sådan gammel browser:

Eric Meyer er som sædvanligt kommet op med den simpleste løsning:

http://meyerweb.com/eric/thoughts/2005/10/17/ie7-and-ie7/

..nemlig at benytte IE7 scriptet:

http://dean.edwards.name/ie7/

Al kode kan således skrives i overensstemmelse med standarden som anbefalet af http://w3.org/

Man udmasker versionerne lavere end 7 med de betingede kommentarsætninger, som kun IE tolker:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

Dette gør livet som programmør en smule lettere fremover

Hele 'fidusen' ligger i brug/inkludering af IE7 scriptet i <head> .. </head> sektionen:

Kode
<!--[if lt IE 7]><script src="/ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->


</MOLOKYLE>

Kommentar
Fra : Kasper_Hviid


Dato : 21-01-07 02:48

Tak, Molokyle, det virker helt perfekt nu, og koden er dejligt enkel!

Er de nogem teknisk forskel på dine første og dine sidste kode-forslag, siden jeg kun kunne få de 2 seneste til at virke? Det kan også være at jeg blot keglede for meget rundt i de første ...

Molokyle sagde:
Citat
Hvilken browser bruger du for øvrigt og skal koden virke i alle browsere uanset version?


Jeg bruger Opera 8.5 samt Internet Explorer 7.0.5730.11 (og sommetider lidt Firefox)
Jeg vil bare helst have at "de fleste" kan se siden uden problemer.

Venlig hilsen
Kasper

Godkendelse af svar
Fra : Kasper_Hviid


Dato : 21-01-07 02:51

Det er jo såmændt perfekt!

Kommentar
Fra : molokyle


Dato : 21-01-07 09:25

Hurra og tillykke 'hr_svend'

Ja, som jeg skrev: Det er ikke så svært

</MOLOKYLE>

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177577
Tips : 31968
Nyheder : 719565
Indlæg : 6409071
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste