Die Aufteilung meiner Seite in 2 vertikale Spalten (html oder css)

Es ist das erste mal, dass ich das design einer website so ich brauchen Sie Hilfe mit teilen meiner Seite in 2 senkrechten Teile.

Im Grunde, ich will diese Seite : http://elishaabargel.com/denim und diese Seite http://elishaabargel.com/denim2 kombiniert. Ich meine, dass ich will, dass die flash-animation auf der linken Seite und die links zu den technischen Zeichnungen und Skizzen auf der rechten Seite, unten auf der Seite.

Die erste Seite enthält bereits html-und css-codes der Rechte Teil aber es funktioniert einfach nicht erscheinen.

Wie kann ich dies tun?

InformationsquelleAutor user1972861 | 2013-01-12

Habe ich diese ein wenig in Eile, und ich bin sicher, einige bits falsch sind, wie die Ausrichtung des Fotos auf der rechten als an der Spitze statt der Unterseite auch die pop-UPS sind nicht die gleiche Größe wie Ihre original-popups... Aber es funktioniert, fixieren Sie Ihre original-Ausgabe der beiden Platten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Elisha Bargel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="fashion, design, student, shenkar, college, portfolio, creation, mode">
<meta name="description" content="Fashion designer Elisha Abargel: projects, pictures, contact.">
<style type="text/css">
    #flashContent { width:100%; height:100%; }
    body {background-color: #FFFFFF;}
    h1 {font-family:Cursive; color: #000000;}
    p {font-family:Cursive; font-size: 14pt; font-style: normal; font-weight: normal; color: #000000;}
    .link {color: #000000;}
    .alink {color: #000000;}
    .vlink {color: #000000;}
</style>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <div id="MainTitle" style="text-align: center;"><img alt="" src="http://elishaabargel.com/photos/logo2.jpg"></div>
        <div id="MainLinks" style="text-align: center;"><a href="http://elishaabargel.com/projects.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">projects</a> - <a href="http://elishaabargel.com/contact.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">contact</a></div>
        <div id="LeftPanel" style="width: 800; height: 100%; float: left;">
            <h1>Denim Project</h1>
            <div id="flashContent">
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="612" id="denimproject" align="middle">
                    <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" width="800" height="612">
                        <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#ffffff" />
                        <param name="play" value="true" />
                        <param name="loop" value="true" />
                        <param name="wmode" value="window" />
                        <param name="scale" value="showall" />
                        <param name="menu" value="true" />
                        <param name="devicefont" value="false" />
                        <param name="salign" value="" />
                        <param name="allowScriptAccess" value="sameDomain" />
                    <!--<![endif]-->
                        <a href="http://www.adobe.com/go/getflash">
                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                        </a>
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
            </div>

        </div>
        <div id="RightPanel" style="width: 200; height: 100%; text-align: left; vertical-align: bottom; float: right;">
            <a href="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg"></a><br />
            <a href="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg"></a>
        </div>
</div>
</form>

Ich bin mir sicher, dass yu Ihre JQuery-code-block zurück auf die Adresse des popups wird der falsche Größe.

Das ist großartig! Danke. Ich werde versuchen zu Sortieren, die anderen Fragen dann

InformationsquelleAutor Zeddy

8

Gibt es viele Möglichkeiten zum aufteilen einer Seite in zwei Teile konnte man entweder iframes, divs oder Tabellen. Das einfachste wäre eine Tabelle.
```
<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>
```
Auch wenn Sie laden zwei komplett vollen Seiten, es könnte nur sein, am besten mit einem iframe.
```
<iframe src="pg1.html" style="position:absolute;top:0;left:0;width:50%;height:100%;"></iframe>
<iframe src="pg2.html" style="position:absolute;top:0;left:50%;width:50%;height:100%;"></iframe>
```
- ich danke Ihnen sehr!
- Kein problem, bitte schauen Sie in meine Lösung aus, wie die Antwort, damit die anderen wissen, dass diese Frage beantwortet wurde. Noch einen schönen Tag.
- Fiddle für die erste option, die berücksichtigt, dass CSS sollte nun verwendet werden, um den Stil der Tabelle: jsfiddle.net/gGyDx/4
- Es ist möglich, aber sollten wir nicht fügen Sie den disclaimer, dass diese nicht reflektieren best practices für html-layout?
InformationsquelleAutor Devon Bernard

Ich dachte, ich sollte hinzufügen die einfachste Vorlage (mit divs), arbeitete für mich hier:

<div id="container" style="width:100%;">                                   
  <div id="left" style="float:left; width:50%;"> This is left panel </div>                     
  <div id="right" style="float:right; width:50%;"> This is right panel </div>                   
</div>

Können Sie ändern Sie die css-style-Optionen (wie width) entsprechend Ihren Bedürfnissen anpassen.

InformationsquelleAutor Rocky Inde

4

Können Sie die Verwendung von bootstrap für die Aufteilung Ihrer Seite.
```
<div class="container">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>
```
Wenn Sie müssen 100% der Breite, die Sie verwenden können, container-fluid-und row-fluid.. ich hoffe das wird Ihnen helfen.

InformationsquelleAutor tombmax

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.