Template Workshop?

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
SiNiTaSa
Posts: 114
Joined: Tue Jan 03, 2017 10:33 am
Location: BW|GERMANY

Re: Template Workshop?

Post by SiNiTaSa » Thu Oct 26, 2017 1:44 pm

Jetzt eine class für das Header Bild

Code: Select all

.headerimg {
    background-image: url("images/head.jpg");        
    background-repeat: no-repeat;        
    margin: 0 auto;
    max-width:900px;
    height: 160px;
  
}

und in der html

Code: Select all

<div id="header"><div class="headerimg"></div></div>
aka smaxle | plugin_XH 1.7
Top
Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Re: Template Workshop?

Post by Simmyne » Thu Oct 26, 2017 1:57 pm

Hallo ihr Lieben,

bin einen Schritt weiter. Habe alles nach euren Vorschlägen umgesetzt und noch ein bisschen Code von mir rein, jetzt sieht es so aus:

http://www.zur-sprache-kommen.de/NEUES/?Workshop

Da sich das Ergebnis mit den weiteren Arbeiten ändert, gebe ich noch einen Screenshot dazu (als Attachment)

Wie man den Header (bzw. das Hintergrundbild) zentriert, habe ich im Netz nicht rausgefunden. Auch wie man die weißen Zeilen zwischen den einzelnen Elementen wegbekommt. Obwohl body auf margin 0 ist auch oben noch eine weiße Zeile.

Wie bekomme ich das gebacken?

Ach ja, der Code jetzt:
html:

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>><br>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><?php echo toc();?></div>
<div id="content"><?php echo content();?></div>
<div id="footer"></div>
</div>
<p class="minifont">Powered by <a href="http://www.cmsimple-xh.org/" target="_blank">CMSimple_XH</p></a>
</body>
</html>
css:

Code: Select all

html, body {
   padding:0;
   margin:0;
   border: 0 none;
   font-size: 1em; 
   font-family: Verdana, Arial, Helvetica, Geneva, Swiss;   
}
#wrapper {
      width:100%;
      margin: 0 auto;
}

#header { 
	 background: #006e00;
     background-image: url("images/header.jpg");
	 background-repeat: no-repeat;
     height: 283px;
}

#navigation { 
     background: #00c200;
     height: 40px;
}

#content {
     background: #FFFFFF;
}

#footer {
     background: #006e00;
     height:100px; 
}
.minifont { color: grey; font-size: 9px }
SCSH_1.jpg
You do not have the required permissions to view the files attached to this post.
Top
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:
Contact frase

Re: Template Workshop?

Post by frase » Thu Oct 26, 2017 2:07 pm

Die erste leere Zeile kommt vom <br> in
<body <?php echo onload();?>><br>

Die zweite kommt von der Liste (ul) die bis jetzt noch nicht formatiert ist.
Das wird sich aber ändern, wenn ihr das Menü macht.
Top
cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:
Contact cmb

Re: Template Workshop?

Post by cmb » Thu Oct 26, 2017 2:25 pm

Simmyne wrote:Wie man den Header (bzw. das Hintergrundbild) zentriert, habe ich im Netz nicht rausgefunden.

Code: Select all

background-position: center;
Simmyne wrote:Auch wie man die weißen Zeilen zwischen den einzelnen Elementen wegbekommt. Obwohl body auf margin 0 ist auch oben noch eine weiße Zeile.
Direkt oberhalb von div#wrapper steht ein <br>. Das hat da nichts verloren. Der andere Abstand wird durch div#navigation>ul erzeugt, weil <ul>s normalerweise vertikale Margins haben (wie <p>s), und die ragen per Default aus dem umliegenden <div> heraus (Stichwort: Block formatting context).
Christoph M. Becker – Plugins for CMSimple_XH
Top
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:
Contact frase

Re: Template Workshop?

Post by frase » Thu Oct 26, 2017 2:40 pm

Da ihr ja was lernen wollt, hier noch ein Tipp zur Schreibweise.
Man kann den Background auch in "Kurzschreibweise" angeben:

Code: Select all

