• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Object verzieht sich in den Footer

F

Freymuth

Neues Mitglied
Hallo,

dies ist mein erster Besuch hier.
Ich komme alleine nicht weiter, also brauche ich Hilfe von außen. :/

Ich erkläre euch kurz meine Situation. Im Fach IV in der Schule soll ich einen OnlineShop erstellen. Wir hatten bis jetzt 4-5 Stunden zum Thema HTML.

Wie die Seite bis jetzt aussieht: http://www.youscreen.de/rwlsgfye08.jpg

Das komische ist. Wenn ich die Größe des Objects in Ruhe lasse passiert das: http://www.youscreen.de/ynfmszgk60.jpg

Kurfassung: Was muss ich eingeben, damit das Objekt eine Größe von 100% hat ohne das es in den Footer abhaut?

Meine CSS:
Code: 
body {

    background:;

    }



#wrapper {

    background-color:black;
    width: 900px;
    height: 750px;
    margin:0 auto;
}


header {

    background-color: red;
    width: 900px;
    height: 150px;
    font-family: "Arial";
    text-align: center;

    }



nav {

    background-color:orange;
    width: 200px;
    height: 550px;
    float:left;
    padding-left: 10px;

    }


main {

    background-color:green;
    width: 900px;
    height: 550px;
    text-align: center;

    }


footer {

    background-color:purple;
    width: 900px;
    height: 180px;
    clear: both;
    margin-top:-20px;
    text-align: center;

    }

Meine Impressum-HTML:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Impressum</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>

<body>
<div id = "wrapper">
<header>
<h1>Pflege des Körpers - Ihre Adresse für Onlineeinkäufe</h1>
</header>

<nav>
<h2>Navigation:</h2>

<ul>
<a href="index.html" target="_parent"><input type="button" value=" Startseite " onclick="bk2()" style="width:110px;"></a> </br>
<a href="gesichtspflege.html" target="_parent"><input type="button" value=" Gesichtspflege " onclick="bk2()" style="width:110px;"></a> </br>
<a href="koerperpflege.html" target="_parent"><input type="button" value=" Körperpflege " onclick="bk2()" style="width:110px;"></a> </br>
<a href="kontakt.html" target="_parent"><input type="button" value=" Kontakt " onclick="bk2()" style="width:110px;"></a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br>
<a href="impressum.html" target="_parent"><input type="button" value=" Impressum " onclick="bk2()" style="width:110px;"></a> </br>

</ul>
</nav>

<main>
<object data="main_impressum_inhalt.html"> </object>
</main>

<footer>
</br>
<h3>Fortschritt dieses Online-Shops:</h3>
<progress value="45" max="100"></progress> </br> </br>
<details>
  <summary>Copyright 2014-2015.</summary>
  <p> - Design by Jan Freymuth. All Rights Reserved.</p>
</details>
</footer>
</div>
</body>
</html>

Der Inhalt vom Objekt:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Inhalt-Impressum</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>

<body>
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</body>
</html>
 
Okay habe die HTML geändert:

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Impressum</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>

<body>
<div id = "wrapper">
<div id = "header">
<h1>Pflege des Körpers - Ihre Adresse für Onlineeinkäufe</h1>
</div>

<div id = "nav">
<h2>Navigation:</h2>

<ul>
<a href="index.html" target="_parent"><input type="button" value=" Startseite " onclick="bk2()" style="width:110px;"></a> </br>
<a href="gesichtspflege.html" target="_parent"><input type="button" value=" Gesichtspflege " onclick="bk2()" style="width:110px;"></a> </br>
<a href="koerperpflege.html" target="_parent"><input type="button" value=" Körperpflege " onclick="bk2()" style="width:110px;"></a> </br>
<a href="kontakt.html" target="_parent"><input type="button" value=" Kontakt " onclick="bk2()" style="width:110px;"></a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br>
<a href="impressum.html" target="_parent"><input type="button" value=" Impressum " onclick="bk2()" style="width:110px;"></a> </br>

</ul>
</div>

<div id = "main">
<object data="main_impressum_inhalt.html"> </object>
</div>

<div id = "footer">
</br>
<h3>Fortschritt dieses Online-Shops:</h3>
<progress value="45" max="100"></progress> </br> </br>
<details>
  <summary>Copyright 2014-2015.</summary>
  <p> - Design by Jan Freymuth. All Rights Reserved.</p>
</details>
</div>
</div>
</body>
</html>
 
Hallo.

Keine Ahnung was Tronjer mit den ausgedachten HTML Tags meint. So wie du es hattest war es schon richtig.
Dein Problem ist altbekannt und tritt immer dann auf wenn man float nutzt ohne zu begreifen was es eigentlich tut.

Du musst eigentlich nur mit margin-left dein main neben die Navigation schieben und dann noch die Breite anpassen

Code: 
main {
    background-color:green;
    width: 700px;
    height: 550px;
    text-align: center;
    margin-left: 210px;
}

HTML: 
<object width="100%" height="100%" data="main_impressum_inhalt.html"> </object>

Das müsste so ungefähr hinkommen.

Nur zwei Dinge noch:

In deine Object Datei gehört nur das was du einfügen willst, also nur der Text nicht eine komplette HTML seite.
In einer Liste dürfen nur Listenelemente stehen nicht so wie bei dir. Also zeichne deine Links als Listenelemente aus.

Gruss
Elroy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben