Beiträge von wakeme

wakeme

Wenn man Content beispielsweise Text in eine DIV packt, dann gibt es keinen Seitenabstand. Ich mache das bei einem normalen Layout folgendermaßen ;

.abstand {

padding: 15px;

}

Diese Lösung würde ich jetzt gerne auf mein Flexlayout übertragen. Das Problem ist, dass ich nicht weiß wie ich diese zusätzlichen 30px auf flex: 1&3 übertragen kann. Kann ich nicht mit prozentualen Werten arbeiten ? Macht das einen Unterschied ob ich jetzt prozentuale Werte oder flex:1&3 verwende ?

wakeme

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

Zitat

dann ausprobieren und schauen

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

wakeme

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

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

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

wakeme

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

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

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

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

Danke

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

Das würde mir das Verständnis erleichtern.

wakeme

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

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

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

wakeme

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

Vielen Dank für eure Antworten

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

wakeme

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

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

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

wakeme

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

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

Flexboxen & Media Queries

Responsive Anpassung

Responsive Anpassung

Responsive Anpassung

Problem mit margin oder padding

background mit inhalt wachsen.