2017-09-14 7 views
0

Gerade jetzt I-Frames auf meiner Website bin mit einem Menü mit 256px breiten Bildern auf dem leftsite des Bildschirms zu erhalten:.HTML5 Alternative für Rahmen mit 1 festgelegt (Menü) Spalte

<frameset cols="275,*"> 
    <frame src="Menu.html" name="menu" title="menu" marginwidth="0" noresize> 
    <frame src="MSX.html" name="game" title="game" marginwidth="0"> 

Site: http://www.file-hunter.com/MSX

Ich habe Iframes, die HTML5-kompatibel sind, aber das wird immer noch die Standard-Lesezeichen Probleme geben. Abgesehen davon wird es dem Emulator nicht erlauben, den ganzen Bildschirm zu sehen.

Ich habe auch auf Spalten gesehen, aber ich kann keinen Weg finden, der ersten Spalte irgendwie eine feste Breite zu geben.

Ich habe nichts dagegen, alle 170 .html-Dateien zu aktualisieren, aber ich wäre wirklich interessiert, eine Lösung zu finden, die mir das gleiche Layout & Funktionalität in anständigen .HTML5 und in der Lage, den Emulator ausführen Full Bildschirm.

Antwort

0

In der Zwischenzeit habe ich diese Anfrage auch woanders platziert und habe eine nette Lösung mit CSS Grids gefunden.

CSS:

* 
.sidebar { 
    grid-area: sidebar; 
} 

.content { 
    grid-area: content; 
} 

.header { 
    grid-area: header; 
} 


.wrapper { 
    display: grid; 
grid-gap: 1px; 
    grid-template-columns: 258px 1fr 1fr; 
    grid-template-areas: 
      "....... header header" 
      "sidebar content content"; 
    background-color: #fff; 
    color: #444; 
} 
.box1 { 
background-color: #000; 
color: #fff; 
border-radius: 5px; 
padding: 1px; 
font-size: 150%; 
} 

.box2 { 
background-color: #fff; 
color: #000; 
border-radius: 5px; 
padding: 1px; 
font-size: 100%; 
} 
.header { 
background-color: #999; 
} 

HTML:

<body> 
<section class="wrapper"> 
<div class="box1 sidebar"> 
A bunch of pictures with links 
</div> 
<div class="box2 content"> 
Emulator with content 
</div> 
</section></body> 

Ich habe noch mit dem Kopf spielen, um und ein bisschen Fußzeile, aber dies scheint ganz gut zu funktionieren.

Verwandte Themen