|
|
 | Efterabning af frames
Fra :  Kasper_Hviid  | Vist : 918 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 |
| | |
|
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 : disken |
Dato : 19-01-07 22:00 |
| | |
 | Kommentar
Fra : natmaden |
Dato : 20-01-07 00:03 |
| | |
 | 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 |
| | |
| 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 |
..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>
| |
|
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 |
| | |
|
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
| |
|
Det er jo såmændt perfekt!
| |
 | 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.
| |
|
|