Css: Pixelproblem..

[HTML Strikeout]

Hi Leute!
Gestern habe ich meine neue HP gecodet.
Als ich diese dann asnah war alles vom Design her ok, d.h. alle Elemnte warn an ihrem Platz
Als ich jedoch in den Vollbildmodus verlas und die Seite im verlkeinertem Fenster anshah, herrschte Chaos.
Hier der Link zu Page: Florians Homepage
Ich verwende zur Positionierung Px, also Pixel.
Könnte das Problem darab liegen?
sollte ich vllt. in % umschreiben?
wenn ja wie rehne ich dann die % werte aus?
kennt jemand ein tool dafür?

hoffe auf antworten

 

[RaZ0oR]

Ich würde eher % nehmen, aber das macht jeder anders, aber bei mir wirds perferkt angezeigt ó.ò

 

[incendium]

ich habe es gerade mit breitbildschirm angeschaut. sieht spitze aus ;-)

 

[Dark D.]

Du rechnest das gar nicht aus,
du nimmst eine leere Seite und setzt das erste DIV
--> wie sieht es aus
evtl. verändern, dann das nächst DIV
--> wie sieht es jetzt aus
usw.

 

[JME]

^^
"Achtung die Hp immer im Vollbildmodus betrachten"... ;)

womit haste die divs denn positioniert? hat so ein fehler nicht evntl. etwas mit absoluter und relativer positionierung zu tun?
liebe grüße jme.

 

[HTML Strikeout]

hm

Bei mir wird auch im Vollbildmodus richtig angezeigt, jedoch glaube ich, dass es vllt. an der Auflösung liegt.
Ich hab 1280x1024, mein Freund hat etwas anderes und bei ihm wird sogar im vollbildmodus falsch angezeigt.

Vllt. hat es ja wirklich was mit der absoluten positionierung zu tun... ich post mal die css dazu:

#header {
position:absolute;
top: 0px;
left: 393px;
}

#navi {
position:absolute;
top: 110px;
left: 10px;
width: 80px;
}

#nav_text {
position:absolute;
top: 175px;
left: 50px;
}

#rechts {
position:absolute;
top:110px;
right: 10px;
}              


#inhalt {
position:absolute;
top: 70px;
left: 400px;
}

#rechts_text {
position:absolute;
top:110px;
left:1075px;
}

#player {
positiob:absolute;
top: 300px
left 1075px;
}

#footer {
position:absolute;
bottom: 10px;
left: 330px;
}        
body {background-image: url('bg.jpg');
background-position: center;
background-repeat: repeat-y;
background-attachment:
 }

für alle wo die hp falsch angezeigt wird, hier ein screen wie sie bei mir aussieht:

Was wäre denn eine Alternative für absolutes Positionieren. Kenn das nur so

 

[gruenspan]

Es hat definitiv mit der falschen Positionierung zu tun. Werde Dir im klaren darüber, was es bedeutet ein Element absolut oder relativ zu positionieren!

 

[Maxi]

@ HTML Strikeout

Wenn du so große Bilder hast, die zu groß sind um so gepostet werden zu können, dass sie das Layout des Forums nicht zerschießen, dann lade diese bitte irgendwie hoch und verlinke sie lediglich im Forum.
Danke.

 

[JME]

so vllt. mal ein kleiner überblick...

position ist denke ich klar oder? mit diesem Befehl bestimmt man die Positionsart

absolute = wird vom Rand des nächsten Elternelements gemessen.

relative = wird an der Anfangsposition oder Normalposition des Elements selbst gemessen.

____________________________________

Wie sieht es denn allgemein aus, ich denke das mit dieser positionierung macht nur Sinn wenn du die ganze Seite in einen div Bereich legst und diesen Positionierst, so kannst du dann mit absolute Arbeiten...
dann müsste der Fehler auch weg sein.

Liebe Grüße JME

 

[znay]

@HTML Strikeout: Du könntest einfach mit float arbeiten. Um da zwei Elemente nebeneinander zu bringen gibst du zum Beispiel einfach der linken Navibox float:left, das bewirkt, dass die Navi jetzt am linken Bildschirmrand ist und der Hauptbereich um sie herfließt. Um zubeheben, dass der Contentbereich jetzt nach der Navi wieder am linken Bildschirmrand steht, gibst du ihm so viel margin-left, wie nötig ist, um eine abschließende Linie zu bilden.

Du solltest dir bei deiner Elementwahl allerdings mehr Gedanken um die Semantik machen, solch konstrukte sind eher suboptimal und erhöhen die Ladezeit.

<DIV id=header>
<IMG src="header.jpg" alt="Florians Header"> 
</DIV>

Besser wäre so etwas:

<h1>Willkommen auf Florians Seite!</h1>
<!-- Mit solchen CSS Angaben: -->
h1{
width:500px; // jenachdem, wie breit deine Grafik ist
height:50px; // jenachdem, wie hoch deine Grafik ist
background:url('./foo/bar.png') no-repeat;
text-indent:-999em;
}

Dadurch schließt du zum Beispiel blinde Menschen nicht aus. Die können mit einer Grafik in einem Div nichts anfangen. Mit einem Text, der durch ein Bild ersetzt wird schon.

Ähnliches gild füt deine Navigation, woher soll der Benutzer wissen, was auf deinen Links steht, wenn er die Bilder nicht sehen kann? Hinzu kommt, dass man für Navigationen im allgemeinen Listenelemente verwenden sollte, da sie einmal die Lesbarkeit des Codes erhöhen und vor allem ist es semantisch korrekt, schließlich ist eine Navigation eine Aufzählung von Links.

Der nächste Punkt ist, dass ein Sehschwacher Leser gerne die Schriftgröße ändern möchte. Wenn man das tut, geht der Inhalt deines Contentbereiches über seine Grenzen hinaus. Durch eine width Angabe sollte das behoben werden können. Dies führt auch dazu, dass du Umbrüche nicht durch <br /> erzwingen musst.
Ebenfalls besser wäre es, wenn du für Textabsätze ebenso genau die Elemente dafür benutzt, die dafür vorgesehen sind. Das P in <p>[...]</p> steht in umsonst für "Paragraph" ;)
Zum Schluss solltest Du auch darauf achten keine leeren Elemente zu benutzen und versuchen lieber eine andere Lösung für deine Probleme zu finden.

<DIV id=footer>
</DIV>

Kann mit Sicherheit anders gelöst werden! ;)

Und auch wenn du schreibst, dass der Benutzer die Rechtschreibfehler doch bitte behalten soll, so zeugt es doch von einer gewissen Unseriösität, wenn mich zig Ausrufezeichen und Rechtschreibfehler anspringen. Wenn Du dies vermeidest, gibt es bestimmt Menschen, die Deine Seite dann lieber besuchen würden.

 

[JME]

da geb ich dir schon recht znay, leere div´s machen keinen sinn...
aber der rest den du gsagt hast ist ja schon Userbility...vllt sollte er erstmal sein layout so hinbkommen das er nicht gleich alles umschreiben muss ;)

liebe grüße jme.

 

[znay]

da geb ich dir schon recht znay, leere div´s machen keinen sinn...
aber der rest den du gsagt hast ist ja schon Userbility...vllt sollte er erstmal sein layout so hinbkommen das er nicht gleich alles umschreiben muss ;)

liebe grüße jme.

Ich wollte ihm nur einen Einblick in die Semantik und einen Wink in Richtung Barrierefreiheit mitgeben, da dies Begriffe sind, mit denen er sich auseinandersetzen muss, wenn er vorhat das Ganze richtig zu machen. Und wieso nicht von Anfang an etwas richtig machen? ;)

 

[JME]

stimmt, gut das du dich so um ihn kümmerst ;) ich wolld nur darauf hinweisen das deine tipps nicht diiiiiirekt sein problem lösen ;)
aber trotzdem srry. wenn ich zu vorlaut war ;P
liebe grüße jme.

 

[gruenspan]

absolute = wird vom Rand des nächsten Elternelements gemessen.

Mit position:absolute nimmt man das entsprechende Element vollständig aus dem Fluss des Dokumentes heraus und der ursprüngliche Platz wird freigegeben.

das ist das Problem an absoluter Positionierung. Und wenn man damit nicht umzugehen weiß, dann treten solcherlei Probleme auf.

 

[HTML Strikeout]

okok

Danke schonmal für die vielen konstruktieven ratschläge.
Um mal eins vorneweg zu nhemen: Der Inhalt der Hp ist nur ein Muster, den ich von meiner gaaaanz alten Hp benutzt habe, um zu sehen wie das Design mit content wirkt.
Ach ja und der leere Fotter-div. ^^
Da wollte ich eig. noch einen Footer in Photoshop machne und ihn einbinden, jedoch trat bevor ich überhaupt an einen Footer dachte schon dieses Problem auf und das steht bei mit momentan weiter oben als ein Footer.^^

Nun zum eigentlichen Problem.
ICh glaube nicht, dass es Sinn machen würde, alle Elemente floaten zu lassen, weil es z.B. so ist, dass ich es so gemacht habe, dass die Newsbox ein Element ist und der Text der Newsbox ist ein eigenes Element.
Aber mit float kann man ja keine 2 Elemente "übereinanderfloaten" lassen,oda?
Momentan arbeite ich grad am absolute und relative Problem!
Ich meld mich wieder, wenn ich den Code verbessert hab!
Danke nochmal!!!

 

[gruenspan]

Lass die Positionierung weg und floate alle entsprechenden Elemente. Das floaten der Newsbox ist kein Problem. Floate einfach den umgebenden Container und die darin befindlichen Elemente floaten automatisch mit.

 

[JME]

Position ist ein notwendiger Befehl wenn man seine Webseite mit dem Boxmodell programmiert, ich verstehe nicht genau warum soviele leute immer sagen "lass es weg"...
es gibt auch möglichkeiten die Seite so zu programmieren das sie auch mit "position" auf allen gängigen Browsern gleich aussieht...^
liebe grüße jme.

 

[znay]

Position ist ein notwendiger Befehl wenn man seine Webseite mit dem Boxmodell programmiert [...]

Also ich wurde bisher eher selten gezwungen beim Schreiben (nicht programmieren!) von Webseiten position zu verwenden. Natürlich ist es ab und zu sinnvoll und Notwendig, aber wie Du es schreibst wäre es ein grundlegener Bestandteil jeden Layouts, das ist falsch. Was das Boxmodell damit zu tun hat ist mir auch ein Rätsel, schließlich wird gerade dieses durch position:absolute quasi aufgehoben, da das Element komplett aus dem Fluss der anderen Elemente gerissen wird.

Ein Grund, weshalb position seltener verwendet wird, als andere Layoutlösungen ist zum Beispiel die fehlende position:fixed Unterstützung älterer Internet Explorer