[CSS] Probleme mit CSS

Zweipunktnull · 14. Juni 2006

Hallo!

Ich habe ein Problem... Und zwar baue ich mir momentan meine erste Inet seite mit HTML und einem CSS-basierenden Layout.
Nun, eine box meines layouts ist einfach weiter oben als die anderen, obwohl vom code her alle auf der gleichen höhe anfangen müssten, oder?

Quelltext schrieb:
<style type="text/css">

body
{ background-color:#FFCC00; }

ul#Navigationsleiste {
float:left ; Width:9em ; margin:1em ;
border:0.1em dashed #006600 }

div#Box {
float:right ; Width:9em ; margin:1em ;
border:0.1em dashed #006600 }

div#Seite {
float:none ; Width:auto ; margin-left: 11em ; margin-right:11em ;
border:0.1em dashed #006600 }

</style>

Hier mal ein Bild von dem ganzen...
Und lasst euch nicht von den "billigen" Texten iritieren, die sind nur als platzhalter gedacht, um zu demonstrieren, das meine boxen net stimmen

Und zusätzlich hab ich noch ein kleines problem mit der darstellung im firefox (der macht irgendwie nur probleme...)
ganz oben links steht immer folgendes:

ï»¿

wie bekomm ich das weg?

mfg
computer freak

Thargor · 14. Juni 2006

AW: CCSS] Probleme mit CSS

Du hast für die mittlere box kein margin-top angegeben.

Code:

margin-left: 11em ; margin-right:11em ;

Definieren nur den Abstand für Links und Rechts.

Deshalb ist die eine höher als die anderen

Für den anderen Fehler wäre der HTML-Text vermutlich hilfreicher

Zweipunktnull · 14. Juni 2006

AW: CCSS] Probleme mit CSS

ach klar... vielen dank

mit den fehlern im firefox guck ich nochmal... da gibts noch paar mehr, dann kann ich gleich n neuen theard aufmachen

(natürlich nachdem ich die sufu benutzt habe

)

EDIT: also ich habs jetzt ja mal mit der maßeinheit em probiert. aber es gibt ja 10 verschiedene (zumindest stehen 10 verschiendne in selfHTML.) das hat mich sehr verwirrt. welche maßeinheit sollte man am besten nehmen?

Thargor · 14. Juni 2006

Allgemein würde ich sagen, dass relative größen besser sind als absolute.
also Beispielsweise 50% anstatt 512px.

Ansonsten würde ich je nach Einsatzzweck die Einheit auswählen. (Für Rahmen würde ich eher eine bestimmte größe in pixel nehmen, wobei das natürlich jedem selbst überlassen ist)

Bei den anderen Fehlern könnte dir vielleicht auch geholfen werden, wenn du mal den Code zeigen würdest.

Zweipunktnull · 14. Juni 2006

Thargor schrieb:
Für Rahmen würde ich eher eine bestimmte größe in pixel nehmen [...]

Was mir an einer relativen Einheit für die Boxen gefällt ist, dass ich die Schriftgröße hinterher noch verändern kann und die Boxen verändern sich mit. Das geht doch sonst nicht, oder?

Und hier ist mal der komplette Quelltext... Im Internet Explorer geht alles perfekt, allerdings zeigt der Firefox die Seite extrem komisch/falsch an. Die Boxen sind verschoben und oben links findet sich ein "netter" Schriftzug, den ich nie geschrieben hab.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1>
<meta http-equiv="Content-Style-Type" content="text/css">

<meta name="description" content="Beschreibungstext">
<meta name="keywords" content="Wortliste">

<title>Meine Homepage</title>

<style type="text/css">

