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

hilfestellung css

J

johnnyderdepp

Mitglied
GUten Tag,

ich brauche eure hilfe, ich will mir eine homepage machen, die 6 große buttons hat und mit jedem button wird man weitergeleitet, nun aber mein problem, dass die buttons nur auf meinen bildschirm (1920, 1200) auflösung zu sehen sind.
Kaum gehe ich auf einen anderen pc mit anderer auflösung, ist alles total komisch durcheinander...

hab schon total viel versucht, aber was mich sehr wunder, ist dieses geschehen. bei meinem bild (siehe anhang, habe ich den divs einen border gegeben, zur hilfestellung, aber wie man sieht sind die link-boxen ein stück vom rand entfernt, aber ich hab keine ahnung warum...

hier mein css code:
Code: 
* {
margin: 0px;
}

html, body {
background-color: #FF0000;
margin: 0;
padding: 0;
height: 100%;
}


#wrapper {
    margin: 0px auto;
}

#kopf {
    background: #FFFFFF;
    height: 200px;
    text-align: center;
    line-height: 170px;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
}

#kopf h1 {
    animation: Header_einblenden 2S;
}

#inhalt {
    float: left;
    width: 100%;
    height: 100%;
}

#box {
    margin-top: 2%;
    margin-left: 5%;
    animation: Header_einblenden 2S;
    float: left;
    width: 13%;
    height: 150px;
    height: 150px;
    border: 1px solid #FFF;
}

#box:first-child {
  margin-left: 20%;
 }
 
#box:nth-child(4) {  
  margin-left: 20%;
}

#box:nth-child(6) { 
  margin-right: 20%;
}

#box:nth-child(3) {  
  margin-right: 20%;
}

    

.l {
    text-decoration: none;
    text-align: center;
    width: 250px;
    height: 150px;
    list-style-type: none;
    display: block;
}


.l a {
    
    list-style-type: none;
    display: block;
    text-decoration: none;
    width: 250px;

    height: 150px;
    line-height: 125px;
    background: #B40404;
    color: #FFF;
    border-radius: 20px 20px 20px 20px; 
    border: 1px dotted   #FFF;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    opacity:0.7; /* allgemein */
    
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    transition: all 800ms ease;
}



.l a:hover {
    opacity:0.8; /* allgemein */
    background: #7e7e7e;
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    transition: all 800ms ease;
}




#inhalt {
    float: left;
    height: 100%;
    width: 100%;
    min-height: 100%;
    height: auto;
    height: 100%;
    }

#copyright {
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    color: #FFF;
    line-height: 350px;
    margin-left: 400px;
}

#content_me {
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    color: #FFF;
}

#me_img {
    animation:myfirst 2s;
    float:left;
    width: 200px;
    height: 200px;
    border: 1px dashed #FFF;
    margin-right: 10px;
}
#txt{
    width: 900px;
    height: 200px;
    padding: 200px;
    animation: Header_einblenden 2S;
}

#txt1{
    width: 400px;
    padding: 100px;
    margin-left:100px;
    animation: Header_einblenden 2S;
}

#bord {
    animation:myfirst 2s;
    height: 200px;
    outline: 2px dashed #FFFFFF;
    outline-offset: 10px; /*Delete if you don't want an offset*/
    }

#breadcrumb {
    animation: Header_einblenden 2S;
    padding: 50px;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    }

#breadcrumb a{
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -ms-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
    
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    color: #FFF;
}

#txt1 a {
    text-decoration: none;
    color: #FFF;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -ms-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
}

#txt1 a:hover{
    color: #0000FF;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -ms-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
}

#breadcrumb a:hover{
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -ms-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
    
    color: #0000FF;
}

#ref li {
    list-style-type: none;
}

#ref li h3 {
    margin-top: 40px;
    line-height: 0px;
}

#ref li h3:first-child {
    margin-top: 40px;
    line-height: 0px;
}

#ref li p {
    margin-bottom: 80px;
}

#content_ref {
    width: 1000px;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    color: #FFF;
}
#ref {
    margin-left: 100px;
    float: left;
    width: 500px;
    height: 200px;
    padding: 20px;
    margin-top: 30px;
    animation: Header_einblenden 2S;
    border-radius: 70px; 
    background: #DF0101;
}

