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:
style.css:
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%;
}
}