Ich habe ein paar Probleme mit meinem Drupal- Design. Den aktuellen Stand findet ihr hier: http://www.eisenhart.biz/neu
* 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 die CSS-Datei
Und hier die PHP-Datei:
* 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 die CSS-Datei
Code:
/*
* 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; }
PHP:
<!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>
