Hilfe bei dem Layout

[Hexchen]

Hallo Ihr Lieben,
ich habe meiner Freundin geholfen ihren xt-commerce zu gestalten.
Hab ich ja auch bei den ?lteren Versionen schon ?fter gemacht.
Aber Sie hat die 3.04 gekauft und die ist doch ganz anders.
Ich habe da unten eine linke Box immer noch in grau und der Rahmen ist auch nicht durchg?ngig rot.
Ich habe die ganze CSS Datei bestimmt 30 mal von vorne und hinten bearbeitet, keine Chance. Wenn ihr also eine Mutter von 3 Kindern vor einem Nervenzusammenbruch bewahren wollt, bitte helft mir.
Ich bin mit meinem Latain am Ende. Der Shop liegt noch auf einer Testdomain unter http://www.8ab.de
die Css habe ich mal reinkopiert.

Liebe Gr??e
Inge


.boxText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

.boxTextBG {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #F4A460;
}
.boxTextBGII {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #FFEFD5;
}
.boxTextPrice {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #80000;
}

.errorBox {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
font-weight: bold;
background-color: #FFEFD5;
}
.gvBox {
font-family : Verdana, Arial, sans-serif;
font-size : 14px;
font-weight: bold;
border-color: #800000;
border: 1px solid;
background-color: #ffb3b5;
}
.stockWarning {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #cc0033;
}

.productsNotifications {
background-color: #800000;
}

.orderEdit {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #800000;
text-decoration: underline;
}

BODY {
color: #800000;
margin: 0px;
background-color: #FFEFD5;
}

img{
border:0;
}

A {
color: #800000;
text-decoration: none;
}

A:hover {
color: #800000;
text-decoration: underline;
}

FORM {
display: inline;
}


TR.header {
background-color: #FFEFD5;
}

TR.headerNavigation {
background: #800000;
}

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #800000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #80000;
background-color: #FFEFD5;
}

A.headerNavigation {
color: #800000;
}

A.headerNavigation:hover {
color: #800000;
}

TD.conditions {
background-color: #FFEFD5;
}

A.confirmationEdit {
color: #800000;
font-style: italic;
}
A.confirmationEdit:hover {
color: #800000;
font-style: italic;
text-decoration: underline;
}
TR.headerError {
background-color: #ff0000;
}

TR.headerMessage {
background-color: #FFEFD5;
}

.moduleHeading {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: bold;
padding-bottom: 10px;
}

TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #FFEFD5;
font-weight : bold;
text-align : center;
}

TR.headerInfo {
background: #FFEFD5;
}

TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #FFEFD5;
color: #FFEFD5;
font-weight: bold;
text-align: center;
}

TR.footer {
background: #FFEFD5;
}

TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #800000;
color: #800000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #800000;
}

.infoBox {
}

.infoBoxContents {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

.infoBoxNotice {
background: #FFEFD5;
}

.infoBoxNoticeContents {
background: #FFEFD5;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #F4A460;
height:17px;
color: #800000;
}

TD.infoBoxHeading_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #F4A460;
height:17px;
color: #800000;
}

TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
border-right: 4px solid;
background: #FFEFD5;
border-color: #800000;
}

TD.infoBox_right, SPAN.infoBox_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #FFEFD5;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #FFEFD5;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #FFEFD5;
}

TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #800000;
border-spacing: 1px;
}

.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #FFEFD5;
color: #800000;
font-weight: bold;
}

TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

A.pageResults {
color: #800000;
text-decoration: underline;
}

A.pageResults:hover {
color: #800000;
background: #FFEFD5;
}

TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #800000;
}

TR.subBar {
background: #FFEFD5;
}

TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #800000;
}

TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #800000;
}

TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}

TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

TEXTAREA {
width: 100%;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

SPAN.greetUser {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #800000;
font-weight: bold;
}

SPAN.underline {
text-decoration: underline;
}

TABLE.formArea {
background: #FFEFD5;
border-color: #800000;
border-style: solid;
border-width: 1px;
}

TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

TD.copyright {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
text-align:center;
}
A.copyright {
color: #800000;
}
A.copyright:hover {
color: #800000;
text-decoration: underline;
}

SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}

SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productOldPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
text-decoration: line-through;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}

SPAN.productDiscountPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-weight: bold;
}

.smallHeading {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: Black;
}

.moduleRow {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
background-color: #FFEFD5;
border: 1px solid;
border-color: #800000;

}
.moduleRowOver {
background-color: #FFEFD5;
border: 1px solid;
border-color: #80000;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;

}
.moduleRowSelected { background-color: #FFEFD5; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #800000; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #800000; }

/* sitewide font classes */
/* Note: heading<Number> equals <font size="Number"> */
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }

/* Sitemap Tables */
.sitemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #800000;
background-color: #FFEFD5;
padding-top: 2px; padding-bottom: 2px;}
.sitemap_heading a {color:#800000;}
.sitemap_heading a:hover {color:#800000; text-decoration:none;}

.sitemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #800000; background-color: #FFEFD5; padding: 2px 2px;}
.sitemap_sub a {color:#000000;}
.sitemap_sub a:hover {color:#800000; text-decoration:none;}


/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #800000; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #800000; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.tableShop {
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #800000;
}

.navLeft {
border-right: 1px solid;
border-color: #800000;
background-image: url(img/bg_left_column.jpg);
width: 185px;
}
.navRight {
border-color: #800000;
border-top-width: 4px;
border-top-style: solid;
border-left-width: 4px;
border-left-style: solid;
background-color: #FFEFD5;
width: 185px;
}

.contentsTopics {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}

.tableListingI {
background-color: #800000;
}

.tableListingII {
background-color: #800000;
}

.tableBody {
padding: 5px;
}

.poweredby {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #800000;
font-weight: bold;
}
.onepxwidth {
width: 1px;
}

[pufaxx]

... bei dem xtc4-Tabellengeschachtel ist es auch nicht so einfach, ?berhaupt irgendwelche Fehler zu finden. Und so wirklich sauberen Code spuckt xt:Commerce sowieso nicht aus (z.B. fehlen das schlie?ende </body> und </html>-Tag) ...

Hab mir das jetzt mal angeguckt - und die Tabellenzelle, die bei Dir die Probleme macht, scheint mir die <td class="navLeft"></td> zu sein.

Aber warum die ausgerechnet grau ist, verstehe ich auch nicht, sorry.

Versuch doch mal, in deinem Stylesheet

1) dem body die gew?nschte Hintergrundfarbe zu geben
2) alle Tags im Stylesheet klein zu schreiben (also nicht "A", "FORM" usw., sondern "a" und "form" - aber nicht die Klassennamen ver?ndern, CSS reagiert da auf Unterschiede zwischen Gro?- und Kleinschreibung)
3) schreib mal nicht .navLeft { ... Anweisungen ... } sondern td.navLeft { ... Anweisungen ... }

[pufaxx]

AARGH! Es war ganz einfach - vergiss alles oben.

Guckstu hier: http://www.8ab.de/templates/xtc4/img/bg_left_column.jpg

Das ist das Hintergrundbild von allem, was die Klasse "navLeft" hat.
Einfach das Bild in der "richtigen" Farbe machen und fertig.

:-)

[Hexchen]

suuuuuper, danke, ich k?nnte dich schon k?ssen !!!

Die Box ist jetzt so wie sie sein soll, aber das 2. Problem ist noch dieser bl?der Balken um die Box.

Hast du ( oder jemand anders ) da einen Plan von ??

Inge

[pufaxx]

*rotwerd*

?hem.

Also - so ganz "richtig" ist das navLeft-Hintergrund-Bild aber noch nicht - das hat noch ne graue "Spitze" rechts, die m?sstest Du auch noch rot machen. Dann sieht's schon mal ein bisschen besser aus, aber auch dann w?re noch n b?schn was verschoben. Wie soll es denn genau aussehen?

Sollen die Orangenen "box-?berschriften"-Balken an die dicke rote Linie ansto?en oder dr?berlappen?

Wenn sie nur ansto?en sollen, m?sstest Du der navLeft-Zelle einen Innen-Abstand geben, der so breit ist wie der rote Rand am Hintergrundbild und die navLeft-Zelle muss so breit sein wie der Hintergrund.

