Hallo,
ich habe ein kleines Problem. Auf meiner Seite gibt es 4 Div Bereiche (heeder, navi, inhalt und footer). Unter FireFox, Konquerer wird das auch korrekt alles angezeigt, wo es sein soll. Heeder oben quer über die ganze Seite, navi links, rechts neben der navi der Inhalt. Unten quer unter der Seite der footer (mit clear:both) abgeschlossen. Soweit so gut. Selves Design funktioniert auf anderen Seiten auf all den genannten Browsern tadellos. Doch jetzt das Problem:
IE & Chrome setzen nur bei dieser Seite außer dem Heeder alle anderen Elemente in den Navi rein. Habe mittlerweile 3 mal die CSS neu gemacht und immer wieder das selbe. Habe selbst die CSS von einer andern Seite, die auch unter den beiden tadellos läuft tragedies eingesetzt. Doch auch hier das selbe Problem.
Im Html habe ich auch überprüft, ob alle div Elemente wieder geschlossen sind. Auch das ist der Fall.
Hat vielleicht jemand eine Idee wo ich noch suchen kann?
Vielen Dank schonmal im Voraus.
LG Feninic
Tutorial HTML, CSS u. PHP - Forum
Fragen und Antworten bei allen Problemen rund um Deine Homepage
gemeinsames Forum von www.html-seminar.de und www.PHP-Kurs.com
unser NEUES Forum gibt es unter
http://html-seminar.de/html-css-php-forum/
(Daten und Benutzer wurden übernommen, Kennwörter nicht, daher "Kennwort vergessen" beim ersten Nutzen verwenden!)
IE & Chrome zerschießen das Layout
Moderator: lauras
IE & Chrome zerschießen das Layout
von Feninic » Mittwoch 31. August 2011, 22:45
- Feninic
- HTML-Newbie
- Beiträge: 11
- Registriert: Mittwoch 31. August 2011, 21:39
Re: IE & Chrome zerschießen das Layout
von lauras » Mittwoch 31. August 2011, 22:50
Der Code wäre ganz nett für uns anzusehn, damit wir dir helfen können 
Vielleicht kannst dus auch irgendwo hochladen, dann kann ich z.B. mit meinem Chrome mal gucken ;)
LG
Vielleicht kannst dus auch irgendwo hochladen, dann kann ich z.B. mit meinem Chrome mal gucken ;)LG
-
lauras - Moderator
- Beiträge: 2114
- Registriert: Samstag 3. November 2007, 22:08
Re: IE & Chrome zerschießen das Layout
von Feninic » Donnerstag 1. September 2011, 05:03
Hallo Lauras,
ups da war doch was, ich hole es jetzt aber mal nach
Da es sich um ein Programm für jemand anders handelt, habe ich Personenbezogene Sachen durch ein * ersetzt. Also nicht wundern, wenn auf einmal irgendwo sowas wie *.php oder so auftaucht ;) . Im originalcode ist das natürlich mit den entsprechenden "richtigen" Namen versehen ;) . Ich poste hier auch nur mal die Indexseite, weil auch hier das ganze zum ersten mal auftritt. Zieht sich allerdings durch alle Seiten durch.
Also der Code der html:
Und der Code der CSS:
LG Feninic
ups da war doch was, ich hole es jetzt aber mal nach
Da es sich um ein Programm für jemand anders handelt, habe ich Personenbezogene Sachen durch ein * ersetzt. Also nicht wundern, wenn auf einmal irgendwo sowas wie *.php oder so auftaucht ;) . Im originalcode ist das natürlich mit den entsprechenden "richtigen" Namen versehen ;) . Ich poste hier auch nur mal die Indexseite, weil auch hier das ganze zum ersten mal auftritt. Zieht sich allerdings durch alle Seiten durch.
Also der Code der html:
- Code: Alles auswählen
<html xmls="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title>* hauptseite</title>
<!-- benoetigte Dateien -->
<link href='reset.css' title='reset.css' type='text/css' rel='reset' />
<link href='style.css' title='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<!-- Seitenkopfbereich -->
<div ID='heeder'>
<h1> Datenbankinterface für * </h1>
</div>
<!-- Navigationsbereich -->
<div ID='navi'>
<ul>
<li> <a href=*1.php> Einloggen</a> </li>
<li> <a href=*2.php> Seite verlassen</a> </li>
</ul
</div>
<!-- Seiteninhalt -->
<div ID="inhalt">
<h2> herzlich willkommen beim Datenbankinterface von * </h2>
<p> Um Aktionen durchführen zu können, müssen Sie sich anmelden. </p>
</div>
<!-- Linkliste -->
<!-- Fussbereich -->
<div ID='footer'>
<p class='pfooter'> © by
<a <a href="mailto:*@gmx.de?subject=DAS%20DATENBANK%20INTERFACE"><img src='*.jpg' width='54' height='30' border='0' alt='AnKo' align='middle'></a>
2011
</div>
</body>
</html>
Und der Code der CSS:
- Code: Alles auswählen
/* Linkveweise auf andere Dateien */
@ink href='(reset.css' title='reset.css' type='text/css' rel='stylesheet')
/* Broserreset */
{ padding:0; margin:0; }
{ font-size:100.1%; }
/* Globale Formatierung */
body{
float: left;
font-family: Lucida Sans;
font-size: 1.1em;
font-style: normal;
text-align: justify;
background-color: #458149;
}
/* Kopfbereich */
#heeder {
float: left;
width: 100%;
height: 10%;
font-family: Lucida Sans;
font-size: 1.1em;
font-style: normal;
text-align: justify;
background-color: #256E2A;
border: 0px solid #4D4D4D;
-webkit-border-top-right-radius: 30px 30px;
-webkit-border-top-left-radius: 30px 30px;
-webkit-border-bottom-right-radius: 30px 30px;
-khtml-border-top-right-radius: 30px 30px;
-khtml-border-top-left-radius: 30px 30px;
-khtml-border-bottom-right-radius: 30px 30px;
-moz-border-radius-topright: 30px 30px;
-moz-border-radius-topleft: 30px 30px;
-moz-border-radius-bottomright: 30px 30px;
border-top-right-radius: 30px 30px;
border-top-left-radius: 30px 30px;
border-bottom-right-radius: 30px 30px;
background: #256E2A;
}
/* Navigationsbereich */
#navi {
text-align: left;
float: left;
right: 10px;
width: 19%;
height:80%;
background-color: #137F1A;
padding: 1%;
border: 0px solid #4D4D4D;
-webkit-border-bottom-left-radius: 30px 30px;
-webkit-border-bottom-right-radius: 30px 30px;
-khtml-border-bottom-left-radius: 30px 30px;
-khtml-border-bottom-right-radius: 30px 30px;
-moz-border-radius-bottomleft: 30px 30px;
-moz-border-radius-bottomright: 30px 30px;
border-bottom-left-radius: 30px 30px;
border-bottom-right-radius: 30px 30px;
background: #137F1A;
}
#navi a:hover {
background-color: #E4E573;
}
/* Inhaltsbereich */
#inhalt {
border: 0px solid #4D4D4D;
-webkit-border-top-right-radius: 30px 30px;
-khtml-border-top-right-radius: 30px 30px;
-moz-border-radius-topright: 30px 30px;
border-top-right-radius: 30px 30px;
background-color: #458149;
float: left;
left: 10px;
margin-right: 1%;
width: 70%;
height: 80%;
padding: 2%;
}
#inhalt a:hover {
background-color: #E4E573;
}
/* Fussbereich */
#footer {
clear: both;
float: left;
width: 100%;
height :10%;
font-family: Lucida Sans;
font-size: 1.1em;
font-style: normal;
text-align: justify;
background-color: #256E2A;
border: 0px solid #4D4D4D;
-webkit-border-top-left-radius: 30px 30px;
-webkit-border-top-right-radius: 30px 30px;
-webkit-border-bottom-right-radius: 30px 30px;
-webkit-border-bottom-left-radius: 30px 30px;
-khtml-border-top-left-radius: 30px 30px;
-khtml-border-top-right-radius: 30px 30px;
-khtml-border-bottom-right-radius: 30px 30px;
-khtml-border-bottom-left-radius: 30px 30px;
-moz-border-radius-topleft: 30px 30px;
-moz-border-radius-topright: 30px 30px;
-moz-border-radius-bottomright: 30px 30px;
-moz-border-radius-bottomleft: 30px 30px;
border-top-left-radius: 30px 30px;
border-top-right-radius: 30px 30px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
background: #256E2A;
}
/* Ueberschriften */
h1 {
text-align: center;
}
h2 {
text-align: center;
}
/* Absaetze */
.pfooter {
text-align: center;
/* Tabelle */
table {
empty-cells: show;
}
th {
border-style: none;
border-color: #000000;
text-align: center;
}
/* Links */
a:hover {
background-color: #E4E573;
}
LG Feninic
- Feninic
- HTML-Newbie
- Beiträge: 11
- Registriert: Mittwoch 31. August 2011, 21:39
Re: IE & Chrome zerschießen das Layout
von Feninic » Donnerstag 1. September 2011, 05:19
Und hier im Anhang noch 2 Screenis
LG Feninic
LG Feninic
- Dateianhänge
-
- Die Ansicht bei Chrome und IE
-
- So sollte es sein
- Feninic
- HTML-Newbie
- Beiträge: 11
- Registriert: Mittwoch 31. August 2011, 21:39
Re: IE & Chrome zerschießen das Layout
von lauras » Donnerstag 1. September 2011, 08:17
Als allererstes machst du mal bitte folgendes:
HTML-Code validieren, und zwar hier: http://validator.w3.org/
CSS validieren, und zwar hier: http://jigsaw.w3.org/css-validator/ (Die Fehler zu den abgerundeten Ecken kannst du ignorieren - auch wenn du das da sehr umständlich machst)
Dann behebst du mal alle Fehler, die er dir anzeigt (immer nachdem du einen behoben hast neu validieren, vielleicht hat sich dann ein anderer auch erledigt).
Falls danach der Fehler immer noch besteht, unterhalten wir uns weiter ;)
Gruß
PS: Bitte Codes immer in den Code-BB-Code und keine Doppelposts, dafür gibts ne Edit-Funktion ;)
HTML-Code validieren, und zwar hier: http://validator.w3.org/
CSS validieren, und zwar hier: http://jigsaw.w3.org/css-validator/ (Die Fehler zu den abgerundeten Ecken kannst du ignorieren - auch wenn du das da sehr umständlich machst)
Dann behebst du mal alle Fehler, die er dir anzeigt (immer nachdem du einen behoben hast neu validieren, vielleicht hat sich dann ein anderer auch erledigt).
Falls danach der Fehler immer noch besteht, unterhalten wir uns weiter ;)
Gruß
PS: Bitte Codes immer in den Code-BB-Code und keine Doppelposts, dafür gibts ne Edit-Funktion ;)
-
lauras - Moderator
- Beiträge: 2114
- Registriert: Samstag 3. November 2007, 22:08
Re: IE & Chrome zerschießen das Layout
von NeoAramis » Donnerstag 1. September 2011, 14:54
Hallo
Also erstens einmal: bevor du dich an den Inhalt und ein anspruchsvolles Design heranwagen willst, erstelle einfach mal ein Grundgerüst welches hinsichtlich Code und Spezifikationen sauber und ordentlich aufgebaut ist. Wenn man dann einmal ein solides Grundgerüst hat, muss man sich später, wenn man ein sauberes Design "herübergelegt" hat, nicht mit der Fehlersuche herumschlagen. Folgende Punkte sind also zu verbessern:
Ich habe dir hier ein einfaches Beispiel gemacht wie man sauber und ordentlich ein solides Grundgerüst erstellt:
index.html
style.css
Also erstens einmal: bevor du dich an den Inhalt und ein anspruchsvolles Design heranwagen willst, erstelle einfach mal ein Grundgerüst welches hinsichtlich Code und Spezifikationen sauber und ordentlich aufgebaut ist. Wenn man dann einmal ein solides Grundgerüst hat, muss man sich später, wenn man ein sauberes Design "herübergelegt" hat, nicht mit der Fehlersuche herumschlagen. Folgende Punkte sind also zu verbessern:
- Warum nicht gleich HTML5 nutzen, CSS3 benutzt du ja auch schon? Auch wenn es immer noch im Entwurfstadium steckt kann man es ohne Bedenken benutzen (Google, Youtube etc. nutzen es auch schon)
- Wie von lauras schon erwähnt, einfach mal den ganzen Code durch den Validator jagen lassen (ul-Tag der Navigation nicht korrekt geschlossen, a-Tag im footer falsch geschrieben etc.)
- Einheitlichkeit ist das A und O der Fehlerbeseitigung: Verwende nur " und nicht noch '. Wenn du dem Kopfbereich einen englischen Begriff gibst (es heisst dann header und nicht heeder) kannst du gleich allen anderen Bereichen auch einen englischen Begriff zuweisen.
- Bezüglich Gross- und Kleinschreibung: Bitte schreibe alles klein (id anstatt ID). Dann aber in Zukunft auch alle Dateien und Verzeichnise und sonst alles klein schreiben.
- Moderne Websites erstrecken sich entweder über die ganze Bildschirmbreite oder sind zentriert (da muss man sich nicht über Geschmackssache streiten).
- Ich würde die Reset-Angaben gleich auch in die style.css Datei reinstecken. Klar man sagt, dann ist die ganze Sache übersichtlicher, aber es sind ja nicht viele Angaben und da ist es Unsinn noch extra eine weitere CSS-Datei einzubinden.
Ich habe dir hier ein einfaches Beispiel gemacht wie man sauber und ordentlich ein solides Grundgerüst erstellt:
index.html
- Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="content-language" content="de" />
<link href="style.css" title="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="content">
<h2>Titel h2</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
style.css
- Code: Alles auswählen
/* reset */
/* ---------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
font-family: Arial, sans-serif;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* basics */
/* ---------------------------------------- */
html {
text-align: center;
min-width: 760px;
}
body {
width: 960px;
margin: 0 auto;
text-align: left;
}
/* header */
/* ---------------------------------------- */
#header {
background-color: #eee;
margin-bottom: 20px;
}
#header h1 {
padding: 10px;
font-weight: bold;
}
/* nav */
/* ---------------------------------------- */
#nav {
width: 30%;
float: left;
margin-bottom: 20px;
background-color: #eee;
}
#nav ul {
padding: 10px;
}
/* content */
/* ---------------------------------------- */
#content {
width: 70%;
float: right;
margin-bottom: 20px;
}
#content h2 {
padding: 0 0 0 10px;
}
#content p {
padding: 0 0 0 10px;
}
/* footer */
/* ---------------------------------------- */
#footer {
clear: both;
background-color: #eee;
}
#footer p {
padding: 10px;
}
Zuletzt geändert von NeoAramis am Donnerstag 1. September 2011, 20:14, insgesamt 2-mal geändert.
-
NeoAramis - HTML-Acrobat
- Beiträge: 520
- Registriert: Freitag 20. März 2009, 22:11
- Wohnort: Schweiz
Re: IE & Chrome zerschießen das Layout
von Feninic » Donnerstag 1. September 2011, 17:18
Hallo ihr beiden,
als erstes mal einen ganz herzlichen Dank für die Hinweise. Habe gerade alles durchvalidieren lassen. Nun ist der html komplett konform (wie et ja eigentlich sein soll). Habe dabei auch wieder einiges gelernt.
Eines ist mir jedoch immer noch schleierhaft. Warum akzepteiert er ein klein geschriebenes id doch ein großgeschriebenes ID nicht?
Bei dem Grundgerüst muss ich noch mehr Wert auf die Ordnung legen, das ist schon richtig.
Die Anzeige haut nun auch komplett hin, wie Sie soll.
Eines habe ich jetzt nochmal ganz besonders erfahren, der FireFox scheint ein sehr toleranter Browser zu sein, während Chrome und Co da nicht so tolerant sind. Liege ich damit richtig?
Was das html5 angeht habe ich noch bischen davor zurückgeschreckt, weil ich mir nicht sicher war in wieweit das schon eraubt ist. Doch nun denke ich werde ich auch darauf zurückgreifen.
Die Vorschläge, die gepostet wurden werde ich mir in aller Ruhe zu Gemüter führen und versuchen so gut ich kann umzusetzen.
Ich denke ich bin auf einem ganz guten weg, dass alles gut wird.
Ich wünsche Euch noch einen schönen Abend.
LG Feninic
als erstes mal einen ganz herzlichen Dank für die Hinweise. Habe gerade alles durchvalidieren lassen. Nun ist der html komplett konform (wie et ja eigentlich sein soll). Habe dabei auch wieder einiges gelernt.
Eines ist mir jedoch immer noch schleierhaft. Warum akzepteiert er ein klein geschriebenes id doch ein großgeschriebenes ID nicht?
Bei dem Grundgerüst muss ich noch mehr Wert auf die Ordnung legen, das ist schon richtig.
Die Anzeige haut nun auch komplett hin, wie Sie soll.
Eines habe ich jetzt nochmal ganz besonders erfahren, der FireFox scheint ein sehr toleranter Browser zu sein, während Chrome und Co da nicht so tolerant sind. Liege ich damit richtig?
Was das html5 angeht habe ich noch bischen davor zurückgeschreckt, weil ich mir nicht sicher war in wieweit das schon eraubt ist. Doch nun denke ich werde ich auch darauf zurückgreifen.
Die Vorschläge, die gepostet wurden werde ich mir in aller Ruhe zu Gemüter führen und versuchen so gut ich kann umzusetzen.
Ich denke ich bin auf einem ganz guten weg, dass alles gut wird.
Ich wünsche Euch noch einen schönen Abend.
LG Feninic
- Feninic
- HTML-Newbie
- Beiträge: 11
- Registriert: Mittwoch 31. August 2011, 21:39
Re: IE & Chrome zerschießen das Layout
von Sören » Donnerstag 1. September 2011, 17:54
Nach xml-Standard (welcher XHTML zugrunden liegt), müssen alle Attribute (wie "id" und "href") und Tags (body, div, ...) kleingeschrieben werden.
Ein Browser kann sich an den Standard halten und bei großgeschriebene Attributen wie dein "ID" das komplette Attribut einfach ignorieren, wodurch dann die von CSS angesprochenene id in der HTML-Datei nicht existiert und somit auch nicht gestylt wird, oder dem Browser ist Groß- und Kleinschreibung egal.
Ein Browser kann sich an den Standard halten und bei großgeschriebene Attributen wie dein "ID" das komplette Attribut einfach ignorieren, wodurch dann die von CSS angesprochenene id in der HTML-Datei nicht existiert und somit auch nicht gestylt wird, oder dem Browser ist Groß- und Kleinschreibung egal.
-
Sören - HTML-Acrobat
- Beiträge: 851
- Registriert: Samstag 5. Juni 2010, 16:00
Re: IE & Chrome zerschießen das Layout
von Feninic » Freitag 2. September 2011, 05:01
Guten Morgan,
jetzt verstehe ich das, also wenn der Browser die Sachen dann ignoriert, kann er sie ja logischerweise nicht ausführen und setzt dann z.B Inhalt von div's die als seperat geplant waren in den vorherigen, weil er einfach die großgeschriebene Anweisung ignoriert.
Der Euro fällt manchmal in Centstücken, aber ich glaube jetzt ist er komplett gefallen.
Dankeschön für die Erklärung.
LG Feninic
jetzt verstehe ich das, also wenn der Browser die Sachen dann ignoriert, kann er sie ja logischerweise nicht ausführen und setzt dann z.B Inhalt von div's die als seperat geplant waren in den vorherigen, weil er einfach die großgeschriebene Anweisung ignoriert.
Der Euro fällt manchmal in Centstücken, aber ich glaube jetzt ist er komplett gefallen.
Dankeschön für die Erklärung.
LG Feninic
- Feninic
- HTML-Newbie
- Beiträge: 11
- Registriert: Mittwoch 31. August 2011, 21:39
Beiträge bitte im neuen Forum
9 Beiträge
• Seite 1 von 1
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast