Boxen und "Contentheader / Kategoriename" auf eine Höhe ! Wie?

[smoker]

Hallo Leute,

da Ihr mir in letzter Zeit (direkt und indirekt) schon öfter geholfen habt, wende ich mich mal wieder an Euch.

Folgendes. Ich möchte, dass meine Boxen und der "Contentheader / Kategoriename" auf einer Höhe / Zeile stehen. In etwa so, wie auf dem Foto dargestellt.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Als zweites bekomme ich zum Verrecken keine Umrandung um meinen Main und meinem Shop. Wie kann ich diese realsieren. Habe schon stundenlang in der stylesheet rumexperimentiert.

Ich hoffe Ihr könnt mir helfen.

Vielen Dank im Voraus.

MfG Smoker



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

[Tomcraft]

Hallo Smoker,

ein Link zum Shop wäre prima! Das lässt sich doch bestimmt durch "margin-top:-10px" beispielsweise bei dem entsprechenden Element erledigen.

Grüße

Torsten

[GTB]

das ist die URL nehme ich an.

aber es sieht genau so aus wie smoker es haben will... zumindest so wie ich es verstehe...

[Tomcraft]

Sehe ich genauso... das Problem scheint also schon behoben zu sein.

Grüße

Torsten

[smoker]

Hallo Leute,

da habt ihr etwas missverstanden. So soll es aussehen. Der Shot ist noch aus meinem derzeitigen "aktiven Shop" (xt:Commerce 3.04 SP2.1). Ich bin gerade dabei auf modified eCommerce Shopsoftware umzurüsten und dort benötige ich Hilfe. Sende Euch heute Abend einen Link. Bin gerade unterwegs und hab die URL vom Testshop nicht im Kopf.

MfG Smoker

[guensi]

Immer her mit dem Link, das Problemchen sollte leicht zu lösen sein.

[smoker]

Hallo Leute,

also hier mal der Link zum Testshop und hier der Link zum Hauptshop

Ich möchte das Design vom Hauptshop soweit wie möglich übernehmen. Der Hauptshop ist leider ein Tabellenlayout und im "Inneren" (Datenbank usw.) viele Dateilaichen und son Kram, deswegen eine Neubau/Update/Umbau mit modified eCommerce Shopsoftware.

Also, ich hoffe Ihr könnt mir helfen.

MfG Smoker

[Tomcraft]

Gib der Klasse #content ein "margin-top":

Code: CSS  [Auswählen]

#content {
[...]
margin-top: -13px;
}
 

und Fertig.

Grüße

Torsten

[smoker]

Hallo Tomcraft,

danke für deinen Tipp. Hat 1A geklappt. Aber irgendwie bekomme ich das mit der Umrandung nicht hin. Bin gerade wie wild am rumbasteln. Das kann ich doch nur in der stylesheet.css machen oder?! Den Rand hab ich gepackt, nur die Abstände passen nicht.

MfG Smoker

[guensi]

Du meinst wahrscheinlich, dass das Willkommen im dunkelbraunen Feld sitzt.

Suche stylesheet.css Zeile 40 ff die Definition der h1 Überschrift

und ersetze

Code: CSS  [Auswählen]

padding:0px 0px 5px;

mit

Code: CSS  [Auswählen]

padding:0px 0px 5px 30px;

Den Wert solange anpassen bis das gut aussieht.

EDIT: Es muss natürlich der Wert für padding angepasst werden, nicht wie zuerst genannt für margin

[smoker]

Hi Guensi,

vielen Dank erstmal für die Antwort. Das hatte ich zwar nicht gemeint, aber das hätte ich später auch noch machen müssen. Also vielen Dank.

Was ich meine, ist die Umrandung (border) runherum um den Maincontent und Shop (Wrapper). Ich bekomme zwar die Linien hin, aber nicht den Abstand. Schau mal in meinem Testshop.
Wie es im Hauptshop ist, soll es sein. Leider bin ich in css noch nicht so fit.

MfG Smoker

[guensi]

Ah verstehe, LOL, ja das ist Fummelarbeit. Mal sehen was sich da auf die Schnelle erkennen lässt. Kennst du das Firebug-Modul von Firefox? Ist ne enorme Hilfe bei solchen Problemen...

[smoker]

Hi

kenn ich noch nicht. werd ich aber mal suchen danach!

[guensi]

Ok, hier kollidieren mehrere Anweisungen verschiedener Elemente damit hast du dann gleich mehrere Probleme.

Als Lösungsansatz würde ich folgendes vorschlagen:
Den Rahmen als eigenes Element definieren. Dazu musst du in der index.html innerhalb des <div id="content"> noch ein div mit der id="rahmen" definieren, welches den gesamten Inhalt des contents umfasst.

Dieses div kriegt dann die border-Anweisung in der css. Bei content musst du die border-Anweisung dann rausnehmen.

Jetzt geht das Gefummel los. Der "Rahmen" übernimmt alle Außenabstände = margins vom "content". Der "content" muss dann nur noch die Abstände (margins) zum "Rahmen" definieren und ggfs. die Innenabstände = paddings definieren.

Wird etwas Arbeit werden, aber ein solch spezielles Design ist nun mal nicht von der Stange zu realisieren.

Zum Austesten und konkrete Angaben machen hab ich heute Nacht leider keine Zeit mehr. Einfach mal testen wie weit du kommst, ich schau mir das dann morgen am späten abend nochmal an.

[guensi]

So hab mir das grade mal angeschaut. Zum einen kommt dir hier die Lösung des Positionierungsproblems oben in die Quere, zum Anderen stören die Angaben zu den Rändern der h1 Überschrift das Layout.

Mit folgenden Änderungen sollte das funktionieren:

ersetze die h1-Anweisung im stylesheet.css (line 40 ff) durch:

Code: CSS  [Auswählen]

h1 {
background:#868686 url(img/bg_catheader.gif) repeat scroll 0%;
border-color:#6B4305;
border-style:solid;
border-width:0px 0px 2px;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
height:23px;
line-height:28px;
margin:1px 0px 15px -11px;
padding:0px 0px 5px 35px;
vertical-align:middle;
width:522px;
}

und die content-Anweisungen stylesheet.css (line 272 ff)durch:

Code: CSS  [Auswählen]

#content {
border:1px solid #6B4305;
float:left;
margin:0px 0px 5px 12px;
padding:0px 13px;
width:535px;
}

Bitte beachten: Durch die Änderungen verschiedener margins und paddings wurde es notwendig, die Breite des Contents geringfügig zu ändern. Da kann es nun notwendig werden, die Breite von Artikeln und sonstigen Content-Inhalten ebenfalls anzupassen.

Viel Spaß beim Testen.