Navigationsleiste fixieren - html css?

RAMSoße

Lt. Commander
Registriert
März 2018
Beiträge
1.559
Moin

Ich bastle gerade an einer Website. Bin, was html und css betrifft relativ unerfahren bzw. habe ich vor langer Zeit mal etwas html gemacht aber ohne css. Soweit so gut. Ich würde gerne einen kleine farbige Leiste mit Impressum und Copyright darstellen. Diese soll sich ganz unten befinden und beim Scrollen fixiert bleiben.

folgenden Code habe ich getipp:

html:

<div class="Impressum">Impressum</div>
</body>


css:

.Impressum {

text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;font-weight:bold;
font-size:15px;
letter-spacing: 1px;
font-size: 20px;
margin: 0px;
color: #262626;
position: fixed;


}

Impressum erscheint oben und ist auch nicht fixiert. ich habe sicherlich da nix definiert. Weiß aber nicht genau wie. Padding? Margin? Brauch ich noch ein display: inline-block; für den Streifen?

Freuen mich über Tipps und Hilfen
 
CSS: Position einfach mal durchlesen und verstehen. Ich nehme an, du möchtest dabei auch was lernen, deshalb keine fertige Lösung :)
 
  • Gefällt mir
Reaktionen: RAMSoße und sebbolein
RAMSoße schrieb:
Wäre toll, wenn du deinen Code in einen Codeblock schreibst, dann kann man ihn auch besser lesen.

Außerdem: CSS-Selektoren sind case-insensitive, d.h. normalerweise schreibt man sie einfach klein (funktionieren tut es so aber natürlich auch).

Lg
 
  • Gefällt mir
Reaktionen: RAMSoße
SoDaTierchen schrieb:
CSS: Position einfach mal durchlesen und verstehen. Ich nehme an, du möchtest dabei auch was lernen, deshalb keine fertige Lösung :)

Ich glaube das hilft mir schon etwas weiter. Nun möchte ich aber, dass "border" bzw. die balkenfarbe durchgehend ist. so wie bei Computerbase oben und nicht einfach aufhört. Ich hätte danach gesucht aber anscheinend benutze ich nicht das korrekte "wording"
 
Für Fehleranalysen solltest du immer Screenshots und HTML- /CSS-Schnipsel bereitstellen. Von der Beschreibung her ist es kaum möglich, das Problem zu lösen.
 
RAMSoße schrieb:
Nun möchte ich aber, dass "border" bzw. die balkenfarbe durchgehend ist. so wie bei Computerbase oben und nicht einfach aufhört.

Du musst den Balken auf volle Breite bringen. Das kannst du entweder mit dem Setzen der Breite erreichen oder angeben, dass der Balken links und rechts keinen Abstand haben soll.

Lg
 
@SoDaTierchen

Super! Danke für den Denkanstoss. Code sieht jetzt so aus:

Code:
.Impressum {
    
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 6px solid #262626;
  width: 100%;
  display: inline-block;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#fdffff;
  background: #262626;
}

Entscheidend war denn "width: 100%" anzugeben.

leiste.png


Vielen Dank

PS: Wenn noch Zeit und Lust:

Code:
<div class="call"><a href="tel:+491234012345">
                            <img alt="call" height="45" src="phone.png" width="45" href="tel:+491234012345" class="auto-style1"/></a></div>

Funktioniert das nur bei Androit? Mir wird im Browser kein Telefonlink geöffnet.
 
Zurück
Oben