Problem mit der Breite des Templates

[engerl]

guten morgen ihr lieben helferleins.

ich habe gestern erfolgreich an meinem template rumgebastelt und dabei nun festgestellt dass wohl irgendwas in der breite des ganzen nicht stimmt. da ich absoluter neuling bin, hab ich mir einfach immer mit firebug die orte gesucht die ich gerne ändern möchte und dann da eben was umgestellt.

soweit so gut, bin auch noch nicht ganz fertig mit meinem werk, aber ich bitte euch trotzdem da mal reinzugucken, weil mir auf der rechten seite ein klein wenig weggeschnitten wird und in der mitte bekomm ich es einfach nicht hin, dass der text und alles weitere bis direkt zur rechten box gelangt. auf der linken seite ist er ja auch dort.

vielleicht kann mir ja jemand sagen wo ich noch was ändern muss. 

danke schön im voraus.

lg
susi

ps, würde da oben noch gerne ein gif einbauen und weiß nicht wie


Linkback: https://www.modified-shop.org/forum/index.php?topic=14973.0

[jannemann]

Hallo Susi,

mit Firebug hättest du aber auch den #content finden müssen..
Ändere in der "stylesheet.css" im #content den Wert für die width.

Wo soll dein GIF denn eingebunden werden? Direkt im Header?

Schöne Grüße,
Jan

[engerl]

hallo jan,

genau das hab ich schon gemacht, erst hatte ich es auf auto, dann hat mir ein freund gesagt, dass sich die seite bei ihm total verschiebt, also hab ich es auf 100% gestellt. nun ist es zwar soweit ok, aber eben es verschwinden auf meinem ziemlich neuem monitor rechts 1-2cm, so dass man unten den scrollbalken hat.

daher nehme ich an, dass ich eben irgendwo noch irgendwas falsch gemacht hab und weiß aber nicht wo.

den text in der mitte hab ich nun auf 50%, weil, wenn ich den etwas breiter mach, verschwindet hier wieder alles irgendwo hin, aber ich hätte ihn gerne so, dass der sich genau zwischen den boxen "aufteilt".

und auf der startseite meiner homepage www.ideenstuebchen.at hab ich das logo und den namen oben wunderbar, genauso hätte ich das gerne auch im shop, am liebsten ganz genau gleich. cool wäre da natürlich wenn ich einfach ein paar zeilen aus der homepage.css auf die shop.css kopieren könnte, trau mich das aber nicht so wirklich, weil ich ja keine ahnung von css hab.

lg
susi

[franky_n]

Hallo engerl,

die Scrollbalken erscheinen aus dem Grund weil Du in

Code: CSS  [Auswählen]

#wrap {

angegeben hast:

Code: CSS  [Auswählen]

border: 0 10px 10px;

Gibst Du da 0 an und machst die Seitenränder über "padding" geht das wahrscheinlich ...

Ähm wenn Du das genauso haben willst wie auf Deiner normalen Seite, warum änderst Du dann überhaupt was an der Breite?
Eigentlich machst Du in Deiner normalen Homepage nichts anders als das Du ein durchlaufendes Bild im Hintergrund hast (also im body) und trotzdem die Seite auf der mitte zentrierst auf eine bestimmte Breite (halt wie im original Shoplayout)...

Ach ja in

Code: CSS  [Auswählen]

#content{

steht übrigens ein:

Code: CSS  [Auswählen]

width: 55%;

das verursacht das der Content in der Mitte nur eine bestimmte Breite hat...

Viele Grüße

Franky

[engerl]

Code: CSS  [Auswählen]

border-width:0px 10px 10px 10px;

das hab ich zur zeit stehen, wobei ich nicht weiß in welcher reihenfolge die px angeordnet sind.

ich hätte aber gerne die seitenränder links und rechts auch weg, oben habe ich keinen rand mehr, weiß aber nicht mehr ob ich das hier umgestellt hab oder woanders, da ich eben null ahnung von dem zeug hab und nach jeder änderung teste ob ich das "richtige" geändert habe ... hat's nicht den erwünschten erfolg, ändere ich es wieder zurück.

daher bitte immer für 3-jährige blondinnen erklären, weil dann kapier ich das auch. 

naja die breite hab ich geändert weil davor der shop ja nur in der mitte der seite zentriert war und links und rechts ne menge frei war, die breite der hauptseite wird da auch noch geändert, aber jetz hat shop vorrang, da der am 18. perfekt stehen muss.

und die 55% kann ich eben nicht verändern, weil sich sonst alles auf der rechten seite verschiebt, aber dennoch füllen sie die mitte der seite nicht aus. ich hab schon versucht das auf "auto" zu stellen, geht aber auch nicht. dazu kommt, dass mir ein bekannter gesagt hat, dass er die seite auf seinem kleineren monitor nicht gut sehen kann, weil auch alles verzerrt war. so wie ich es jetzt eingestellt hab, kann er aber auch alles sehen.

