zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.12.2010, 21:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2010
Beiträge: 42
Picasso befindet sich auf einem aufstrebenden Ast
Standard Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.

Hallo Forum,

ich habe zu spät mein Hobby endeckt. Mit meinen 45 Jahren versuche ich mich jetzt in HTML und CSS einzuarbeiten.


Ich bin grade dabei eine Seite zu basteln und habe ein Problem wie folgt:

In der Vorschau von meinem Editor, ich nutze Webocton-Scriptly, wird mir die Seite korrekt angezeigt. Er nutzt zur Vorschau den Internet Explorer.

Die HTML sowie die CSS Datei liegen auf meinem Rechner. Öffne ich die HTML Datei im IE 8 und im Firefox wird diese verschoben dargestellt.

Anbei mal meine Dateien:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>xxxxxx.de</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
         <link rel="stylesheet" href="main.css" type="text/css"  media="screen, projection" />
</head>

<body>

<div id="header">

       <h1>Glapoke</h1>


       </div>


<div id="anschrift">

<address>

<a href="http://www.xxxxx.de/index.php/" target="_blank" title="www.xxxxxx.de">Glas Porzelan Keramik</a><br />
     AAAAAAAA<br />
     aaaaaaaaaaaaaaaaa<br />
     D-aaaaaaaaaaaaa<br />
     Tel. +000000000000<br />
     Mobil 000000000000<br />
     E-Mail <a href="mailto:bla@gmx.de" title="E-Mail an Test;">Test;</a><br /><br />
    
     </address>



</div>
          <div id="container">


          <div id="links">



              <p>

             Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
               Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
               Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             </p>


          </div>

          <div id="rechts">

              <p>

             Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
               Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
               Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             Dieser Text links ausgerichtet sein.<br />
             </p>

          </div>


          </div>




      <div id="footer">

              <p>Hier kommt Text rein f&uuml;r den Footer</p>


      </div>



</body>
</html>
und die CSS:

Code:
* {
margin: 0;
padding: 0;
}

body {
font: 95% Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #fff;
width: 980px;
height: auto;
margin:auto;width:100%}



a {
color: #000;
text-decoration: none;
margin-left: 10px;
}

a:hover {
text-decoration: underline;
}

a img {
border: 0 none;
}

h1, h2, h3 {
font-family: Arial, Geneva, sans-serif;
color: #555555;
background: transparent;
}

h1 {
font-size: 1.6em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

p, li {
font-size: 0.80em;

}

p {
line-height: 140%;
text-align: left;
margin: 10px 10px 10px 10px;
}

ul {
list-style-type: square;
}


h1
{
    color: #555555;font-size: 30px;font-style: italic;font-weight: lighter;position: relative;top: 10px;
}

#anschrift
{
    color: #555555; margin-left: auto; margin-right: auto;padding: 20px 0 20px 30px
    }


    #header
{
    width: 900px;height: 100px;border: solid 1px;border-color: #555555; margin-left: auto; margin-right: auto;margin-top: 10px; text-align: left;position: relative;padding: 10px 10px 10px 20px;
    background-color: #8B0000;


}


#container
{
    width:900px;height: auto;border: solid 1px;border-color: #000; margin-left:auto; margin-right: auto;

}

#links
{
    width: 300px;height: auto; background-image: url(images/1.png);margin: 10px 0px 10px 10px;float: left;

}

#rechts
{
    width: 300px;height: auto; background-image: url(images/1.png);margin: 10px 10px 10px 10px;float: right;
}

#footer
{
  width: 900px;height: 100px;border: solid 1px;border-color: #555555; margin-left: auto; margin-right: auto; text-align: left;padding: 10px 10px 10px 20px;margin-top: 10px;
  background-color: #8B0000;
}
kann mir jemand sagen wo der Fehler ist und wie es richtig auszusehen hat?


Grüße
Richard
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.12.2010, 01:03
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Picasso Beitrag anzeigen
kann mir jemand sagen wo der Fehler ist und wie es richtig auszusehen hat?
Wie es richtig auszusehen hat weißt du doch. Ein Screenshot würde uns weiterhelfen zu erfahren, wie du es haben möchtest, zumal hier keiner weiß, mit welcher IE-Version es nach deinem Willen dargestellt wird - der IE8 zeigt es nach deiner Aussage ja auch falsch an.

Zum Browsertest - du solltest immer erst für echte Browser schreiben, wenn dann alles passt, lässt es sich für den IE meist auch sehr schnell anpassen - als Testbrowser ist der IE ungeeignet.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.12.2010, 01:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2010
Beiträge: 42
Picasso befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich habe es hinbekommen. Kann es nicht genau erklären. Auf jedenfall habe ich es mit float und margin hinbekommen.

Was ich aber noch wissen müsste.

Die Seite ist 980px breit. Der Header; Content; Footer, jeweils 900px breit. Ich weiß jetzt nicht genau wie ich in der CSS sage dass dieses mittig ausgerichtet wird.

Ich habe dass mit padding margin zwar gelöst aber irgendwie auch nicht richtig bzw. zu ungenau.

Was muss ich tun?

Grüße
Richard
Mit Zitat antworten
  #4 (permalink)  
Alt 31.12.2010, 01:31
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Picasso Beitrag anzeigen
Ich habe dass mit padding margin zwar gelöst aber irgendwie auch nicht richtig bzw. zu ungenau.
Was genau hast du gemacht?
Code:
margin:0 auto;
richtet mittig aus.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.12.2010, 01:35
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo Richard

Hier mal eine grobe Variante (bereinigt):
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>
      xxxxxx.de
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    <link rel="stylesheet" href="main.css" type="text/css" media="screen, projection" />
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <h1>
          Glapoke
        </h1>
      </div>
      <address>
        <a href="http://www.xxxxx.de/index.php/" title="www.xxxxxx.de">Glas Porzelan Keramik</a><br />
        AAAAAAAA<br />
        aaaaaaaaaaaaaaaaa<br />
        D-aaaaaaaaaaaaa<br />
        Tel. +000000000000<br />
        Mobil 000000000000<br />
        E-Mail: <a href="mailto:bla@gmx.de" title="E-Mail an Test;">Test</a>
      </address>
      <div id="container" class="clearfix">
        <div id="links">
          <p>
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
          </p>
        </div>
        <div id="rechts">
          <p>
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein---Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
            Dieser Text links ausgerichtet sein.<br />
          </p>
        </div>
      </div>
      <div id="footer">
        <p>
          Hier kommt Text rein für den Footer
        </p>
      </div>
    </div>
  </body>
</html>
CSS:
Code:
* {
margin:0;
padding:0;
}

body {
background:#fff;
color:#000;
font:95%/1.4 Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
border:1px solid #000;
width:980px;
margin: 0 auto;
text-align:left;
}

a {
color:#000;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

a img {
border:0;
}

h1,h2,h3 {
color:#555;
font-family:Arial, Geneva, sans-serif;
}

h1 {
color:#fff;
font-size:30px;
font-style:italic;
font-weight:lighter;
padding: 10px;
}

h2 {
font-size:1.4em;
}

h3 {
font-size:1.2em;
}

p,li {
font-size:.8em;
}

p {
padding:20px;
}

ul {
list-style-type:square;
}

address {
border-top:1px solid #000;
color:#555;
padding:20px 30px;
}

#header {
background:#8B0000;
height:100px;
}

#container {
border-top:1px solid #000;
}

#links {
background-image:url(images/1.png);
float:left;
width:300px;
}

#rechts {
background-image:url(images/1.png);
float:right;
width:300px;
}

#footer {
background:#8B0000;
border-top:1px solid #000;
height:100px;
padding:10px;
}

.clearfix:after {content: ".";display: block;clear: both;font-size: 0;height: 0;visibility: hidden;}
*:first-child+html .clearfix {min-height: 0;} /* IE7 */
* html .clearfix {height: 1%;} /* IE6 */
Vermute, so in etwas soll das aussehen?

Gruß Manfred
Mit Zitat antworten
  #6 (permalink)  
Alt 31.12.2010, 01:39
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Ah, vergessen. Unser Tipp zum lernen:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Gruß Manfred
Mit Zitat antworten
  #7 (permalink)  
Alt 31.12.2010, 01:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2010
Beiträge: 42
Picasso befindet sich auf einem aufstrebenden Ast
Standard

Danke euch. Berichte Morgen wieder. Bin jetzt zu müde um weiter zu testen.

Grüße
Richard
Mit Zitat antworten
  #8 (permalink)  
Alt 31.12.2010, 14:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2010
Beiträge: 42
Picasso befindet sich auf einem aufstrebenden Ast
Standard

Hallo Manfred und co.,

Habe jetzt mal die CSS mal nach Deinem Beispiel angepasst und folgendes ist zu berichten:


Irgendwie klebt alles zusammen: Zwischem dem Text;den Boxen in der Mitte und dem Footer soll aber etwas Platz sein. Ich hänge mal das Bild an.




Und was muss ich noch machen?

Grüße
Richard
Mit Zitat antworten
  #9 (permalink)  
Alt 31.12.2010, 14:09
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Erstens: stell ein Testbeispiel online. Sonst wird das mit der Hilfe nix.
Niemand weiss, was du gemacht hast.

Manfred
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.12.2010, 14:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2010
Beiträge: 42
Picasso befindet sich auf einem aufstrebenden Ast
Standard

Ok. Ist online. Sehe auch gerade dass das Background-image nicht angezeigt wird. Hier der link:

Klick
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV container werden nicht richtig angezeigt amigo89 CSS 1 23.04.2011 17:23
Tabelle wird nur im Firefox richtig angezeigt und weitere Probleme Aiyana (X)HTML 16 29.12.2010 01:10
Seite wird nicht richtig angezeigt chrissie65 CSS 9 27.06.2010 13:11
Anzeige erst nach Aktualisierung der Seite in FF richtig el_vital CSS 2 17.12.2005 18:14
Div´s nicht richtig angezeigt... darvida CSS 3 05.10.2005 10:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:19 Uhr.