|
|||
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ür den Footer</p> </div> </body> </html> 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; } Grüße Richard |
Sponsored Links |
Sponsored Links |
|
|||
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 |
|
||||
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> 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 */ Gruß Manfred |
|
||||
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 |
|
|||
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 |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |