• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Zentrierung in der Mobilen Ansicht , überschreitet länge

N

newpower001

Mitglied
Hallo,

Habe da ein Problem wobei ich nicht weiter komme. Was das Problem ist steht oben. Ich zeige euch noch ein Screen damit ihr wisst was ich meine und meinen Code.

Im ersten Screen sieht man die Scrollbar das es noch nach Rechts weiter geht.

Beim Zweiten Bild muss ich wohl nichts sagen.

Es liegt an dem Padding. Wenn ich ohne Padding mache ist alles normal ohne überschreitung fixiert. Jedoch sieht es ohne Padding grausam aus und möchte die Boxen ja gestalten. Deswegen weiß ich nicht welchen Code ich sonst verwenden sollte.

Problem 2:
Ich würde es gerne so alle Boxen untereinander sind bei der Mobilen Ansicht.
z.B
Nav
___
Box1
___
Box2
___
Box3

Bräuchte da auch Hilfe.

Code:

HTML:
HTML: 
<html>

<head>

<meta charset="UTF-8">
<meta lang="de">
<meta lang="en">
<title>Home</title>
<link rel="stylesheet" href="data.css" type="text/css">

</head>

<body>



<header>

<ul class="nav">
<li><span class="navtxt">Homepage</span></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Blog</a></li>
</ul>

</header>

<div class="container">
    <div class="column-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>


    <div class="column-left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>


    <div class="column-right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

</body>

</html>

HTML: 
html, body {
margin:0;
padding:0;
font-family:Tahoma;
font-size:100%;
font-weight:normal;
background:#d3d3d3;
}

header {
margin:0;
padding:1em;
background-color:#384452;
}


.nav {
margin:0 auto;
text-align:right;
margin-right:100px;
}

.nav a {
text-decoration:none;
color:#fff;
font-size:75%;
font-family:verdana;
}

.nav a:hover {
color:#428bca;
-webkit-transition: all 0.50s ease;
-moz-transition: all 0.50s ease;
}

.nav li {
list-style:none;
display:inline;
padding:7px;
}

.navtxt {
float:left;
margin-left:50px;
color:#fff;
font-family:verdana;
}

@import "compass/css3";
.container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.container div {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    background-color:#f5f5f5;
    margin:0 auto;
    text-align:center;
    padding:1em;
}

.column_center {
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

lg
 

Anhänge

  • mob.PNG
    mob.PNG
    13 KB · Aufrufe: 13
  • ungenau.PNG
    ungenau.PNG
    12,1 KB · Aufrufe: 11
So eventuell
Code: 
@media screen and (max-width: 620px) {   
  .container div , .container {   
  width:100%;
  display:block;
  float:left;
  }

Sowas kann man auch googeln.
 
Also, mit deinem Blindtext hat es funktioniert. Und bei 620px sollte auch nichts überschwappen.
 
Hab beides versucht klappt nicht siehe Anhang. Und im Chrome Browser klappt es auch nicht das die Boxen untereinander sind nur im Firefox
 

Anhänge

  • ag.PNG
    ag.PNG
    21,6 KB · Aufrufe: 7
Hallo,

dein CSS ist leider eher unstrukturiert. Füg' mal am Anfang des CSS folgendes ein:

Code: 
* {
   box-sizing: border-box;
}

Zur Erklärung kannst du ja nach "box-sizing" googeln.

Gruss

MrMurphy
 
Das solltest du auch verwenden.
Code: 
* {
margin:0;
padding:0;
box-sizing:border-box;
}

Und du könntest ja mal Googel nach media-queries für webkit browser befragen.

Wer zu spät kommt den ...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben