Beiträge von Vagabundo

Hallo Sailor,

vielen Dank fuer Deine riesige Hilfe, Jetzt geht alles mit den Buttons. Ich habe es jetzt bei eckig belassen.
Beim Fax lag es wirklich an dem fas.
Ich hatte das mit der alten awesome-Version auch einmal getestet, weil ich verschiedene Beschreibungen fuer das fax gefunden hatte, mal mit fa und mal mit fas. Aber beides ging nicht.
Deshalb hatte ich da nicht weiter mit dem fas probiert. Aber ich glaube es ist besser den firefox zum testen zu verwenden. Crome fuehrt da scheinbar oft in die Irre oder man muss jedesmal die History loeschen.

Herzliche Gruesse
Vagabundo

Hallo Sailor,

eckig gefaellt mir nicht besser, aber ich kann damit leben.
Mit deinem Vorschlag fuer die runden Ikons kam ein wirres Durcheinander zwischen der Flaeche und dem Zeichen, so dass man fast nichts mehr erkennen konnte. Aber wie gesagt: Mit den eckigen Dingern kann ich auch leben.

Habe jetzt mit Firefox die Seite angesehen. Aber fa-fax kommt einfach nicht.
Ich wollte das fa-mobile-phone etwas groesser machen, weil es so sehr klein aussah. Habe deswegen auf fa-4x erhoeht. Aber da ist dann auch der ganze Button groesser geworden. Die 2em sind demnach die Raender um das Zeichen herum - oder?

Aber das Hauptproblem ist, dass das fa-fax noch immer nicht kommt. Dafuer kommt ein weisser Rahmen und darin die Buchstaben FI und darunter RC oder AC.

Ich habe es jetzt erst6mal so stehen lassen, falls Du noch einmal schauen koenntest. Vielleicht weisst Du ja was das bedeutet.

Vagabundo

Hallo Sailor,

das geht garnicht, bzw, die Zeichen sehen sehr lustig aus - aber kaum erkennbar.

Ich werde es bei den quadratischen Button belassen - ich gewoehne mich langsam daran und ich empfinde es nicht als Nachteil.

Groessere Sorgen macht mir immer noch das fa-fax. Es will einfach nicht kommen.

Ich habe awesome jetzt auf Version 5 umgestellt, da fa-fax scheinbar erst ab dieser Version verfuegbar ist.
In den access-logs kann ich auch sehen, dass die neue Version geladen wird:
"GET /templates/multi/fonts/fontawesome-all.css HTTP/1.1" 304
und scheinbar auch erfolgreich.

Eben sehe ich noch 2 Sekunden spaeter, aber wohl aus dem gleichen Aufruf:
"GET /templates/multi/fonts/fontawesome-webfont.woff?v=4.0.3 HTTP/1.1" 304

Ist das korrekt?
Nach der Anleitung von awesome wurden nur die Datei fontawesome-all.css und das Verzeichnis webfonts einkopiert. und zwar in das gleiche Verzeichnis (fonts in meinem Fall)

Vagabundo

Super, vielen Dank.
Da sind die Buttos jetzt zwar Quadrate, aber das ist erst einmal kein grosses Problem. Die Kreise sehen etwas harmonischer aus. Aber an erster Stelle steht die Funktion.
Der alte Eintrag war uebrigends

border-radius:50%;

Das hat sich wahrscheinlich immer auf die Groesse des Zeichens bezogen.
Habe bei der Gelegenheit auch gleich noch die Farben angepasst und fa-fax scheint nur in einer neueren Version vorhanden zu sein. Die muss ich noch runterladen.

Vagabundo

Kein Problem:

http://abacusfax.de/templates/multi/index.html

Danke, das hat mir echt weitergeholfen.

Aber ich stehe auch schon vor dem naechsten Problem:

Ich habe jetzt andere Zeichen aus dem Font Awesome genommen:

<div class="col-sm-3">
    <i class="fa fa-fax fa-3x"></i>    
<h3>Fax-Service<br>             
ab 4 Cent/Fax</h3>
</div>

Die alten Icons aus der Template Vorlage waren alle vier in einem orange gefuellten runden Kreis negativ dargestellt.
Jetzt sind Kreise alle vier unterschiedlich:
Das obige Beispiel mit fa-fax bringt ueberhaupt kein Zeichen in den Kreis und der Kreis ist nur noch halb so gross wie vorher.
Das fa-phone ist ein leichtes Ei, das fa-mobile-phone ist ein sehr schmales Ei und nur fa-envelope-o wird korrekt dargestellt

