Navigationsleiste fixieren - html css?

[RAMSoße]

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

 

[SoDaTierchen]

CSS: Position einfach mal durchlesen und verstehen. Ich nehme an, du möchtest dabei auch was lernen, deshalb keine fertige Lösung

 

[FranzvonAssisi]

.Impressum {

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

 

[RAMSoße]

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"

 

[SoDaTierchen]

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.

 

[FranzvonAssisi]

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

 

[RAMSoße]

@SoDaTierchen

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

.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.

Vielen Dank

PS: Wenn noch Zeit und Lust:

<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.

 

[Tokolosh]

Mit welchem Browser probierst du das? Bei Chrome ist es das hier:
https://developers.google.com/web/fundamentals/native-hardware/click-to-call

 

[RAMSoße]

Mit welchem Browser probierst du das? Bei Chrome ist es das hier:
https://developers.google.com/web/fundamentals/native-hardware/click-to-call

Im Firefox
Sieht soweit gut aus. Anscheinend hängt das dann mit dem Bildcode zusammen