#header {
    background: #006e00 url(images/header.jpg) no-repeat;
    height: 283px;
}
oder, wie es jetzt ist:

Code: Select all

.headerimg {
    margin: 0 auto;
    max-width: 1200px;
    height: 283px;
    background: url(images/header.jpg) no-repeat center;
}
Hier fehlte übrigens bei height noch das "p" bei "px".

Welche Schreibweise man wählt ist eigentlich egal.
Zum Lernen ist wohl die ausführliche Variante besser.
Top
Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Re: Template Workshop?

Post by Simmyne » Thu Oct 26, 2017 2:50 pm

Es gab eine Überschneidung mit dem Post von Sinitasa. Ich hab ihres/seines (??? :? ) ausprobiert, aber der ganze Header war dann weg. Dann habe ich den Post von cmb gesehen und habe gemacht, was er geschrieben hat. Es ist ein bisschen schwierig für mich, wenn zwei Leute zwei Lösungen haben. Ich hoffe ich tue niemanden Unrecht. Aber es geht halt die Lösung vor, die funzt, auch wenn ich bei Sinitasa vielleicht beim Eingeben einen Fehler gemacht hab.

Jetzt ist es soweit prima.
Jetzt können wir uns ja schon an die Navigation machen. Wie bekomme ich die erst einmal waagrecht? Baue ich gleich die Unterseiten mit ein? Ich bild mir ein, ich hätte von Christoph einen Link bekommen, aber ich weiß nicht mehr wo das war und in welchem Zusammenhang, aber erfolglos gesucht. :oops:

ANFÜGUNG, danke frase - ich mach lieber erst mal ausführlich... ;)
Last edited by Simmyne on Thu Oct 26, 2017 3:01 pm, edited 2 times in total.
Top
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:
Contact frase

Re: Template Workshop?

Post by frase » Thu Oct 26, 2017 2:56 pm

Ihr habt es ja so gewollt.
Jetzt labere ich euch voll ;-)

Code: Select all

font-family: Verdana, Arial, Helvetica, Geneva, Swiss;
Die vielen Schrift-Angaben schaden nicht!
Mal zur Erklärung:
Der Browser schaut, ob die gewünschte Schriftart auf dem System vorhanden ist. Und zwar in der Reihenfolge der Angabe.
Gibt es Verdana nicht, wird nach Arial gesucht, dann nach Helvetica ...
Was ist aber, wenn alle aufgeführten Schriften nicht da sind?
Auf einem Windows Rechner wird dann höchstwahrscheinlich "Times New Roman" genommen, was eine Serifen-Schrift ist - im Gegensatz zu den angeführten (serifenlosen).
Sicherer wäre es also, am Ende der Schriftenliste noch ",sans-serif" hinzuzufügen.
In allen Browsern sind für solche Fälle irgendwelche Schriften als Fallback festgelegt, damit es nicht ganz so "verhunzt" aussieht.
Last edited by frase on Thu Oct 26, 2017 2:58 pm, edited 1 time in total.
Top
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:
Contact frase

Re: Template Workshop?

Post by frase » Thu Oct 26, 2017 2:57 pm

Simmyne wrote:Ich hab ihres/seines (??? :? )
Der Sascha, wenn ich nicht irre.
Top
Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Re: Template Workshop?

Post by Simmyne » Thu Oct 26, 2017 2:59 pm

Danke für den Tipps, hab's rein
Top
cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:
Contact cmb

Re: Template Workshop?

Post by cmb » Thu Oct 26, 2017 3:36 pm

Simmyne wrote:Jetzt können wir uns ja schon an die Navigation machen. Wie bekomme ich die erst einmal waagrecht? Baue ich gleich die Unterseiten mit ein? Ich bild mir ein, ich hätte von Christoph einen Link bekommen, aber ich weiß nicht mehr wo das war und in welchem Zusammenhang, aber erfolglos gesucht. :oops:
Du meinst vermutlich http://svasti.de/en/?Tutorials/Horizont ... -down-menu.
Christoph M. Becker – Plugins for CMSimple_XH
Top
Post Reply

Return to “Deutsch”