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

Responsive Design

J

JuanDiez

Neues Mitglied
Hallo,

wie in meiner letzten Frage schon geschrieben: ich bin komplett neu im Gebiet HTML, CSS, scripten, usw. und hatte nur vor einigen Jahren mal eine Website versucht zu erstellen.
Nun habe ich mich wieder dran gesetzt, komme aber nicht weiter, da ich erstmal das Grundlegende fertig machen möchte und mich dann an die Gestaltung mache.

ist es möglich, den unten stehenden Code noch irgendwie für Smartphones sowie Tablets "responsive" zu machen, wenn ja, welche Möglichkeiten habe ich? (Ohne alles neu zu schreiben)
Habe bisher nur die Möglichkeit von @media min-width... gefunden.
Bitte nicht übel nehmen, wenn schwerwiegende Fehler drin sind :)

LG
Jan

index.html:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
        <link rel="stylesheet" href="css/styles.css" type="text/css"/>
        <title>Home</title>
    </head>

    <body>
        <div id="wrapper">
            <header>
                <a href="https://www.instagram.com/diez.photography/" target="_blank"><img class="logo" src="Bilder/Logo/50px/Logo1730x400transparent2-50.png" alt="Logo kann nicht geladen werden"></a>
            </header>
            <section>
                <a href="https://www.instagram.com/diez.photography/" target="_blank"><img class="PB1" src="Bilder/igpb1.jpeg" alt="Profilbild kann nicht geladen werden">
                </a>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="Instagram.html">Instagram</a></li>
                        <li><a href="index.html">Angeln?</a></li>
                    </ul>
                </nav>
            </section>
            <aside></aside>
            <footer>
                <p class="copyright">© diezphotography</p>
            </footer>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

style.css:
CSS: 
@charset "utf-8";

html, body {
    font-family: "Open Sans", sans-serif;
    color: #212121;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

@media only screen and (min-width: 320px) {

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}

.logo{
    margin-left: 0.5%;
    position: relative;
}
    
header {
    height: auto;
    position: relative;
    border-bottom: 0.5px solid #5D5D5D;
    box-shadow: 0px 5px 10px #5D5D5D;
}
    
}

@media only screen and (min-width: 768px) {
    
}

@media only screen and (min-width: 1280px) {

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}

.logo{
    margin-left: 0.5%;
    position: relative;
}

header {
    height: auto;
    position: relative;
    border-bottom: 0.5px solid #5D5D5D;
    box-shadow: 0px 5px 10px #5D5D5D;
}

section {
    width: 20%;
    height: 90%;
    float: left;
    background: #1C1C1C;
}

.PB1 {
    border: 5px solid white;
      border-radius: 100%;
    width: 50%;
    height: auto;
    margin-left: 25%;
    margin-top: 20%;
    margin-bottom: 10%;
}

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 20%;
      position: fixed;
      height: 100%;
      overflow: auto;
    text-align: center;
}

li a {
    display: block;
     color: white;
     text-decoration: none;
    padding-top: 2%;
    padding-bottom: 2%;
}

li a.active {
    background-color: white;
      color: #1C1C1C;
}

li a:hover:not(.active) {
      background-color: white;
      color: #1C1C1C;
    
}

aside {
    width: 80%;
    height: 90%;
    float: right;
    background: #2E2E2E;
}

footer {
    border-top: 0.5px solid #5D5D5D;
    box-shadow: 0px -5px 5px #5D5D5D;
    width: 100%;
      max-width: auto;
    height: auto;
    clear: both;
    position: relative;
    bottom: 0;
    margin-bottom: 0%;
}

.copyright {
    margin: 0.5%;
}
}
 
Werbung:
JuanDiez schrieb:
st es möglich, den unten stehenden Code noch irgendwie für Smartphones sowie Tablets "responsive" zu machen, wenn ja, welche Möglichkeiten habe ich? (Ohne alles neu zu schreiben)
Zum Vergrößern anklicken....


Alles neu zu schreiben wäre bei den paar Zeilen Code kaum Aufwand.

Du solltest ein Ui-Framework einsetzen, welches dir einen Großteil der Arbeit bei Styling und responsiven Anpassungen abnimmt. Das simpelste wäre ein Grid-Framework wie
http://flexboxgrid.com

Darüber hinaus existieren eine Reihe von Frameworks, die UI-Elemente mitbringen, bzw. direkt auf mobile Devices zugeschnitten sind. Stichwörter wären hier Bootstrap, Ionic, Material Design, etc.
 
Tronjer schrieb:
Alles neu zu schreiben wäre bei den paar Zeilen Code kaum Aufwand.

Du solltest ein Ui-Framework einsetzen, welches dir einen Großteil der Arbeit bei Styling und responsiven Anpassungen abnimmt. Das simpelste wäre ein Grid-Framework wie
http://flexboxgrid.com

Darüber hinaus existieren eine Reihe von Frameworks, die UI-Elemente mitbringen, bzw. direkt auf mobile Devices zugeschnitten sind. Stichwörter wären hier Bootstrap, Ionic, Material Design, etc.
Zum Vergrößern anklicken....
Ja ergibt Sinn, muss mich da nurnoch "ein wenig" reinlesen
 
Werbung:
Sempervivum schrieb:
Meine Empfehlung: Erst Mal die Hinweise aus deinem vorigen Thread umsetzen und nichts benutzen, von dem Du nicht verstehst, wozu es gut ist: Ein position: fixed; für einen Container, der die ganze Seite umspannt, macht keinen Sinn. Diese Regel bewirkt, dass ein Container im Browserfenster angepinnt wird, während der Hauptinhalt gescrollt wird.
Zum Vergrößern anklicken....
Wie gesagt <- kompletter Neueinsteiger, aber dafür habe ich jetzt wieder was sinnvolles gelernt :)
 
Habe jetzt nochmal versucht etwas in der Art zu machen, habe aber noch eine Frage:
Ich möchte auf Smartphones einen Button, welcher dann im jetzigen Bereich der "section" die "section" ausfährt (dort befindet sich dann die navbar), aber auf den PC-Monitoren soll es so bleiben und angezeigt werden wie jetzt (siehe Codes unten)

index.html
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1, shrink-to-fit=no" name="viewport">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
        <link rel="stylesheet" href="css/styles.css" type="text/css"/>
        <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/bootstrap.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/script.js"></script>
        <title>Home</title>
    </head>

    <body>
        <p class="bigger">Um diese Seite anständig sehen zu können, benötigen Sie ein Gerät mit einer höheren Bildschirmbreite</p>
        <header>
                  header
          </header>
          <main>
            <section class="section">
                section
            </section>
            <aside>
                aside
            </aside>
          </main>
          <footer>
            footer
          </footer>
        
    </body>
</html>

style.css
CSS: 
@charset "utf-8";

html, body {
    font-family: "Open Sans", sans-serif;
    color: white;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 320px) {
.bigger {
    display: text;
    color: black;
}
}

@media only screen and (min-width: 320px) {
.bigger {
    display: none;
}
    
body {
    display:flex;
    flex-direction:column;
    min-height: 100%;
}
header {
    flex: 0.5;
    background: blue;
}
main {
    flex: 10;
    display: flex;
}
section {
    flex: 1;
    background: #1C1C1C;
}
aside {
    flex: 4;
    background: #2E2E2E;
}
footer {
    flex: 0.5;
    background: orange;
}
}

@media only screen and (min-width: 1280px) {
.bigger {
    display: none;
}
    
body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
header {
    flex: 0.5;
    background: blue;
}
main {
    flex: 10;
    display: flex;
}
section {
    flex: 1;
    background: #1C1C1C;
}
    
aside {
    flex: 4;
    background: #2E2E2E;
}
footer {
    flex: 0.5;
    background: orange;
}
}
 
Werbung:
So wie du es mir vorschlägst, würde ich das gerne machen, nur habe ich noch wenig Ahnung von dem Thema, deshalb ist es schwierig für mich zu verstehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben