<body>
<header>
<div class="container">
<div class="headerlogo">
<jdoc:include type="modules" name="logo-nav"/>
</div>
<nav>
<jdoc:include type="modules" name="top-nav"/>
</nav>
</div>
</header>
<div class="container">
<aside>
<jdoc:include type="modules" name="aside" style="XHTML" />
</aside>
<section id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="main-content" style="XHTML" />
</section>
</div>
Alles anzeigen
.active{
font-weight: bold;
}
.page-header {
text-align: center;
}
#content img{
max-width: 100%;
height: auto;
}
body{
font-family: sans-serif;
font-size: 17px;
padding: 0px;
margin:0px;
background-color: white;
}
header{
background-color:lightgrey;
color:red;
padding-top:30px;
min-height: 70px;
border-top:red solid 3px;
}
header nav{
float:right;
padding-top: 10px;
}
header a{
text-decoration: none;
color: red;
text-transform: uppercase;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 20px 0 20px;
}
.headerlogo{
float:left;
font-size: 28px;
font-weight: bold;
}
section{
width: 80%;
float:left;
}
section p {
padding-right: 5%;
padding-left: 5%;
}
aside{
width:20%;
float: left;
}
footer{
background-color: lightgrey;
color: red;
border-bottom: 3px red solid;
padding: 20px 0 20px 0;
}
footer a{
float: left;
margin: 0;
text-decoration: none;
color: red;
}
footer li{
display: inline;
}
footer ul{
margin: 0;
padding: 0;
}
footer .contact{
float: right;
margin: 0;
padding: 0;
}
footer p{
float: none;
padding-top: 60px;
}
.container{
width: 90%;
margin:auto;
overflow:hidden;
}
@media(max-width: 480px){
header nav,
.headerlogo a,
header li,
footer a,
footer .contact,
footer p{
float: none;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
padding:0;
margin:0;
}
header{
padding-bottom: 20px;
}
.container{
width:85%;
float: none;
margin: auto;
}
section{
float:none;
width: 100%;
}
.page-header {
text-align: center;
}
aside{
float:none;
width:100%;
}
footer a{
display: flex;
text-align: center;
justify-content: center;
padding-bottom: 10px;
}
footer p{
padding-top: 20px;
}
}
Alles anzeigen
Da diese Methode, zur Skalierung der Bilder, bei statischen HTML Seiten immer funktioniert hat bin ich ratlos
Deshalb würde ich mich sehr über eure Lösungsvorschläge freuen.
Schöne Grüße
Alex