Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

[Tobadin]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

bei li issn padding-left: 2em; das könnte es sein.

Ein Navigationselement sollte wegen der Barrierefreiheit als LI Element aufgebaut sein.

<li><img src="bilder/polo6Nv4_02.jpg" width="176" height="24" /></li>

Die bessere oder zumindest einfacher zu behandelnde Möglichkeit ist dem Li Elternelement ein background image zuzuweisen. Ich denke auch, dass du dem Li dann als Pseudeelement behandeln möchtest :hover richtig?

Sieh in diese Richtung mal nach, ich persönlich bin mir auch nicht mehr Hunderpro sicher wie das funktioniert.
Seit ich dauernd mit Joomla rummache und eigentlich bloss noch die bilder editieren muss vergesse ich soo vieles....

Aber Hut ab, mein Gutster du hast Kampfgeist. Weiter so!

PS: Frage an alle: Kann ein <li> Tag eigentlich mit nem Bild gefüllt werden?! ich würde <li> im css ein Hintergrundbild hinzufügen.

 

[folientechniker]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Gibt es keinen Video Tut hier? Würde mich auch interessieren.

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Moin zusammen,

Das mit dem li Element einen background-image zuzuweisen ist keine schlechte Idee denke ich aber dann muss ich ja jedem <li> in der Navileiste eine eigene ID verpassen und der ID dann ein backgroundimage im CSS zuweisen oder ?

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Eine eigene ID benötigst du nur, wenn du jedem ein anderes Bild geben willst, sonst reicht es wenn alle eine class bekommen, die das Hintergrundbild enthält !

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Es sollen ja alle Listenelemente im Bereich navigation ein eigenes Bild bekommen.

Auf meiner Seite:
kannst du ja unter dem banner oben die einzelnden Button sehen.
Die sollen aber von links nach rechts direkt hintereinander angezeigt werden ohne Zeilenumbruch.

Tobadim hat mir gesagt ich könnte für die einzelnden <li> bereiche dann ein background-image in der CSS definieren.

Dafür muss ich doch dann im HTML Code quasi so schreiben:

<div id="navibereich">
<ul>
    <li id="navileer"></li>
    <li id="navistartseite"></li>
    <li id="navigaestebuch"></li>
    <li id="navilinks"></li>
    <li id="navikontakt"></li>
    <li id="naviimpressum"></li>
    <li id="navileer2"></li>
</ul>

</div> <!-- Ende navibereich -->

und ich CSS so: (nur ein Besipiel für den ersten Button)

#navibereich {
  background-color: black;
  margin: 0px;
}
    #navibereich ul {
      margin-bottom: 0px;
    }
    #navibereich li {
      display: inline;
      list-style-type: none;
      margin-right: 0px;
      margin-left: 0px;
      }
      
      /*===============================
        3.1 Navibuttons
        ===============================*/
      
          #navibereichleer {
              background-image: url(bilder/polo6Nv4_02.jpg);
              margin: 0px;
              }

aber irgendwie wird kein Bild oder sonst was angezeigt.

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Also dem <li> eine ID zu geben geht laut video auf jeden Fall.

Allerding kann ich dann im css zwar die ID ansteuern aber den Befehl zum background-image vergeben funktioniert nicht. Weder mit width und height angaben noch ohne.

Wahrscheinlich mache ich irgendwas falsch.

Wenn ich im HTML die Grafik einbinde zwischen den <li> geht es aber dann habe ich halt die abstände und den automatischen Zeilenumbruch in der Naviliste.
Auch wenn ich das von Tobadim angesprochene

bei li issn padding-left: 2em; das könnte es sein.

raus nehme ändert sich nichts.

Mir selbst wäre es lieber wenn ich die Grafik im CSS einfügen könnte weil mir dann die möglichkeit offen bleibt die Grafik bei einem "rollover" noch verändern kann (zB das die Schrift anfängt zu leuchten oder sonstwas)

Hat wer ne Idee ?

 

[hedoo]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hallo,
du kannst ein background-image einem <li> mitgeben.
Du musst dann in der css statt "display:inline" "display:inline-block" schreiben. Dann kannst du auch dem <li> mit css eine Höhe und Breite mitgeben. Also

li.eins{display: inline-block; width: 100px; height: 30px; background: url("bilder/bild_01.jpg")}

Gruß hedoo

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Wie bereits geschrieben, wenn du für jedes LI ein anderes Hintergrundbild nimmst, MUSST du jedem eine andere ID oder CLASS geben.
Daran brauchst du also nicht zweifeln.

Da ein Element mit Hintergrundbild in deinem Fall keinen Text mehr hat deres aufspannt, musst du auch Angaben zu Breite und Höhe machen.
Höhe könnte man einmal für alleElemente vergeben.

Standardmäßig beginnt jedes LI-Element in einer eigenene Zeile.

Dies muss man ihm zB mit Floaten abgewöhnen.
Es gibt auch noch andere Wege !

Je nach gewähltem Weg ist noch zu beachten, dass die Länge des Inhalts, in Deinem Fall des Bidles noch einen Zeilenumbruch hervorrufen kann.
Dann sind nämlich die Inhaltselemente und die Anstände deren zusammengenommen zu lang für Deine Zeile.

Ich würde wahrscheinlich einen Teil des Navi-Hintergrundes an das UL-Element oder den umschliessenden Div-Tag geben (und mit repeat-x auf die Läde der Navi wiederholen lassen) und die Grafik-Links dann nur im LI ... bzw .. in der Endversion als Link im LI einfügen !

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

@hedo,

das war mal ein Ansatz

Muss ich den "display:inline-block" in den Bereich

  #navibereich li {
      display: inline;
      list-style-type: none;
      margin-right: 0px;
      margin-left: 0px;
      }

setzen ?

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Du kannst es da reinsetzen.

Um mehrere Elemente anzusprechen gibt es immer auch mehrere Wege.

div.navi li

oder li.id1, li.id2,.. ..

Mit beidem könntest du die gleichen Elemente ansprechen um ihnen allen das gleiche Format mit zu geben !

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Habs einfach probiert und es klappt.

Allerdings habe ich immernoch die Abstände rechts von den Grafiken

Hier nochmal Link:

Könnt Euch ja den Quelltext mal rein ziehen. Ist schon eher nach meinen Vorstellungen da es halt in der CSS Datei liegt mit den Bildern.

Nun sind noch die Abstände doof !

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Ahaaaaaaa....

Ich habs hinbekommen, dass die dinger aneinander Heften.
Ich habs so gemacht:

#navibereich li {
      display: inline-block;
      list-style-type: none;
      margin-right: -5px;
      margin-left: 0px;
}

Ist das eher ne blöde Lösung mit dem Margin-right: -5px; oder kann man das so machen ohne Einfluss auf Browserkompatiblität ?

 

[hedoo]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hallo, gib dem <li> doch einfach ein float:left; mit.
Gruß
hedoo

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    #navibereich li {
      float:left;
      display: inline-block;
      list-style-type: none;
      margin-left: 0px;

So passt es jetzt von den Abstände her ist so wahrscheinlich besser jetzt anstelle des rumgefummels im margin oder ?

Dann habe ich ja erstmal das wichtigste für heute geschafft.

Nun zur nächsten Baustelle:

Ich habe ja links und rechts die einzelnden rechtecke im Design für die Navigation.

Denen möchte ich jetzt einen eigenen Div bereich zuweisen damit ich umabhängig von der mitte Contetn einfügen kann.

Gibt es dazu nen Tutorial ?
Ich würde jetzt versuchen wieder eine <ul> mit ID zu coden und in diese dann drei <li> nebeneinander floaten.

Ist das der Ansatz zur Lösung ?

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Der Ansatz ist halbrichtig.

Listenelemente sind da um Aufzählungen zu erstellen.

Eine Navigationi st im Übertragenen Sinne eine Lsite von Links.

Contentboxen die selber Inhalte enthalten sind allerdings keine Listen mehr.

Aber du kannst 3 Divs (oder X) nehmen, die jweils eine eindeutige ID bekommen und diese dann floaten.

Schau dir hierzu auch mal das Thema clearing von Floats an.

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Zum clearing von floats...

Ist da auf einer der DvDs nen Kapitel drauf ich kanns net finden irgendwie.
Ansonsten vllt nen Link zum Tutorial ?

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Mecker :
Findest du hier im Forum zu hunderten !

Suchmaschine Deines Vertrauens : css clear .. das hilft weiter !!!!

Hier aber trotdem ein Link : float und clear | Webdesign mit XHTML und CSS

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Jo okay sorry,

habs mir durchgelesen und die Div's mitfilfe von Float: left anneinander gepappt.

Klappt alles soweit aber wenn ich jetzt in den linken DIV im HTL Text einfüge verlängert sich die Kiste nicht automatisch. Da hab es doch ein repeat befehl für oder ?

 

[Samuelll]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Wenn du die Box nur in der Länge nach nuten verlängern willst, kansnt du direin Bild erstellen, dass diesen Bereich füllen soll und dieses mit "repeat-y" bis zum Ende der Box nach unten hin wiederholen lassen.

 

[mkuetting]

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Jetzt habe ich nurnoch ein letztes kleines Problem:

Ich habe jetzt einfachheitshalber die Seite etwas umdesigned.

Ich habe quasi jetzt den Banner unter dem Banner die Navi und dann noch eine kleine Grafikleiste.

Dadrunter soll jetzt ein dreispalten System ohne Grafiken !!!
Einfach drei Spalten nebeneinander die ich unabhängig voneinander mit Text füllen kann !

Meine Idee wäre jetzt folgende gewesen:

HTML:

<div id="mike">
<h2># Mike Navi</h2>
</div><!-- Ende mikebereich -->

<div id="textbereich">
<h2># Textbereich</h2>
</div><!-- Ende textbereich -->

<div id="nik">
<h2># Nik Navi</h2>
</div><!-- Ende nikbereich -->

und im CSS:

#mike {
  position: absolute;
  width: 170px;
  background-color: #f3c600;
  color: black;
  }

#textbereich {
  float: left;
  background-color: white;
  color: black;
  margin-left: 170px;
  width: 760px;
  }
  
#nik {
  float:left;
  position: absolute;
  width: 170px;
  background-color: #f3c600;
  color: black;
  }

Funktionier irgendwie nicht soooo richtig, sehe zwar die divs aber nur 2 undzwar "Nik" ganz links und daneben dann das weisse "textbereich"... "mike" ist gar nicht vorhanden.