Probleme mit Content (Ecken, Länge und Abstand)

[nullinger]

Ich habe ein paar Probleme mit meinem Drupal- Design. Den aktuellen Stand findet ihr hier: EISENHART.BIZ | Bodybuilding und Ernährung auf einer Seite

• Mein erstes Problem ist, dass der Content in der Mitte nicht auf der Höhe der linken Boxen anfängt.
• Mein zweites Problem ist, dass ich dem Content runde Kanten verpassen möchte. Bei den Boxen habe ich es mittels CSS (-moz-border-radius) gemacht. Ich finde aber den Content nicht. Auch soll der weiße Hintergrund unten rechts eine runde Kante haben.
• Mein letztes Problem ist, dass die linke Spalte sich der Mitte von der Länge nicht anpasst. Andersrum besteht das gleiche Problem

Könnte mir da jemand helfen?
Hier noch die CSS-Datei

/*
 *  psd2css.css
 *
 *  This is your external CSS style sheet. It defines all of the CSS styles that you
 *  are using in your page.  If you are going to create multiple pages from the same
 *  PSD file (like a template), you will share this CSS style sheet between the various
 *  pages.
 *
 *  This file was originally generated at http://psd2cssonline.com 
 *  August 4, 2010, 8:45 am with psd2css Online version 1.79
 *
 */

body {
  margin: 0; padding: 0;
  /* This is the background image to the entire page that you
   * get because of the layer 'background _bodybg' that you created.
   * If you would like this layer to stay static relative to the
   * browser window (you don't want it to scroll with your content)
   * just add the word 'fixed' to the line below (before the ;). */
  background: url(hintergrund.jpg) 
  fixed
  no-repeat;
  width:100%;
  height:100%;
}

/* This is a wrapper for the mittig _center2 layer you made */
#Layer-2-wrapper {
  position: relative;
  width: 1105px;
  margin: auto;
}

/* You named this layer mittig _center2 */
#Layer-2 {
  position: absolute;
  margin-left:auto;
  margin-right:auto;
  top: +0px;
  width: 1105px;
  height: 260px;
  z-index: 2;
}

/* You named this layer copyright_drupal */
#Layer-3 {
  position: absolute;
  left: 311px;
  top: 259px;
  width: 777px;
  height: 49px;
  z-index: 3;
}

/* You named this layer content_frame */
#Layer-4 {
  position: absolute;
  left: 287px;
  top: 184px;
  width: 812px;
  height: 65px;
  z-index: 4;
}

/* You named this layer content_drupal */
.Layer-5 {
  position: relative;
  left: 24px;
  top: 0px;
  width: 777px;
  z-index: 5;
}

/* You named this layer left_frame */
#Layer-6 {
  position: absolute;
  left: 51px;
  top: 184px;
  width: 236px;
  height: 65px;
  z-index: 6;
}

/* You named this layer left_drupal */
.Layer-7 {
  position: relative;
  left: 11px;
  top: 0px;
  width: 200px;
  z-index: 7;
}

/* You named this layer header */
#Layer-8 {
  position: absolute;
  left: 4px;
  top: 11px;
  width: 1095px;
  height: 173px;
  z-index: 8;
}

/* You named this layer indexphp _link */
#Layer-9 {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 138px;
  height: 138px;
  z-index: 9;
}

/* You named this layer portal _linkover */
#Layer-10 {
  position: absolute;
  left: 165px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 10;
}

/* You named this layer portal _link */
#Layer-11 {
  position: absolute;
  left: 165px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 11;
}

/* You named this layer forum _linkover */
#Layer-12 {
  position: absolute;
  left: 257px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 12;
}

/* You named this layer forum _link */
#Layer-13 {
  position: absolute;
  left: 257px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 13;
}

/* You named this layer mitglieder _linkover */
#Layer-14 {
  position: absolute;
  left: 349px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 14;
}

/* You named this layer mitglieder _link */
#Layer-15 {
  position: absolute;
  left: 349px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 15;
}

/* You named this layer shop _linkover */
#Layer-16 {
  position: absolute;
  left: 441px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 16;
}

/* You named this layer shop _link */
#Layer-17 {
  position: absolute;
  left: 441px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 17;
}

/* You named this layer suche _linkover */
#Layer-18 {
  position: absolute;
  left: 533px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 18;
}

/* You named this layer suche _link */
#Layer-19 {
  position: absolute;
  left: 533px;
  top: 132px;
  width: 82px;
  height: 26px;
  z-index: 19;
}

/* You named this layer Frame Top 1000 */
.Layer-1000 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 812px;
  height: 10px;
  z-index: 1000;
  background-image: url(Layer-4.png);
}

/* You named this layer Frame Middle 1001 */
.Layer-1001 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 812px;
  z-index: 1001;
  background-image: url(Layer-1001.png);
}

/* You named this layer Frame Bottom 1002 */
.Layer-1002 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 812px;
  height: 5px;
  z-index: 1002;
  background-image: url(Layer-1002.png);
}

/* You named this layer Frame Top 1003 */
.Layer-1003 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 236px;
  height: 10px;
  z-index: 1003;
  background-image: url(Layer-6.png);
}

/* You named this layer Frame Middle 1004 */
.Layer-1004 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 236px;
  z-index: 1004;
  background-image: url(Layer-1004.png);
}

/* You named this layer Frame Bottom 1005 */
.Layer-1005 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 236px;
  height: 15px;
  z-index: 1005;
  background-image: url(Layer-1005.png);
}

/* Here are some examples of how you might want to change the
 * look and behavior of the links on your page.  Some examples for
 * further customization are included in comments.  */
a {
  cursor: pointer;
  outline: none;
}
a:link { color: #E49A0B; }
a:visited { color: #E49A0B; }
a:hover { color: #343434;}
  /* text-decoration: underline; */
  /* font-weight: bold; */
}

/* Some extra stuff here to give you some ideas and examples 
 * about how else you can customize your Drupal theme.
 *
 * A great tool to use to figure out what else you want to
 * put here is Firebug for Firefox.  Use psd2css Online
 * to generate your theme, install it, then while looking
 * at your pages, use Firebug to 'inspect' the elements that
 * you want to change.  Add or modify the changes here and 
 * refresh to see your changes.  */

/* Text color for most text rendered by Drupal  */
body { color: #666; }

/* The login form is center aligned by default, this puts it to the left  */
#user-login-form { text-align: left; }

/* Color of the text for the login form  */
.form-item label { color: #888; }

/* Color of the active list element links  */
li a.active { color: #444; }

/* This helps while using _frame with drupal menu content */
.block { margin-bottom: 0; }

.node { margin-top: 0; }

 

[nullinger]

Hier noch die PHP-Datei

Die dazugehörige PHP-Datei hat leider nicht mehr in den ersten Post gepasst. Vielleicht liegt auch hier der "Fehler":

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title><?php print $head_title ?></title>

<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>


</head>
<body>

  <!-- This is 'mittig _center2' -->
  <div id="Layer-2-wrapper">
    <div id="Layer-2"  >
      <img src="<?php print $base_path.$directory  ?>/Layer-2.png" width="1105" height="326" alt="mittig "  class="pngimg" />
      <!-- This is 'header' -->
      <div id="Layer-8"  >
        <img src="<?php print $base_path.$directory  ?>/Layer-8.png" width="1095" height="173" alt="header" class="pngimg"  />
        <!-- This is 'suche _link' -->
        <div id="Layer-19"  >
          <a href="search/"><img src="<?php print  $base_path.$directory ?>/Layer-19.png" width="82" height="26"  alt="suche " class="pngimg" border="0" /></a></div>

        <!-- This is 'suche _linkover' -->
        <div id="Layer-18"  >
          <a href="search/"><img src="<?php print  $base_path.$directory ?>/Layer-18.png" width="82" height="26"  alt="suche " class="pngimg" border="0" /></a></div>

        <!-- This is 'shop _link' -->
        <div id="Layer-17"  >
          <a href="shop/"><img src="<?php print  $base_path.$directory ?>/Layer-17.png" width="82" height="26"  alt="shop " class="pngimg" border="0" /></a></div>

        <!-- This is 'shop _linkover' -->
        <div id="Layer-16"  >
          <a href="shop/"><img src="<?php print  $base_path.$directory ?>/Layer-16.png" width="82" height="26"  alt="shop " class="pngimg" border="0" /></a></div>

        <!-- This is 'mitglieder _link' -->
        <div id="Layer-15"  >
          <a href="forum/index.php?page=MembersList"><img  src="<?php print $base_path.$directory ?>/Layer-15.png" width="82"  height="26" alt="mitglieder " class="pngimg" border="0"  /></a></div>

        <!-- This is 'mitglieder _linkover' -->
        <div id="Layer-14"  >
          <a href="forum/index.php?page=MembersList"><img  src="<?php print $base_path.$directory ?>/Layer-14.png" width="82"  height="26" alt="mitglieder " class="pngimg" border="0"  /></a></div>

        <!-- This is 'forum _link' -->
        <div id="Layer-13"  >
          <a href="forum/"><img src="<?php print  $base_path.$directory ?>/Layer-13.png" width="82" height="26"  alt="forum " class="pngimg" border="0" /></a></div>

        <!-- This is 'forum _linkover' -->
        <div id="Layer-12"  >
          <a href="forum/"><img src="<?php print  $base_path.$directory ?>/Layer-12.png" width="82" height="26"  alt="forum " class="pngimg" border="0" /></a></div>

        <!-- This is 'portal _link' -->
        <div id="Layer-11"  >
          <a href="index.php"><img src="<?php print  $base_path.$directory ?>/Layer-11.png" width="82" height="26"  alt="portal " class="pngimg" border="0" /></a></div>

        <!-- This is 'portal _linkover' -->
        <div id="Layer-10"  >
          <a href="index.php"><img src="<?php print  $base_path.$directory ?>/Layer-10.png" width="82" height="26"  alt="portal " class="pngimg" border="0" /></a></div>

        <!-- This is 'indexphp _link' -->
        <div id="Layer-9"  >
          <a href="index.php"><img src="<?php print  $base_path.$directory ?>/Layer-9.png" width="138" height="138"  alt="indexphp " class="pngimg" border="0" /></a></div>

      </div>

      <!-- This is 'left_frame' -->
      <div id="Layer-6"  >
    
        <!-- This is 'Frame Top 1003' -->
        <div class="Layer-1003 pngimg" >
      
        </div>

        <!-- This is 'Frame Middle 1004' -->
        <div class="Layer-1004 pngimg" >
      
          <!-- This is 'left_drupal' -->
          <div class="Layer-7 textcontent" >
        <?php print $left ?>

          </div>

        </div>

        <!-- This is 'Frame Bottom 1005' -->
        <div class="Layer-1005 pngimg" >
      
        </div>

      </div>

      <!-- This is 'content_frame' -->
      <div id="Layer-4"  >
    
        <!-- This is 'Frame Top 1000' -->
        <div class="Layer-1000 pngimg" >
      
        </div>

        <!-- This is 'Frame Middle 1001' -->
        <div class="Layer-1001 pngimg" >
      
          <!-- This is 'content_drupal' -->
          <div class="Layer-5 textcontent" >
        <?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content ?>
          </div>

        </div>

        <!-- This is 'Frame Bottom 1002' -->
        <div class="Layer-1002 pngimg" >
       
        </div>
<?php print $footer_message . $footer ?>
      </div>

      <!-- This is 'copyright_drupal' -->
      <div id="Layer-3" class="textcontent"  >
    <?php print $copyright ?>

      </div>

    </div>
  </div>

  <?php print $closure ?>

</body>
</html>

 

[neuroleptika]

Mein letztes Problem ist, dass die linke Spalte sich der Mitte von der Länge nicht anpasst. Andersrum besteht das gleiche Problem

Durch die absoluten Positionierungen ist die Hintergrundgrafik von body das einzige was was mitwachsen kann.
Wenn du daran nichts ändern möchtest, bleibt dir nur diese Grafik zu bearbeiten. (Den horizontal mittigen Bereich mit weiß füllen und über background-position zentrieren.)

Mein erstes Problem ist, dass der Content in der Mitte nicht auf der Höhe der linken Boxen anfängt.

Du hast leere Elemente als Abstandhalter im html. Mit Firebug kannst du sie aufspüren.

Wenn du dich nicht in css einlesen möchtest verzichte doch einfach auf diese Grafik.
Das Holzimitat-Laminat wirkt eh nicht allzu "Eisenhart" ;) .

 

[nullinger]

Durch die absoluten Positionierungen ist die Hintergrundgrafik von body das einzige was was mitwachsen kann.
Wenn du daran nichts ändern möchtest, bleibt dir nur diese Grafik zu bearbeiten. (Den horizontal mittigen Bereich mit weiß füllen und über background-position zentrieren.)

Natürlich würde ich daran was ändern wollen. Möchte ja, dass es irgendwann mal passt. :-)

Du hast leere Elemente als Abstandhalter im html. Mit Firebug kannst du sie aufspüren.

Ja, das habe ich gestern noch rausgefunden und jetzt passt es von der Höhe.

Wenn du dich nicht in css einlesen möchtest verzichte doch einfach auf diese Grafik.
Das Holzimitat-Laminat wirkt eh nicht allzu "Eisenhart" ;) .

Es ist ja einigermaßen vorangegangen, aber jetzt scheitere ich einfach. Da hier wahrscheinlich einige User mit mehr Ahnung "rumlaufen", dachte ich mir, dass mir hier vielleicht geholfen wird.