• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Auflösungsproblem / Browser Css

T

tomcux

Neues Mitglied
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
 
tomcux schrieb:
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
Zum Vergrößern anklicken....

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.
 
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: 
<!DOCTYPE html>
<html>
<head>
    <title>Thumbs Seite </title>
    <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylethumb.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<header>
<!-- hier ist noch Platz-->
</header>
<div id="wrapper">
<h2>Header Überschrift</h2>
<nav id="navi">
    <ul>
        <li><a href="#">Link 01</a></li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
</nav>
<article>
    <h1>Neue Bla Bla Bla</h1><br>
    <p class="text">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.</p>
</div>
</article>
<aside>
        <div class="banner" style="max-width: 100%;">
            <div class="anima"></div>
        </div>
       <div class="banner1" style="max-width: 100%;">
            <div class="anima1"></div>
        </div>
              <div class="banner2" style="max-width: 100%;">
            <div class="anima2"></div>
        </div>
       </aside>
</div>
<footer>
   <div class="foo">
   <ul>
        <li><a href="#">Kontakt</li>
        <li><a href="#">Impressum</li>
        <li><a href="#">Gewinnspiele</li>
        <li><a href="#">YouTube</a></li>
</ul>
    </div>
</footer>
</body>
</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;
  
}
 
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 !
 
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%)?
 
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
 
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 :( ?



Danke!
Tom
 

Anhänge

  • RETINA.jpg
    RETINA.jpg
    17 KB · Aufrufe: 46
  • HD.jpg
    HD.jpg
    12,2 KB · Aufrufe: 44
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 <ul> gefloatet werden. Bei den Containern werden <article> und <aside> gefloatet, aber nicht die Banner, und die max-width ist überflüssig. Footer am Seitenende positioniert man mit der Sticky-Footer-Methode und nicht mit position: absolute.
 
mir wachsen schon graue Haare....
Also - die genannten Fehler ausgebessert. Leider ist nun der Bereich <article> und <aside> nicht mehr im Bereich des #wrappers :confused::confused:. Für sachdienliche Hinweise wäre sehr dankbar. Auch die Herangehensweise der Fehlersuche wäre Interessant. Mit Fire Bug komme ich leider nicht ans Ziel ?!

Hier die aktuelle Version-----KLICK-----

Das der Footer mit der Sticky-Footer Methode und nicht mit position: absolute, positioniert werden soll ist mir nicht klar. Es gibt wohl mehrere Wege nach Rom, aber warum sollte man den Weg den ich genommen habe vermeiden ?

Danke für Eure Zeit!
Tom
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben