• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS reagiert nicht

faith

Mitglied
Hallo Ihr,

ich habe mal wieder ein Problem. Ich wollte einige Links ins "rechte Licht" rücken; d.h. mittels CSS ausrichten. Aber mein Browser reagiert auf keinerlei Änderungen - habe ich vom Code her was übersehen?

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/class" href="nav.css">
  <title>Testseite</title>
</head>
<body>

  <div id="nav">
    <a href="#">HOME</a>   
    <a href="#">TERMINE</a>
    <a href="#">MENUE</a>
    <a href="#">VITA</a>
    <a href="#">KONTAKT</a> 
  </div>
            
</body>
</html>

Code:
/* CSS Document */

#nav a {
  width:20%;
  display:inline-block;
  float:left;
  text-align:center;
  color:blue;
}

Vielen Dank für eure Hilfe schon mal ...
 
Werbung:
1. Nutze in deinem <link rel="stylesheet"... den richtigen type="text/css" - type="text/class", was du nutzt, ist mir unbekannt und kann ich auch nicht in der Doku finden.
2. Prüfe ob der angegebene Pfad zur 'nav.css' auch richtig ist - hast du die Datei in einem Unterordner, dann muss der Pfad auch 'unterordner/nav.css' heißen.
3. Browsercache leeren, damit die aktuellen Daten eingelesen werden und nicht ein 'alter' Stand aus dem Cache geholt wird.

Ansonsten schau mit den Webentwicklertool 'Konsole', ob irgendwelche Fehler angezeigt werden.

Ansonsten ist dein Code ok - das sollte, wenn du 1-3 beachtest funktionieren.
 
Super, vielen Dank Sailor!

... type="text/class" war das Problem.

Frage: Wo kann ich dieses Webentwicklertool 'Konsole' finden?
 
Werbung:
In opera und anderen Browser geht das auch das man im Browser Fenster Rechtsklick macht und dann auf
"Element untersuchen" klickt:
 
Dank' euch - ja mit Rechtsklick auf Browser klappt das!

Allerdings findet er den Fehler nicht - oder wo würde der angezeigt werden?

test.JPG
 
Werbung:
Klick mal auf Konsole. Da stehen dann die Fehler drinne die von Javascript kommen. Auch Fehler wie nicht geladene Bilder,weil es die Seite nicht gibt und vieles mehr wird da aufgelistet. Du kannst da auch mit deinen Code reinschreiben. wenn du im javascript
Code:
 console.log('hallo konsole')
schreibst kannst du das da auch sehen.
Das nutzen die meistenbei debuggen und programieren so weil alerts für sowas nicht geeignet sind . Gerade bei Scheifen fliegen dann die Alerts ein um die Ohren
 
Klick mal auf Konsole. Da stehen dann die Fehler drinne die von Javascript kommen.

Hallo basti,

nein - leider steht auch in Konsole der Fehler nicht! Mache ich da was falsch?

KonsoleJPG.JPG


Und dann noch eine Frage:

Warum ist denn bei mir auch der Bereich zwischen den einzelnen Ankern (Links) anklickbar - kann man das abschalten?

Vielen Dank für eure Hilfe!
 
nein - leider steht auch in Konsole der Fehler nicht! Mache ich da was falsch?

@Sailor sagte ja
Ansonsten schau mit den Webentwicklertool 'Konsole', ob irgendwelche Fehler angezeigt werden.

Wenn du keine Fehler mehr hast stehen da keine drinne.
In der Konsole steht auch nicht jeder Fehler drinne.
Zb dein Problem was gerade @Sempervivum dir erklärt hat wird nicht als Fehler angezeigt.
Nur Fehler wie syntax, nicht erreichbare Link,doppelte id's, falsch aufgerufene Funktionen die es nicht gibt, variabeln die es nicht gibt und vieles mehr.. Aber leider nicht jeder Fehler den es geben könnte. Sagen wir mal ganz GROB schwerere Fehler werde angezeigt.
Hoffe das es so ungefähr richtig erklärt ist
 
Werbung:
Vielen Dank Euch!

Also ich habe jetzt in der CSS den Code abgeändert und noch zwei Fragen dazu:

1)
Besteht auch die Möglichkeit, dass ich einen bestimmten, festen Abstand zwischen den a-Tags definiere (z.B. je 80px)?

2)
Wenn ich nun den Bildschirmausschnitt verkleinere, dann werden die Tags irgendwann abgeschnitten - das war bei meinem ursprünglichen Code in der CSS nicht der Fall - sie sind einfach enger aneinander gerutscht! Lässt sich das auch mit dem neuen Code wieder so lösen?


Mit Fehler meinte ich, dass ich nochmals zum Versuch

type="text/class"

im Head-Bereich geschrieben habe und dennoch KEIN Fehler in der Konsole angezeigt wird!

Danke ...
 
Zu 2): Sie rutschen auch bei meinem Code enger aneinander, bzw. der Abstand verringert sich bis sie aneinander kleben. Hast Du vielleicht das alte CSS nicht gelöscht, so dass immer noch width: 20%;wirksam ist?

Lieben Dank Sempervivum für deine Hilfe!

Doch, habe das alte CSS komplett gelöscht.


Sie rutschen nicht enger zusammen, sondern es ist so, dass beim "Kleinerziehen" des Browserfensters die Abstände zwischen den a-Tags identisch bleiben, aber unten ein Scrollbalken eingeblendet wird, den ich dann nach links/rechts schieben kann, um den Rest zu sehen. Und beim alten Code war es so, dass sie tatsächlich enger zusammengerutscht sind ...

Ist dieses Verhalten korrekt, oder müssten die Abstände automatisch zusammenschrumpfen; das tun sie bei mir nämlich nicht?
 
Reden wir von meinem Code aus Posing #9? Dann verstehe ich es nicht, bei mir sieht es ganz anders aus:
https://jsfiddle.net/Sempervivum/op0f897z/1/
Oder meinst Du die Version aus #12? Dann ist es so gewollt, weil Du nach einem festen Abstand gefragt hattest.

Ja genau, wir reden vom Code aus Posting #9.

Evtl. liegt das Problem ja darin, weil ich diese a-Tags in einer von drei verschachtelten Boxen untergebracht habe ... könnte das sein?

Danke! :smile:
 
Werbung:
Das könnte sein. Post doch mal den vollständigen Code oder die URL, wenn Du es online hast.

Ist so eben passiert ... :wink:


Code:
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Testseite</title>
</head>
<body>

    <div id="fenster">
        <div id="logo">
            <img src="img\logo.jpg" height="78" width="192" alt="Logo">
        </div> 
            <div id="nav">
               <a href="#">HOME</a> 
               <a href="#">TERMINE</a>
               <a href="#">MENUE</a>
               <a href="#">VITA</a>
               <a href="#">KONTAKT</a>
            </div>
        </div>   
      
</body>
</html>


Code:
/* CSS Document */

#fenster {
    width:1350px;
}

#logo {
    float:left;
    margin-left:100px;
    width:200px;
}

#nav {
    padding-top:25px;
    display:flex;
    justify-content:space-around;
}
 
Zuletzt bearbeitet:
Alles klar, der Grund für dieses Verhalten ist, dass Du dem umgebenden Container eine feste, relativ große, Breite gegeben hast. Das div#nav füllte diese Breite vollständig aus und display: flex; für div#nav bewirkt, dass die Elemente darin (die Flexitems) so angeordnet werden, dass ebenfalls die volle Breite ausgefüllt wird. Ist die Fenstergröße kleiner als die 1350px blendet der Browser die Scrollbars ein. Wenn Du willst, dass die Nav sich an die Fensterbreite anpasst, musst Du die feste Breite heraus nehmen oder u. U. max-width verwenden.
Für das Logo würde ich empfehlen, ebenfalls Flexlayout oder text-align zu verwenden, aber ich weiß nicht genau, wie Du dieses anordnen willst. In einer eigenen Zeile oder in der selben Zeile wie die Nav und links davon?

Danke Sempervivum,

habe ich das richtig verstanden, damit sich die Navigation der Fensterbreite anpasst müsste ich den Eintrag

Code:
#fenster {
    width:1350px;
}

gänzlich löschen?

Wenn ich das mache, dann verschieben sich alle a-Tags beim Verkleinern der Fenstergröße nach links über das Logo!

UND:

Eigentlich füllt ja das "div#nav" nicht die gesamte Breite des umgebenden Containers aus, weil ja links davon noch ein schmaler Container für das Logo enthalten ist, oder?

Das Logo steht quasi im div-Container "logo" links vor den a-Tags (im Container "nav") in etwa auf selber Höhe! Du meinst, ich sollte hier die feste Breite von 200px entfernen?

Wow, ist echt alles nicht so simpel! :frown:
 
Zuletzt bearbeitet:
Das ist möglich ohne extra Container und ohne padding/margin o. ä. für die Zentrierung austarieren zu müssen:

Wow, super toll - bin begeistert; vielen Dank!

Jetzt wird der Abstand beim Verkleinern der Fenstergröße zwischen den einzelnen a-Tags immer geringer und erst, wenn alle unmittelbar nebeneinander angeordnet sind, erscheint der Scrollbar am unteren Bildschirmrand. Denke das ist jetzt so ok, oder?

Noch eine Frage, bevor ich dann den von dir verwendeten Code studiere ... :smile:

Aus optischen Gründen hätte ich noch gerne eine waagrechte Linie <hr> unterhalb der einzelnen Tags.

Das Problem hierbei:

Da das Logo-Bild ja etwas höher ist als die rechts davon angeordneten Tags, soll die Linie, wenn sie das Bild waagrecht durchquert, für die Breite des Bildes unterbrochen sein und rechts dann knapp unterhalb der Tags weiterlaufen.

Habe das mal wie folgt versucht, aber die Linie bleibt stur immer unterhalb des Bildes:

Code:
hr {
margin-top: 15px;
}


Ist das noch irgendwie machbar, dass die Linie etwas nach oben versetzt ist und quasi das Bild im unteren Drittel durchquert?
 
Zuletzt bearbeitet:
Werbung:
Ja, genau so - supi!

Die Linie ist jetzt rel. dick und schwarz. Könnte man die Linie etwas dünner machen und evtl. noch ein Stückchen nach unten setzen?
 
Ganz großen Dank Sempervivum - hast mir wahnsinnig geholfen!

Jetzt werde ich mich mal durch die Codes kämpfen ... :smile:

Noch eine Frage zu "linear-gradient":

Wenn ich das richtig verstehe, dann können aus diesen vier Prozentangaben folgende drei Parameter

- Position
- Farbe
- Stärke

der Linie bestimmt werden.

Woher weiß ich aber nun, welcher Prozentwert für was steht - also was muss ich ändern, um beispielsweise eine dünne, schwarze Linie zu erhalten?
 
Werbung:
Zurück
Oben