Auflösungsproblem / Browser Css

tomcux · 28. Januar 2015 um 14:05

Moin Moin!

Folgendes Problem bekomme ich nicht geregelt: Auf einem Bildschirm mit HD Auflösung habe ich eine Seite gebastelt. Diese wird - das war ja zu erwarten - auf Schirmen mit anderer Auflösung anders dargestellt. Mit max-width / hight sollte es zu fixen sein - wie bekomme ich aber die Browsereinstellung - z.B. Ansicht 110% ignoriert ?

Danke für Eure Zeit.
LG Tom

scbawik · 28. Januar 2015 um 15:01

Gar nicht, Browsereinstellungen lassen sich nicht beeinflussen.
Entweder musst du so programmieren, dass die Seite auch mit Zoom wunderbar läuft oder irgendwie eben damit leben.

tomcux · 1. Februar 2015 um 14:05

Moin,
ich muß nochmal nachhaken. Die Seite hier enthält Grafiken in der Größe 208x700px. Wo bekommen die Pics die Anweisung sich in 200 oder 300% zu präsentieren ? Ich dachte es läge an der Browser Einstellung, das scheint aber nicht korrekt zu sein.

Danke für Eure Zeit !
Tom

[HTML]

Thumbs Seite

Neue Bla Bla Bla

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kontakt

Impressum

Gewinnspiele

YouTube

[/HTML]

[CODE] * {
padding: 0px;
margin: 0px;
}

header    {
color: red;
display: block;
background-color: #303030;
padding: 25px;  
height: 30px;

}

h2 {
color: #fff;

margin-top: -61px;
font-size: 2em;
}

h1 {
font-family: courier New;
font-weight: 100;
font-size: 3.4em;
}

#wrapper {
  
    width: 1000px;
    margin: auto;
    font-family: Verdana,Helvetica,Trebuchet;
    color: #303030;
  


}

nav {
    text-align: right;
    margin-top: -40px;

        }


#navi a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    text-shadow: 1px 1px 2px grey;
    text-transform: uppercase;  
}
      
#navi li {
    display: inline;
    line-height: 29px;
    text-transform: uppercase;
    padding: 0px 10px;  
}      

article {
  
    width: 335px;
    height: 700px;
    color: #303030;
    font-weight: bold;
    margin-top: 115px;
    margin-right: 17px;
    float: left;      

}

p         {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 100;
}

aside {
    margin-top: 55px;
    display: inline-block;
  
    }

.banner {
float: right;
padding: 2px;
padding-top: 24px;
/*margin: 0px 422px 35px 0px; */
width: 208px;

}

.anima {
width: 208px;
height: 700px;
background: url(http://www.ceno.com/privat/blue.jpg) repeat-y;
-moz-animation: movy 20s linear infinite;
-webkit-animation: movy 20s linear infinite;
-o-animation: movy 20s linear infinite;
-ms-animation: movy 20s linear infinite;
animation: movy 20s linear infinite;
    }
@-webkit-keyframes movy /* Safari and Chrome */
    {
0% { background-position: 0px 700px; }
100% {background-position: 0px 0px;}
    }

@-moz-keyframes movy /* Firefox */
    {
0% { background-position: 0px 700px; }
100% {background-position: 0px 0px;}
    }

.banner1 {
float: right;
padding: 2px;
padding-top: 24px;
margin: auto;
width: 208px;

}

.anima1 {
width: 208px;
height: 700px;
background: url(http://www.ceno.com/privat/green.jpg) repeat-y;
-moz-animation: movy 15s linear infinite;
-webkit-animation: movy 15s linear infinite;
-o-animation: movy 15s linear infinite;
-ms-animation: movy 15s linear infinite;
animation: movy 15s linear infinite;

}
@-webkit-keyframes movy /* Safari and Chrome */
{
0% { background-position: 0px 700px; }
100% {background-position: 0px 0px;}

    }


.banner2 {
float: right;
padding: 2px;
padding-top: 24px;
margin: auto;
width: 208px;

}

.anima2 {
width: 208px;
height: 700px;
background: url(http://www.ceno.com/privat/red.jpg) repeat-y;
-moz-animation: movy 20s linear infinite;
-webkit-animation: movy 20s linear infinite;
-o-animation: movy 20s linear infinite;
-ms-animation: movy 20s linear infinite;
animation: movy 20s linear infinite;

}
@-webkit-keyframes movy /* Safari and Chrome */
{
0% { background-position: 0px 700px; }
100% {background-position: 0px 0px;}

footer {
clear: both;
background-color: #303030;
display: block;
height: 82px;
margin:auto;
bottom: 0px;
position: absolute;
width: 100%;

}

footer a {
display: inline-block;
background-color:inherit;
color: #fff;
font-family: arial;
text-shadow: 1px 1px 2px grey;
text-transform: uppercase;
text-decoration: none;
padding: 23px 13px;
}

footer li {
display: inline;
color: grey;
}

.foo {
width: 1000px;
margin: auto;
display: block;

}[/CODE]

tomcux · 2. Februar 2015 um 09:43

Hallo !
Um schneller mal einen Blick zu werfen habe ich die Page mal hochgeladen. LINK.

Was mir nicht klar ist, wenn die Page auf einem Bildschirm mit 1920*1080 perfekt passt, müsste doch auf einem Bildschirm mit höheren Auflösung die Page nur kleiner dargestellt werden, oder wo ist mein Denkfehler ?

Danke für eure Zeit.
Tom
PS. Falls Ihr noch andere Fehler seht - bin für jede Info dankbar !

Truffelkrieger · 2. Februar 2015 um 10:04

Was genau ist denn jetzt deine Frage? Sieht doch alles so aus, wie es vermutlich aussehen soll (Die Bilder sind genau 208x700 groß, da ist nichts 200 oder 300%)?

tomcux · 2. Februar 2015 um 10:09

@Trüffelkrieger
schaust Du mit einer höheren Auflösung als HD ?

scbawik · 2. Februar 2015 um 10:13

Ja (2560x1440), bleibt gleich.
Verstehe nicht was das Problem sein soll. Auch zoomen verhält sich wie erwartet.

tomcux · 2. Februar 2015 um 10:16

na denn scheint es ja richtig zu sein - ich habe hier nur eine HD Auflösung zum Testen. Gestern auf einer Retina Maschine verschob sich der Footer immer ?!

Danke fürs Testen!
Tom

scbawik · 2. Februar 2015 um 10:25

Kann nur bei kleinem Fenster (< 1000) Probleme feststellen, sonst nicht.

tomcux · 2. Februar 2015 um 19:51

bin wieder an der Retina Maschine und stelle fest, dass es doch nicht so ist wie ich wollte. Hier mal der Screenshot beider Versionen. Meine Frage ist:
Wenn mit HD-Auflösung die Seite komplett dargestellt ist, müsste doch mit einer höheren Auflösung die Seite nur kleiner dargestellt werden?! Ist es aber nicht ?
[ATTACH]Retina[/ATTACH]
[ATTACH]HD[/ATTACH]

Danke!
Tom

Tronjer · 2. Februar 2015 um 21:16

Für Retina-Grafiken liefert dir Google genug Treffer.

Die ganze Seite ist falsch aufgebaut. Die Überschrift sollte Bestandteil von Nav sein und mit der

tomcux · 5. Februar 2015 um 15:49

mir wachsen schon graue Haare…
Also - die genannten Fehler ausgebessert. Leider ist nun der Bereich und