zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Neuling in Responsive Design

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.02.2015, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2015
Beiträge: 1
DerPrakikant befindet sich auf einem aufstrebenden Ast
Idee Neuling in Responsive Design

Hallo liebe Experten,
ich habe leider ein kleines Problem bei meinem jetzigen Website Layout:
Bisher habe ich nur versucht den Header responsive darzustellen. Es ist mittlerweile soweit, dass es ungefähr so aussieht wie es soll. Verkleinert man jedoch die Höhe des Fensters, so ändert sich wieder alles.
Ich denke das liegt daran, dass ich mit position:absolute gearbeitet habe (?)

Ich glaube, dass das ganze schlecht geschrieben ist und bitte jetzt um Hilfe, wie ich alles verbessern kann.

Hier der Code:

HTML-Code:
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="ISO-8859-1">

    <link href="css/style.css" type="text/css" rel="stylesheet">
    <link href="css/opensans.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header>
    <img src="logo.svg" id="logo"/>
    <img src="buchenbutton.png" id="buchenbutton" />
        <h1>LiLa Percussion Duo  <br/>
        <small>Music without anything</small></h1>

        <nav>
            <ul>
                <li>&Uuml;<small>BER LILA</small></li>
                <li>G<small>ALERIE</small></li>
                <li>K<small>ONTAKT</small></li>
            </ul>
        </nav>

        <div id="navabtrennung">
        </div>
    </header>
</body>
</html>
CSS:

Code:
* {

    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
img {
    max-width: 100%;
    height: auto;
}
h1{
    color: #e2e2e2;
    padding-top: 5%;
    font-size: 2em;
    width: 80%;
    margin-left: 10%;
    clear: both;
}
h1 small {
    font-size: 0.5em;
}
header {
    background: #242120;
    text-align: center;
    position: relative;
}
#navabtrennung {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    background: #333333;
    height: 5%;

}
#logo {
     width: 50%;
     float: left;
}
#buchenbutton {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
}
nav ul {
    color: #FFFFFF;
    font-size: 1.5em;
    text-align: center;
    clear: both;
    position: absolute;
    bottom: 10%;
    width: 80%;
    margin-left: 10%;

}
nav li {
    display: inline;
    list-style-type: none;
    margin: 2.5em;
}


@media screen and (max-width: 600px) {
    header {
       height: 100vh;
    }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
        header {
       height: 100vh;
    }
    #logo {
        width: 33.333333%;
    }
    nav  li {
        margin: 0.8em;
    }
}
@media screen and (min-width: 900px){
    header {
        height: 66.666666vh;
    }
    #logo {
        width: 20%;
    }
    h1 {
        font-size: 4em;
        clear: none;
        padding-top:20%;
    }
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2015, 10:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Schmeiß alle absoluten positionsangaben raus, die brauchst du hier nicht. Das div mti der die navabtrennung kannst du auch rauslöschen, das ist auch unnötig.
Auch brauchst du den 2. media-queries nicht so mit 600px and 900px angeben. Ordne die mediaqueries von groß nach klein:
Zuerst: max-widht: 900px
dann: max-width: 600px
dann: max-width: 400px (oder was auch immer )
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
anfänger, header, hilfe, media queries, respnsive, website

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit responsive Design & Dropdownnavi andi.ebar CSS 12 19.09.2014 13:04
Kachelmuster via html - Responsive Design freundlich SamuelS (X)HTML 10 31.01.2014 09:00
Responsive Design: Leere Fläche beim Header entfernen Shyne (X)HTML 6 26.06.2013 14:57
Responsive Design mit Framework oder lieber per Hand? OscarWilde CSS 7 18.09.2012 16:23
Iphone Responsive Design Horizontal Breite Problem Dav-88 CSS 1 31.07.2012 17:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:24 Uhr.