Content richtig formatieren
Eingetragen von loopi (2)am 21.02.2011 - 21:04 Uhr in
Hallo zusammen! :)
Ich arbeite nun seit einigen Tagen mit Drupal und bin gerade dabei mein erstes Theme zu erstellen. Bis zum jetzigen Zeitpunkt war das noch recht einfach, nun geht es aber daran
die verschiedenen Module in das Theme zu integrieren. Das funktioniert soweit auch gut, allerdings bin ich nicht damit zufrieden was die formatierung betrifft.
Ich habe mit <?php print render($page['content']); ?> den Inhalt in das davor vorgesehene div geschrieben, nun wird dies allerdings total unschön dargestellt.
Siehe: http://www.stefanovolpi.de
Ich nutzte momentan mal Farben damit Ihr besser seht was ich meine.
Der grüne Bereich sollte normalerweise nur 700px breit sein und nicht in den lilanen Bereich hineinragen.
Anbei mal der Quellcode. Ich hoffe Ihr könnt mir sagen wie ich den Content richtig formatieren kann oder ob evtl sogar ein Fehler in der style.css ist.
Dateistruktur:
[images]
---- Bilder
page.tpl.php
style.css
volpi.info<div class="all">
<div class="navi">NAVI ELEMENT</div>
<div class="header"></div>
<div class="page">
<div class="node"><?php print render($page['content']); ?></div>
<div class="block">BLOCK ELEMENT <br /> TEST_1 <br /> TEST_2</div>
<div class="footer">FOOTER ELEMENT</div>
</div>
</div>/* R E S E T C S S */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* S T Y L E S H E E T - V O L P I */
body {
background-color: #12171d;
font-size: 12px;
color: #CCC;
}
.all {
}
.navi {
height: 40px;
border-bottom: #3c4550 solid 1px;
background-image: url(images/navi_block.png);
background-repeat: repeat-x;
}
.header {
height: 175px;
width: 900px;
margin:0 auto;
background-image: url(images/header_volpi.png);
}
.page {
left: 50%;
margin-left: -450px;
position: absolute;
border: #3c4550 solid 1px;
background-color: #202832;
}
.node {
width: 680px;
padding: 10px;
float: left;
background-color: #0F0;
}
.block {
width: 180px;
padding: 10px;
float: right;
background-color: #F0F;
}
.footer {
width: 900px;
height: 20px;
font-size: 11px;
text-align: center;
padding-top: 7px;
border-top: #3c4550 solid 1px;
background-color: #12171d;
clear: both;
}
/* D R U P A L C O N T E N T */
.node {
}
.region region-content {
}
#block-system-main {
}
. bkock block-system {
}
# node-1 {
}
.node node-test1 node-promoted node-teaser clearfix {
}
.submitted {
}
.field field-name-body field-type-text-with-summary field-lable-hidden {
}
.field-items {
}
.field-item even {
}
.links inline {
}
.node-readmore first last {
}
.element-invisible {
}name = Volpi
description = Theme für www.stefanovolpi.de
core = 7.x
engine = phptemplate
stylesheets[all][] = style.css- Anmelden oder Registrieren um Kommentare zu schreiben
Der Fehler liegt in der
am 21.02.2011 - 21:22 Uhr
Der Fehler liegt in der Klasse .node. Du gibst dort eine Breite von 680px. Die gilt aber auch, wenn Du den Node in einem Block darstellst! Also darfst Du nicht den Node selbst, sondern nur die umrahmenden Blöcke oder Regionen mit einer Breite versehen.
Beste Grüße
Werner
P.S. Nimm Firefox mit den Plugin Firebug um so etwas schnell zu finden. Auf der Seite thoor.de findest Du dazu ein Tutorial.
Oh danke.... typischer Fall
am 22.02.2011 - 09:08 Uhr
Oh danke.... typischer Fall von Eigentor würd ich sagen! Spätestens nachdem ich mir alle Klassen die von Drupal eingefügt wurde angesehen habe, hätte ich sehen müssen das die .node doppelt ist.
Das Plugin werde ich mal installieren! ;) Danke für den Tip