body
   { font-family:Tahoma,Verdana,sans-serif ; color:#000040 ; background-color:#C0C0C0 ; }

ul#Navigationsleiste
   { float:left ; Width:10em ; margin:1em ;
   border:0.1em dashed #000040 }

div#Box
   { float:right ; Width:10em ; margin:1em ;
   border:0.1em dashed #000040 }

div#Seite
   { float:none ; Width:auto ; margin-top:1em ; margin-left:12em ; margin-right:12em ;
   border:0.1em dashed #000040 }

</style>

</head>

<body>

<ul id="Navigationsleiste">
 <li>Startseite</li>
 <li>News</li>
 <li>&Uuml;ber mich</li>
 <li>Programmieren</li>
 <li>W&auml;hrungs-Umrechner</li>
 <li>Zeitzonen-Umrechner</li>
</ul>

<div id="Box">
Boxinhalt
</div>

<div id="Seite">
<h1>Startseite</h1>
<h2>Herzlich Willkommen auf meiner Homepage!</h2>
<p>Viel Spa&szlig; beim Umschauen!</p>
</div>


</body>

</html>

Screenshot im Internet Explorer 7 Beta 2
Screenshot im Firefox 1.5.0.4

Wie kann ich die Fehler im Firefox beheben?

Auch ganz wichtig:
Außerdem behauptet der Validator, dass mein Quelltext nicht vollkommen richtig sei. Allerdings finde ich den Fehler nicht. Weder für die komische Darstellung im Firefox, noch für das Fehlschlagen der Prüfung mit dem Validator.
Es wäre echt nett, wenn mal jemand, der HTML/CSS "voll drauf hat", da mal grad drübergucken könnte, dann ich finde einfach den/die Fehler nicht. Vielen Dank im Voraus!

AlbertLast · 15. Juni 2006

Ich glaube KAUM das es einer fehler von Firefox ist ehr ist es entweder IE der es falsch richtig das darstellt und weiteres solltes du nicht mit em arbeiten sondern px und % wobei das 2. vorzuziehen ist !

Zweipunktnull · 15. Juni 2006

ja, klar isses ein fehler in meinem quelltext (sagt der w3 validator ja auch...), allerdings finde ich den fehler einfach net...

Thargor · 15. Juni 2006

Hier

HTML:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1>

Fehlt am ende ein Anführungszeichen

HTML:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Dann ist das ganze auch valid

€dit1.1:
Bei mir sieht es in jedem Browser anders aus, aber ich denke, das liegt an der Liste, da die immer anders dargestellt wird.
Ich würde das eher als normalen Text mit jeweils einem Zeilenumbruch am Ende machen und Listen nur für eins verwenden: Listen

Seltsame Symbole im Firefox hab ich nicht.

Warum man nicht mit em arbeiten sollte ist mir jedoch ein Rätsel.

Übrigens ist das ganze sogar valid xhtml 1.0 strict, wenn du die <meta> tags schließt (jeweils <meta /> oder <meta></meta>)

€dit1.2:
Bei einem Box-Layout solltest du dir vielleicht auch den IE-Boxmodell-Hack ansehen (gilt zwar meines Wissens nur noch für ie5.x, aber es gibt noch genug Leute, die das Ding verwenden)

Hier gibt's Unterschiede von HTML 4 zu XHTML. Allgemein würde ich zu XHML raten, da es zurzeit auch als neuer Standard vom w3c empfohlen wird und logischer ist, bzw. viele Sachen die eigentlich falsch/missbilligt sind (z.b. Frames) entfernt wurden.

Zweipunktnull · 15. Juni 2006

cool! vielen dank. eine frage habe ich noch: in den ersten beiden zeilen lege ich ja fest, welche HTML version ich benutzen will (in diesem fall halt transitional 4.01)

muss ich nirgends die CSS version festlegen? (also z.b. 2.1 oder so) weil wenn ich das nicht machen muss, wozu gibts dann unterschiedliche versionen?

KonKorT · 15. Juni 2006

Nein, die CSS-Version musst Du nirgendswo festlegen

Zweipunktnull · 15. Juni 2006

Hm... Wegen XHTML:

Am Anfang des Dokuments muss ich ja eine XML-Deklaration schreiben.
Nun steht in selfHTML, dass derzeit beim Attribut version der Wert 1.0 sinnvoll wäre. Zwar gäbe es bereits Version 1.1 des XML-Standards, man sollte jedoch 1.0 angeben, sofern man nicht aus bestimmten Gründen XML 1.1 verwenden wolle.
Wieso? Was ist schlecht an XML 1.1?

Thargor · 15. Juni 2006

Da hab ich wohl grad an dir vorbeieditiert

Siehe oben: Ich würde xhtml empfehlen, von html4 strict auf xhtml ist es kein großer Unterschied (siehe hier), aber xhtml ist die Zukunft (Sagt zumindest das w3c und die müssen's ja wissen

Zweipunktnull · 15. Juni 2006

Nein, das hab ich doch schon gelesen.

Ich meine die XML-Deklaration.

<?xml version="1.0" encoding="UTF-8" ?>

selfHTML schrieb:
Derzeit ist beim Attribut version der Wert 1.0 sinnvoll. Zwar gibt es bereits Version 1.1 des XML-Standards, Sie sollten jedoch 1.0 angeben, sofern Sie nicht aus bestimmten Gründen XML 1.1 verwenden wollen.

Und nun ist meine Frage: Wieso? Was ist so schlecht an Version 1.1, dass man sie nicht verwenden soll?

Und welchen MIME-Typen sollte man benutzen?
text/html
text/xml
application/xml
application/xhtml+xml
ka ob's noch mehr gibt...

Thargor · 15. Juni 2006

Man muss keine xml-Deklaration schreiben, aber man kann.

Noch ein paar Links:
Unterschiede xml1.0 zu xml1.1
Unterschiede xhtml1.0 strict zu xhtml1.1

Ich kann mit den Unterschieden bei xml zwar wenig anfangen, aber vielleicht sagt dir das ja was.
Allgemein sieht es so aus, als ob die xml-Version nebensächlich wäre, da sich die Änderungen hauptsächlich darauf beziehen, was erlaubt ist und was nicht, wobei das ja schon durch den (x)html doctype definiert/eingegrenzt wird.

Suche

[CSS] Probleme mit CSS

Zweipunktnull

Commander

Thargor

Lt. Junior Grade

Zweipunktnull

Commander

Thargor

Lt. Junior Grade

Zweipunktnull

Commander

AlbertLast

Lieutenant

Zweipunktnull

Commander

Thargor

Lt. Junior Grade

Zweipunktnull

Commander

KonKorT

Lt. Commander

Zweipunktnull

Commander

Thargor

Lt. Junior Grade

Zweipunktnull

Commander

Thargor

Lt. Junior Grade

Ähnliche Themen