Einen Balken in eine bestehende Internetseite einfügen.

Hallo,

ich habe zur Zeit ein kleines Problem mit meiner Internetseite, welche ich übernommen habe und der Ersteller ist leider auf Bezahlung angewiesen. xD Vorweg, ich selbst bin Anfänger im Bereich Contao aber lernbereit ;) Nun aber zu meinem Problem, nach einem Contao Update sind einige Elemente verschwunden bzw. werden anders dargestellt. Jetzt habe ich mit Hilfe des Video2Brain Videos schon die meisten Fehler entfernen können, allerdings habe ich eine Sache, die mich fast verzweifeln lässt, weil mir einfach die Logik nicht klar wird. Im Anhang ist ein Bild von dem Contao Demo Theme, an dem man erkennen will was ich an meiner Site einfügen will. In dem Screenbereich soll ein schwarzer vertikaler Balken links eingefügt werden, soll nur zum Design der Seite beitragen mehr nicht. Der schwarze Balken oben liegt als "header_stroke" vor im Theme, der linke Balken müsste jedoch noch eingefügt werden, nur leider weiß ich nicht wie. Im Theme liegt unter "Stylesheets bearbeiten" ein Stylesheet mit dem Namen "layout" in diesem habe ich auch den oberen Strich als "header_stroke" gefunden. Wie oder wo kann man den linken Balken jetzt einfügen bzw bearbeiten? Muss ich ihn dazu irgendwo vorher definieren? Der "Ort" wo er eingefügt werden sollte, müsste wohl laut Firebug, Container und Left sein, nur leider finde ich in der Formatdefinition einen solchen Eintrag nicht den ich dann einfach verändern könnte. Hoffe ich konnte mein Problem einigermaßen klar darstellen. Sollten noch weitere Informationen gewünscht werden, so liefere ich diese natürlich sofort nach.

Gruß WWSelec

Hallo WWSelec,

hast Du mal einen Link zur Seite damit man Dir Konkret helfen kann?

Und BTW, könntest Du in deinen Posts ab und zu ein paar Absätze einfügen
damit man den Text leichter lesen kann? ;)

Viele Grüße
MiTsch

Ich wage mal einen Blindflug....

Lege ein Modul an mit eigenem HTML-Code.

Code:

---

<div id="header_stroke"
</div>

---

Diesen bindest Du in Deinem Layout (Kopfzeile, oder was anders) ein.
Dann legst Du den CSS-Code an und kannst nun mit #header_stroke das Modul positionieren.

Denke bitte an den Link, damit man Dir ggf. weiterhelfen kann.

Ich vermute, dass der obere schon drin ist und dass du den linken dzaumachen willst.
Ich würde einfach den Balken als Bildchen anlegen und dann dem

Code:

---

#main {
  background: #HINTERGRUNDFARBE url(DEINBALKEN) no-repeat left ABSTANDOBENpx;
}

---

geben

@MiTsch:

1. Werde es versuchen ;)
2. Es geht um die Seite: http://www.rolli-kurt.de

@Topic

Ich habe herausgefunden, dass es ein Designelement sein, das mit der Teaserfunktion zusammenarbeiten muss. Nachdem ich einen zweiten Artikel erstellt und für den zweiten Artikel die Teaserfunktion aktiviert habe, wurde mir plötzlich der auch im ursprünglichen Design vorhandene orangene Balken links neben dem Text wieder angezeigt.

Die Seite sieht jetzt auch schon ganz gut aus, bzw. wie vor meinem missglücktem Update, allerdings nur solange man nicht auf "Weiterlesen" klickt, dann hat man den schönen Balken nicht mehr und es sieht so nicht mehr gleichmäßig vom Design aus.
Dazu kommt, dass ich auf der Startseite mit dem orangenen Balken unter dem Artikel einen weißen Bereich habe, welchen ich natürlich gerne in der Hintergrundfarbe des Artikels der Startseite hätte. Wenn ich auch hier das Layout mit dem, nach einem Klick auf "Weiterlesen" vergleiche, so existiert dieser weiße Bereich hier dann nicht. (Info: Monitorgröße: 24" Monitorauflösung: 1920x1200)

Ich verstehe schon, dass es sich bei dem orangenen Balken, und auch bei dem Artikel und der damit verbundenen Hintergrundfarbe um flexible Elemente handelt, die sich dem Text anpassen. Nur wie kriege ich diese zwischen eigentlichem Artikel und Teasertext des Artikels in ein einheitsmäßiges Design? Oder rudimentärer gefragt, wo kann ich z.B. die Farbe für den orangenen Balken verändern?

Gruß WWSelec

*edit: Die Farbe für den orangenen Balken kann ich jetzt ändern. Im Theme habe ich den entsprechenden Punkt mit den Layouteigenschaften schonmal gefunden.

# Damit der Hintergrund "leicht grau" durchläuft muss du die Grafik tl_files/rolli-kurt/drawable/streifen.png anpassen, d.h. der Grafik die Farbe #EAE7D8 mitegeben, dann erscheint aber die komplette Seite in dem grau; ohne Kontrast / Abstufung.

#

wenn du in der CSS folgende Anpassung machst:

#main .inside {
border-left: 10px solid #F1B103;
padding-top: 76px;
}

dann bekommst du als Resultat den orangenen Streifen links -> siehe Anhang
Anhang 7967


cheers

aadursun

Ich habe jetzt einmal den kompletten Code für das Layout gepostet:

Code:

---

 
#main .inside
{
    line-height:26px;
}
     
#container
{
    position:relative;
}
     
html,
body
{
    height:100%;
}
     
#header
{
    background-color:#EAE7D8;
}
     
#wrapper
{
    min-height:100%;
    background-image:url("tl_files/rolli-kurt/drawable/streifen.png");
    background-repeat:repeat-x;
}
     
#main .inside
{
    padding-top:76px;
}
     
.block
{
    overflow:visible;
}
     
/* Seitenweite Überschriften */
h1
{
    margin-top:0;
    margin-bottom:24px;
    padding-left:30px;
    font:32px Georgia;
    font-style:italic;
}
     
/* Zweite seitenweite Überschrift */
h2
{
    margin-top:0;
    margin-bottom:16px;
    font:32px Georgia;
    font-style:italic;
}
     
/* Schwarzer Strich ganz oben */
#header_stroke
{
    width:887px;
    height:8px;
    left:0;
    top:0;
    position:absolute;
    margin-top:0;
    background-color:#000;
    border:0px hidden;
}
     
/* Die Blase im Header */
#logo
{
    left:140px;
    top:-200px;
    position:absolute;
    display:block;
    margin:0;
}
     
main .inside
{
    margin-top:76;
    border-left:10px solid #F1B103;
}
     
/* Alle Artikel auf deren Seiten */
article
{
    width:493px;
    padding-right:42px;
    padding-left:62px;
    border-left:10px solid #F1B103;
}
     
/* Alle Artikel auf deren Seiten */
article (Kopie)
{
    width:493px;
    padding-right:42px;
    padding-left:62px;
    border-left:10px solid #F1B103;
}
     
/* Kompletter navi-teil */
#right
{
    width:523px;
    right:0;
    top:-80px;
    position:absolute;
    float:none;
}
     
/* Hauptteil der Seite */
#main
{
    width:886px;
    position:static;
    padding-bottom:40px;
    background-color:#faf8f2;
}
     
/* Kompletter body */
body
{
    background-color:#eae7d8;
    font:18px/24px Georgia;
}

---

den fett makierten Teil habe ich, so wie du es gepostet hast, eingefügt. Bin mir nur nicht sicher an welcher Stelle er eingefügt werden muss damit er sichtbar wird.

Den weißen Bereich habe ich jetzt rausbekommen indem ich unter #wrapper, repeat-x anstatt repeat-y eingegeben habe.

Baustellen sind jetzt nur noch:
1. die unterschiedlichen Formatierungen bzw. Anordnung des Textes vor und nach dem "Weiterlesen"
2. und das Anzeigen des orangenen Balkens an der Seiter nach dem man auf "Weiterlesen" geklickt hat.