Beiträge von wakeme

wakeme · 12. Dezember 2019

Es haben sich noch ein paar weitere Fragen ergeben

Bei einem normalen Layout habe ich den Content zentriert indem ich der Division eine klasse mit beispielsweise 15PX Padding zugewiesen habe. Wie mache ich das mit Flexbox ?

Das Problem ist, dass ich nicht weiß wie ich die zusätzlichen 30PX mit einberechnen kann.

Besonders nicht, wenn ich flex:1&3 verwende.

Code

#row {

display: flex;

flex-direction: row;

margin-top: 8px;

margin-right: 20px;

margin-left: 20px;

}

.content {

flex: 3;

margin-right: 12px;

min-height: 470px;

background-color: #000;

}

.sidebar {

flex: 1;

min-height: 470px;

background-color: #000;

}

Alles anzeigen

Ich verzweifel an der responsiven Flexbox Navigation kennt jemand ein gutes Tutorial dafür ?

Scheinbar gibt es so viele unterschiedliche Lösungen das zu realisieren.

wakeme · 10. Dezember 2019

Zitat

dann ausprobieren und schauen

Verschiedene min&max-width Angaben ausprobieren und gucken welche bei dem Layout am meisten Sinn machen ?

wakeme · 10. Dezember 2019

Danke, das ergibt Sinn. Ich habe geglaubt, das sei gleich.

Ich glaube, dass ich verstanden habe was MrMurphy mir erklären wollte

Man kann mit Media Queries Endgeräte direkt ansprechen. Problematisch ist dabei, dass man so nicht vielen Endgeräten gerecht werden kann. Man kann aber auch eigene Breakpoints setzen und das an den Punkten an dem das eigene Layout nicht funktioniert. Letzteres ist die elegantere Variante. Soweit korrekt ?

Doch wie kann ich diese eigenen Breakpoints ermitteln ?

wakeme · 10. Dezember 2019

Danke für eure Unterstützung

Zitat

MrMurphy

Ein typisches Anfängerproblem ist die Darstellung von Webseiten an bestimmte Geräte anpassen zu wollen. Das hat nie funktioniert und bei der heutigen Vielfalt der Endgeräte ist das von vornherein zum Scheitern verurteilt.

Bewährt hat sich hingegen die Breite von Containern auf den Inhalt der Webseite hin auszurichten. Das Vorgehen ist auch zukunftssicher.

Aber wie funktioniert das konkret ?

Komischerweise funktioniert das mit diesem Code problemlos. Ich verstehe aber nicht warum.

Code

@media screen and ( max-width: 767px ) {
#row {flex-direction: column;}
.content {width: 100%;}
.sidebar {width: 100%;}
}

wakeme · 9. Dezember 2019

Du hast recht, das hat etwas mit den 500PX zu tun. Gibt es keinen Standart-Code für die soweit gängigen Handymodelle ?

wakeme · 9. Dezember 2019

Code

/*
@media screen and ( max-width: 500px ) {

#homepage {
width: 100%;
}

.header {
width: 100%;
}

.navigation {
width: 100%;
}

.content {
width: 100%;
}

.sidebar {
width: 100%;
}
*/

@media screen and (max-width: 500px) {
#row {
flex-direction: column;
}
    }

Alles anzeigen

wakeme · 9. Dezember 2019

Ja das ist ein Übertragungsfehler. Der Code ist soweit korrekt.

Ich habe das jetzt auf dem Samsung Galaxy A7, iPhone 6 & zwei Monitoren getestet und Content & Sidebar werden nebeneinander dargestellt. Ich habe nur meine @media-screen durch deine ersetzt.

wakeme · 9. Dezember 2019

Dankeschön

Nach sowas wie max-width hatte ich gesucht. Das funktioniert gut.

Funktioniert das mit flex-direction: colum; bei dir ? Bei mir möchte sich das Seitenmenü nicht unterordnen.

wakeme · 9. Dezember 2019

html-seminar.de/woltlab/attachment/2104/

So würde das Layout ohne Breitenangabe auf einem 4K PC Monitor aussehen. Das ist ja das Problem

html-seminar.de/woltlab/attachment/2105/

So soll es aussehen.

Komischerweise funktioniert es, wenn ich anstatt 1200PX einfach 62% verwende. Ich weiß aber nicht ob das richtig ist.

wakeme · 9. Dezember 2019

Danke

Kannst du mir für beides ein praktisches Beispiel geben ?

Das würde mir das Verständnis erleichtern.

wakeme · 9. Dezember 2019

Das verstehe ich nicht

Das Design verwendet Grafiken, welche eine feste Breite haben. Das Layout soll auf dem PC 1200PX breit sein und sich auf einem Mobilgerät entsprechend adaptieren. Vor Allem sind ja alle Werte relativ beziehen sich also auf etwas.

Das heißt, dass ich das Body-Element als Wrapper verwenden kann ?

Ja das sollte 100% heißen

Ich möchte, dass sich alle Container auf dem Handy untereinander anordnen. Verwende ich dann flex-direction innerhalb der Media-Queries ?

wakeme · 9. Dezember 2019

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">
    <div class="header"></div>
    <div class="navigation"></div>
    <div id="row">
    <div class="content"></div>
    <div class="sidebar"></div>
  </div>
    <div class="footer"></div>
  </div>
</body>
</html>

Alles anzeigen

wakeme · 9. Dezember 2019

Es gibt noch keine Internetseite. Nur den Code welchen ich lokal auf meinem Computer getestet habe.

wakeme · 9. Dezember 2019

Guten Abend

Ich arbeite zurzeit an einem Projekt, das ich versuche mit Flexboxen umzusetzen. Zurzeit habe ich jedoch, das Problem dass die Media Queries nicht

nicht berücksichtigt werden. Was habe ich falsch gemacht ?

Kann ich prozentuale Angaben verwenden oder ist es besser flex: 1-5 zu verwenden ?

Code

body {
background-color: #151515;
font-family: averia_sans_librelight;
color: #fff;
}


#homepage {
margin: 0 auto;
margin-top: 35px;
width: 1200px;
display: flex;
flex-direction: column;
border: 5px solid #000;
border-radius: 5px;
box-shadow: 0 0 10px #000;
background-image: url(images/background.jpg);
background-repeat: repeat;
}

.header {
height: 181px;
background-image: url(images/header.jpg);
background-repeat: repeat-x;
}

.navigation {
height: 67px;
background-image: url(images/navigation.png);
background-repeat: repeat-x;
}

#row {
display: flex;
flex-direction: row;
margin-top: 8px;
margin-right: 20px;
margin-left: 20px;
}

.content {
flex: 3;
margin-right: 12px;
min-height: 470px;
background-color: #000;
}

.sidebar {
flex: 1;
background-color: #000;
}

.footer {
height: 60px;
background-image: url(images/background_footer.jpg);
background-repeat: no-repeat;
background-color: #000;
}


@media screen and ( max-width: 500px ) {

.homepage {
width: 100%;
}

.header {
width: 100px;
}

.navigation {
width: 100px;
}

.content {
width: 100px;
}

.sidebar {
width: 100px;
}

}

Alles anzeigen

wakeme · 9. Dezember 2019

Vielen Dank für eure Antworten

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

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

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

wakeme · 29. November 2018

Dem kann ich mich nur anschließen. Es wäre auch hilfreich, wenn du den Code hier einbinden würdest

wakeme · 29. November 2018

Um meine Wissbegier zu stillen musst du schon ein bisschen genauer werden :P.

wakeme · 29. November 2018

Danke

Das heißt, dass das Problem float typisch ist und sich daran soweit nichts ändern lässt ?

Werde ich mir anschauen. Wusste garnicht dass es eine andere Möglichkeit gibt zu positionieren.

Beiträge von wakeme

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Responsive Anpassung

Responsive Anpassung

Responsive Anpassung

Problem mit margin oder padding

background mit inhalt wachsen.

background mit inhalt wachsen.