Logo responsive machen

[johnnyderdepp]

Hey,

auf meiner homepage http://www.extremabnehmen.de/ seht ihr ein logo, aber ich weiß nicht wie ich es responsive stylen soll...

könnt ihr mir mal bisschen helfen?

LG

 

[MrMurphy]

Hallo,

das Logo ist doch responsive (max-width). Deshalb ist mir nicht klar, was du erreichen willst.

Soll das Logo neben der Navi-Leiste stehen? Dann solltest du dich mit width, float und clear beschäftigen. Dabei stören dann aber auch feste Einheiten wie px.

Gruss

MrMurphy

 

[johnnyderdepp]

ja, das logo ist max-width, aber es tut sich eben nix...

 

[Banana_Jones]

Was soll sich denn tun?

 

[nookie]

Ich glaube er will erreichen, das sich Logo verkleinert.
http://jsfiddle.net/65u75/

 

[Tronjer]

Wenn du schon Boostrap einbindest, dann verwende das Grid. Spart viel Arbeit hinterher.

Was die Frage betrifft: Header-Container mit Divs für Logo und Nav, beide Elemente floaten und ihnen jeweils eine Breite in Prozent zuweisen. Bild in das Logo Div.

 

[Gelöschtes Mitglied 3007]

Max-width ist überhaupt nicht nötig um das Design auf den Content reagieren zu lassen.

Du musst nur soetwas in deine CSS datei einbauen

[css]
@media (max-width: 800px) /* die 800 musst du so einstellen das sie auf kleineren geräten bzw bildschirmen passen */ {
#image {
width: 100%;
height: auto;
}
#image-container {
width: XX%;
}
}
[/css]

und schon ist das Bild genau so groß wie der Container. Ich weiß es gerade nicht genau aber man kann glaube ich auch width: 100%; einfach weglassen und dann ist das bild entweder max größe oder kleiner falls nötig.

Und von diesen Blöcken brauchst du halt mehrere. Schätzungsweise angefangen bei 1000px für kleine monitore und dann kleiner. Findest auf Google einige anleitungen wie man das am besten aufteilt.
Musst dein CSS nur noch selber schreiben. Das kann dir keiner abnehmen. :)

lg