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

[Samuelll]

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

Setz die Container doch mal einheitlich .. nur Divs oder nur Floats.
So ein Mix macht es nur unübersichtlich !

 

[mkuetting]

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

ehmmm...

was genau willst du mir damit jetzt sagen ?!?!
Bin gerade etwas verwirrt :/

 

[Tobadin]

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

Ich denke samuell meint die Positionierung,

Also entweder nur Floats oder nur position absolute ?!

 

[hedoo]

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

#mike {
   float: left;
  width: 170px;
  background-color: #f3c600;
  color: black;
  }

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

gruß hedoo

 

[Samuelll]

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

Jungs .. ihr seit gut. Genau darum gings.

Nur floaten oder nur position xxx

 

[mkuetting]

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

Jaaaaa.

Habe den Code von hedoo mal durch meinen ersetzt.
Könnt ihr mal gucken ob bei Euch alles korrekt angezeigt wird ?

 

[Samuelll]

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

Schaut auf den ersten Blick ganz vernünftig aus !

EDIT :

Nur optisch ... Quelltext lässt sich sicher noch einiges tun.

 

[mkuetting]

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

Das freut mich.
Haste den Quelltext auch kurz überflogen oder nur optisch betrachtet ?

 

[mkuetting]

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

Okay, aber ansich ist das doch auf jeden Fall schonmal in ordnung um weiter dran zu bauen oder ?

Hab gerade versucht. in der Navileiste dem kasten "Kontakt" einen Link hinzuzufügen.

<ul>
    <li id="navi01"></li>
    <li id="navi02"><a href="kontakt.html"></a></li>
    <li id="navi03"></li>
    <li id="navi04"></li>
    <li id="navi05"></li>
    <li id="navi06"></li>
    <li id="navi07"></li>
</ul>

Ist aber irgendwie nicht klickbar der "button" muss ich im CSS den Link setzen oder watt ist da los ? hab im video geguckt aber zu meinem Problem auch keine richtige Lösung gefunden ?!?!

 

[hedoo]

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

Wenn du in deinem Fall in der Navigation mit Hintergrundbildern arbeitest, musst du dem Link auch eine Breite und Höhe zuweisen:

a{display: block; width: 150px; height: 20px;}

Dann müsste es gehen.

hedoo

 

[mkuetting]

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

und das kommt in die CSS datei ?

 

[hedoo]

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

Jo, z.b.:
li#navi01 a{width: 100px; height: 20px; display:block}

für die anderen Navigationspukte entsprechend.

 

[mkuetting]

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

Geht nicht in meinen Kopf.
Vllt ists auch schon zu spät

Immerhin hab ich einiges geschafft in den paar Stunden !

 

[Tobadin]

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

Joah auf jeden Fall ist fas schon mal ein guter Anfang!
Versuche um etwas barrierefreiheit undSEO ZU HABEN DIE li Elemente nicht mit Bildern sondern mit Text zu Duellen

 

[mkuetting]

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

Vielleicht kannst du mir nochmal nahbringen wie das mit dem verlinken nun funktioniert ?

Oben ist der Code ja

 

[Tobadin]

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

Naja das ist doch einfach deshalb bin ich mir
nicht sicher ob ob es das ist was du
meinst aber was
sonst?
Das <li> </li> schließt du mit dem <a>
und schon wird daraus n Link?

War das echt die Antwort auf die Frage?

Edit: Ey ne sorry nicht umschließen.
Beispiel:
<Li id=''blabla''> <a href=''index.html''>zur Startseite</a></Li>
boah ist das aufm
iPhone
ne Qual

 

[Tobadin]

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

Bild als list-style: was ist mein Fehler??? - Forum - CHIP Online

hab nen sehr guten Eintrag hier gefunden
bin am iPhone deshalb ist die Antwort etwas sporadisch aber es dürfte dir helfen

 

[mkuetting]

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

Hi, bin auch mit dem eierphone online Schule ist einfach zu langweilig...

Heißt also, dass ich das Background image wieder raus nehme aus der CSS und dafür das bei Chip.de vorgeschlagene Code schnippsel zu verwenden ?

Dann habe ich das Bild als listenbild was mich eher dazu berechtigt es mit einem Code im CSS auf eine andere Seite zu verlinken ?

 

[Tobadin]

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

Also hiermit werfe ich mal eben wieder alles weg was von mir diesbezüglich vorher kam.
(Bin Student hab erst am 15.3 wieder vorlesungen)

Also ich wollte eigentlich gerade ein Tutorial schreiben wie man sowas macht, allerdings kam mir ein schönes Mädchen vorraus und hat hier:

bereits ein sehr gutes Tutorial zu diesem Problem geschrieben.
((Klick auf Link kostet 3 Punkte))

Aber damit ist ja alles gesagt bezüglich der Navigation

Wenn du jedoch nicht für alle Navigationselemente ein seperates Bild benötigt gibt es noch die Navigationstechnik mit CSS nach ääh Gildon heisst der glaub ich.

Der Trick dabei ist einfach den Hover effekt mit einer Background verschiebung zu realisieren.
also :hover{
background-image: url(.....);
background-position: 0px -100px;
}

als Beispiel.
Das backgroundimage sieht halt dann gestafelt aus und er verrutscht nur das HIntergrundbild. SO mache ich es meistens um einfache Schaltflächen zu gestalten.
Kann übrigends auch mehrstufig sein, dafür gibt es keine einschränkung.
So ist normal, active, hover, onclick alles in einem Bild und einheitlich für jeden Listenelement abgedeckt.

Im Gockel findest du es als "Die praktische ein Bild navigation"

 

[mkuetting]

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

Du bist Klasse.

Habe es mir am iPhone durchgelesen
habe in den letzten Tagen durch euch und die DVDs echt ne Menge neues kennnen gelernt

mit meinen jetzt vorhanden Rücklagen im Kopf und im Internet werde ich mich diese Woche erstmal um ein für mich 100%ig passendes Layout zu entwerfen welches ich dann mithilfe von html und CSS scripte.

Vielen dank für eure Hilfe nochmal

Gruß Mike