[Glaub ich wenigstens, ich versuche normalerweise, Tabellen so weit wie m?glich zu vermeiden - und wei? nicht so ganz genau, wie die reagieren. Au?erdem gibt's da Browser-Unterschiede: Der Internet-Explorer zieht z.B. CSS-Innen-Abst?nde ("padding") und Randbreiten ("border-width" )von fixen Breiten-Angaben ab, alle "vern?nftigen" Browser rechnen padding und border zu fixen Breiten hinzu. Wie sich Tabellenzellen Browser-?bergreifend bei sowas verhalten, m?sste ich ausprobieren...]

--> Wie dem auch sei - deine navLeft-Zelle scheint einen kleinen roten Rand zu haben, wenn der Rand schon durch das Hintergrundbild erzeugt wird, brauchst Du den an sich eh nicht ... (obwohl es eigentlich "besserer Stil" ist, R?nder ohne Bilder zu machen, sonst sieht man sie erst, wenn das Hintergrundbild geladen ist...)

[peeeters]

Originally posted by Hexchen@Mar 30 2006, 07:32 AM
Hallo Ihr Lieben,
ich habe meiner Freundin geholfen ihren xt-commerce zu gestalten.
Hab ich ja auch bei den ?lteren Versionen schon ?fter gemacht.
Aber Sie hat die 3.04 gekauft und die ist doch ganz anders.

Deine Freundin nennt sich aber laut Impressum Peter. :laugh: F?r eine Frau ein wirklich seltener Name :huh: .

[Hexchen]

sooo,
ich habe kein Wort verstanden, was du mir da gesagt hast * sch?m*
Ich h?tte die Box links, genau so wie die Box rechts.
Da war das in der Css ganz einfach, einfach die Farbe f?r den "border " eingeben und gut ist .
Warum geht das links nicht ??

[pufaxx]

aaalso:

Guck Dir nochmal das Bild an: http://www.8ab.de/templates/xtc4/img/bg_left_column.jpg

Das wird in der Zelle .navLeft vertikal wiederholt und erzeugt somit einen Rand. Dummerweise blo? einen grauen, weil das Bild an der rechten Seite eine "graue Ecke" hat.

--> Die Rot machen.

Damit hat aber nicht die Zelle einen Rand, sondern nur ein Hintergrundbild, das wie ein Rand AUSSIEHT.

Abgesehen davon, dass es eigentlich Quatsch ist, soetwas mit einem Bild zu erzeugen, hat das den Nachteil, dass die Zelle .navLeft in breiter ist als der gelbe Bereich im Bild. Und das damit alles, was innerhalb dieser Zelle liegt auch ?ber den gelben Bereich hinauslappen kann.

Deswegen die "saubere" L?sung:

.navLeft
{
border-top: 4px solid;
border-right: 4px solid;
border-color: #800000;
background-color: #ffefd5;
width: 185px
}

--> So brauchst Du kein Bild mehr, den Rand sieht man auch, wenn das Bild noch nicht geladen ist - und zweifarbige Bilder als jpeg anzulegen, das macht "man" eh nicht

:-)

[es k?nnte evtl. sein, dass die Navi auf der linken Seite nicht in jedem Browser gleich breit angezeigt wird, aber um die 4 Pixel ist es wohl nicht so schlimm, nehme ich an...]

[pufaxx]

Nachtrag (und vielleicht wird auch klar, warum ich Tabellenlayout irgendwie nicht so gerne mag, ist einfach furchtbar un?bersichtlich) - Die Zelle "navLeft" hat im Quelltext die Breite 184 Pixel, das Stylesheet dehnt sie wieder auf 185 Pixel aus.

Also solltest du jetzt einen kleinen ungewollten Innenabstand haben, dann l?sch die "width"-Anweisung f?r .navLeft aus dem Stylesheet.

....

[Hexchen]

puuuh, gleichzeitig kochen telefonieren und am PC arbeiten ist heftig ;-)
Also rot ist der Balken, aber leider nicht lang genug und auch immer noch nicht durchg?ngig ..
Ich verzweifel bald ..
Aber vielen lieben Dank f?r deine Hilfe, die hat mich schon ein gro?es St?ck weitergebracht ..
:wub: