1
Ich habe die verrückteste Zeit versucht, meine Kopfzeile über den Bildschirm zu strecken. Ich habe eine Breite von 100%, aber links ist eine große Lücke.Header nicht über den Bildschirm in CSS
Es scheint der Text in der Mitte des Bildschirms gebunden zu sein, und wenn ich auf etwas getroffen haben, das den Header perfekt erstreckt (wie meine „bg“ Klasse von <html> zu <body> bewegen), plötzlich der Text ist knallte nach links.
Ich brauche nur die Kopfzeile 100% über den Bildschirm und den Text darunter zentriert werden. Hilfe!
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t outline: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
ins {
\t text-decoration: none;
}
del {
\t text-decoration: line-through;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
/* MY CODE BEGINS BELOW */
.header {
\t display: flex;
\t width: 100%;
\t height: 150px;
\t background-color: black;
\t opacity: 0.8;
\t position: absolute;
}
.bg {
display: flex;
display: -webkit-flex;
background: black url(https://images.unsplash.com/photo-1465205568425-23fdd3805e49?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7e476dbc9096ec1c869bd2cb97d82c70) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
padding: auto;
width: 100%;
justify-content: center;
}
.headline {
display: flex;
width: 100%;
justify-content: center;
margin: auto;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
}
.headline p {
margin-top: 200px;
background-color: transparent;
color: white;
font-family: 'Heebo', sans-serif;
font-size: 50px;
width: 100%;
}<!DOCTYPE html>
<html class="bg" lang="en">
<head>
<meta charset="utf-8">
<title>Hi</title>
<meta name="description" content="Testing">
<meta name="author" content="Nate">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
\t
</div>
<div class="headline">
\t <p>Centered Text</p>
</div>
<script src="js/scripts.js"></script>
</body>
</html>