Tabula_Rasa
Mitglied
Hallo,
ich bin wieder da
. Ich habe mir eine Auszeit gegönnt. Jetzt möchte ich wieder anfangen - aber ohne zu euphorisch zu sein. Ich habe da ein Problem bzw. sogar zwei Probleme. Ich habe mich ein wenig mit Bootstrap auseinandergesetzt und ich muss gestehen, dass es mir wirklich Spaß macht aber folgendes verstehe ich nicht:
1.Warum wird nicht die ganze Column-Breite genutzt, also dass das Bild die Breite der Spalte hat?
2.Warum sind beim Ipad die Bilder nicht auf einer Zeile (Habe dafür das Entwicklertool, welches Google anbietet genutzt)? Mit dem Offset komme ich ja auf max. 12 Columns, also sollte doch alles auf eine Zeile passen?
Hier der Link:
http://zerobrothers.bplaced.net/Anime_Manga/
Hier der gesamte Code:
Edit: Die farbigen Borders dienen zur Orientierung :)
Ach ja, der Fehler, dass die Bilder nicht mehr auf einer Ebene liegen, tritt bei "MediumDevices" auf
ich bin wieder da
. Ich habe mir eine Auszeit gegönnt. Jetzt möchte ich wieder anfangen - aber ohne zu euphorisch zu sein. Ich habe da ein Problem bzw. sogar zwei Probleme. Ich habe mich ein wenig mit Bootstrap auseinandergesetzt und ich muss gestehen, dass es mir wirklich Spaß macht aber folgendes verstehe ich nicht:1.Warum wird nicht die ganze Column-Breite genutzt, also dass das Bild die Breite der Spalte hat?
2.Warum sind beim Ipad die Bilder nicht auf einer Zeile (Habe dafür das Entwicklertool, welches Google anbietet genutzt)? Mit dem Offset komme ich ja auf max. 12 Columns, also sollte doch alles auf eine Zeile passen?
Hier der Link:
http://zerobrothers.bplaced.net/Anime_Manga/
Hier der gesamte Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Home | Read the newest Mangas</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
/*box-sizing: border-box;*/
min-width: 0;
}
html {
}
body {
padding: 0rem 0rem 0rem 0rem;
margin: 0rem 0rem 0rem 0rem;
background: url("Background.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-left:auto;
margin-right:auto;
max-width: 800px;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 0;
max-width: 100%;
margin: 0rem;
}
img {
min-width: 0;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
/*Listen dl*/
@media all {
dl {
margin: 0.5rem 0rem 0.5rem 0rem;
}
dt,
dd {
}
dt {
font-weight: bold;
margin: 0rem 0rem 0rem 0rem;
}
dd {
margin: 0rem 0rem 1rem 0rem;
}
}
/*.pageheader*/
@media all {
.pageheader {
margin-top: 5rem;
}
}
/*.navigation*/
@media all {
.navigation {
position: fixed;
top: 0;
width: 100%;
}
.navigation div {
background-color: black;
max-width: 800px;
display: flex;
justify-content: center;
}
.navigation a {
color: white;
text-align: center;
text-decoration: none;
outline: none;
padding: 16px;
font-size:100%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1px;
}
.navigation a:hover {
background-color: #15146b;
}
}
.outer{
max-width:800px;
margin-top: 8rem;
background-color: darkblue;
box-shadow: 6px 6px 6px black;
display: flex;
flex-wrap:wrap;
}
.content {
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: orange;
max-width: 800px;
width: 100%;
padding-bottom:2rem;
padding-top:2rem;
box-shadow: 3px 3px 3px black;
}
h1 {
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: orange;
max-width: 800px;
box-shadow:3px 3px 3px black;
width: 100%;
color:white;
padding-left: 0.4rem;
text-shadow: 1px 1px 2px red, 0 0 25px blue, 0 0 5px #eb42f4;
}
@media only screen and (max-width: 500px) {
.navigation a {
font-size: 70%;
}
}
</style>
</head>
<body>
<nav id="navigation" class="navigation">
<div>
<a href="">Home</a>
<a href="">Animes</a>
<a href="">Anime Scenes</a>
<a href="">AMV</a>
<a href="">Previews</a>
</div>
</nav>
<div class="outer">
<h1>Last uploaded:</h1>
<div class="content">
<div class="container-fluid" style="border:1px solid red;">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-4 col-lg-5" style="border:1px solid;">
<img src="Background.jpg" class="img-fluid" alt="Responsive image"></img>
</div>
<div class="col-xs-5 col-xs-offset-2 cold-sm-4 col-sm-offset-4 col-md-4 col-md-offset-3 col-lg-5 col-lg-offset-2" style="border:1px solid;">
<img src="Background.jpg" class="img-fluid" alt="Responsive image"></img>
</div>
</div>
</div>
</div>
</div>
<div class="outer">
<h1>Best of the week:</h1>
<div class="content">
<div class="container-fluid">
</div>
</div>
</div>
</body>
</html>Edit: Die farbigen Borders dienen zur Orientierung :)
Ach ja, der Fehler, dass die Bilder nicht mehr auf einer Ebene liegen, tritt bei "MediumDevices" auf
Zuletzt bearbeitet:
