Frage zu CSS

[Grover]

Hallo Leute,

ich bin mir zwar nicht sicher das dies das richtige Board ist, aber wenn ich die Frage auch noch in Englisch stellen muss, hört es auf .

Ich habe wenig bis sehr wenig Ahnung von html und css. Im moment habe ich ein fertiges Template und bastele via "Versuch und Irrtum" rum.
Jetzt habe ich ein paar Fragen zu css.

1. Wo gibt es eine gute Onlinequelle in Deutsch über CSS. Am besten PDF.
2. Ich versuche die Navigation zu setzen. Die Top Navi geht schon, nur die Navi an der linken Seite ist nicht zu plazieren.
    cms.eids.de unter Dirk
 

Code: Select all

#navleft{
            position:absolute;
            top:500px;
            left:0px;
            }

#tabsL {
      background:transparent;
      font-size:93%;
      line-height:normal;
      }

3. Muss ich für die Linke Navi einen "Rahmen" machen wo die rein muss? Warum kann man das nicht hinlegen wo man will? Als übergeordnetes Element?

4. Wenn ich Änderungen mache im css wie die position, dann werden diese teileweise ignoriert.Cache gelöscht. Neu laden. Alles hat nicht geholfen. Und auf einmal geht es.

Danke und Gruss

G.

[cyberman]

ich bin mir zwar nicht sicher das dies das richtige Board ist,

Im Zweifelsfall immer - ich kann das Posting ja aber auch noch verschieben  .

Ich habe wenig bis sehr wenig Ahnung von html und css.

Wenn du mit CMSms ordentliche Seiten hinbekommen möchtest, solltest du das ändern.

1. Wo gibt es eine gute Onlinequelle in Deutsch über CSS.

http://www.css4you.de/index.html
http://css.fractatulum.net/index.htm
http://www.on-design.de/tutor/webtricks ... tseite.htm
http://de.selfhtml.org/

... um nur ein paar zu nennen.

Die Top Navi geht schon, nur die Navi an der linken Seite ist nicht zu plazieren.

Schau dir einfach mal die CSS mit mitgelieferten Templates an - die sind nicht nur zum Benutzen, sondern auch zum Lernen hilfreich. Um auf das Menü zurückzukommen - so wurde zum Beispiel das bulletmenü plaziert:

Code: Select all

 div#menu_vert {
        float: left;
        width: 25%;
        display: inline;
        margin-left: 0;
    }

3. Muss ich für die Linke Navi einen "Rahmen" machen wo die rein muss?

Was genau meinst du mit Rahmen machen ? Du nimmst dir einfach einen -Container und setzt diesen in das Template. Die Positionierung erfolgt komplett über die CSS.

Warum kann man das nicht hinlegen wo man will?

Kann man schon - wenn man weiss, was man tut bzw. tun muss  .

4. Wenn ich Änderungen mache im css wie die position, dann werden diese teileweise ignoriert.

Wenn man sich an die Funktionsweise von CMSms bzw. CSS herantasten möchte, empfehle ich, dir (zunächst) die mitgelieferten Templates vorzunehmen und Schritt für Schritt deinen Bedürfnissen anzupassen.

Und auf einmal geht es.

Sehr seltsam ...

[Gunnar]

Schau doch mal auf diesen Seiten, ob dich das schon weiterbringt:

http://www.css-technik.de/
http://intensivstation.ch/
http://www.stichpunkt.de/

Da gibts viele Beispiele und Informationen.

[Grover]

Danke für die Infos. Ja, ich muss noch viel lernen.
Ich glaube ich fange mal neu an das design umszusetzen und nicht was bestehendes zu ändern.
DOch es währe schön, wenn Du mir sagen könnte wie man frei bewegt. Im Moment kommt es mir vor als würde es in Bereich des übergeordneten hängen bleiben. z-index:X; (X=1-3) brachte auch nichts.

Gibt es einen ext. Editor der CSS und WYSIWY(T)G (Try) kann?
Ich kenne nur Kompozer


LG.

G.

[Nogga]

Grover ich empfehle Dir einfach mal das Netz nach Layouts zu durchstöbern (Stichwort "CSS Layout"). Da gibt es genügend Guides für den Grundaufbau von 1, 2 oder 3-spaltigen Layouts.

CSS ist am Anfang etwas knackig zu verstehen, aber sobald man diese Hürde überwunden hat, gehts recht flott von der Hand.

Vielleicht solltest Du Dir auch mal die selfhtml-Referenz zum Thema Layouten mit CSS anschauen: http://de.selfhtml.org/css/index.htm

Divs sind Container-Elemente, die immer eine bestimmte Position einnehmen und sollten nur im Notfall mit festen Koordinaten belegt werden.

Als Einstiegshilfe könnte vielleicht auch http://www.oswd.org helfen - dort gibt es jede Menge CSS-Layouts, da kannste Dir ein paar Dinge abgucken!

[cyberman]

Gibt es einen ext. Editor der CSS und WYSIWY(T)G (Try) kann?

Wenn du dir bei Strato einen Host im Powerweb A -Tarif bestellst, bekommst du Adobe Golive CS hinterhergeworfen.

Ansonsten gefällt mir auch der Weberknecht / WeaverSlave ganz gut

http://www.weaverslave.ws/weaverslave.5.html

