zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IMG Header responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.02.2017, 21:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard IMG Header responsive

Hallo zusammen,

ich versuche gerade mein Logo responsive zu machen, aber leider klappt das nicht so ganz.

Mittels:
Code:
.innerheadermob {
  /*height:100px;*/
  height: 100%;
  background-image: url(img/header-logo-mob.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
 }
Wir das Logo gar nicht angezeigt. Wenn ich als height 100px; angebe wird es angezeigt aber um das logo herum habe ich einen größeren weißen rahmen, da ich ja 100px angegeben habe. Mit auto habe ich schon versucht, leider auch keinen Erfolg gebhabt.
Wie muss der Tag den richtig heißen, das es immer auf die passende VIEW-Größe angepasst wird?

Vielen Dank.

Gruß Tobias
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2017, 23:36
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von tsaenger Beitrag anzeigen
Wie muss der Tag den richtig heißen, das es immer auf die passende VIEW-Größe angepasst wird?
Was ist denn passend?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.02.2017, 07:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard

Passend meine ich das es automatisch die relative höhe und die richtige breite der Displaygröße hat.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.02.2017, 08:05
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Meine Kristallkugel sagt mir, dass das Elternelement von „.innerheadermob„ keine feste Höhe hat.
Oder worauf soll sich die „height: 100%;“ beziehen?

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 02.02.2017, 08:11
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von tsaenger Beitrag anzeigen
Passend meine ich das es automatisch die relative höhe und die richtige breite der Displaygröße hat.
https://www.w3.org/TR/css3-values/#v...lative-lengths

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #6 (permalink)  
Alt 02.02.2017, 08:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Meine Kristallkugel ist gerade aus der Reparatur zurück und sagt mir, dass du mit headermob und logo-mob mobil meinst. Das kann doch nicht der korrekte Weg sein, das einzubinden? Wieso wird das Logo als Hintergrundbild eingebunden, ist es denn nicht wichtig? Und warum nicht als svg?
Mit Zitat antworten
  #7 (permalink)  
Alt 02.02.2017, 09:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard

Guten morgen zusammen,

wie würde ich es denn richtig einbinden. Ein Eltern-Element gibt es nicht. Da hast du recht. Wie kann ich denn dem Elemet
Code:
<div class="innerheadermob"></div>
die maximale Breite angeben ohne eine feste höhe angeben zu müssen.
Ich habe das Logo als jpg und png. Kann also beides verwenden.

Gruß und Danke
Mit Zitat antworten
  #8 (permalink)  
Alt 02.02.2017, 09:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Abgesehen vom root Element gibt immer ein Eltern Element.
Und wie schon vorhin gesagt: Binde das Logo auch als Bild ein und nicht als Hintergrundbild. max-width: 100% dürfte deiner Anforderung nahe kommen, sofern meine Kristallkugel das korrekt interpretiert.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.02.2017, 09:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2013
Beiträge: 8
tsaenger befindet sich auf einem aufstrebenden Ast
Standard

Super, danke habe ich gemacht. Es hat geklappt.

Gruß und Danke
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.02.2017, 11:47
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Abgesehen vom root Element gibt immer ein Eltern Element.
Dazu ein Beispiel. Nicht wirklich durchdacht, aber dennoch lustig.
viewport → html (root) → body → …

HTML-Code:
<!DOCTYPE html>
<meta charset="utf-8">
<title>root parent (html) :: viewport</title>
<style>
html { position: relative; border: 2em solid #aaa; background-color: #ccc; }
body { margin: 3em 2em; background-color: #eee; }
p { top: 0; left: 0; padding: 0; }
p:first-child { position: fixed; }
p:last-child { position: absolute; }
</style>
<p>Position Fixed</p>
<p>Position Static</p>
<p>Position Absolute</p>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Img & Text, umfließen und responsive Uwe_B CSS 13 31.03.2015 17:59
Responsive Design: Leere Fläche beim Header entfernen Shyne (X)HTML 6 26.06.2013 14:57
rahmen um bilder- was mache ich falsch? R0sa CSS 3 19.11.2012 17:35
header verrutscht... weblearner CSS 6 03.12.2008 20:34
Header mit img, h1 und form Uwe_B CSS 22 02.10.2008 12:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:14 Uhr.