Guten Abend.
Ich versuche mich grade an der responsiven Anpassung meiner Webseite und weiß nicht wirklich weiter. Sowohl der Inhaltsbereich als auch das seitliche Menü passen sich nicht korrekt an. Ich würde mich über ein paar Hinweise freuen
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="homepage">
<!-- header -->
<div id="header">
<div id="logo"></div>
</div>
<!-- header -->
<!-- navigation/<menu> -->
<div id="navigation">
<div id="menu">
<ul>
<li><a href="index.htm">startseite</a></li>
<li><a href="index.htm">forum</a></li>
<li><a href="index.htm">files</a></li>
<li><a href="index.htm">kontakt</a></li>
<li><a href="index.htm">links</a></li>
<li><a href="index.htm">gallerie</a></li>
<li><a href="index.htm">videos</a></li>
<li><a href="index.htm">artikel</a></li>
<li><a href="index.htm">blog</a></li>
</ul>
</div>
</div>
<!-- navigation/<menu> -->
<!-- content -->
<div id="content_holder">
<div class="content_distance" id="content">
<div id="content_menu"> startseite >> files >> test >> content
</div>
</div>
<!-- content -->
<!-- sidebar -->
<div id="sidebar">
<div class="sidebar_title_distance" id="sidebar_title">beta</div>
<div id="sidebar_menu">
<ul>
<li><a href="index.htm">allgemein</a></li>
<li><a href="index.htm">geschichte</a></li>
<li><a href="index.htm">beta</a></li>
<li><a href="index.htm">soundtrack</a></li>
<li><a href="index.htm">trvia</a></li>
<li><a href="index.htm">merch</a></li>
<li><a href="index.htm">bilder</a></li>
<li><a href="index.htm">merch</a></li>
<li><a href="index.htm">artikel</a></li>
</ul>
</div>
</div>
<!-- sidebar -->
</div>
<!-- footer -->
<div id="footer">
<div id="footer_box"></div>
</div>
<!-- footer -->
</div>
</body>
</html>
Alles anzeigen
Code
@charset "utf-8";
body {
background-color: #151515;
font-family: averia_sans_librelight;
color: #fff;
}
#homepage {
margin: 0 auto;
margin-top: 35px;
max-width: 1200px;
border: 5px solid #000;
border-radius: 5px;
box-shadow: 0 0 10px #000;
background-image: url(images/background.jpg);
background-repeat: repeat;
overflow:hidden;
}
#header {
max-width: 1200px;
height: 181px;
background-image: url(images/header.jpg);
background-repeat: repeat-x;
}
/*
#logo {
position: absolute;
height: 143px;
width: 734px;
margin-top: 20px;
margin-right: 446px;
margin-left: 20px;
background-image: url(images/killtherabbit_logo.png);
background-repeat: no-repeat;
}
*/
/*navigation/<menu>*/
#navigation {
background-image: url(images/navigation.png);
background-repeat: repeat-x;
max-width: width:1200px;
height: 67px;
}
#menu {
position: absolute;
width: 1100px;
height: 47px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 50px;
margin-left: 50px;
}
#menu ul {
list-style: none;
margin: 0 auto;
}
#menu li {
float: left;
padding-left: 35px;
font-size: 25px;
font-family: averia_sans_librebold;
}
#menu a:link {
color: #fff;
text-decoration: none;
font-weight: 500;
}
#menu a:visited {
color: #fff;
text-decoration: none;
font-weight: 500;
}
#menu a:hover {
color: #ad1508;
text-decoration: none;
font-weight: 500;
/*
-webkit-filter: blur(2px);
filter: blur(2px);
*/
}
/*navigation/<menu>*/
#content_holder {
max-width: 1160px;
margin-top: 8px;
margin-right: 20px;
margin-left: 20px;
min-height: 500px;
}
#content {
float: left;
width: 875px;
margin-right: 10px;
background-color: #000;
min-height: 470px;
}
/*sidebar*/
#sidebar {
float: left;
background-color: #000;
width: 245px;
min-height: 500px;
}
#sidebar_title {
width: 205px;
height: 41px;
background-image: url(images/background_titles.png);
background-repeat: no-repeat;
text-align: center;
font-size: 18px;
color: #fff;
}
#sidebar_menu {
position: absolute;
width: 210px;
margin-top: 2px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 2px;
}
#sidebar_menu ul {
display: inline;
list-style: none;
}
#sidebar_menu li {
padding-bottom: 5px;
padding-left: 15px;
font-size: 18px;
font-family: averia_sans_librelight;
}
#sidebar_menu a:link {
color: #fff;
text-decoration: none;
font-weight: normal;
}
#sidebar_menu a:visited {
color: #fff;
text-decoration: none;
font-weight: normal;
}
#sidebar_menu a:hover {
color: #ad1508;
text-decoration: none;
font-weight: normal;
}
/*sidebar*/
#footer {
margin: 0 auto;
max-width: 1200px;
height: 60px;
background-image: url(images/background_footer.jpg);
background-repeat: no-repeat;
clear: both;
}
#footer_box {
position: absolute;
margin-top: 10px;
margin-right: 275px;
margin-left: 325px;
width: 600px;
height: 25px;
background-color: #000;
}
/*classes,internal distance*/
.content_distance {
padding: 15px;
}
.sidebar_title_distance {
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
}
/*classes,internal distance*/
/*templates content*/
#template_content {
width:875px;
}
#template_content_title {
width:875px;
height: 41px;
background-image: url(images/background_titles.png);
background-repeat: repeat-x;
text-align: left;
font-size: 20px;
}
#temlate_image_box {
float: left;
margin-top: 10px;
width: 200px;
height: 200px;
}
#template_content_text {
float: left;
width: 655px;
margin-top: 10px;
margin-left: 20px;
font-size: 16px;
font-weight: normal;
}
#content_menu {
/*
background-image: url(images/background.jpg);
background-repeat: repeat-x;
*/
background-color: #000;
border: 2px solid #000;
border-radius: 0px;
width: 875px;
height: 25px;
}
@font-face {
font-family: 'averia_sans_librebold';
src: url('averiasanslibre-bold-webfont.woff2') format('woff2'),
url('averiasanslibre-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'averia_sans_librebold_italic';
src: url('averiasanslibre-bolditalic-webfont.woff2') format('woff2'),
url('averiasanslibre-bolditalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'averia_sans_libreitalic';
src: url('averiasanslibre-italic-webfont.woff2') format('woff2'),
url('averiasanslibre-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'averia_sans_librelight';
src: url('averiasanslibre-light-webfont.woff2') format('woff2'),
url('averiasanslibre-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'averia_sans_librelight_italic';
src: url('averiasanslibre-lightitalic-webfont.woff2') format('woff2'),
url('averiasanslibre-lightitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'averia_sans_libreregular';
src: url('averiasanslibre-regular-webfont.woff2') format('woff2'),
url('averiasanslibre-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@media screen and ( max-width: 500px ) {
#sidebar {
width: 100%;
}
#content {
width: 100%;
}
}
Alles anzeigen