#corner {
    animation: Header_einblenden 2S;
    width: 300px;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    color: #FFF;
    text-align: center;
    border-radius: 70px; 
    background: #DF0101;
    margin-left: 100px;
}

#innercorner {
    animation: Header_einblenden 2S;
    float: left;
    width: 1200px;
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    color: #FFF;
    border-radius: 70px; 
    margin-top: 30px;
    background: #DF0101;
    margin-left: 100px;
}

#bild {
    padding: 40px;
    float: left;
    width: 670px;
    height: 500px;
}

#innercorner p {
    padding: 20px;
}

#innercorner h3 {
    padding: 50px;
}

#tb {
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    padding: 3px;
    
    border: none;
    border-radius: 7px;
    width: 200px;
    height: 20px;
}

#Nachricht {
    font-size: 400;
    font-family: 'Oswald', sans-serif;
    padding: 3px;
    width: 450px;
    height: 300px;
    border: none;
    
    border-radius: 7px;
}

#label {
    margin-left: 200px;
}

#btn {
    width: 456px;
    margin-top: 5px;
    border-radius: 6px;
    border: none;
    padding: 5px;
    
}

#btn:hover { 
    cursor: pointer; 
    background: #CCC;
}


-moz-animation:myfirst 2s; 
-webkit-animation:myfirst 2s;
-o-animation:myfirst 2s; 
}

@keyframes myfirst
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}    


-moz-animation:Header_einblenden 2s; 
-webkit-animation:Header_einblenden 2s;
-o-animation:Header_einblenden 2s; 
}

@keyframes Header_einblenden
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-moz-keyframes Header_einblenden /* Firefox */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-webkit-keyframes Header_einblenden /* Safari and Chrome */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}

@-o-keyframes Header_einblenden /* Opera */
{
0%   {opacity: 0; left:0px; top:0px;}
100% {opacity: 1; left:0px; top:0px;}
}


hier die html datei:
HTML: 
<!doctype html>

<html>


    <div id="wrapper">
    
        <head>
            <meta charset="utf-8">
            <title>Mathis Hüttl</title>
            <link rel="stylesheet" type="text/css" href="style.css" title="Design">
            <link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
        </head>
    

        <body>
            <header id="kopf">
            <h1>Mathis Hüttl</h1>
            </header>
        
            <content id="inhalt">
                
                <div id="box">
                    <ul id="list">
                        <li class="l" id="link1liste1"><a href="Programme.html">Programme</a></li>
                                            </ul>
                </div>
                
                <div id="box">
                    <ul id="list">
                        <li class="l" id="link1liste2"><a href="Referenzen.html">Referenzen</a></li>
                        
                    </ul>
                </div>
                
                <div id="box">
                    <ul id="list">
                    <li class="l" id="link2liste1"><a href="#">Programmierfabrik</a></li>
                        
                    </ul>
                </div>
                
                <div id="box">
                    <ul id="list">
                        <li class="l" id="link3liste1"><a href="me.html">Über mich</a></li>
                    </ul>
                </div>
                
                <div id="box">
                    <ul id="list">
                        <li class="l" id="link2liste2"><a href="Kontakt.html">Kontakt</a></li>
                        
                    </ul>
                </div>
                
                <div id="box">
                    <ul id="list">
                        <li class="l" id="link3liste2"><a href="impressum.html">Impressum</a></li>
                    </ul>
                </div>
                
                                
            </content>
            <p id="copyright">Copyright 2013 Mathis Hüttl</p>
        </body>
    
    </div>
    
</html>
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    42 KB · Aufrufe: 4
Was ist denn das content-Element? Sagt mir auch in Bezug auf HTML5 nichts.

Du gibst Maße mit % an. Sie gelten also in Relation zur Umgebung. Das Gesamtkonstrukt ergibt dann somit ein merkwürdiges Durcheinander, da man mit % in der Form kein flexibles Layout hinbekommen kann.

Abgesehen davon ist dein Bildschirm für die Darstellung völlig irrelevant. Relevant ist die Größe des Viewports des Browserfensters. Wenn Du an deinem Kino-Bildschirm das Browserfenster mal kleiner ziehen würdest, würde dir auffallen, dass es dann auch dort zu Verschiebungen kommt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben