Responsive Anpassung

wakeme · 25. November 2019

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

DER · 25. November 2019

display: block; lässt das Menü in Reihe stehen. Um eine Hamburger Menü zu bauen, kann das Tutorial helfen: https://www.html-seminar.de/toggle-menue-ohne-javascript.htm

wakeme · 25. November 2019

Danke für deine Antwort. Jedoch scheinst du mich falsch verstanden zu haben. Sowohl die Division Content als auch Sidebar werden nicht korrekt untereinander dargestellt. Darüber hinaus wird der Seitenabstand nicht berücksichtigt.

Mit der Navigation habe ich noch nicht angefangen

basti1012 · 26. November 2019

du solltest das besser mit flexbox machen. Wie soll das den überhaupt aussehen ?

Auch sollte mehr mit @media querie gearbeitet werden.

Und deine ganzen min und max grössen macht es auch nicht einfacher das responsiv zu machen

YippiYaYeah · 28. November 2019

Hallo in die Runde,

die Frage wie es aussehen soll finde ich auch interessant. Aber dein Content wir z.b. nicht schmaler weil Du der ID "Content" ( und "content_menu" was in dem div mit drin steckt ) eine feste Breite zugewiesen hast, um mal einen Punkt zu nennen:

CSS

#content {
float: left;
width: 875px;
margin-right: 10px;
background-color: #000;
min-height: 470px;
}

wakeme · 9. Dezember 2019

Vielen Dank für eure Antworten

Ich werde den Vorschlag von basti1012 annehmen und versuchen das mit Flexboxen umzusetzen.

Responsive Anpassung

Jetzt mitmachen!

Teilen