Homepage Problem brauche Hilfe

~~Asterix112~~ · 10/21/2014, 21:22

Hey habe ein Problem wollte mein bg über die ganze Seite gestreckt haben oder als background gefüllt aber es Funktioniert leider nich hier ein SCREEN&CODE

Der CODE

Spoiler

Index.html

PHP Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Luki's Blockelemente</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

<div id="page">


<div id="header">
Ausrichtung von Block-Level-Elementen
</div>

<div id="menu">
<object type="text/html" data="menu.html" width="200" height="210"></object>
</div>

<div id="news">
<p>Test alles weitere folgt noch!</p>
</div>

<div id="content">
<p>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.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.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,</p>
</div>

<div id="footer">
© Copyright by Lukas Göbel | All rights by Lukas Göbel
</div>

</div>
</html>

CSS:

PHP Code:




#page { 
min-width:600px; 
max-width:1000px; 
background-color:withe;
border:2px solid black;
margin: 0px auto;
background-color:#8C8CC6;
background-image:url(img/bg.png);

}

 }

#header {
border:2px solid gray;
text-decoration:underline;
margin-left:auto;
background-color:withe;
margin-right:auto; 
text-align:center; 
width:280px; 
background-color:green;
  }
  
 #menu {
 border:2px solid green;
 width: 200px;
 float:left;
 margin: 0;
 padding: 0;
 font-family: Verdana;

 }
 
 #content {
 min-width:200px; 
 border:2px solid red;
 margin-left: 200px;
 margin-right: 200px;
 padding: 10px;
 font-family: Monotype Corsiva;
 }
 
 #news {
 border:2px solid yellow;
 width: 200px;
 float:right;
 margin: 0;
 padding: 0;
 }
 
#footer {
 border:2px solid blue;
 }

Screens:

Spoiler

Wäre nett wenn wer helfen könnte.
LG
Asterix

SKYEP ADD: pckid20

Shindy. · 10/21/2014, 21:23

Bilder gehen nicht.

lg

.Kirataro · 10/21/2014, 21:26

Screens kaputt. Wäre gut, wenn man sich die anschauen könnte.

Bis dahin, kleine Info am Rande:

HTML Code:

<link rel="stylesheet" [U]type="text/css"[/U] href="formate.css">

type="text/css" brauchst du nicht (mehr).

Shindy. · 10/21/2014, 21:27

Du hast geschrieben:

Quote:

background-image:url(img/bg.png);

richtig wäre

Quote:

background-image:url(/img/bg.png);

c1rca12 · 10/21/2014, 21:27

Hier:

Außerdem..
Wo ist dein <body>?

~~Asterix112~~ · 10/21/2014, 21:47

Quote:

Originally Posted by c1rca12

Hier:

Außerdem..
Wo ist dein <body>?

Hey body is bei mir page dad is edvler hat wenig zeit aber bilder gehen bei mir
LG

Hyukisawa · 10/22/2014, 18:57

man schreibt trotzdem
<html>
<head>
</head>
<body>
</body>
</html>

Fydes · 10/22/2014, 19:52

Mach das:

Code:

#page { 
min-width:600px; 
max-width:1000px; 
background-color:withe;
border:2px solid black;
margin: 0px auto;
background-color:#8C8CC6;
background-image:url(img/bg.png);
}

Zu:

Code:

#page { 
width:100%; 
height: 100%;
background-color:withe;
border:2px solid black;
margin: 0px auto;
background-color:#8C8CC6;
background-image:url(img/bg.png);

}

So könnte es klappen, bin leider nicht zuhause um es zu testen.

MFG

~~Black Tiger ツ~~ · 10/22/2014, 22:05

Quote:

Originally Posted by Shindy.

Du hast geschrieben:
richtig wäre

Schwachsinn.

Es gibt nur die Convention, dass man url() und @import() in (double)quotes setzen soll. Je nach Architektur heißt das z.B.:

Code:

background-image:url("../img/bg.png");
background-image:url("../images/bg.png");
background-image:url("~/Assets/img/bg.png");
background-image:url("~/Assets/images/bg.png");
background-image:url("~/Content/img/bg.png");
background-image:url("~/Content/images/bg.png");
...

Am besten noch:

Code:

background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;

um dat ganze auch skalierbar zu machen.