Brauche Hilfe zur Umsetzung eines Designs

xxxarndxxx · 26.08.2009

Hallo. Möchte ein Design (PSD) für Typo3 umsetzen.
Das design sieht so aus:

Habe die PSD Datei mit scilliert. Uund als DIV´s und CSS ausgeben lassen. Leider ist die Höhe des Contentes nun nicht variabel....und alles zerschießt es, wenn ein langer Text ansteht.

Kann mir jemand helfen das Problem zu lösen?

Der Code ist:

HTML:

<html>
<head>
<title>DEPROC Freizeitartikel GmbH</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--

div.Tabelle_01 {
    position:absolute;
    left:15%;
    top:0px;
    width:921px;
    height:1043px;
}

div.designvorlage-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:921px;
    height:15px;
}

div.designvorlage-02 {
    position:absolute;
    left:0px;
    top:15px;
    width:52px;
    height:69px;
}

div.designvorlage-03 {
    position:absolute;
    left:52px;
    top:15px;
    width:239px;
    height:109px;
}

div.designvorlage-04 {
    position:absolute;
    left:291px;
    top:15px;
    width:585px;
    height:69px;
}

div.designvorlage-05 {
    position:absolute;
    left:876px;
    top:15px;
    width:45px;
    height:1028px;
}

div.designvorlage-06 {
    position:absolute;
    left:0px;
    top:84px;
    width:52px;
    height:933px;
}

div.sprache {
    position:absolute;
    left:291px;
    top:84px;
    width:133px;
    height:40px;
    background-color:#353533;
}

div.submenue {
    position:absolute;
    left:424px;
    top:84px;
    width:452px;
    height:40px;
    background-color:#353533;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
}

div.designvorlage-09 {
    position:absolute;
    left:52px;
    top:124px;
    width:14px;
    height:292px;
}

div.header {
    position:absolute;
    left:66px;
    top:124px;
    width:796px;
    height:261px;
}

div.designvorlage-11 {
    position:absolute;
    left:862px;
    top:124px;
    width:14px;
    height:292px;
}

div.designvorlage-12 {
    position:absolute;
    left:66px;
    top:385px;
    width:19px;
    height:31px;
    background-color:#353533;
}

div.mainmenue {
    position:absolute;
    left:85px;
    top:385px;
    width:777px;
    height:31px;
    background-color:#353533;
    font-family:Arial, Helvetica, sans-serif;
    color:#ffffff;
    font-size:12px;
    font-weight:bold;
}

div.designvorlage-14 {
    position:absolute;
    left:52px;
    top:416px;
    width:14px;
    height:562px;
    background-color:#353533;
}

div.designvorlage-15 {
    position:absolute;
    left:66px;
    top:416px;
    width:19px;
    height:562px;
    background-color:#d6e1f4;
}

div.designvorlage-16 {
    position:absolute;
    left:85px;
    top:416px;
    width:777px;
    height:19px;
    background-color:#d6e1f4;
}

div.designvorlage-17 {
    position:absolute;
    left:862px;
    top:416px;
    width:14px;
    height:562px;
}

div.content {
    position:absolute;
    left:85px;
    top:435px;
    width:555px;
    height:526px;
    background-color:#d6e1f4;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style:normal;
}

div.designvorlage-19 {
    position:absolute;
    left:640px;
    top:435px;
    width:20px;
    height:526px;
    background-color:#d6e1f4;
}

div.rechts {
    position:absolute;
    left:660px;
    top:435px;
    width:182px;
    height:526px;
    background-color:#353533;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#ffffff;
    font-style:normal;
}

div.designvorlage-21 {
    position:absolute;
    left:842px;
    top:435px;
    width:20px;
    height:543px;
    background-color:#d6e1f4;
}

div.designvorlage-22 {
    position:absolute;
    left:85px;
    top:961px;
    width:757px;
    height:17px;
    background-color:#d6e1f4;
}

div.footer {
    position:absolute;
    left:52px;
    top:978px;
    width:824px;
    height:39px;
}

div.designvorlage-24 {
    position:absolute;
    left:0px;
    top:1017px;
    width:876px;
    height:26px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>

<body style="background-color:#BBBDBE; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">


<div class="Tabelle_01">

<div class="designvorlage-01"></div>


<div class="designvorlage-02">
        <img src="images/designvorlage_02.png" width="52" height="69" alt="" />
    </div>


    <div class="designvorlage-03">
        <img src="images/designvorlage_03.gif" width="239" height="109" alt="" />
    </div>


    <div class="designvorlage-04">
        <img src="images/designvorlage_04.gif" width="585" height="69" alt="" />
    </div>


    <div class="designvorlage-05">
        <img src="images/designvorlage_05.png" width="45" height="1028" alt="" />
    </div>


    <div class="designvorlage-06">
        <img src="images/designvorlage_06.png" width="52" height="933" alt="" />
    </div>


    <div class="sprache"></div>


<div class="submenue"><span class="menu_oben"><br>
</span></div>


<div class="designvorlage-09">
        <img src="images/designvorlage_09.png" width="14" height="292" alt="" />
    </div>


    <div class="header">
        <img src="images/header.png" width="796" height="261" alt="" />
    </div>


    <div class="designvorlage-11">
        <img src="images/designvorlage_11.png" width="14" height="292" alt="" />
    </div>


    <div class="designvorlage-12"></div>


    <div class="mainmenue"></div>


<div class="designvorlage-14"></div>


  <div class="designvorlage-15"></div>


    <div class="designvorlage-16"></div>


<div class="designvorlage-17">
        <img src="images/designvorlage_17.gif" width="14" height="562" alt="" />
    </div>


    <div class="content"></div>


<div class="designvorlage-19"></div>


<div class="rechts"></div>


<div class="designvorlage-21"></div>


<div class="designvorlage-22"></div>


<div class="footer">
        <img src="images/footer.gif" width="824" height="39" alt="" />
    </div>


    <div class="designvorlage-24">
        <img src="images/designvorlage_24.png" width="876" height="26" alt="" />
    </div>

</div>
<!-- End ImageReady Slices -->
</body>
</html>

Dennis Kovarik · 26.08.2009

AW: Brauche Hilfe zur Umsetzung eines Designs

Dynamischer Content, gestern noch was zu gepostet:

Und mal ne Frage: scilliert, was soll das sein???

Gruß

stb_87 · 27.08.2009

AW: Brauche Hilfe zur Umsetzung eines Designs

dnstylz schrieb:
Und mal ne Frage: scilliert, was soll das sein???

Gruß

Ich vermute mal gesliced

Lass in den betroffenen Bereichen die Höhenangabe komplett weg, dadurch passt sich dann die Höhe dem Inhalt an.

Dennis Kovarik · 27.08.2009

AW: Brauche Hilfe zur Umsetzung eines Designs

stb_87 schrieb:
Ich vermute mal gesliced

Achtung: Ironie...war nur zu lustig

Gruß

TMP2k1 · 28.08.2009

AW: Brauche Hilfe zur Umsetzung eines Designs

Ist das Problem jetzt schon gelöst?
Weil auf der Seite schaut's doch eigentlich ganz vernünftig aus. Oder verstehe ich das Problem falsch?
Kleiner Tipp am Rande: du solltest vielleicht mal gucken, ob du die header.png noch etwas kleiner bekommst. Das dauert ein wenig mit den 300+ KB, bis sich das durch die eine oder andere langsamere Leitung gequetscht hat