[Grover]

Hallo,

noch mal ich. Sorry aber ich brauche noch mal ein Tipp. Habe jetzt mal ein Testlayout erstellt. Jetzt möchte ich unter dem header rechtsbündig am schwarzen Rahmen die Navi. horizontal haben. Die Navi. habe ich mit MenüManger gemacht.
Der Navi habe ich im MenüManager mit bezeichnet aber im CSS noch keine div angelegt.
Den Aufruf des Tags Menümanager erfolgt in

Mit dem Kapseln in topnavi sollte das doch unter dem header nach rechts schieben. Was mach ich falsch?

Code: Select all

#topnavi {
              background: transparent;
              width:720px;
              height: 20px;
              margin-left:auto;
              margin-right:auto;
              text-algin: right;
             }

Zu finden unter http://cms.eids.de/uc.html

[Nogga]

Hier mal die ein Tipp wie man einen Div-Block mit einer Liste darin rechtsbündig anordnet und das Menü horizontal bekommt:

Code: Select all

#menu_container {
text-align: right;
padding: 5px;
}

#menu_container ul {
list-style: none;
}

#menu_container li {
display:inline;
}

wenn du dieses div jetzt unter Deinen Header schreibst also z.B. so:

Code: Select all

<div id="header">
  <img ....>
</div>
<div id="menu_container">
  <ul>
    <li><a href="...">link 1</li>
    <li><a href="...">link 2</li>
  </ul>
</div>
<div id="content">
  inhalt
</div>

sollte es gehen...

[Grover]

Danke Dir. Es geht.
Yep

[Grover]

Leider schon wieder ich mit der Hoffnung noch ein paar Infos zu bekommen. Ich brauche nur Tipps erst einmal wo ich ansetzen soll. Leider macht das Layout nicht das was ich will.
Istzustand: http://cms.eids.de/mittelalter.html

Ich habe die Navi im Headerbereich in eine DIV-Box gepackt mit der Hoffnung die Navi an den untern rechten Rand des Headers zu bekommen.
Die Navi darunter soll von links nach rechts gehen. Und Abstand zum content haben.
Der Content soll in eine Box die rechts mit einem Abstand x an der Linie anliegt. Der Content soll bei der von mir gewählten Schrift bei ca. 76 Zeichen einen Zeilennumbruch machen und nur soviel Platz habe, das eine DIN A4 Seite drauf passt. Wenn mehr Text ist, dann ein Link weiter.

Kann man das mit dem Zeilenumbruch im TinyMCE einstellen?

Danke und Gruss

G.

[Nogga]

Ich hab ehrlich gesagt nicht verstanden was Du meinst.

Aber zum Thema "nach x Zeichen Zeilenumbruch": Das ist nicht ratsam sich so festzulegen, da Du nie weisst wie die Schriftgröße auf dem Zielrechner ist, ob derjenige die Schrift überhaupt hat, etc.

[Grover]

Nichts Verstanden. Kann ich nachvollziehen.
Mit dem Zeilenumbruch: Gibt es kein Standardschriften? Man kann doch Schriften auch mitgeben? (Ob das aber Sinn macht)

NOch mal zu oben. Was kannst Du nicht verstehen? Ich weiß auch nicht wie ich es besser beschreiben kann.

Ich habe das Bild in eine DivBox plaziert. So wie ich es verstanden habe, wurde der Header in einen DIV gepackt

Code: Select all

#header {
             background: url(uploads/images/gfx/drama.jpg) #C0B68F no-repeat center;
             width:720px;
             height: 100px;
             margin-left:auto;
             margin-right:auto;
            }

Wenn ich jetzt im Template schreibe

Code: Select all

<div id ="header">
          <div id="naviH">
            {cms_module module='menumanager' template='TopMenu' start_level="2" number_of_levels="1"}
          </div>
      </div>

und naviH

Code: Select all

#naviH {
            align: right; 
            valign: bottom;
           }

schreibe, dann müsste doch die Navi in der DivBox header (720 x100 px) untern rechts liegen?

[cyberman]

Gibt es kein Standardschriften? Man kann doch Schriften auch mitgeben?

Es gibt natürlich ein paar wenige Standardschriften, die in (fast) jedem Betriebssystem vorhanden sind. Für Sonder-Schriften würde ich dir das Truetypetext-Modul empfehlen

http://dev.cmsmadesimple.org/projects/truetypetext/

Ansonsten noch ein kleiner Tipp - Firefox und das Webdeveloper-Plugin können bei der Arbeit mit CSS & Co sehr nützlich sein  ...

[Grover]

Das Modul ist nicht schlecht. Damit kann man auch ein paar Überschriften herstellen. Geht das auch im Seitentitel, Navigation und Links?

Das Adon im Firefox habe ich schon. Zwar kann ich mir damit die DivBoxen anzeigen lassen aber warum die dort ist und nicht da???

[Nogga]

Ach das meinst Du!

Naja, rein theoretisch muesste es so funktionieren:

Code: Select all

<div id="header">
  <div id="menu">
    blubb
  </div>
</div>

CSS:

Code: Select all

header {
  height: 100px;
  background.....
}

menu {
  height: 100px;
  valign: bottom;
  text-align: right;
}

Aber das funktioniert nicht immer