Problem CSS, HTML

FamouZz_ · 13. März 2018

Hallo,

ich arbeite gerade am Grundkonzept meines User Control Panels, aus reinem Interesse am lernen.

Folgendes Problem stellt sich mir. Ich möchte gerne mein Design wie im Bild unten im Spoiler aufbauen, sprich in diesem "Container" alle relevanten Dinge und drum herum einfach ein Background.

Spoiler anzeigen

Sprich der Backround scheint an beiden Seiten, sowie oben und unten heraus.

Mein HTML Code sieht derzeit wie folgt aus

HTML

<html>
	<head>
		<title>Control Panel </title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<div class="background-box">
		<h1>Login</h1>
		</div>
	</body>
</html>

Alles anzeigen

Sowie mein CSS Code:

CSS

body
{
	margin: 0;
	padding: 0;
	background-color: blue;
	background-size: cover;
	background-position: center;
	font-family: sans-serif;
}


.background-box
{
	width: 500px;
	height: 500px;
	color: red;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

Alles anzeigen

Leider funktioniert das ganze nicht so. Derzeitiges Resultat:

Spoiler anzeigen

Ich bitte um Hilfe! Zudem wollte ich gerne fragen, wie ich es realisiere, dass das ganze Design responsive ist.

Devine_ · 13. März 2018

Schau dir mal das Grid Layout genauer an.

FamouZz_ · 13. März 2018

Passt, vielen Dank. Code sieht jetzt so aus:

HTML

<html>
	<head>
		<title>Control Panel </title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<div class="background-box">
			<div class="background-item">
		</div>
	</body>
</html>

Alles anzeigen

CSS

body
{
	background: url(../images/bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}


.background-box
{
	display: grid;
	padding: 200px;
}


.background-item
{
	background-color: white;
	padding: 400px;
}

Alles anzeigen

Background scheint nun auch responsive zu sein. Wie mache ich das, dass sich der Container nicht in die Länge zieht, beim zoomen etc?

Devine_ · 13. März 2018

Du nutzt doch Bootstrap. Warum arbeitest du nicht damit:

HTML

<html>
   <head>
      <title>Control Panel </title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-12">
Hier kommt dein Text
            </div>
         </div>
      </div>
   </body>
</html>

Alles anzeigen

FamouZz_ · 13. März 2018

Hab nochmal was anderes ausprobiert. Folgender Code:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Infinity Deathmatch - CP</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	</head>
	<body>

	</body>
</html>

Alles anzeigen

Code

body 
{
    background-color: red;
}

Seite bleibt leider weiß..

Mr.Shell · 13. März 2018

Versuchs mal per hexcode.
Ansonsten schick mir mal deine index per pn ich fix dir das dann alles.
HEX: #ff0000

maddin · 13. März 2018

Der Body ist (sofern nicht anders angegeben) immer so groß wie sein Inhalt. Bei dir hat er keinen Inhalt, dementsprechend ist er auch 0px hoch. Er ist also rot, du kannst es nur nicht sehen.
Wenn du willst das die ganze Seite rot ist solltest du lieber das Dokument selbst ansprechen:

CSS

html {
    background-color: red;
}

Alternative kannst du dem body eine Mindesthöhe geben, damit du zumindest den body siehst:

CSS

body {
    background-color: red;
    min-height: 400px;
}

@Mr.Shell red völlig in Ordnung in CSS, ändern auf Hex-Code würde das Problem nicht lösen. Und mit der Bitte dir das Privat zu schicken um "alles zu fixen" hilffst du weder @FamouZz_ dabei es zu lernen, noch anderen die vielleicht via Suchfunktion auf dieses Thema stoßen in der Hoffnung hier eine Lösung zu finden.

FamouZz_ · 13. März 2018

Danke das klappt schon mal. Nun zu einem erneuten Problem, dann denke ich, dass ich ein paar Dinge alleine schaffe.

Ich wollte ein Logo platzieren, der Pfad ist richtig angegeben. Jedoch erscheint kein Logo.

CSS Code:

Code

.top-logo
{
	background-image:url(../images/logo.png);
}

HTML

<html>
	<head>
		<title>Control Panel </title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

	<body>
		<div id="top-logo"></div>
	</body>
</html>

Alles anzeigen

Mr.Shell · 13. März 2018

hier mal Beispiel:

CSS

#leftlogo { float:left; width: 234px; height: 123px; margin-left: 20px; }

HTML

<html>
	<head>
		<title>Control Panel </title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<img id="leftlogo" src="img/meinlogo.jpg">
	</body>
</html>

Alles anzeigen

FamouZz_ · 13. März 2018

Background wird nicht angezeigt.. ansonsten ist die erste Seite fertig, sobald der Background da wäre..

Code

body
{
	background-image: url("images/idm_background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
}

@maddin

Mr.Shell · 13. März 2018

Zitat von FamouZz_
Background wird nicht angezeigt.. ansonsten ist die erste Seite fertig, sobald der Background da wäre..
Code
body
{
	background-image: url("images/idm_background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
}
@maddin

Hallo versuchs mal zum testen direkt über HTML:
<body background="DEINBILDHIER">

wenns geht dann gucken wa weiter.

Edgar · 13. März 2018

@FamouZz_

Schau mal in der Konsole (STandard F12-Taste). Je nach Browser (bei Chrome:) wird oben rechts ein roter Kreis angezeigt, mit einer Ziffer. Kann gut sein, dass dein Bild nicht lädt,
möglicherweise weil der Pfad/Dateiname oder sonstiges falsch ist.

FamouZz_ · 13. März 2018

Bringt auch nichts. Ebenfalls auch keine Fehler.

Füge ich es beispielweise so im HTML Dokument ein, geht es.
Will das aber gerne in CSS haben.

Code

<style>
        body 
        {
            background-image: url("images/loginbg.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
        }  
</style>

Mr.Shell · 13. März 2018

Liegt die css Datei im richtigen Ordner und sind Lese/Schreibrechte vorhanden? (falls linux)

Problem CSS, HTML

Beitrag von FamouZz_ (13. März 2018)

Beitrag von FamouZz_ (13. März 2018)

breadfish.de 12. März 2022

Ähnliche Themen

Form wird nicht richtig dargestellt

Audi A3 [8L] Ölsensor, Antenne, ABS Leuchte, Anlasser = defekt?

Tore Bug

Problem mit update FB lite

HTML Video wird nicht auf der Website angezeigt

Problem mit der Dropdown im Menü