[HTML] Bildvorlage zu Quelltext

pcw · 30. Mai 2006

Ich soll ne private Homepage (was ganz kleines) für wen machen. Wie das ganze aussehen soll, haben wir jetzt in einem Bild festgehalten.

Allerdings schaff ich es nicht, das Bild in einen ordentlichen Quelltext umzusetzen. Normal hab ich damit ja kein Problem, aber weder ein Versuch mit floatenden DIVs noch mit absolut positionierten bringt ein Ergebnis, was wenigstens in Opera und im IE funktioniert.
Mit Tabellen wollt ich es eigentlich ned versuchen und ehrlich gesagt denke ich auch nicht ,dass das so einfach möglich wäre, lass mich aber gern eines BEsseren belehren.

Die Grafik hab ich mal in den Anhang gehängt. Zu beachten wäre, dass die große Box in der Mitte und die kleinere oben rechts später Texte etc. enthalten sollen.

Wär fein, wenn mir mal wer nen Denkanstoß gibt. Wahrscheinlich seh ich einfach den Wald vor lauter Bäumen ned.

cheft · 3. Juni 2006

Hallo,

ich weiß is jetzt vieleicht ein bissle spät, aber ich würde das mit <div> Elementen lösen, etwa so:

index.htm

HTML:

<html>
    <head>
        <title>AEON</title>
        <link rel="stylesheet" type="text/css" href="formate.css">
    </head>
    <body>
        <div class="center">
            <div class="left_picture">

            </div>
            <div class="banner">

            </div>
            <div class="right_upper">
                
            </div>
            <div class="right_middle">

            </div>
            <div class="right_under">

            </div>
            <div class="main">
                <iframe name="frames" src="test.htm" width="100%" height="100%"></iframe>
            </div>
            <div class="shadow">

            </div>
            <div class="title">
                <span style="font-size:20pt;">AEON</span>
            </div>
        </div>
    </body>
</html>

und die formate.css

HTML:

div.center
{
    position:absolute;
    width:800;
    height:600;
    border:1pt solid #000000;
}

div.left_picture
{
    position:absolute;
    top:0;
    left:0;
    height:600;
    width:100;
    background-color:#0000FF;
    z-index:2;
}

div.title
{
    position:absolute;
    top:50;
    left:80;
    width:450;
    height:50;
    background-color:#00FF00;
    z-index:3;
    vertical-align:middle;
}

div.right_upper
{
    position:absolute;
    top:0;
    left:530;
    width:180;
    height:130;
    background-color:#FF0000;
    z-index:4;
}

div.banner
{
    position:absolute;
    top:0;
    left:0;
    width:530;
    height:80;
    background-color:#FFFF00;
    z-index:1;
}

div.main
{
    position:absolute;
    top:100;
    left:100;
    width:530;
    height:300;
    background-color:#000000;
    z-index:2;
}

div.right_middle
{
    position:absolute;
    top:110;
    left:630;
    width:140;
    height:220;
    background-color:#FF00FF;
    z-index:1;
}

div.right_under
{
    position:absolute;
    top:300;
    left:500;
    width:220;
    height:170;
    background-color:#00FFFF;
    z-index:2;
}
div.shadow
{
    position:absolute;
    top:400;
    left:100;
    width:400;
    height:20;
    background-color:#222222;
    z-index:1;
}

Anstatt der Background Farben einfach die Bilder verwenden. Sollte gehen. Die ganzen Größenangaben im CSS File wirstdu wahrscheinlich auch noch anpassen müssen, dürfte aber vermutlich kein Problem darstellen.

Gruß
Cheft

pcw · 4. Juni 2006

Thx für die Mühe. So eine ähnliche Variante hab ich mir mittwoch abend schon gemacht. Aber wie bekomm ich das ganze auf die Bildschirmmitte zentriert?

PHP:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
    <title>Aeon's Homepage</title>
    <style type="text/css" media="all">@import "./styles.css";</style>
    <script type="text/javascript"><!--
    //-->
    </script>
  </head>
  <body>
        <div class="leftbox"></div>
        <div class="middlebox"></div>
        <div class="bottombox"></div>
        <div class="shadowbox"></div>
        <div class="centerbox hoverbox">
          <div class="lefttopbox"></div>
          <div class="contentbox">
            <div class="contentspacer"></div>
            <div id="content" class="hoverbox">
              <!-- inhalt -->
            </div>
          </div>
        </div>
        <div class="topbox hoverbox">
             <div class="menucaption">
               <!-- menü titel -->
               Navigation
             </div>
             <div class="menucontent">
               <div class="menubox" id="menu">
                 <!-- menü -->
               </div>
             </div>
        </div>
        <div class="footerbox" id="footer">
          <!-- footer -->
          <div class="footercontent">
            &copy;2006 Christian Wetter
            <span class="smalltext">Best view with Opera or Firefox (hover-effects)</span>
          </div>
        </div>
  </body>
</html>

PHP:

*
{
  padding:0px;
  margin:0px;
  font-family:Comic Sans MS,Arial,sans-serif;
  font-size:11px;
}
a
{
  text-decoration:none;
  color:#4f70d9;
}
a:hover
{
  color:#e07000;
}
hr
{
  margin:12px 4px 12px 4px;
  border:0;
  height:1px;
  color:#4f70d9;
  background-color:#4f70d9;
}
img
{
  border:0;
}
.bottomspace
{
  padding-bottom:12px;
}
.lefttopbox
{
  position:absolute;
  left:-34px;
  top:-61px;
  width:459px;
  height:81px;
  background-image:url(./img/lefttopboxbg.jpg);
}
.leftbox
{
  position:absolute;
  left:0px;
  top:96px;
  width:136px;
  height:473px;
  background-image:url(./img/leftboxbg.gif);
}
.topbox
{
  position:absolute;
  left:545px;
  top:7px;
  width:180px;
  height:140px;
  border:2px solid black;
  background-color:white;
  background-image:url(./img/small_girl.jpg);
  background-repeat:no-repeat;
  background-position:94px 10px;
}
.menubox
{
  padding:2px 4px 2px 4px;
}
.menucaption
{
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  font-size:14px;
  height:20px;
  overflow:hidden;
}
.menucontent
{
  height:120px;
  overflow:auto;
  font-size:13px;
  font-weight:bold;
}
.middlebox
{
  position:absolute;
  left:610px;
  top:126px;
  border:2px solid black;
  height:211px;
  width:155px;
  background-image:url(./img/middleboxbg.jpg);
}
.bottombox
{
  position:absolute;
  left:486px;
  top:316px;
  height:188px;
  width:231px;
  background-image:url(./img/bottomboxbg.jpg);
  border:2px solid black;
}
.shadowbox
{
  position:absolute;
  left:118px;
  top:402px;
  width:369px;
  height:20px;
  background-image:url(./img/shadow.jpg);
}
.centerbox
{
  position:absolute;
  left:118px;
  top:73px;
  width:498px;
  height:329px;
  border:2px solid black;
  background-color:white;
}
.hoverbox:hover
{
  z-index:10;
}
.contentbox
{
  position:relative;
  top:20px;
  overflow:auto;
  margin:6px;
  height:300px;
}
.contentspacer
{
  float:right;
  height:54px;
  width:72px;
}
.footerbox
{
  position:absolute;
  left:130px;
  top:420px;
  width:350px;
  height:100px;
  overflow:auto;
}
.footercontent
{
  padding:2px 4px 2px 4px;
}
.listicon
{
  background-image:url(./img/listicon.gif);
  background-position:0px 2px;
  background-repeat:no-repeat;
  padding-left:13px;
}
.listicon:hover
{
  background-position:0px -11px;
}

Saschlong · 7. Juni 2006

Recht simpel:

Code:

#site
{
 position: absolute;
 top: 0px;
 left: 50%;
 margin: 20px 0px 0px -388px; /* der letzt wert rückt das ganze um die hälfte des gesamtcontainers nach links */
 width: 776px;
 }

Wenn die meisten Sachen bei Dir Bilder sind kannst Du auch auf den div-Amok verzichten. Das wird dann insgesamt sauberer

Btw: Hübsches Layout, sind die Bilders von Dir?

Suche

[HTML] Bildvorlage zu Quelltext

pcw

Lt. Commander

Anhänge

cheft

Lt. Junior Grade

pcw

Lt. Commander

Saschlong

Lt. Junior Grade

Ähnliche Themen