Ich finde aber auch in den awesome-Erklaerungen im Internet nirgendwo eine vernuenftige Beschreibung, mit der ich diese Kreise veraendern kann und weshalb das fa-fax eventuell nicht geht.

Ich habe natuerlich auch das Beispiel aus der Anleitung, die Sailor mitr geschickt hat auf der Seite probiert:

<span class="fa-stack fa-lg">         
<i class="fa fa-circle fa-stack-2x"></i>         
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>         
</span>

Aber da kommt auch nur ein sehr langgezogenes Eir dabei heraus.

Waere toll, wenn mir da noch einmal jemand weiterhelfen koennte

Vagabundo

Hallo,

ich habe mir ein Template fuer eine Webseite heruntergeladen und versuch diese zgerade zu verstehen und an meine Beduerfnisse anzupassen.
Dabei bin ich auf folgenden Code gestossen, der wohl einen Button anzeigen soll - aber ich finde die zugehoerige Grafik nicht:

<div class="col-sm-3">    
   <i class="fa fa-cogs fa-3x"></i>    
   <h3>Fax-Service<br>             
   ab 4 Cent/Fax</h3>
</div>

Kann mir da jemand weiterhelfen? Waere super!

Vagabundo

Hallo MrMurphy,

danke fuer den Hinweis.

Kennst Du eine Anleitung, wo man das so lernen kann?
Oder wurde das mit einer Software erstellt? Wenn ja mit welcher?

Vagabundo

- - - Aktualisiert - - -

Hallo MrMurphy,

danke fuer den Hinweis.

Kennst Du eine Anleitung, wo man das so lernen kann?
Oder wurde das mit einer Software erstellt? Wenn ja mit welcher?

Vagabundo

Hallo Sailor,

vielleicht kannst Du mir nochmal helfen:
Wenn ich den Browser nun schmal ziehe, wie es bei einem tablet oder einem handy ist, sollten die beiden container sich eigentlich untereinander setzen, und auch von breite her anpassen,damit man nicht scrollen muss.

Aber das passiert leider nicht. Ich meine aber ich habe alles so gemacht, wie es in dem Online-Kurs bei youtube gezeigt wurde.

Hast Du eine Idee, was da falsch laeuft?

Vagabundo

Super - danke fuer die schnelle Hilfe!

Hat prima funktioniert!

Vagabundo

Hallo,

ich befasse mich noch neu mit CSS und komme hier einfach nicht weiter. Vielleicht kann mir jemand helfen

Ich bekomme die Schrift Abacus einfach nicht in die Mitte des linken Containers plaziert und finde nicht woran das liegt.

Hier die CSS dazu

body {
background-color:lightblue;
width:980px;
max-width:90%;
margin-top:0px;
margin:0 auto;
}
 
#headercont{
width:980px;
height:120px;
margin-bottom:20px;
}




#header {
float:left;
text-align:center;
height:100px;
width:320px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
margin-top:20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0084e2+0,61a3d8+52,0084e2+100 */
background: rgb(0,132,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,132,226,1) 0%, rgba(97,163,216,1) 52%, rgba(0,132,226,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,132,226,1) 0%,rgba(97,163,216,1) 52%,rgba(0,132,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,132,226,1) 0%,rgba(97,163,216,1) 52%,rgba(0,132,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084e2', endColorstr='#0084e2',GradientType=0 ); /* IE6-9 */
}




#header h1 {
font-size:60px;
font-weight:bold;
color:blue;
font-family:Verdana;
}




#headtextfield {
padding-top:0;
float:right;
text-align:center;
height:70px;
width:60%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
margin-top:0px;
}




#headtextfield h2 {
font-size:30px;
font-weight:bold;
color:blue;
font-family:arial;




}

<!DOCTYPE html>
<html lang="de">
<head>
   <title>Abacus</title>
   <link rel="stylesheet" type="text/css" href="abacus.css">
</head>




<body>
   <div id="headercont">
      <div id="header">
         <h1>Abacus</h1>
      </div>
      <div id="headtextfield">
         <h2>Versenden Sie Faxe, SMS und Briefe schnell und einfach und telefonieren Sie sehr kostengünstig !</h2>
      </div>
   </div>
</body>




</html>

Danke fuer jeden Hinweis!

Vagabundo