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>
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%;
- }
- }