Design für Drupal coden
Eingetragen von nikxx (69)am 03.08.2010 - 21:06 Uhr in
Ich bin gerade dabei mein Design an Drupal anzupassen.
Leider krieg ich die Texte nicht in den Content. Die Texte befinden sich am Ende des Designs.
Kann mir jemand sagen, wie ich die in den Content bringe bzw. wo der Fehler liegen könnte?
Hier ist die Seite: www.eisenhart.biz/neu
Hier mal der Code der CSS
/*
* 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 3, 2010, 7:23 pm 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 hintergrund_frame */
#Layer-3 {
position: absolute;
left: 51px;
top: 184px;
width: 1048px;
height: 65px;
z-index: 3;
}
/* You named this layer content_drupal */
#Layer-4 {
position: absolute;
left: 260px;
top: -40px;
width: 777px;
height: 40px;
z-index: 4;
overflow: auto;
}
/* You named this layer left_drupal */
.Layer-5 {
position: relative;
left: 11px;
top: 0px;
width: 200px;
z-index: 5;
}
/* You named this layer header */
#Layer-6 {
position: absolute;
left: 4px;
top: 11px;
width: 1095px;
height: 173px;
z-index: 6;
}
/* You named this layer indexphp _link */
#Layer-7 {
position: absolute;
left: 9px;
top: 9px;
width: 138px;
height: 138px;
z-index: 7;
}
/* You named this layer portal _linkover */
#Layer-8 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 8;
}
/* You named this layer portal _link */
#Layer-9 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 9;
}
/* You named this layer forum _linkover */
#Layer-10 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 10;
}
/* You named this layer forum _link */
#Layer-11 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 11;
}
/* You named this layer mitglieder _linkover */
#Layer-12 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 12;
}
/* You named this layer mitglieder _link */
#Layer-13 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 13;
}
/* You named this layer shop _linkover */
#Layer-14 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 14;
}
/* You named this layer shop _link */
#Layer-15 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 15;
}
/* You named this layer suche _linkover */
#Layer-16 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 16;
}
/* You named this layer suche _link */
#Layer-17 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 17;
}
/* You named this layer Frame Top 1000 */
.Layer-1000 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
height: 10px;
z-index: 1000;
background-image: url(Layer-3.png);
}
/* You named this layer Frame Middle 1001 */
.Layer-1001 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
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: 1048px;
height: 15px;
z-index: 1002;
background-image: url(Layer-1002.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: #F88; }
a:visited { color: #F88; }
a:hover {
color: #F00;
/* 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; }Und hier der Code der page.tpl
<!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>
<!-- Some Drupal Defaults -->
<?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="260" alt="mittig " class="pngimg" />
<!-- This is 'header' -->
<div id="Layer-6" >
<img src="<?php print $base_path.$directory ?>/Layer-6.png" width="1095" height="173" alt="header" class="pngimg" />
<!-- This is 'suche _link' -->
<div id="Layer-17" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-17.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'suche _linkover' -->
<div id="Layer-16" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-16.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _link' -->
<div id="Layer-15" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-15.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _linkover' -->
<div id="Layer-14" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-14.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _link' -->
<div id="Layer-13" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-13.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _linkover' -->
<div id="Layer-12" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-12.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _link' -->
<div id="Layer-11" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-11.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _linkover' -->
<div id="Layer-10" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-10.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _link' -->
<div id="Layer-9" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-9.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _linkover' -->
<div id="Layer-8" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-8.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'indexphp _link' -->
<div id="Layer-7" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-7.png" width="138" height="138" alt="indexphp " class="pngimg" border="0" /></a></div>
</div>
<!-- This is 'hintergrund_frame' -->
<div id="Layer-3" >
<!-- This is 'Frame Top 1000' -->
<div class="Layer-1000 pngimg" >
</div>
<!-- This is 'Frame Middle 1001' -->
<div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div id="Layer-4" class="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 ?>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>- Anmelden oder Registrieren um Kommentare zu schreiben
Hallo, wenn mich nicht alles
am 03.08.2010 - 22:00 Uhr
Hallo,
wenn mich nicht alles täuscht ....
.Layer-1001 (psd2css.css - Zeile 208) ist viel zu breit - im Moment 1048 px
Das müsstest Du - schätzungsweise auf 259px stellen.
.Layer-1002 (psd2css.css - Zeile 218) ist auch zu breit - im Moment sind das auch 1048 px
Stell das mal auf einen Breite von 789px
Nun floatest Du .Layer-1001 links (psd2css.css - Zeile 208) mit float:left
Nun müssten beide Container nebeneinader dargestellt werden und der Text - welcher momentan unten zu sehen ist - müsste im Mainbereich aufgeführt werden.
259px + 789px ergibt 1048px - genau die Breite des Parent-Divs .... (eventuell 2 px abziehen -> 257px)
Gruß Matthias
Danke schon mal. Habe es mal
am 03.08.2010 - 22:35 Uhr
Ich habe das jetzt mal fast komplett so geändert, wie du es geschrieben hast.
Habe bei Layer1002 width wieder auf 1048px geändert und jetzt passt es zumindest von der Breite.
Leider geht der Text unten ausm Content raus. Auch ist der Contenthintergrund nicht weiß.
Im Anhang mal nen Screenshot.
Hallo nikxx, das ist doch
am 03.08.2010 - 23:03 Uhr
Hallo nikxx,
das ist doch etwas komplizierter.
Gut dass Du die Änderungen wieder rückgängig gemacht hast.
Kennst Du Dich mit der node-Dein_inhaltsytp.tpl.php aus? Hast Du Firebug installiert?
Du musst - meiner Meinung nach - Anpassungen in der node-Dein_inhaltsytp.tpl.php vornhemen - meiner Meinung nach wird der "Content" im falschen Div ausgegeben bzw. man müsste noch einige zusätzliche DIVs erzeugen damit das Floaten klappt aber der weiße Hintergund nicht verschwindet.
Das ist aber garnicht so einfach zu erklären. Ich müsste das auch erstmal ausprobieren.
Meine Fähigkeiten bzw.
am 03.08.2010 - 23:05 Uhr
Meine Fähigkeiten bzw. Kenntnisse sind da sehr begrenzt. Habe aber Firebug installiert.
Das Dateien hab ich auf psd2cssonline.com machen lassen.
Edit: Ich habe nur eine node.tpl.php und da steht Folgendes:
<?php// $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $
?>
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
<?php if ($picture) {
print $picture;
}?>
<?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
<span class="submitted"><?php print $submitted?></span>
<div class="taxonomy"><?php print $terms?></div>
<div class="content"><?php print $content?></div>
<?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?>
</div>
Nachtrag: Meiner Meinung nach
am 03.08.2010 - 23:03 Uhr
Nachtrag:
Meiner Meinung nach - müsste sich
<div class="Layer-4 textcontent">innerhalb von .Layer-1001 befinden und NICHT innerhalb von .Layer-1002.Ändere das bitte mal in der node....tpl.php ab!
Jetzt haben wir ein biserl
am 03.08.2010 - 23:17 Uhr
Jetzt haben wir ein biserl aneinander vorbeigeschrieben.
Ich habe bei dem Design nur eine node.tpl.php mit folgendem Inhalt:
<?php// $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $
?>
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
<?php if ($picture) {
print $picture;
}?>
<?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
<span class="submitted"><?php print $submitted?></span>
<div class="taxonomy"><?php print $terms?></div>
<div class="content"><?php print $content?></div>
<?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?>
</div>
In der page.tpl.php steht was von "Layer-4 textcontent". Die hab ich oben (1. Beitrag) gepostet.
Bin dabei - moment plz - hab
am 03.08.2010 - 23:19 Uhr
Bin dabei - moment plz - hab mich schon ne Weile nicht mehr mit CSS auseinader gesetzt. Melde mich gleich nochmal.
Ja, is kein Problem. :-) Bin
am 03.08.2010 - 23:21 Uhr
Ja, is kein Problem. :-)
Bin ja froh, dass sich überhaupt jemand gemeldet hat.
Also irgendwie haben die
am 03.08.2010 - 23:25 Uhr
Also irgendwie haben die Designer die DIVs verschoben - meiner Meiung nach.
.Layer-1002 ist der untere abschließende "Balken" daher sollte der Content nicht in diesem Div vorhanden sein. Er müsste "darüber" eingebunden werden.
Ändere in der page.tpl folgendes ...
<div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
</div>
durch
<div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
<?php print $content ?>
</div>
Hierbei wird der Content in den oberen Div verschoben.
<?php print $content ?>muss unten raus gelöscht werden. Probiere es bitte erstmal so aus.Eventuell müsste
<?php print $content ?>noch einen eigenen DIV bekommen z.B.<div class="Layer-5-Content" ><?php print $content ?></div>Habe es geändert und habe die
am 03.08.2010 - 23:33 Uhr
Habe es geändert und habe die Texte nun doppelt. www.eisenhart.biz/neu
Wo soll ich denn das
<?phpprint $content
?>
edit: Habe es bei Layer-4 rausgelöscht und jetzt hab ich die Texte nur noch einmal. Aber die befinden sich immer noch nicht wirklich da, wo se sollen. :-)
<?php print $content ?> muss
am 03.08.2010 - 23:42 Uhr
<?php print $content ?>muss jetzt einen eigenen DIV bekommenSchreib mal in die page.tpl.php rein ....
<div class="Layer-5-Content" ><?php print $content ?></div><div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?></div>
</div>
In Deine psd2css.css schreibst Du danach rein.
.Layer-5-Content { width: 777px; }Erstmal so - dann reload und anschauen ;-)
Nachtrag: .Layer-5 (Zeile 68)
am 03.08.2010 - 23:44 Uhr
Nachtrag:
.Layer-5 (Zeile 68) bekommt zusätzlich float:left
Habs so übernommen. Jetzt
am 03.08.2010 - 23:51 Uhr
Habs so übernommen. Jetzt habe ich die Texte vor und hinter dem Content.
Edit: Zudem ist nur der obere Teil einigermaßen dort, wo er sein soll. Alles was nach dem linken Menü kommt ist wieder darunter.
Puhhh ... Ergänze
am 03.08.2010 - 23:53 Uhr
Puhhh ...
Ergänze bitte
.Layer-5-Content { width: 777px; } mit z-index:5;=
.Layer-5-Content { width: 777px; z-index:5; }reload plz
Nachtrag:
.Layer-5 breiter machen
width: 255px, (Zeile 68)
Hab ich gemacht. Hat sich
am 03.08.2010 - 23:59 Uhr
Hab ich gemacht. Hat sich nichts geändert.
Ich gehe mal davon aus, dass ich das .Layer-5-Content irgendwo in die psd2css packen kann, oder?
Habe es einfach nach .layer-102 eingefügt
Edit: Habe die Breite angepasst. Jetzt ist es so gut wie im Content; zumindest der obere Teil. Frag mich nur, wie die Texte hinter das Design kommen. :-)
Zitat: Ich gehe mal davon
am 04.08.2010 - 00:05 Uhr
Ich gehe mal davon aus, dass ich das .Layer-5-Content irgendwo in die psd2css packen kann, oder?
Habe es einfach nach .layer-102 eingefügt
Jo - ist ok.
Also - das ist ehct kompliziert.
Die ganzen "z-index-Werte" bringen mich durcheinandern - ich frage mich auch warum die Bilder einmal ganz links (halb hinter dem Design) angezeigt werden und gleichzeitg nochmal im Main-Bereich obwohl die Ausgabe nur einmal erfolgt. Grübel
Beim .Layer-5 stelle die Breite bitte wieder zurück auf 200 px
Dafür ändere jetzt bei Layer-5-Content
.Layer-5-Content {margin-left: 50px; width: 727px; z-index:5; }(Breite wurde angepasst)Bitte mal ausprobierne und relaod
Geändert. Jetzt haben sich
am 04.08.2010 - 00:08 Uhr
Geändert. Jetzt haben sich die Bilder ganz hinter das Design geschoben.
Die beiden Dateien sehen jetzt so aus:
psd2css
/*
* 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 3, 2010, 7:23 pm 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 hintergrund_frame */
#Layer-3 {
position: absolute;
left: 51px;
top: 184px;
width: 1048px;
height: 65px;
z-index: 3;
}
/* You named this layer content_drupal */
#Layer-4 {
position: absolute;
left: 260px;
top: -40px;
width: 777px;
height: 40px;
z-index: 4;
overflow: auto;
}
/* You named this layer left_drupal */
.Layer-5 {
position: relative;
left: 11px;
top: 0px;
width: 200px;
float: left;
z-index: 5;
}
/* You named this layer header */
#Layer-6 {
position: absolute;
left: 4px;
top: 11px;
width: 1095px;
height: 173px;
z-index: 6;
}
/* You named this layer indexphp _link */
#Layer-7 {
position: absolute;
left: 9px;
top: 9px;
width: 138px;
height: 138px;
z-index: 7;
}
/* You named this layer portal _linkover */
#Layer-8 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 8;
}
/* You named this layer portal _link */
#Layer-9 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 9;
}
/* You named this layer forum _linkover */
#Layer-10 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 10;
}
/* You named this layer forum _link */
#Layer-11 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 11;
}
/* You named this layer mitglieder _linkover */
#Layer-12 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 12;
}
/* You named this layer mitglieder _link */
#Layer-13 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 13;
}
/* You named this layer shop _linkover */
#Layer-14 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 14;
}
/* You named this layer shop _link */
#Layer-15 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 15;
}
/* You named this layer suche _linkover */
#Layer-16 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 16;
}
/* You named this layer suche _link */
#Layer-17 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 17;
}
/* You named this layer Frame Top 1000 */
.Layer-1000 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
height: 10px;
z-index: 1000;
background-image: url(Layer-3.png);
}
/* You named this layer Frame Middle 1001 */
.Layer-1001 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
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: 1048px;
height: 15px;
z-index: 1002;
background-image: url(Layer-1002.png);
}
.Layer-5-Content {margin-left: 50px; width: 727px; z-index:5; }
/* 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: #F88; }
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; }
page.tpl.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>
<!-- Some Drupal Defaults -->
<?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="260" alt="mittig " class="pngimg" />
<!-- This is 'header' -->
<div id="Layer-6" >
<img src="<?php print $base_path.$directory ?>/Layer-6.png" width="1095" height="173" alt="header" class="pngimg" />
<!-- This is 'suche _link' -->
<div id="Layer-17" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-17.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'suche _linkover' -->
<div id="Layer-16" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-16.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _link' -->
<div id="Layer-15" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-15.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _linkover' -->
<div id="Layer-14" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-14.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _link' -->
<div id="Layer-13" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-13.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _linkover' -->
<div id="Layer-12" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-12.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _link' -->
<div id="Layer-11" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-11.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _linkover' -->
<div id="Layer-10" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-10.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _link' -->
<div id="Layer-9" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-9.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _linkover' -->
<div id="Layer-8" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-8.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'indexphp _link' -->
<div id="Layer-7" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-7.png" width="138" height="138" alt="indexphp " class="pngimg" border="0" /></a></div>
</div>
<!-- This is 'hintergrund_frame' -->
<div id="Layer-3" >
<!-- This is 'Frame Top 1000' -->
<div class="Layer-1000 pngimg" >
</div>
<!-- This is 'Frame Middle 1001' -->
<div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 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 $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
<div class="Layer-5-Content" ><?php print $content ?></div>
</body>
</html>
Poste mal bitte Deine
am 04.08.2010 - 00:09 Uhr
Poste mal bitte Deine page.tpl.php
Edit:Ahhh - Du warst schneller ;-) moment
Ganz am Ende der page.tpl.php
am 04.08.2010 - 00:11 Uhr
Ganz am Ende der page.tpl.php ist ein Fehler drin
Ersetze ....
<?php print $closure ?><div class="Layer-5-Content" ><?php print $content ?></div>
</body>
</html>
durch ..
<?php print $closure ?></body>
</html>
Reload plz
Oh verdammt, das hab ich
am 04.08.2010 - 00:16 Uhr
Oh verdammt, das hab ich vergessen wieder zu löschen. Jetzt sind die Bilder hinterm Design weg. :-)
Nur die Texte sin noch nicht ganz da wo se sein sollen.
Soooo - probiere bitte
am 04.08.2010 - 00:18 Uhr
Soooo - probiere bitte folgendes aus.
.Layer-5-Content { float:right; margin-left: 50px; width: 727px; z-index:5; }Wir müssen den Content nach rechts bekommen - im Moment umfließt er den Linkblock(links) noch - Abstand passt auch noch nicht.
reload plz
Jetzt passt die Position der
am 04.08.2010 - 00:20 Uhr
Jetzt passt die Position der Texte, aber des Designs nicht.
Zudem ist der Footer nicht mehr unten, sondern oben.
Probiere bitte folgendes
am 04.08.2010 - 00:22 Uhr
Probiere bitte folgendes aus
.Layer-1002 (Zeile 219)
.Layer-1002 + clear:left;
reload
Oh ja, es wird immer
am 04.08.2010 - 00:23 Uhr
Oh ja, es wird immer besser.
Content länger und die Texte weiter nach links.
.Layer-5-Content {
am 04.08.2010 - 00:25 Uhr
.Layer-5-Content { float:right; width: 777px; z-index:5; }<- habe "margin" entfernt und die Breite wieder erhöht (passe die Breite bitte so an wie es für Dich am besten passt) Du siehst ja wie sich der DIV verändert)Ändere die page.tpl.php bitte
am 04.08.2010 - 00:33 Uhr
Ändere die page.tpl.php bitte folgendermaßen
Von
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 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 $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
zu ....
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<?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 $feed_icons ?>
<?php print $footer_message . $footer ?>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
reaload plz
Habe die Breite angepasst.
am 04.08.2010 - 00:34 Uhr
Habe die Breite angepasst. Das Problem ist aber, dass der Text leicht über den Rand geht. Egal, wie breit ich es mache.
Edit: War zu langsam. Habe jetzt auch die page.tpl.php geändert. Wieder doppelter Text, aber der Content is länger.
Edit2: Habe das zweite "
<?phpprint $content
?>
Puhhh - wie Du ja siehst, ist
am 04.08.2010 - 00:39 Uhr
Puhhh - wie Du ja siehst, ist der Content - nach unten hin - noch nicht komplett im weißen Hintergrund - auch die Google-Ads sind abgeschlagen.
Da ist noch irgendwo der Wurm drin - moment ....
Ja, das seh ich. :-) Ich
am 04.08.2010 - 00:40 Uhr
Ja, das seh ich. :-)
Ich möchte mich zwischendrin trotzdem schon mal für deine Geduld um die Uhrzeit bedanken. Egal, wie das mit dem Design jetzt endet.
"block-block-7" an welcher
am 04.08.2010 - 00:51 Uhr
"block-block-7" an welcher Stelle gibst Du den aus? Verwaltung -> Blöcke?
In der Fußzeile wird der
am 04.08.2010 - 00:56 Uhr
In der Fußzeile wird der ausgegeben.
Edit: Ich sehe gerade, dass wenn ich in einem Artikel bin, dass dann die Breadcumbs keinen Platz zwischen Artikel und Header haben. Werden dann nach links verschoben.
Im Adminbereich befindet sich ein ganzer Inhalt im linken Block.
Änder bitte <?php print $left
am 04.08.2010 - 00:55 Uhr
Änder bitte
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<?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 $feed_icons ?>
<?php print $footer_message . $footer ?>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
zu
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
jep, jetzt ist schon mal das
am 04.08.2010 - 01:00 Uhr
jep, jetzt ist schon mal das rss-feed icon von oben weg.
Hatte meinen letzten Beitrag editiert. Mach mal kurz nen Screenshot.
Probiere bitte mal folgendes
am 04.08.2010 - 01:02 Uhr
Probiere bitte mal folgendes aus.
.Layer-1002 (Zeile 219)
.Layer-1002 + clear:right; (nicht left)
dann mal relaod .....
:-)
am 04.08.2010 - 01:03 Uhr
:-)
OH JA, das sieht schon besser
am 04.08.2010 - 01:04 Uhr
OH JA, das sieht schon besser aus.
Der Footer ist jedoch noch nicht außerhalb des weißen Bereichs.
Soo - Breadcumbs - moment
am 04.08.2010 - 01:05 Uhr
Soo - Breadcumbs - moment ....
Footer auch moment plz ;-)
Ich werde der Letzte sein,
am 04.08.2010 - 01:06 Uhr
Ich werde der Letzte sein, der dich auch nur irgendwie stresst. :-)
Ändern von <?php print $left
am 04.08.2010 - 01:08 Uhr
Ändern von
<?php print $left ?>
</div>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
zu
<?php print $left ?>
</div>
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
Der Platz oben drüber passt
am 04.08.2010 - 01:10 Uhr
Der Platz oben drüber passt auf jeden Fall schon mal. Nur is der Bereich nicht da, wo er sein soll.
Wo willst Du die Breadcrumbs
am 04.08.2010 - 01:11 Uhr
Wo willst Du die Breadcrumbs hinhaben? Über die Überschrift? Daneben? Weglassen?
Ne, einfach über die
am 04.08.2010 - 01:14 Uhr
Ne, einfach über die Überschrift. Also so, wie es jetzt ist.
Nur ist das Ganze noch zu weit links und die Linie geht auch zu weit nach links
Ändern von <?php print $left
am 04.08.2010 - 01:17 Uhr
Ändern von
<?php print $left ?>
</div>
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<div class="Layer-5-Content" ><?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
zu
<?php print $left ?>
</div>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<div class="Layer-5-Content" >
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
Drupal war gerade offline.
am 04.08.2010 - 01:31 Uhr
Drupal war gerade offline.
Das Menü zum Bearbeiten der Artikel is noch zu weit links. Das hab ich vorhin gemeint. Screenshot ist im Anhang.
Sofern du überhaupt noch da sein solltest.
So, für heute muss ich Schluß
am 04.08.2010 - 01:33 Uhr
So,
sorry aber für heute muss ich leider Schluß machen - schon spät - ab ins Bett ...
Schau Dir bitte an was wir bisher gemacht haben - ich hoffe dass Du das ein wenig nachvollziehen kannst. Wir können ansonsten heute Abend weiter machen ...
Wenn Du mit Drupal arbeiten willst, ist es wichtig CSS zu lernern (ein bißchen) und zu wissen wie die page.tpl.php + node.tpl.php aufgebaut sind usw.
Ist eigentlich alles sehr logisch aufgebaut.
Bin jetzt erstmal off (schnarch)
Gruß Matthias
Okay, dann bedanke ich mich
am 04.08.2010 - 01:34 Uhr
Okay, dann bedanke ich mich nochmal!
Klasse, dass du so lange durchgehalten hast. :-)
Werde es erst alleine versuchen und mich evtl. heute Abend wieder melden.
Danke!
Ich habe es jetzt alles fast
am 04.08.2010 - 09:09 Uhr
Ich habe es jetzt alles fast hinbekommen. Das Menü zum Bearbeiten is an der richtigen Stelle und der Footer is außerhalb des weißen Bereichs.
Jetzt hab ich nur noch ein Problem mit der linken Seitenleiste. Wenn ich auf "Mein Konto" klicke, ist irgendwie wieder alles verschoben.
Zudem möchte ich den Anrisstexten eine feste größe geben, damit die Links "Weiterlesen" und "Bookmark" unter dem Bild sind.
Auch den Footer möchte ich ein Stück vom Content wegkriegen, damit es nicht so rangeklatsct aussieht. Die Ränder am unteren Contentende sind leider auch nicht rund.
Vielleicht hast du/ ihr da noch nen Tipp. :-)
Hier nochmal die zwei Dateien.
psd2css.css
/*
* 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 3, 2010, 7:23 pm 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 hintergrund_frame */
#Layer-3 {
position: absolute;
left: 51px;
top: 184px;
width: 1048px;
height: 65px;
z-index: 3;
}
/* You named this layer content_drupal */
#Layer-4 {
position: absolute;
left: 260px;
top: -40px;
width: 777px;
height: 40px;
z-index: 4;
overflow: auto;
}
/* You named this layer left_drupal */
.Layer-5 {
position: relative;
left: 11px;
top: 0px;
width: 200px;
float: left;
z-index: 5;
}
/* You named this layer header */
#Layer-6 {
position: absolute;
left: 4px;
top: 11px;
width: 1095px;
height: 173px;
z-index: 6;
}
/* You named this layer indexphp _link */
#Layer-7 {
position: absolute;
left: 9px;
top: 9px;
width: 138px;
height: 138px;
z-index: 7;
}
/* You named this layer portal _linkover */
#Layer-8 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 8;
}
/* You named this layer portal _link */
#Layer-9 {
position: absolute;
left: 165px;
top: 132px;
width: 82px;
height: 26px;
z-index: 9;
}
/* You named this layer forum _linkover */
#Layer-10 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 10;
}
/* You named this layer forum _link */
#Layer-11 {
position: absolute;
left: 257px;
top: 132px;
width: 82px;
height: 26px;
z-index: 11;
}
/* You named this layer mitglieder _linkover */
#Layer-12 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 12;
}
/* You named this layer mitglieder _link */
#Layer-13 {
position: absolute;
left: 349px;
top: 132px;
width: 82px;
height: 26px;
z-index: 13;
}
/* You named this layer shop _linkover */
#Layer-14 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 14;
}
/* You named this layer shop _link */
#Layer-15 {
position: absolute;
left: 441px;
top: 132px;
width: 82px;
height: 26px;
z-index: 15;
}
/* You named this layer suche _linkover */
#Layer-16 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 16;
}
/* You named this layer suche _link */
#Layer-17 {
position: absolute;
left: 533px;
top: 132px;
width: 82px;
height: 26px;
z-index: 17;
}
/* You named this layer Frame Top 1000 */
.Layer-1000 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
height: 10px;
z-index: 1000;
background-image: url(Layer-3.png);
}
/* You named this layer Frame Middle 1001 */
.Layer-1001 {
position: relative;
left: 0px;
top: 0px;
width: 1048px;
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: 1048px;
height: 0px;
z-index: 1002;
clear: right;
background-image: url(Layer-1002.png);
}
.Layer-5-Content { float:right; width:775px; z-index:5; margin:1em;}
/* 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: #F88; }
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; }
Und die page.tpl.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>
<!-- Some Drupal Defaults -->
<?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="260" alt="mittig " class="pngimg" />
<!-- This is 'header' -->
<div id="Layer-6" >
<img src="<?php print $base_path.$directory ?>/Layer-6.png" width="1095" height="173" alt="header" class="pngimg" />
<!-- This is 'suche _link' -->
<div id="Layer-17" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-17.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'suche _linkover' -->
<div id="Layer-16" >
<a href="search/"><img src="<?php print $base_path.$directory ?>/Layer-16.png" width="82" height="26" alt="suche " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _link' -->
<div id="Layer-15" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-15.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'shop _linkover' -->
<div id="Layer-14" >
<a href="shop/"><img src="<?php print $base_path.$directory ?>/Layer-14.png" width="82" height="26" alt="shop " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _link' -->
<div id="Layer-13" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-13.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'mitglieder _linkover' -->
<div id="Layer-12" >
<a href="forum/index.php?page=MembersList"><img src="<?php print $base_path.$directory ?>/Layer-12.png" width="82" height="26" alt="mitglieder " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _link' -->
<div id="Layer-11" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-11.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'forum _linkover' -->
<div id="Layer-10" >
<a href="forum/"><img src="<?php print $base_path.$directory ?>/Layer-10.png" width="82" height="26" alt="forum " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _link' -->
<div id="Layer-9" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-9.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'portal _linkover' -->
<div id="Layer-8" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-8.png" width="82" height="26" alt="portal " class="pngimg" border="0" /></a></div>
<!-- This is 'indexphp _link' -->
<div id="Layer-7" >
<a href="index.php"><img src="<?php print $base_path.$directory ?>/Layer-7.png" width="138" height="138" alt="indexphp " class="pngimg" border="0" /></a></div>
</div>
<!-- This is 'hintergrund_frame' -->
<div id="Layer-3" >
<!-- This is 'Frame Top 1000' -->
<div class="Layer-1000 pngimg" >
</div>
<!-- This is 'Frame Middle 1001' -->
<div class="Layer-1001 pngimg" >
<!-- This is 'left_drupal' -->
<div class="Layer-5 textcontent" >
<?php print $left ?>
</div>
<div class="Layer-5-Content" >
<div class="tabs"><?php print $tabs ?></div>
<?php print $messages ?>
<?php print $breadcrumb ?>
<?php print $help ?>
<h1 class="title"><?php print $title ?></h1>
<?php print $content ?>
</div>
<!-- This is 'Frame Bottom 1002' -->
<div class="Layer-1002 pngimg" >
<?php print $footer_message . $footer ?>
<!-- This is 'content_drupal' -->
<div class="Layer-4 textcontent" >
</div>
</div>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
Hallo nikxx, Du hast ja jetzt
am 04.08.2010 - 13:10 Uhr
Hallo nikxx,
Du hast ja jetzt schon einiges umgesetzt. Zu Deinem Problem mit "Mein Konto" kann ich Dir leider nichts sagen da die DIVs nur für eingeloggte User sichtbar sind.
Wenn Du dem Anrisstext eine Feste Größe (Höhe) geben willst, musst Du folgendes anpassen.
style.css (Zeile 240)
.node .content, .comment .content { margin:0.5em 0; height:90px; }Oder Du überschreibst das mit
.Layer-5 .node .content { margin:0.5em 0; height:90px; }Den Wert "height" musst Du halt so anpassen wie es für Dich am besten ist.
Also das Problem mit dem
am 04.08.2010 - 14:25 Uhr
Also das Problem mit dem "Konto" ist behoben.
Das einzige Problem das ich noch habe, ist, dass der weiße Bereich immer nur so groß ist wie der Content an sich. Siehe linke Seite.
Probiere mal .Layer-1004 {
am 04.08.2010 - 14:44 Uhr
Probiere mal
.Layer-1004 { height:100%; } - psd2css.css (Zeile 258)
Ne, da verschiebt es mir den
am 04.08.2010 - 15:22 Uhr
Ne, da verschiebt es mir den Hintergrund nach oben, wo er dann zamgestaucht wird.
Die beiden Dateien sehn jetzt allgemein anders aus. Habe festgestellt, dass wenn ich den footer zwischen das letzte
page.tpl.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" >
<?php print $footer_message . $footer ?>
</div>
</div>
<!-- This is 'copyright_drupal' -->
<div id="Layer-3" class="textcontent" >
<?php print $copyright ?>
</div>
</div>
</div>
<?php print $closure ?>
</body>
</html>
psd2css.css
/*
* 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: 0px;
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 {
height: 100%;
position: relative;
left: 0px;
top: 0px;
width: 236px;
z-index: 1004;
clear: right;
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: #F88; }
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; }
Hab jetzt noch ein Problem.
am 04.08.2010 - 19:38 Uhr
Hab jetzt noch ein Problem. Die Blöcke, die ich dem Bereich "Inhalt" zugeordnet habe wird über dem Text angezeigt. Siehe Anhang.
Habe gerade festgestellt, dass es an dem Code liegt:
.node .content, .comment .content { margin:0.5em 0; height:90px; }
Wenn ich die Höhe entferne, dann passt es wieder, nur passt dann die Höhe des Anrisstexts nicht mehr.
Könnt Ihr euch keine Mails
am 04.08.2010 - 21:24 Uhr
Könnt Ihr euch keine Mails schreiben? Was ich hier lese bringt niemanden so etwas.
Also mir hat es ein biserl
am 05.08.2010 - 18:28 Uhr
Also mir hat es ein biserl geholfen, auch wenn ich jetzt nicht mehr weiterkomme.
Und zu einem E-Mail Austausch gehören immer zwei. Leider scheitert es aktuell am Zweiten. ;-)
Tut mir Leid - ich kann mich
am 05.08.2010 - 22:30 Uhr
Tut mir Leid - ich kann mich momentan zeitmäßig nicht weiter um das Problem kümmern.
Installiere Dir bitte Firebug und arbeite ein paar CSS-Tutorials durch.
Schau mal wie lang der Thread hier ist - ich habe Dir ja schon bei einigen Sachen geholfen - was ich auch gerne gemacht habe - aber wenn ich Dir jetzt alle Deine CSS-Probleme lösen soll, ist das zeitmäßig einfach nicht drin.
Hier werden und wurden ja immer mal CSS-Fragen gestellt und beantwortet aber das gesamte Designs zu erörtern, ist, glaube ich - noch nicht vorgekommen.
Vielleicht wären die ganzen Fragen auch eher etwas für ein reines CSS-Forum - ich beschäftige mich auch erst seit Anfang des Jahres mit CSS und muss mich immer wieder einlesen - wenn ich jetzt noch E-Mail-Support geben soll, ist das ein bißchen zu viel verlangt - finde ich.
Sorry - nimms mir nicht übel aber ich habe hier im Moment auch zahlreiche Probleme zu lösen.