und das design der homepage ... ich möchte auch jedenfall den "body"teil genauso haben wie auf der homepage, hab aber hier keinen plan wie ich das machen könnte, weil es im original ein "spacer.gif" gibt und ich eben nicht das kleine GIF finde, dass sich immer fortlaufend wiederholt, sonst hätte ich das schon ausgetauscht.

[Sick]

Hallo engerl.

Die Weite wird immer so angegeben:

Höhe - Rechts - Unten - Links. Einfach im Uhrzeigersinn ganz oben anfangen.

Es gibt noch Sonderbeispiele in dem nur 2 Werte angegeben werden z.B.

Code: CSS  [Auswählen]

padding: 20px 10px

Hier wird oben und unten 20px und links und rechts 10px Abstand erstellt.

Das ganze kannst du vorzüglich z.B. bei "CSS 4 you - die deutsche Seite für Cascading Stylesheets (CSS)" nachlesen und lernen.

Das hat ja auch nichts mit dem Shop zu tun. Das ist einfach CSS.

Erstelle doch bitte in Zukunft Beiträge mit Titeln, die das Problem beschreiben.

Gruß

[Tomcraft]

Also der Titel

Irgendetwas stimmt nicht

ist schon ziemlich clever gewählt muss man sagen...

Siehe:

• FAQ: Wie stelle ich eine Frage im Forum?
• FAQ: Warum wird meine Frage im Forum nicht beantwortet?

Ich habe mir mal erlaubt das Thema umzubenennen.

P.S.: FAQ: Full-Quotes und Groß-/Kleinschreibung - mit anderen Worten Netiquette!

Grüße

Torsten

[engerl]

Hallöchen,

ok an das hab ich leider nicht gedacht in meinem verwirrten Kopf, sorry. 

aber Tomcraft war ja so lieb und hat das Thema umbenannt, danke an dieser Stelle.

... wenn ich nu alle Abstände da raushaben will, muss ich dann alle Werte auf 0 machen oder die Zeile ganz löschen?

und ein ganz großes Danke an SICK für den Link zu der css-Seite, bin ja lernfreudig und willig usw. nur manchmal ist es eben einfacher schnell jemanden zu fragen, statt stundenlang zu suchen, so wie ich es beim alten Shop gemacht habe, wenn die Zeit nicht rennen würde und ich nicht unter Druck stehen würde, würde ich auch gern suchen, denn nur dadurch lernt man wirklich was ...

und nun wäre ich euch noch ganz ganz dankbar, wenn ich Meinungen über mein neues Template bekommen könnte, muss nur noch die "body"-Sache hinbekommen, aber den Rest gerne so lassen wie er gerade ist. Daher bitte ehrlich sagen, ob's von den Farben so gut aussieht oder nicht.

lg
Susi

[franky_n]

Hallo engerl,

damit Du weißt was ich meine, wenn ich das oben beschreibe!

Mach mal folgendes, vorher Sicherheitkopie der "/templates/xtc5/stylesheet.css"....

In der "/templates/xtc5/stylesheet.css" den

Code: CSS  [Auswählen]

body {
    ...
}

ändern in:

Code: CSS  [Auswählen]

body {
    background: url("img/bg.jpg") repeat-x scroll 0 0;
    color: #555555;
    font-family: Arial,Sans-serif;
    font-size: 12px;
    line-height: 18px;
    padding: 0;
    background-color: #FFDBE1;
}

Den

Code: CSS  [Auswählen]

#wrap{
    ...
}

ändern in:

Code: CSS  [Auswählen]

#wrap {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    margin: 0 auto 0px;
    width: 980px;
}

Den

Code: CSS  [Auswählen]

#header {
    ...
}

ändern in:

Code: CSS  [Auswählen]

#header {
    background: url("img/top_logo.jpg") no-repeat scroll 0 0;
    border-bottom: 1px solid #FFFFFF;
    height: 115px;
}

Dann die beiden Grafiken die ich anhänge mal in den "/templates/xtc5/img/" Ordner kopieren (vorher Sicherheitskopie der beiden jpg Dateien die überschrieben werden).

Damit Du nachher zurück kannst solltest Du von den veränderten Dateien vorher eine Kopie machen...

Dann sieht es schon fast so aus wie Deine Homepage.
Noch ein bisschen die Hintergründe der Boxen entweder ohne "background-color" machen (Firebug benutzen zum anschauen und ändern) und alle grauen Elemente auch ohne "background-color" dann bist Du schon zumindest so weit das es sehr ähnlich aussieht.

Viele Grüße

Franky

[engerl]

Das is ja total lieb und hab ich jetzt gemacht und nun ist alles ganz schlimm durcheinander.

lg
Susi

P.S.: Hab die Originaldatei nochmal genommen und dann alles so geändert, wie du es mir geschrieben hast und nun hab ich es so wie ich es wollte. 

[franky_n]

Och engerl!

Warum machst Du denn 2 mal in der stylesheet den

Code: CSS  [Auswählen]

            #header {

hintereinander rein?

Schau mal:

Code: CSS  [Auswählen]

#header {
            #header {
        background: url("img/top_logo.jpg") no-repeat scroll 0 0;
        border-bottom: 1px solid #FFFFFF;
        height: 115px;
}

muß so sein:

Code: CSS  [Auswählen]

#header {
        background: url("img/top_logo.jpg") no-repeat scroll 0 0;
        border-bottom: 1px solid #FFFFFF;
        height: 115px;
}

und jetzt ändert sie es wieder! Auf vorherigen Stand... 
Na dann kann ich nicht helfen wenn Du das noch keine 2 Minuten online lässt!

Aha nach 20 Sekunden von vorherigem Stand nun zum Standardtemplate...

Huhu ich bin auch noch da! Ich hab doch schon schnell geantwortet!

Viele Grüße

Franky

[franky_n]

Hi engerl,

jetzt bist Du auf einem guten Weg!

Das "top_log.jpg" musst Du jetzt mal ein wenig, mit einem Photoshop oder so, verkleinern auf eine Höhe von 115px... nur gleichförmig, also nicht verzerren... evtl. dann noch den Hintergrund anpassen oder aber Du machst das ganze ohne Hintergrund also transparent und als png.
Dann musst Du den Dateinamen wohl hier:

Code: CSS  [Auswählen]

#header {
       background: url("img/top_logo.jpg") no-repeat scroll 0 0;
 

in der stylsheet Datei anpassen...

Das hier:

Code: CSS  [Auswählen]

#topmenuwrap {
        background: #333 url(img/bg_topmenu.gif) repeat-x;
}
 

ändern in:

Code: CSS  [Auswählen]

#topmenuwrap {
        background: #FFDBE1 url(img/bg_topmenu.gif) repeat-x;
}

Und dann ist die "/templates/xtc5/img/bg_breadcrumb.gif" für den Breadcrumb (Leiste: Startseite >> Katalog >>...) Hintergrund zuständig und für die Boxen Überschriften die "/templates/xtc5/img/bg_boxheader.gif" nur für den Warenkorb die "/templates/xtc5/img/bg_boxheader_cart.gif" die man farblich gestalten kann.

Dann sollte es schon Deiner Farbgestaltung entsprechen.

Dann noch in der Stylesheet jede Farbe die so angegeben ist:

Code: CSS  [Auswählen]

#893769

durch das ersetzen:

Code: CSS  [Auswählen]

#F62D47

Den background-color hier drin:

Code: CSS  [Auswählen]

.boxbody {
    ...
    background-color: #EDEDED;
    ...
}

ändern in:

Code: CSS  [Auswählen]

.boxbody {
    ...
    background-color: #FFDBE1;
    ...
}

Die Buttons: Einfach mit der rechten Maustaste drauf klicken und "Grafik Info" auswählen, dann siehst Du wo diese gespeichert sind. Die dunklen grauen Buttons würde ich durch Deine Farben ersetzen...

Den Rest schaust Du Dir mal mit dem Addon "Firebug" für den Mozilla Firefox an, damit kannst Du sehr schnell rausfinden wo die restlichen Farben angepasst werden müssen...

So ich glaube damit wärst Du dann wohl schon mal versorgt und im Zeitplan oder?

Viele Grüße

Franky

[engerl]

 

Hallöchen,

habe jetz noch einiges geändert und die Schriftfarben noch etwas angepasst und liege damit natürlich bestens in der Zeit ...

Vielen Vielen herzlichen Dank an dieser Stelle, werde in ca einem Monat meinen 2. Shop einrichten und hab dann da ja schon eine Menge gelernt.

Werde mich dann heute Abend mal daran machen einige Module zu installieren und freu mich da schon über eure weitere Hilfe.

Viele liebe Grüße
Susi

[Tomcraft]

[...]
Werde mich dann heute Abend mal daran machen einige Module zu installieren und freu mich da schon über eure weitere Hilfe.
[...]

Wichtigster Tipp gleich vorab! Leg dir Backups an!
Irgendwie habe ich dabei ein ungutes Gefühl.
Manchmal ist weniger einfach mehr!

Grüße

Torsten

[engerl]

Hallöchen,

jetzt habe ich gerade versucht mein Logo als transparentes Bild einzustellen, um den speziellen Schriftzug deutlich zu machen, aber das funktioniert nun auch nicht, was mach ich denn da wieder falsch.

lg
Susi