Problem CSS, HTML

FamouZz_ · 13. März 2018, 17:37

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-Quellcode

<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-Quellcode

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, 17:51

Schau dir mal das Grid Layout genauer an.

FamouZz_ · 13. März 2018, 18:05

Passt, vielen Dank. Code sieht jetzt so aus:

HTML-Quellcode

<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-Quellcode

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, 18:50

Du nutzt doch Bootstrap. Warum arbeitest du nicht damit:

HTML-Quellcode

<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, 18:59

Hab nochmal was anderes ausprobiert. Folgender Code:

HTML-Quellcode

<!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

Quellcode

body
{
background-color: red;
}

Seite bleibt leider weiß..

Mr.Shell · 13. März 2018, 19:11

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, 19:55

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-Quellcode

html {
background-color: red;
}

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

CSS-Quellcode

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, 20:13

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:

Quellcode

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

HTML-Quellcode

<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, 20:46

hier mal Beispiel:

CSS-Quellcode

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

HTML-Quellcode

<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, 22:32

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

Quellcode

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

@maddin

Mr.Shell · 13. März 2018, 22:47

FamouZz_ schrieb:

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

Quellcode

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.

Cireyses · 13. März 2018, 22:50

@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, 23:13

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.

Quellcode

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

Mr.Shell · 13. März 2018, 23:34

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

Problem CSS, HTML

Problem CSS, HTML

HTML-Quellcode

CSS-Quellcode

HTML-Quellcode

CSS-Quellcode

HTML-Quellcode

HTML-Quellcode

Quellcode

PHP-Quellcode

CSS-Quellcode

CSS-Quellcode

Kalcor schrieb:

Quellcode

HTML-Quellcode

CSS-Quellcode

HTML-Quellcode

PHP-Quellcode

Beitrag von FamouZz_ (13. März 2018, 21:19)

Beitrag von FamouZz_ (13. März 2018, 21:49)

Quellcode

FamouZz_ schrieb:

Quellcode

PHP-Quellcode

Quellcode

PHP-Quellcode

Ähnliche Themen