mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 13:53 Benutzername: Passwort: Auto-Login

Thema: responsive layout vom 13.12.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> responsive layout
Seite: 1, 2  Weiter
Autor Nachricht
Ruccola
Threadersteller

Dabei seit: 03.06.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 13.12.2012 12:05
Titel

responsive layout

 Antworten mit Zitat Zum Seitenanfang
Hallo erst mal!

Ich hoffe ihr könnt mir weiter helfen.

Ich versuche gerade ein responsive layout mit html5, css3 und media queries zu basteln.

Im großen und ganzen bin ich mit dem Fortschritt recht zufrieden, nur hänge ich bei meinem header.

Ich lade in den header mit background-image: url ein Bild - funktioniert auch.
Es zoomt horizontal alles wie ich will wenn ich das Browserfenster hin und her ziehe.

Nur leider schaffe ich es nicht das sich die haeder höhe auch anpasst so dass die nav vertikal immer nach oben rutscht - im Augenblick funktioniert es nur mit der fixen Header Höhe von 263px.

Vielleicht kann mir ja jemand von euch weiter helfen?

Vielen Dank im Voraus!
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 13.12.2012 12:07
Titel

Antworten mit Zitat Zum Seitenanfang
Lade den derzeitigen Stand bitte mal irgendwo hoch, sonst können wir leider nur raten Glaskugel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Ruccola
Threadersteller

Dabei seit: 03.06.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 13.12.2012 16:48
Titel

Antworten mit Zitat Zum Seitenanfang
ChrisKam hat geschrieben:
Lade den derzeitigen Stand bitte mal irgendwo hoch, sonst können wir leider nur raten Glaskugel


hier wär ein demo link:

http://test.st-sign.at/resp_demo/
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 13.12.2012 17:09
Titel

Antworten mit Zitat Zum Seitenanfang
OK - jetzt kann ich mir ungefähr vorstellen, was Du meinst.

Ich glaube, Du machst Dir an der Stelle zu viele Gedanken - denn ich sehe keinen Grund, warum der Header (stufenlos) skalieren sollte. Bau einfach ein paar Mediaqueries ein für 2-3 Größen bei denen du die Höhe jeweils festsetzt und die BG-Bilder entsprechend tauscht.

und solche Sachen

Code:
         $(window).resize(function(){
              var w = $(window).width();
              if(w > 320 && menu.is(':hidden')) {
                 menu.removeAttr('style');
              }
          });
      });


sollten im Übrigen nur im Fallback für irgendwelche alten IE Versionen Anwendung finden, die grundlegende Funktionalität solltest Du unbedingt per CSS lösen!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Ruccola
Threadersteller

Dabei seit: 03.06.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 13.12.2012 17:20
Titel

Antworten mit Zitat Zum Seitenanfang
ChrisKam hat geschrieben:
OK - jetzt kann ich mir ungefähr vorstellen, was Du meinst.

Ich glaube, Du machst Dir an der Stelle zu viele Gedanken - denn ich sehe keinen Grund, warum der Header (stufenlos) skalieren sollte. Bau einfach ein paar Mediaqueries ein für 2-3 Größen bei denen du die Höhe jeweils festsetzt und die BG-Bilder entsprechend tauscht.

und solche Sachen

Code:
         $(window).resize(function(){
              var w = $(window).width();
              if(w > 320 && menu.is(':hidden')) {
                 menu.removeAttr('style');
              }
          });
      });




sollten im Übrigen nur im Fallback für irgendwelche alten IE Versionen Anwendung finden, die grundlegende Funktionalität solltest Du unbedingt per CSS lösen!



danke für deine Antwort!
Hab eh alles in einer externen css aber irgendwei schei ichs grad nimmer *Schnief*

body {
background-color: #ece8e5;
}
nav {
height: 30px;
width: 100%;
background:#FC3;
font-size: 11pt;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 800px;
height: 30px;
}
nav li {
display: inline;
float: left;
}
nav a {
color:#999;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 30px;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color:#FFF;
background-color: #8c99a4;
}
nav a#pull {
display: none;
}

header{
height: 263px;
background-image:url(Bilder/seite_1_r1_c1_s2.jpg);
-moz-background-size:contain;
background-size: contain;
background-repeat:no-repeat;
background-position:center;
}
section{
width: 100%;
height:500px;
background-color:#C33;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 0px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}


/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

Zuletzt bearbeitet von Ruccola am Do 13.12.2012 17:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 13.12.2012 17:27
Titel

Antworten mit Zitat Zum Seitenanfang
und nu?

Du schreibst halt einmal für die maximalen Auflösungen

header{
height: 263px;
background: url(Bilder/seite_1_r1_c1_s2.jpg) no-repeat;
}

und für kleinere entsprechend

@media screen and (max-width: 800px) {
header{
height: 180px;
background-image: url(Bilder/ne_nummer_kleiner.jpg);
}


}

Zuletzt bearbeitet von ChrisKam am Do 13.12.2012 17:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Ruccola
Threadersteller

Dabei seit: 03.06.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 13.12.2012 17:38
Titel

Antworten mit Zitat Zum Seitenanfang
ChrisKam hat geschrieben:
und nu?

Du schreibst halt einmal für die maximalen Auflösungen

header{
height: 263px;
background: url(Bilder/seite_1_r1_c1_s2.jpg) no-repeat;
}

und für kleinere entsprechend

@media screen and (max-width: 800px) {
header{
height: 180px;
background-image: url(Bilder/ne_nummer_kleiner.jpg);
}


}



hahaha coole Sache 1000Dank.

aber wie bist jetzt bei max 800 auf eine Höhe von 180 gekommen?
Intuition oder mit ner schlauen Formel ausgerechnet?

nur so für die kleineren Größen 600 und 480 zb
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 13.12.2012 17:56
Titel

Antworten mit Zitat Zum Seitenanfang
Das war nur ein Beispiel. Darauf kommen musst Du schon selbst - Du musst die verschiedenen Header schließlich auch selbst erstellen. Dabei solltest Du natürlich darauf achten, dass die Schrift niemals zu klein wird, auch nicht bei der kleinsten Größe. Sowas wie hier http://sasquatchfestival.com/ sollte dabei nicht passieren, denn dort ist der Header bei der kleinsten Größe für den Ar...

edit: Schöneres Beispiel: http://www.alsacreations.fr/

Zuletzt bearbeitet von ChrisKam am Do 13.12.2012 17:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Templatemonster >> Responsive Layout deaktivieren
Responsive Tester
Responsive Webdesign
Dreamweaver - Responsive CSS
RESPONSIVE WEBDESIGN?
Responsive Image Map
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB