media-queries min-width und max-width

rernanded

Erfahrenes Mitglied
Hallo

ich will min-width und max-width kombinieren

Und zwar soll alles bis 600px Gerätebreite
und alles zwischen 601px und 1200px Gerätebreite
teils unterschiedliche Properties haben.

Ich nutze (top,left,right sind unterschiedlich) folgende media queries:
HTML:
@media (min-width: 601px) and (max-width: 1200px){
#intro {
    position: absolute;
    top: 70%;
    left: 25%;
    right: 25%;
    z-index: 100;       
    background: #FFF;
    color: #ff5500;   
    font-family: Lato;
    font-size: 13px;     
            /*box-shadow: 30px 30px 30px #cccccc;*/
    border: 6px solid #fff;
    border-radius: 30px;
    padding: 13px 13px 13px 13px;    
}   
}
@media (max-width: 600px) {
#intro {
    position: absolute;
    top: 40%;
    left: 10%;
    right: 10%;
    z-index: 100;       
    background: #FFF;
    color: #ff5500;   
    font-family: Lato;
    font-size: 13px;     
            /*box-shadow: 30px 30px 30px #cccccc;*/
    border: 6px solid #fff;
    border-radius: 30px;
    padding: 13px 13px 13px 13px;    
}   
}
Das funktioniert aber nicht so richtig, es werden nur die properties aus den oberen media queries für #intro wirksam.
MONI
 

Sempervivum

Erfahrenes Mitglied
Hm, wenn ich das in eine Testdatei eintrage mit diesem HTML:
Code:
<body>
    <div id="intro">
        ABC
    </div>
</body>
funktioniert es einwandfrei, die Position schlägt um bei 600px. Ich vermute, dass es irgend wie am Umfeld liegt. Hast Du das online?
 

rernanded

Erfahrenes Mitglied
Ich habe es online(BETA), aber ich müsste erst etliche Inhalte entfernen und umbauen, weil das Firmenseiten und Domains sind die erst in Kürze zu sehen sein dürfen.
Lass es uns so versuchen!

Vllt. liegt es an einer versteckten Weiterleitung/Frame-Weiterleitung. Die Hauptdomain www.beispiel123.de wird auf unsere Serverseite umgeleitet, Ziel: www.beispielfirmaabc.de/unterseite/unterunterseite.php.
Und dabei kann ich sehen, dass Inhalte die ich per www.123.de aufrufe anders angezeigt werden als würde ich die www.beispielfirmaabc.de/unterseite/unterunterseite.php direkt aufrufen.

Richtig merkwürdig wird es beim Unterschied zwischen landscape und portrait mit dem Smartphone.

Monika
 
Zuletzt bearbeitet:

rernanded

Erfahrenes Mitglied
Es entsteht ein frameset durch die Weiterleitung. Das Problem taucht aber nur bei Smartphones auf.
Desktops und Tablets machen keine Probleme.
MONI
 

Sempervivum

Erfahrenes Mitglied
Es entsteht ein frameset durch die Weiterleitung.
Kommt mir bekannt vor, ich habe so etwas in einem anderen Projekt, da sieht es im HTML-Inspektor so aus:
weiterleitung-frameset.png

Allerdings habe ich dann noch keine Erklärung für das Problem, das Du beschreibst.
Wenn das so ist, müsste alles an CSS-Dateien etc. auf der zweiten Domain liegen, die das Ziel der Weiterleitung ist (www.beispielfirmaabc.de/unterseite/unterunterseite.php). Was aber der Fall zu sein scheint, denn Du schreibst ja, dass diese Seite bei Direktaufruf funktioniert.
 

basti1012

Erfahrenes Mitglied
Ohne den Code zu kennen, kann man nur raten.
Ich könnte mir noch vorstellen.
Wenn die Seite z. B. 700px breit ist, der iFrame aber ein breite hat von 80 % ,dann läuft im iFrame eine andere Mediaqueries Code, weil de iFrame noch kleiner als 600px ist.

TO: Versuch doch mal ein Beispiel zu erstellen.
Kopiere den Code den man brauch , um den Fehler nachzustellen und ersetzte den Text durch lorem ipsum.
 

rernanded

Erfahrenes Mitglied
Hallo Ihr zwei,
Probleme gibt es wie gesagt nur bei SmartPhones.

Bei Aufruf der www.beispiel123.de bekomme ich folgenden Quelltext der durch die Weiterleitungsfunktion des Domainproviders erzeugt wird:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head><meta name="robots" content="noindex,follow">
<title>123</title>
</head>
<frameset rows="100%">
<frame name="16248019791" src="www.beispielfirmaabc.de/unterseite/unterunterseite.php" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scrolling="auto" frameborder="no" noresize>
</frameset>
</html>

Ich könnte nun im css das frameset und den frame noch mit properties versehen. Bzw. ich kann das ja nur allgemeingültig machen, da ich keine class oder id habe.

Ausserdem ist der DOCTYPE ein anderer als bei der www.beispielfirmaabc.de/unterseite/unterunterseite.php.
Dort lautet er nur
HTML:
<!DOCTYPE html>

Ich würde die versteckte Weiterleitung ändern und gut wär's. Nur mein Boss will das nicht.

Wie geschrieben, die Lösung könnte also sein im css das frameset und das frame mit properties zu versehen die ansonsten für body gelten. Ist das eine gute Idee???????????

MONI
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
Wenn es nur Handys betrifft,
versuch doch mal das in den <head> zu setzen
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Und wenn möglich versuche auch überall den HTML5 DOC Type zu nutzen.

Wenn das nicht geht, zeig uns mal den Code von der Unterseite.
 

rernanded

Erfahrenes Mitglied
Bitte schön, Deinen meta viewport hatte ich schon drin:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>blablabla</title>
<meta property="og:title" content="blablabla"/>
<meta property="og:type" content="article"/>
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="blablabla"/>
<meta NAME="keywords" content="blablabla">
<meta name="google-site-verification" content="123456789012345678901234567890" />



<link rel="icon" href="???.ico">

<link href="123.css" rel="stylesheet">
   <link href="123_media_queries.css" rel="stylesheet">



</head>
<body>
...