Text-Layout funktioniert nicht

Gehe zu Seite:

Geschlossen

Mo. 15.04.2013 19:45 Uhr #1

Noxury Mitglied

Hallo Liebe Ilchers,

Für mein Informatik-Kurs meiner Schule soll ich eine Homepage erstellen, ich kenn mich auch einigermaßen aus mit HTML.

Mein Problem ist Folgendes:

Ich habe das Facebook-Like-Script im Menü auf der Seite reinkopiert und als ich dadrunter etwas schreiben wollte, wurde der Text automatisch rechtsbündig formatiert; undzwar an der unteren rechten Ecke des FB-Buttons. Als ich vor und hinter den Text das <p align> </p> Tag eingefügt habe, passiert nichts.
Muss man das mit CSS machen?
Hier meine index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Universe Explorer: Home</title>
<meta name="description" content="Universe Explorer: Home">
<meta name="editor" content="html-editor phase 5">
<link rel="shortcut icon" href="../Icons/Planet_Sun_Favicon.ico">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<style type="text/css">
<!--
body {
  background-image:url(../Graphics/Background1.jpg);
  background-position:top-left;
  repeat-x;
  background-repeat:no-repeat;
  background-attachment:fixed;
  margin-top:48px;
}
#element_text {
  width:1350px;
  color: #EEE;
  text-align:left;
  background-color: #000;
  border:#F90 1px solid;
  padding:24px;
  filter:alpha(opacity=50);
  -moz-opacity:.50;
  opacity:.70;
}
body,td,th {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
-->
</style>
</head>
<body>
<div align="center">
<div id="element_text">
<font face="AR DESTINE"><font color="#C0C0C0"><p align="center"><font size="+4">Universe Explorer</font></p></font></font>
<hr size="5" noshade; color="#F90">
 
<body>
  <ul>
    <li><a href = "index.html">Home</a></li>
        <li><a href = "Galaxien.html">Galaxien</a></li>
    <li><a href = "Planeten.html">Planeten</a></li>
    <li><a href = "Sterne.html">Sterne</a></li>
    <li><div id="fb-root"></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffile:///F:/Informatik/Phase%205/Universe%20Explorer/HTMLs/index.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
<style>.fbook{position: absolute; font-color:#ddd; top:-1668px; font-size:10;}</style></style><a href="http://www.howtoaddlikebutton.com"
class="fbook">http://www.howtoaddlikebutton.com</a><style>.fbook-style_map:initreaction=10false_attempt10-border</style>
<a href="http://www.kosmetikstudio-hamburg.net/fusspflege-hamburg" class="fbook">Allpresan</a><style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
  </ul>
Herzlich Willkommen auf Universe Explorer! In diesem Wiki finden Sie alles über das Universum. </p>
 
</body>
</div>
</html>

Es wäre nett, wenn ihr das Problem beheben könntet.

MFG

Noxury

Zuletzt modifiziert von Noxury am 20.04.2013 - 17:41:04

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 15.04.2013 20:03 Uhr #2

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen
Ich hätte da mal ein ganzen Schwung Anmerkungen:
- <font>?
- Warum CSS quer durch das Script
- </> doppelte und fehlende schließende Tags
- unnötigen <div> Container
- Menüleiste und Content per Container trennen und Style drauf
rules :: doku :: faq :: linkus
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 15.04.2013 20:51 Uhr #3

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

Danke für die Verbesserung.

Also das CSS ist für den transparent-Rahmen, hab ich von einem Tutorial.
Ich verstehe aber deinen letzten Punkt nicht ganz. Ja ich habe die Menüleiste mit css gemacht. Also soll ich die style.css in die html reinpacken?

Zuletzt modifiziert von Noxury am 15.04.2013 - 20:58:09

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 15.04.2013 20:59 Uhr #4

Lord|Schirmer Administrator

Mir ging es um die <style> im <body>.
Achja es gibt hier auch zwei <body>.

Nur mal als Beispiel für ein Aufbau:

<html>
  <head>
    <title>
    <meta>
    <style>
  </head>
  <body>
    <div id="site">
      <div id="menu"></div>
      <div id="content"></div>
    </div>
  </body>
</html>

rules :: doku :: faq :: linkus

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 15.04.2013 21:17 Uhr #5

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

Ok. Jetzt ist aber immernoch das eigentliche Problem da.

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 15.04.2013 21:23 Uhr #6

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

Dann poste mal dein aktuelles Ergebnis

rules :: doku :: faq :: linkus
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 15.04.2013 21:25 Uhr #7

Noxury Mitglied

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Universe Explorer: Home</title>
  <meta name="description" content="Universe Explorer: Home">
  <meta name="editor" content="html-editor phase 5">
  <link rel="shortcut icon" href="../Icons/Planet_Sun_Favicon.ico">
  <link rel = "stylesheet" type = "text/css" href = "style.css">
  <style type="text/css">
<!--
body {
  background-image:url(../Graphics/Background1.jpg);
  background-position:top-left;
  repeat-x;
  background-repeat:no-repeat;
  background-attachment:fixed;
  margin-top:48px;
}
#element_text {
  width:1350px;
  color: #EEE;
  text-align:left;
  background-color: #000;
  border:#F90 1px solid;
  padding:24px;
  filter:alpha(opacity=50);
  -moz-opacity:.50;
  opacity:.70;
}
body,td,th {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
-->
  </style>
 </head>
 <body>
  <div align="center">
  <div id="element_text">
   <font face="AR DESTINE"><font color="#C0C0C0"><p align="center"><font size="+4">Universe Explorer</font></p></font></font>
   <hr size="5" noshade; color="#F90">
 
   <ul>
    <li><a href = "index.html">Home</a></li>
    <li><a href = "Galaxien.html">Galaxien</a></li>
    <li><a href = "Planeten.html">Planeten</a></li>
    <li><a href = "Sterne.html">Sterne</a></li>
    <li><div id="fb-root"></div>
     <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffile:///F:/Informatik/Phase%205/Universe%20Explorer/HTMLs/index.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80"
     scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
     <style>.fbook{position: absolute; font-color:#ddd; top:-1668px; font-size:10;}</style></style><a href="http://www.howtoaddlikebutton.com"
     class="fbook">http://www.howtoaddlikebutton.com</a><style>.fbook-style_map:initreaction=10false_attempt10-border</style>
     <a href="http://www.kosmetikstudio-hamburg.net/fusspflege-hamburg" class="fbook">Allpresan</a><style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
  </ul>
Herzlich Willkommen auf Universe Explorer! In diesem Wiki finden Sie alles &uuml;ber das Universum.
 
  </div>
 </body>
</html>

Zuletzt modifiziert von Noxury am 15.04.2013 - 21:25:42

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 15.04.2013 21:27 Uhr #8

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

so wie ich das sehe hast du zwei divs geöffnet

<div align="center">
<div id="element_text">

aber nur eines davon geschlossen?
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 15.04.2013 21:32 Uhr #9

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

ja wo soll das </div> tag hin für <div align="center"> ?

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 15.04.2013 21:45 Uhr #10

Lord|Schirmer Administrator

Es ist zwar nicht schön, aber zB. so! Mit etwas mehr Struktur sieht man Fehler eher.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Universe Explorer: Home</title>
    <meta name="description" content="Universe Explorer: Home">
    <meta name="editor" content="html-editor phase 5">
    <link rel="shortcut icon" href="../Icons/Planet_Sun_Favicon.ico">
    <link rel="stylesheet" type="text/css" href = "style.css">
    <style type="text/css">
      <!--
      body {
        background-image:url(../Graphics/Background1.jpg);
        background-position:top-left;
        repeat-x;
        background-repeat:no-repeat;
        background-attachment:fixed;
        margin-top:48px;
      }
      #element_text {
        width:1350px;
        color: #EEE;
        text-align:left;
        background-color: #000;
        border:#F90 1px solid;
        padding:24px;
        filter:alpha(opacity=50);
        -moz-opacity:.50;
        opacity:.70;
      }
      body,td,th {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
      }
      .fbook {
        position: absolute;
        font-color:#ddd;
        top:-1668px;
        font-size:10;
      }
      .title {
        color:#C0C0C0;
        text-align:center;
        font-size:20px;
      }
      -->
    </style>
  </head>
  <body>
    <div style="text-align:center">
      <div id="element_text">
        <div class="title">Universe Explorer</div>
        <hr size="5" noshade; color="#F90">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="Galaxien.html">Galaxien</a></li>
          <li><a href="Planeten.html">Planeten</a></li>
          <li><a href="Sterne.html">Sterne</a></li>
          <li>
            <div id="fb-root"></div>
            <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffile:///F:/Informatik/Phase%205/Universe%20Explorer/HTMLs/index.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
            <a href="http://www.howtoaddlikebutton.com" class="fbook">http://www.howtoaddlikebutton.com</a><style>.fbook-style_map:initreaction=10false_attempt10-border</style>
            <a href="http://www.kosmetikstudio-hamburg.net/fusspflege-hamburg" class="fbook">Allpresan</a><style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
          </li>
        </ul>
        <div style="text-align:center">
          Herzlich Willkommen auf Universe Explorer! In diesem Wiki finden Sie alles &uuml;ber das Universum.
        </div>      
      </div>
    </div>
 </body>
</html>

CSS vollständig aus den Code nehmen und in die style einbinden.

Zuletzt modifiziert von Lord|Schirmer am 15.04.2013 - 21:47:44

rules :: doku :: faq :: linkus

0 Mitglieder finden den Beitrag gut.

zitieren

Di. 16.04.2013 15:46 Uhr #11

Noxury Mitglied

So verbessert, CSS rausgenommen, bei style.css eingefügt, aber der Fehler ist immernoch da. Ich poste mal den aktuellen Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Universe Explorer: Home</title>
  <meta name="description" content="Universe Explorer: Home">
  <meta name="editor" content="html-editor phase 5">
  <link rel="shortcut icon" href="../Icons/Planet_Sun_Favicon.ico">
  <link rel = "stylesheet" type = "text/css" href = "style.css">
 </head>
 <body>
  <div align="center">
  <div id="element_text">
   <font face="AR DESTINE"><font color="#C0C0C0"><p align="center"><font size="+4">Universe Explorer</font></p></font></font>
   <hr size="5" noshade; color="#F90">
   <ul>
    <li><a href = "index.html">Home</a></li>
    <li><a href = "Galaxien.html">Galaxien</a></li>
    <li><a href = "Planeten.html">Planeten</a></li>
    <li><a href = "Sterne.html">Sterne</a></li>
    <li>
     <div id="fb-root"></div>
     <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffile:///F:/Informatik/Phase%205/Universe%20Explorer/HTMLs/index.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
     <style>.fbook{position: absolute; font-color:#ddd; top:-1668px; font-size:10;}</style></style>
     <a href="http://www.howtoaddlikebutton.com" class="fbook">http://www.howtoaddlikebutton.com</a><style>.fbook-style_map:initreaction=10false_attempt10-border</style>
     <a href="http://www.kosmetikstudio-hamburg.net/fusspflege-hamburg" class="fbook">Allpresan</a><style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
    </li>
   </ul>
  <div style="text-align:left">
Herzlich Willkommen auf Universe Explorer! In diesem Wiki finden Sie alles &uuml;ber das Universum.
   </div>
  </div>
 </body>
</html>

Zuletzt modifiziert von Noxury am 16.04.2013 - 15:48:03

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.

0 Mitglieder finden den Beitrag gut.

zitieren

Di. 16.04.2013 22:58 Uhr #12

Wizzard26 Mitglied

Registriert seit
05.03.2009

Beiträge
259

Beitragswertungen

Nur mal so beim Überfliegen

4 Div container werden geöffnet, nur 3 wieder geschlossen.

Zeile 23 Einmal wird <style> Geöffnet 2 mal geschlossen. Um mal davon abzusehendas styles in den head bereich gehören oder noch besser in ner css datei.

Zeile 13, nicht nur das man font tags eigentlich nicht mehr verwendet, font in font in p in font ( ganz schön viel aufwand um 2 wörter zu formatieren )
da wäre es sinniger das p element direkt in der css anzusprechen und da die formatierungen zu setzten.
0 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 17.04.2013 07:00 Uhr #13

Rock@wulf Hall Of Fame

Registriert seit
03.06.2004

Beiträge
3.282

Beitragswertungen

Netbeans ?? !! ^^

Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
MFG Rock@wulf
0 Mitglieder finden den Beitrag gut.
- zitieren

Sa. 20.04.2013 15:35 Uhr #14

Noxury Mitglied

jaja, endgültig verbessert! Das regt mich solangsam auf, dass dieser Fehler noch da ist.
Es MUSS an den Facebook-Like-Button etwas nicht stimmen, da der Text so ist, wie er sein soll, wenn ich das entferne. Und komisch, der Text ist an der unteren rechten Ecke des FB-Scripts ausgerichtet.
Hier das Update:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Universe Explorer: Home</title>
  <meta name="description" content="Universe Explorer: Home">
  <meta name="editor" content="html-editor phase 5">
  <link rel="shortcut icon" href="../Icons/Planet_Sun_Favicon.ico">
  <link rel = "stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div align="center">
  <div id="element_box">
   <div id="title">
    Universe Explorer
   </div>
   <hr size="5" noshade; color="#F90"/>
   <ul>
    <li>
     <form name="search" method="get" action="http://www.google.com/search">
      <input type="hidden" name="hl" value="de">
      <input type="text" name="q" value="Suche">
      <input type="submit" value="Suchen">
     </form></li>
    <li><a href="index.html">Home</a></li>
    <li><a href="Galaxien.html">Galaxien</a></li>
    <li><a href="Planeten.html">Planeten</a></li>
    <li><a href="Sterne.html">Sterne</a></li>
    <li>
     <div id="fb-root"></div>
     <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffile:///F:/Informatik/Phase%205/Universe%20Explorer/HTMLs/index.html&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
     <style>.fbook{position: absolute; font-color:#ddd; top:-1668px; font-size:10;}</style></style>
     <a href="http://www.howtoaddlikebutton.com" class="fbook">http://www.howtoaddlikebutton.com</a><style>.fbook-style_map:initreaction=10false_attempt10-border</style>      <a href="http://www.kosmetikstudio-hamburg.net/fusspflege-hamburg" class="fbook">Allpresan</a><style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
    </li>
  </ul>
 <div id="Text">
Herzlich Willkommen auf Universe Explorer! In diesem Wiki finden Sie alles &uuml;ber das Universum. Zurzeit arbeiten wir an 20 Artikeln. Achtung!: Diese Enzyklopädie wurde ausschließlich zu unterrichtlichen Zwecken erstellt!
 </div>  
  <div id="footer">
   <hr size="5" noshade; color="#F90"/>
   <ul>
    <li><a href="Kontakt.html">Kontakt</a></li>
    <li><a href="autor.html">Autor</a></li>  
   </ul>
  </div>
  </div>
  </div>
 </body>
</html>

Zuletzt modifiziert von Noxury am 20.04.2013 - 17:43:38

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.

0 Mitglieder finden den Beitrag gut.

zitieren

Sa. 20.04.2013 16:24 Uhr #15

corian Entwickler

Registriert seit
16.06.2011

Beiträge
1.096

Beitragswertungen

Wie Ich das sehe hast du den code falsch kopiert und platziert. Lass dir den code noch mal neu generieren und lese dir die Anleitung dazu ganau durch, wo welcher codeteil platziert werden soll.

developers.facebook.com/docs/reference/plugins/like/

MFG corian
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 16:49 Uhr #16

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

Das ist ein anderer Code von externer Link
Mit genau diesem Link von Facebook, was du gepostet hast, geht's bei mir nicht, ich weiß nicht, was ich andauernd falsch mache. Deshalb habe ich das Andere genommen und wie du siehst geht's. Aber das danach nicht so wirklich:

MFG Noxury

Zuletzt modifiziert von Noxury am 20.04.2013 - 17:02:05

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 16:56 Uhr #17

Wizzard26 Mitglied

Registriert seit
05.03.2009

Beiträge
259

Beitragswertungen

Da du weder irgendwas Online zur ansicht stellst noch html und css datei zur ansicht gibst ist das auch mehr ratespielchen als hilfe.

Ich geh mal ganz stark davon aus das deine Menüstruktur ein float left besitzt, zumindest sieht das auf dem Screen gerade so aus.

Geb der ID text doch einfach mal ein clear: both;

mal sehen ob sich dann was ändert
1 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 17:09 Uhr #18

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

Zitat geschrieben von Wizzard26

Da du weder irgendwas Online zur ansicht stellst noch html und css datei zur ansicht gibst ist das auch mehr ratespielchen als hilfe.

Link:noxury.bplaced.net/Universe%20Explorer/HTMLs/index.html
noxury.bplaced.net/Universe%20Explorer/HTMLs/style.css

Rechtsklick auf Seite, Seitenquelltext anzeigen. Dann könnt ihr wann immer ihr wollt und so oft ihr wollt den Code angucken.

Zuletzt modifiziert von Noxury am 20.04.2013 - 17:13:27

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 17:18 Uhr #19

corian Entwickler

Registriert seit
16.06.2011

Beiträge
1.096

Beitragswertungen

Kann ich mir nicht vorstellen das der code von der Seite nicht geht. Versuche es einfach noch mal und lese was da steht. Wenns nicht klappt wars einen Versuch wert.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 17:39 Uhr #20

Noxury Mitglied

Registriert seit
15.04.2013

Beiträge
19

Beitragswertungen

Danke Wizzard26!
Es hat geklappt mit dem clear: both
Nur fehlt jetzt beim Menü die graue Leiste

Der PC rechnet mit allem, nur nicht mit seinem Benutzer.
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 20.04.2013 19:18 Uhr #21

Wizzard26 Mitglied

Registriert seit
05.03.2009

Beiträge
259

Beitragswertungen

Schreibweise beachten, wenn du das Menunav.png nennst kannst du in der css nicht einfach menunav.png schreiben Groß- klein
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Text-Layout funktioniert nicht