Frage Logo bearbeiten - HTML/CSS Problem

[Barcelino]

Hallo zusammen,

ich bin gerade etwas am verzweifeln.

Folgende Sache:
Ich habe mir bei TemplateMonster eine Site gekauft die ich jetzt gerade in Dremweaver bearbeite. Soweit auch alles gut. Habe die Site nach meinen Bedürfnissen in CSS geändert. Da meine Kenntnisse aber auch leider ihre Grenzen haben und ich nicht gerade ein HTML/CSS-Nurd bin, komme ich gerade in einer Sache nicht weiter und hoffe das mir hier jemand helfen kann eine Lösung zu finden.

Hier erstmal der Link zu der SIte die ich gerade bearbeite:

http://www.franz-montagen.de/beta/index.html

und hier das Original:

http://www.templatemonster.com/demo/54649.html

Das Problem besteht darin, dass ich diesen Pinsel weghaben möchte. Normalerweise wäre das ja ein PNG oder JPG im Image Ordner aber dort ist nicht zu finden. Jetzt habe ich schon den ganzen Quelltext nach einem Verweis gesucht aber nichts gefunden. Auch in der CSS ist nichts zu finden.

Ich denke das sich die Site das Logo erst online einbindet, da ich das Logo auch offline nicht sehen kann.

Im Anhang habe ich mal ein Screenshot von dem Code gemacht.

Wäre super, wenn jemand einen Vorschlag zur Bewältigung des Problems machen kann.

 

[Alex55]

Das wurde mit css:before content gemacht. .brand_name::before { .. } löschen. Mit Firebug kannst du den Quellcod e untersuchen.

 

[Barcelino2]

Ja aber was wenn ich es nur austauschen möchte?
Wo finde ich denn den Link und in welchem skript? Grid.css, Style.css, animate.css

 

[bdt600]

Den Hinweis von Alex55 übersehen?

Mit Firebug kannst du den Quellcode untersuchen.

Und wieso Barcelino und Barcelino2??

 

[Barcelino2]

Firebug ist doch ein Tool für Firefox und nicht für Dreamweaver. Oder ich übersehe ich da was?

 

[bdt600]

Richtig. Was spricht dagegen, die richtigen Infos per Firefox herauszufinden und wieso benutzt du ein überteutertes Programm wie Dreamweaver (ist imho sowieso Schrott)

 

[Barcelino2]

ja das habe ich soweit auch verstanden, nur ist der bezug leer...siehe Anhang?!

 

[bdt600]

Nimm die Zeile mit dem content komplett raus.

 

[Tronjer]

.brand_name::before {
    content: "";
    font-family: "FontAwesome";
    font-size: 65px;
    left: 5px;
    line-height: inherit;
    position: absolute;
    top: 9px;
}

 

[Barcelino2]

okay. danke dafür, aber ich kann ich das auch durch ein .gif ersetzen oder funktioniert das so nicht?!

So zB? s. Anhang

 

[Tronjer]

https://css-tricks.com/almanac/properties/c/content/

Es gibt drei Wege, um zu einer eigenen Webpräsenz zu gelangen:
a) Man nimmt einen Baukasten, Template, etc. und tauscht dort lediglich den Content, ohne größere Änderungen an Styling und Funktionalität.
b) Man lernt die Materie von Grund auf.
c) Man beauftragt jemanden, der sich damit auskennt.

 

[djheke]

Vielleicht so.

.brand_name:before {
  content:"";
 position:absolute;
  left: 5px;
  top: 12px;
  width:51px;
  height:51px;
  background:url("logo.jpg") no-repeat 0 0  ;
 background-size:cover;
}

 

[Tronjer]

Völlig sinnfrei. Ein Bild als background-image innerhalb eines Pseudo-Elements voranzustellen, bringt höchstens dann etwas, wenn es aus dem Layout ausbrechen soll.

Dass der Autor des Templates diesen Weg gewählt hat, liegt daran, dass FontAwesome ein Font ist und sich sonst nur als CSS-Klasse einbinden lässt.

 

[djheke]

Ja, hast ja recht. So besser.

.brand_name:before {
  content:url("logo.jpg");
}

 

[Barcelino2]

@bdt600

wieso benutzt du ein überteutertes Programm wie Dreamweaver (ist imho sowieso Schrott)

kennst du ein Besseres mit dem ich arbeiten kann? Ich finde es gut und da ich eh alle Produkte von Adobe besitze, warum dann auch nicht Dreamweaver?

 

[bdt600]

Der Nachteil von Dreamweaver ist imho, dass man sich alles mögliche zusammenklicken kann, ohne auch nur den Hauch einer Ahnung zu haben, und der Quellcode, der am Ende dabei rauskommt, ist zumindest bei älteren Versionen eine mittelschwere Katastrophe. HTML/CSS ist ja nun nicht so wahnsinnig schwer, das man sich nicht die Grundlagen aneignen kann und selber was zusammenschraubt. Und die ganzen Adobe-Produkte sind einfach viel zu teuer.

 

[Barcelino2]

Mag sein, ich komme jedenfalls gut damit zurecht. Jedenfalls versuche ich es. Ich versuche auch so viel wi emöglich selber zu schreiben und keine Vorgaben zu verwenden wo wir wieder beim eigentlichen Thema wären

Das Logo habe ich erfolgreich löschen können, dank der Hilfe hier. Nur bekomme ich mein Logo nicht dahin wo es hin soll. Ich habe jetzt den ganzen Tag damit zugebracht, mich versucht schlau zulesen und Tutorials geschaut...bin aber keinen Schritt weitergekommen...

Ich habe es im Quellcode versucht und in CSS.

<div><img src="images/logo.png" alt=""/>
        </div>

Das Logo wird auch angezeigt und auch durch top und left kann ich es verschieben, nur wenn eine andere Auflösungen angezeigt wird, dann verschiebt sich das Logo - zu Ungunsten Mancher dann auch hinter bzw über die Schrift...

/*========================================================
  HEADER  Section
=========================================================*/
header {
  background: #ffffff;
  background-image:url(../images/logo.png);
  background-position: top 20px left 180px;
  background-repeat:no-repeat;
}
header:after
  clear: both;
}
header .brand {
  float: left;
}
header .nav {
  float: left;
}
@media (max-width: 1199px) {
  header {
  text-align: center;

 

[bdt600]

Du hast dazu schon längst eine Lösung bekommen! Du solltest dir Posting #11 von Tronjer nochmal ansehen

 

[Tronjer]

Ich habe jetzt den ganzen Tag damit zugebracht, mich versucht schlau zulesen und Tutorials geschaut...bin aber keinen Schritt weitergekommen...

Natürlich nicht. Du würdest Wochen und Monate benötigen, einfache Grundlagenkenntnisse zu erwerben und Jahre, um professionell arbeiten zu können. Fehlende Basics lassen sich nicht durch Forenbeiträge kompensieren.

Dein Template basiert auf einem propietären Grid-Layout, mit dem es sich an unterschiedlich große Viewports anpaasst. Mit top, left und position: absolute kommst du da nicht weit.

 

[Barcelino2]

Naja, ich will ja auch nicht die ganze Site verändern, sondern eben nur das Logo!