PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit HTML und CSS! HP wird falsch angezeigt.

Fettkopp
2007-05-17, 12:48:00
Hallo
Konnte das Problem in der Überschrieft irgendwie schlecht beschreiben. Es geht um folgendes:
Ich versuch grade eine Website zu erstellen. Also das Grundgerüst steht. Nun möchte ich gerne noch Menübilder einfügen. Dabei entsteht nun das erste Problem:


http://www.tapi-online.de/Stuff/Festival/index.html

In Firefox liegt das Bild "Bands.jpg" am oberen Rand der Seite, die ganze Seite wird 100px nach unten geschoben.

In IE funktioniert es richtig. Die Seite liegt am oberen Rand des Browsers, und nur das Bild wird 100px nach unten geschoben.

Hierzu der Code (hab den Text rausgenommen)
HTML Datei
<body>

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

</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>

CSS Datei


body {
background-color:#000000;
margin:0;
padding:0;
text-align:left;
font: 75% Verdana, Helvetica, Arial, sans-serif;
color:#CC6600;
}
h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address{
margin: .5em 0;
padding:0;
margin:0;
}

h2, h3, h4, h5, h6 {
fon-family: Verdana, Helvetica, Arial, sans-serif;
letter-spacing:+1px;
padding-bottom:3px;
color:#000000;
font-weight:normal;
}
h2 {font-size:164%;}
h3 {font-size:145%;}
h4 {font-size:118%;}
h5 {font-size:100%;}
h6 {font-size:86%;}


a:link{color:#fff;}
a:visited{color:#fff;}
a:hover , a:active{
color:#fff;
background-color:#fff;
}




div#container{
width: 800px;
height: auto;
padding-left:0px;
padding-right:0px;
margin:0px auto;
margin-top:0px;
text-align:left;
}

div#header{
background:url(../img/header.jpg);
height:242px;
background-repeat: no-repeat;
}
div#content{
background:url(../img/content.jpg);
background-repeat:repeat;
height:auto;
width:730px;
padding-top:0px;
padding-left:40px;
padding-right:30px;
padding-bottom:0px;


}
div#footer{
background:url(../img/footer.jpg);
background-repeat:no-repeat;
height:171px;
}

/* <<---- Menü Images ---> */
div#bands{
background:url(../img/bands.jpg);
background-repeat:no-repeat;
height:92px;
width:83px;
margin-left:34px;
margin-top:100px;
}


Das wichtigste ist eigentlich der Div Bereich Bands... dort ist das Image definiert.
Gast
2007-05-18, 00:07:31
das css hat ein paar konzeptionelle fehler und, viel schlimmer schreibfehler.

verwende einen editor, der in der lage ist, die syntax zu checken.
darph
2007-05-18, 14:49:04
Dazu kommt, daß das Teil in transitional erstellt wurde, was für neue Seiten eigentlich ein no-go darstellt.
Gast
2007-05-18, 19:49:57
In IE funktioniert es richtig.
dass es so aussieht wie von dir gewollt heißt noch lange nicht, dass diese darstellung richtig ist.
DanMan
2007-05-18, 22:12:57
Setz dein div#bands auf position:absolute;. Mehr hab ich den Beiträgen der anderen nicht hinzuzufügen.
Klingone mit Klampfe
2007-05-18, 22:33:12
Dazu kommt, daß das Teil in transitional erstellt wurde, was für neue Seiten eigentlich ein no-go darstellt.

Solange es "transitional" offiziell noch gibt, kann man das natürlich auch benutzen. Deine Privatmeinung ist ebendies.
darph
2007-05-18, 22:58:41
Solange es "transitional" offiziell noch gibt, kann man das natürlich auch benutzen. Deine Privatmeinung ist ebendies.
Ehm. Es ist meine Privatmeinung, völlig richtig. Darph ich die hier nicht vertreten? Rein Zufällig auch die Meinung der HTML Working Group und mithin ist dies auch so in der DTD vermerkt, aber weil ich auf meinem hohen Roß sitze und du dich ja sowieso so toll daran aufgeilst, wie pöse und arrogant ich doch sei, wird dich das wohl nicht interessieren. Soll ich das jetzt bei jedem einzelnen Posting dabei schreiben, daß ich nur meine Meinung vertrete, nur damit du dich nicht daran ereifern mußt?

Ach ja:
This is the HTML 4.01 Transitional DTD, which includes
presentation attributes and elements that W3C expects to phase out
as support for style sheets matures. Authors should use the Strict
DTD when possible, but may use the Transitional DTD when support
for presentation attribute and elements is required.
"Ich will das aber so und bin zu faul, meinen Code zu validieren" betrachte ich mal nicht als "required", aber da darphst du gerne anderer Meinung sein. Du brauchst noch nichtmal meine Erlaubnis dazu; kannst sie aber trotzdem haben. Bin ich nicht generös? :ugly2: Zumal ich bei dem Code auch nichts erkennen kann, was die Verwendung von strict irgendwie impossible machen würde.

Im Übrigen habe ich nicht geschrieben, daß es verboten sei; insofern hast du völlig recht: Man kann es noch machen. Ist trotzdem schlechter Stil. Das schrub ich. Ja, das ist meine Meinung, du darphst gerne eine Andere haben. ;( Allerdings sei hier noch hinzugefügt, daß bei Transitional-Doctypes jeder Browser (aus Gründen der (Achtung, Buzzwordalarm!) Backwardscompatibility, weshalb es Transitional überhaupt gibt, ich verweise da mal auf die Übersetzung (http://dict.leo.org/ende?lp=ende&p=/oHL..&search=%FCbergangsweise) des des Begriffes - das gibt es nur noch, damit bestehende Seiten überhaupt validiert werden können) seinen eigenen Modus (http://en.wikipedia.org/wiki/Quirks_mode) verwendet, der nicht immer mit den Vorgaben des W3C übereinstimmt (gilt nicht nur für den IE) - in solchen Fällen braucht man sich nicht zu wundern, wenn es in jedem Browser signifikant (genug) anders aussieht, wie man hier (*kurvekrieg*) auch sehr schön sieht.


One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug. Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this incorrect algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.
Wetten, daß dieser Umstand der Grund ist, warum es diesen Thread gibt?

Das ist alles meine Meinung. Bis auf Zitate und Verweise. Das sind dann natürlich Meinungen Anderer, beziehungsweise Verweise auf ebendiese. Muß man ja heutzutage immer dabei schreiben. ;(
Sephiroth
2007-05-19, 00:10:22
Wetten, daß dieser Umstand der Grund ist, warum es diesen Thread gibt?
Mit Transitional ist man dem Standard-Modus näher (vom Rendering her wüsste ich da keine Unterschiede zw. Strict und Transitional) als dem Quirks. Insofern ist Transitional an sich sicher keine Problem, solange der Doctype prinzipiell korrekt ist (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

Ich will das aber so und bin zu faul, meinen Code zu validieren
Äh, ja, also ob Strict-Code automatisch korrekt ist. Transitional kann genauso gut (oder schlecht) korrekt sein.

Der IMHO einzig relevante Grund für HTML 4.01 Transitional und XHTML 1.0 Transitional ist das target-Atribut. ;(
DanMan
2007-05-19, 16:15:08
Nunja, es hat mich auch schon des öfteren genervt, dass ich Bilder in Absätzen nicht einfach mit dem Attribut align="left" usw. positionieren kann, sondern dann (IE6 sei dank - sonst könnte ich es oft auch mit erweiterten Selektoren machen) den Bildern extra eine eintsprechende CSS Klasse verpassen muss.

Das und eben das mit dem target Attribut.
darph
2007-05-19, 16:38:14
Nunja, es hat mich auch schon des öfteren genervt, dass ich Bilder in Absätzen nicht einfach mit dem Attribut align="left" usw. positionieren kann, sondern dann (IE6 sei dank - sonst könnte ich es oft auch mit erweiterten Selektoren machen) den Bildern extra eine eintsprechende CSS Klasse verpassen muss.
Öhm p img {...} Bilder innerhalb von Absätzen.

Andererseits, ob du jetzt align="lefty" oder class="lefty" schreibst, ist ja dann auch egal.
DanMan
2007-05-19, 18:35:50
Öhm p img {...} Bilder innerhalb von Absätzen.
Ja, schon klar. Aber ich will ja auch nicht immer alle gleich platzieren.
Andererseits, ob du jetzt align="lefty" oder class="lefty" schreibst, ist ja dann auch egal.
Ja, oder eben style="float:left", war ja auch nur um zu zeigen, dass ich den Wegfall dieser Möglichkeit als Rückschritt betrachte.
Fettkopp
2007-05-23, 21:00:46
danke für die Hilfe, hat jetzt funktioniert