CSS --> die Höhe vom div ist größer als die vom Body?

2 Antworten

Ich habe die Elemente html und body, die beide eine Höhe von 100% haben(ganzer Bildschirm).

Allein dieser Ansatz ist schon falsch. Du kannst ja mal zum Test dem HTML und Body-Element einen Rand (border) geben und dir selber anschauen, was genau die 100% Höhe bewirkt. 

Zum Schluss hab ich noch ein div. Dies sollte einfach die restliche Höhe des Bodys einnehmen.

Auch das ist Käse. Es soll wohl lediglich der restliche Bereich unabhängig von der Größe des Viewports mit dem Div ausgefüllt werden. Dafür kannst du unter anderem den den CSS3 Viewport-Units arbeiten. 

Also hab ich dem div eine Höhe von 100% verpasst. Nur leider ist jetzt das div um genau die 50px größer als der Body.

Die 100% Höhe bei allen Elementen (html, body und div) entfernen. Deinem Header nun eine fixe Höhe von 50px zuweist und dem darauf folgendem Div hingegen eine Höhe von 100vh. Mehr ist eigentlich nicht notwendig. 

header {height: 50px;}

div {height: 100vh;}

Zu guter Letzt noch ein gut gemeinter Tipp an dich. Verwende statt Inline-Styles ein externes Stylesheet. So wird das Markup sauber von dessen Formatierung getrennt. Vor allem nicht so schnell den Überblick verlierst.

LG medmonk 

Danke dir. Das ist genau die Erklärung die ich haben wollte.

0

Der body hat halt 100%, dein Container hat auch 100%. Alle Childs des body orientieren sich bei der prozentualen Höhe am body. Hat dein Container also 100%, ist er genauso hoch wie der body. Und der header halt + 50px.
Entweder gibst du deinem header auch einen Prozentsatz und zieht den von der Containerhöhe ab (z.B. 5% und 95%) oder du flext deinen body.

was genau meinst du mit flext?

0

In diesem Fall wird immer alles untereinander gepackt und kann nicht höher als der body sein.

0

Warum wird in meiner HTML-Seite der PHP-include-Code zur Laufzeit nicht ausgeführt sondern erscheint als Kommentar?

Code: file:///srv/www/htdocs/test/test.html

Der Code vor Ausführung:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PHP-Test1</title>
</head>
<body>
<?php include ("test.php"); ?>
</body>
</html>

Der Code während der Ausführung (FF-Tools):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PHP-Test1</title>
</head>
<body>
<!--?php include ("test.php"); ?-->
</body>
</html>
...zur Frage

HTML Website programmieren Seite soll sich dem Bildschirm anpassen?

Hallo, ich muss eine Seite fpr ein Schulprojekt mit HTML und CSS programmieren, allerdings habe ich das Problem, dass auf meinem Monitor die Bilder mithilfe der Tabelle genau dort sitzen wo sie sitzen sollen aber sobals man das Fenster verkleinert sich mitbewegen und nciht fixiert sind, vllt kann mir ja jmnd da weiterhelfen so sieht der Code bisher aus:

<HTML>

   <HEAD>

      <TITLE>

         Schulprojekt-Mythologie

      </TITLE>

   </HEAD>

   <BODY>

      <body bgcolor=1b1b1b>

      <body style="background-image:url(Homepage.png);

               background-repeat: no-repeat; width:

               100%;background-position:center top">

      <table style="float:left;width:68%;">

         <tr>

            <td>

               <a href="Griechische Mythologie.html"><img src="Griechisch.jpg" alt="Bild" height="200" width="400" align="left" hspace="100" vspace="275" /></a>

            </td>

         </tr>

         <tr>

            <td>

               <a href="Roemische Mythologie.html"><img src="Roemisch.jpg" alt="Bild" height="200" width="400" align="left" hspace="100" vspace="10" /></a>

            </td>

         </tr>

      </table style="float:right;width:68%;">

      <table >

         <tr>

            <td>

               <a href="Keltische Mythologie.html"><img src="Keltische.jpg" alt="Bild" height="200" width="400" align="right" hspace="100" vspace="275" /></a>

            </td>

         </tr>

         <tr>

            <td>

               <a href="Nordische Mythologie.html"><img src="Nordische.jpg" alt="Bild" height="200" width="400" align="b" hspace="100" vspace="10" /></a>

            </td>

         </tr>

      </table>

   </BODY>

</HTML>

...zur Frage

In Mitte verschieben (HTML5)?

Hey, ich habe eine Frage!

Ich habe was mit HTML5 und CSS geschrieben und kriege etwas nicht in die Mitte.

HTML5:

<div id="Telefon">

<a align="center" id="Kontaktieren" href="tel:">Kontaktieren sie uns!</a>

</div>

und hier der CSS:

#Kontaktieren {
	display: block;
	margin-top: 1050px;
	width: 200px;
	height: 50px;
	background: #e2e2e2;
	border: 1px solid #e2e2e2;
	border-radius: 5px;
	width: 200px;
	height: 50px;
	color: #222;
	font-family: Arial;
	margin-left: 5px;
	font-size: 20px;
	width: 200px;
	height: 50px;
	line-height: 50px;
}

Kontaktieren:hover {

color: white;
border: 1px solid #222;
border-radius: 5px;
background: #222;
}

Mit padding-left: ...;

margin-left: ...;

align: center;

text-align: center;

funktioniert es nicht?

...zur Frage

Banner in HTML zentrieren, ohne dass er beim zoomen ins Nirwana fliegt?

Ich arbeite zurzeit an einer Website. Da ich HTML erst seit einem halben Jahr in der Schule lerne habe ich noch nicht so ein großes Wissen. Von CSS habe ich auch fast noch nix gehört.

Nun zu meinem Problem. Ich möchte meine Website in verschiedene von einander möglichst unabhängigen Ebenen einteilen:

1.: Hintergrund Ebene, welche beim Scrollen an Ort und Stelle bleibt

2.: Banner, welcher zentral am Anfang der Seite steht

3.: Text, welcher sich immer unterhalb des Banners aufhält

Den Hintergrund kriege ich soweit schon hin. Sobald ich allerdings einen Banner hinzufügen möchte und anfange zu scrollen, verschwindet der Banner und rundum meinen Hintergrund befindet sich ein weißer Rand, obwohl der Hintergrund eigentlich immer unabhängig vom Rest stehen bleiben soll.

Hier der HTML-Quellcode:

<body>

<div id="bgSizeCover">

<div>

<header>

<img src="Banner.png">

</header>

<div id="text">

Text

</div>

</body>

Hier CSS:

<style>

#bgSizeCover { background: url(Hintergrund.png);

background-attachment: fixed;

background-size: cover;

height: 100%;

width: 100%;

z-index: 1;}

header { float: center;

margin-left: 20px;

z-index: 2;}

#text{ float: center;

z-index: 3;}

LG Jan :)

...zur Frage

HMTL/CSS - Wie kann ich ein Img in einem Div zentrieren?

Moin,

hat jemand eine Idee, wie ich über meiner Navbar ein 100px Image mit CSS genau mittig positioniere? Die Ansätze, die ich bis jetzt im Internet gefunden habe, waren nicht besonders hilfreich, was meinen Fall angeht...

Das wäre der html-Ausschnitt...:

<html>
    <body>
        <header>
            <div class="navbar-body">
                <img class="navbar-logo" src="logo_navbar.png"></img>
            </div>
        </header>
    </body>
</html>

...und das der für CSS:

.navbar-body{
    color: FFFFFF;
    background-color: 1F1F1F;
    font-family: Arial Black;
    font-size: 20px;
    height: 80px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-logo{
    height: 100px;
    margin: 30px auto 0;
}

Mein Problem ist, dass sich bei "margin: auto" und "display: block" zwar die Grafik mittig positioniert, aber dafür den Nav-Container mit verschiebt. Hat hier jmd eine Lösung parat?
LG

...zur Frage

Wie passe ich eine Seite mit HMTL an?

Ich weiß nicht genau wie ich meine HTML seite genau anpasse, denn da ist immer ein weißer Rand oben, hier mein Code:

HTML:

<!DOCTYPE>

<html lang="de">

<head>

<link rel="stylesheet" href="style.css" type="text/css" />

<title>CT - Logistik GmbH & Co. KG</title>

</head>

<body>

<div id="wrapper">

<header></header>

<section></section>

<footer></footer>

</div>

</body>

</html>

und CSS:

#wrapper {

width: 100%;

margin-left: auto;

margin-right: auto;

overflow: hidden;

}

header {

width: 100%;

height: 110px;

background-color: gray;

}

Hoffe ihr könnt mir helfen!

...zur Frage

Was möchtest Du wissen?