Probelm mit zentrierung meiner Seite und dem IE

[wolverine88]

Hi Leute,

ich habe wie oben schon gesagt Probleme bei der Zentrierung meiner Internetseite.

Ich lese mich seit 2 Wochen hier im Forum ein und habe auch schon einige Fortschritte gemacht, stoße aber leider immer wieder auf Probleme.
Ich möchte, dass meine Seite im Browser links und rechts zentriert, dargestellt wird. Dies ist aber nicht der Fall wenn ich z.B. in Firefox raus und rein Zoome (vom IE mal ganz zu schweigen -.-).
Anfangs funktionierte es noch aber ab irgendeinem Punkt klappte es dann plötzlich nicht mehr.

Bin leider ratlos, warum es jetzt nichtmehr geht, und muss mich nun an Profis wenden.

Um nicht sofort 5 Threads öffnen zu müssen schreibe ich noch einige andere Probleme die Site betreffend mit in diesen.

1. Ausrichtungsangaben in PX oder EM? Ist es sinnvoll zu mischen?
   Ich strebe natürlich eine möglichst einheitliche Darstellung unter verschiedenen Auflösungen und Browsern an bin mir aber nicht sicher wie ich die in Px vorliegenden Design vorgaben in em umrechnen kann?

2. Gibt es eine einfache Möglichkeit meine Seite unter diversen Auflösungen dynamisch anzeigen zu lassen? Also, sodass die Dimensionen meiner Elemente quasi auf die Einstellungen im Browser und der Auflösung angepasst werden.

3. Habe über Dreamweaver ein Sprymenue als Navigation eingebaut wenn nun allerdings der User im Browser eine andere Schriftgröße gewählt hat verschieben sich die Elemente des Menüs. Kann man dem irgendwie entgegen wirken?

4. Mein größtes Problem ist allerdings der IE der macht einfach was er will. Bilder verspringen beim Zoomen.
Im Spry Menü habe ich einen transparenten Hintergrund eingebaut, welcher im IE aber nicht umgesetzt wird (also weißer Hintergrund wird angezeigt).
Ich weiß das es Hacks gerade für diesen Browser gibt habe aber keine Ahnung, wie ich diese umzusetzen habe?

Bin mir bewusst, dass das viele Fragen auf einmal sind, ich werde daher (<schäm>entgegen der Charta</schäm> meinen "ganzen" Code mit Posten.
Ich erwarte nicht das man mir alles haarklein erklärt mir reichen auch Links ums selber nachzulesen.

Falls Ihr noch andere anmerknugen habt bitte alles rauslassen ich bin mir ziemlich sicher da gibst noch verbesserungs bedarf ;)

Hab den Code hier nicht rein bekommen habe den als PDF hochgeladen:
http://www.cshare.de/file/8d8185d9b201c6c5631d721de1adce0d/Code.pdf.html

Sry ist ümständlich ich weiß

Danke schon mal allen fürs Lesen

[suit]

Ich lese mich seit 2 Wochen hier im Forum ein und habe auch schon einige Fortschritte gemacht, stoße aber leider immer wieder auf Probleme.

Das gehört zum Lernen dazu :)

Ich möchte, dass meine Seite im Browser links und rechts zentriert, dargestellt wird. Dies ist aber nicht der Fall wenn ich z.B. in Firefox raus und rein Zoome (vom IE mal ganz zu schweigen -.-).

Wie zentriest du denn? Das sollte ohne Probleme funktioneren.

Anfangs funktionierte es noch aber ab irgendeinem Punkt klappte es dann plötzlich nicht mehr.

Du meinst ab dem Punkt wo die Breite des Inhalts die des Anzeigebereichs übersteigt? Das ist bei der herkömmlichen Zentrierung mittels automatischen Außenabständen so gewollt und auch sinnvoll - wenn du das nicht willst (warum auch immer) könnte sich das umgehen lassen.

Um nicht sofort 5 Threads öffnen zu müssen schreibe ich noch einige andere Probleme die Site betreffend mit in diesen.

Das ist eine gute Idee :)

1. Ausrichtungsangaben in PX oder EM? Ist es sinnvoll zu mischen?

Das kommt auf den Anwendungsfall an - ist aber durchaus sinnvoll Angaben zu mischen, wenn es der Anwendungsfall erfordert.

Ich strebe natürlich eine möglichst einheitliche Darstellung unter verschiedenen Auflösungen und Browsern an bin mir aber nicht sicher wie ich die in Px vorliegenden Design vorgaben in em umrechnen kann?

Vergiss dieses Unterfangen wieder. Es ist weder sinnvoll noch erforderlich, dass es überall möglichst gleich aussieht.

em nutzt als Bezugsgröße die Zeichengröße. 1 em entspricht also 1:1 der Versalhöhe (also der Höhe eines "großen" Zeichens ohne Unterlägen oder Ligaturen) bzw. der Breite eines gevierten Zeichnens.

Wenn die Schriftgröße 12 Pixel beträgt, entspricht 1em 12px - 0.5em 6px oder 2em 24px.

Das eignet sich besonders um ein ordentliche Schriftbild zu erhalten.

Dieses Beispiel lässt sich z.B. sehr leicht von px (teilweise) in em übersetzen
http://www.alistapart.com/d/settingtypeontheweb/example.html

12, 18, 36px sind dann 1, 1.5em oder 3em.

2. Gibt es eine einfache Möglichkeit meine Seite unter diversen Auflösungen dynamisch anzeigen zu lassen? Also, sodass die Dimensionen meiner Elemente quasi auf die Einstellungen im Browser und der Auflösung angepasst werden.

Media Queries sind hier das stichwort - aber auch wenn es sich "einfach" anhört ist es richtig arbeit und erfordert zuerst einmal ziemlich viel Vorarbeit seitens des Screendesigners - ein festbetoniertes Pixel-Layout lässt sich nicht ohne weiteres responsive gestalten.

3. Habe über Dreamweaver ein Sprymenue als Navigation eingebaut wenn nun allerdings der User im Browser eine andere Schriftgröße gewählt hat verschieben sich die Elemente des Menüs. Kann man dem irgendwie entgegen wirken?

Schmeiß das Menü weg und erlerne den Umgang mit CSS - ein Menü in welcher Form auch immer kann man recht flott ohne Schwierigkeiten selbst gestalten - dann weiß man auch wie es funktioniert.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm

4. Mein größtes Problem ist allerdings der IE der macht einfach was er will. Bilder verspringen beim Zoomen.

Darunter kann ich mir nichts vorstellen.

Im Spry Menü habe ich einen transparenten Hintergrund eingebaut, welcher im IE aber nicht umgesetzt wird (also weißer Hintergrund wird angezeigt).

Der Internet Explorer ab Version 7 kann mit RGBA PNG-Files umgehen, der Internet Explorer 6 hingegen nicht - er zeigt nur die statische Hintergrundfarbe an und ignoriert den Alphakanal.

Ich weiß das es Hacks gerade für diesen Browser gibt habe aber keine Ahnung, wie ich diese umzusetzen habe?

Speichere deine Grafik richtig: 32-Bit PNG und nicht 24-Bit (damit kann der IE7 und 8 teilweise nicht umgehen) und ignoriere den IE6, der ist tot.

Bin mir bewusst, dass das viele Fragen auf einmal sind, ich werde daher (<schäm>entgegen der Charta</schäm> meinen "ganzen" Code mit Posten.

Bau' für dine Probleme testcases - mit jsfiddle z.B. - deren Links kannst du dann posten - das erleichtert es auch potentiellen Helfern einfach "mitzubauen".

Sry ist ümständlich ich weiß

1,3 MiB? So einen Mist kann nur Dreamweaver produzieren - trenn dich von dem Schwachsinn so schnell es geht :)

Ich weigere mich, mir das anzusehen.

[wolverine88]

Wie zentriest du denn? Das sollte ohne Probleme funktioneren.

  
#wrapper {  
	height: 512px;  
	width: 1024px;  
	margin-top: 71px;  
	margin-right: auto;  
	margin-bottom: 0px;  
	margin-left: auto;  
	background-color: #FFFFFF;

Anfangs funktionierte es noch aber ab irgendeinem Punkt klappte es dann plötzlich nicht mehr.

Wenn ich raus zoome sollte die Seite immernoch mittig stehen sie verschiebt sich allerdings nach links(rechter Rand breiter als linker)

Das kommt auf den Anwendungsfall an - ist aber durchaus sinnvoll Angaben zu mischen, wenn es der Anwendungsfall erfordert.

Von was für Anwendungsfällen reden wir hier möchte nur nicht das z.B. durch Benutzereinstellungen mein Layout verschoben wird

Media Queries sind hier das stichwort - aber auch wenn es sich "einfach" anhört ist es richtig arbeit und erfordert zuerst einmal ziemlich viel Vorarbeit seitens des Screendesigners - ein festbetoniertes Pixel-Layout lässt sich nicht ohne weiteres responsive gestalten.

Ok werd ich mich zu einem späteren Zeitpunkt nochmal mit beschäftigen hauptsache die Seite läuft erstmal das kann ich ja denke ich nachträglich nochmal einbauen

Schmeiß das Menü weg und erlerne den Umgang mit CSS - ein Menü in welcher Form auch immer kann man recht flott ohne Schwierigkeiten selbst gestalten - dann weiß man auch wie es funktioniert.

Hatte ich schon drin hat aber irgendwie nicht so funktioniert wie ich wollte mit diesem Spry gedönse klappts erstmal.  
Auf lange sicht werd ichs austauschen.  
Aber nur zum Verständniss wo liegt der Vorteil bzw. Nachteil

Darunter kann ich mir nichts vorstellen.

Habe ein Signet eingebaut welches ich so gecoded habe:  
  
.signet {  
	z-index: 20;  
	width: 517px;  
	margin-left: 253px;  
	position: relative;  
	left: 11px;  
	top: -27px;  
}  
  
Wenn ich nun rein oder raus zoome springt das Bild nach oben oder unten weg.

Im Spry Menü habe ich einen transparenten Hintergrund eingebaut, welcher im IE aber nicht umgesetzt wird (also weißer Hintergrund wird angezeigt).

Habe kein PNGs genommen sondern das ganze so formatiert:  
  
ul.MenuBarHorizontal li  
{  
	margin: 0;  
	padding: 0;  
	list-style-type: none;  
	font-size: 100%;  
	position: relative;  
	text-align: left;  
	cursor: pointer;  
	width: 10em;  
	float: left;  
	margin-left: 8.83px;  
	margin-top: 5.5px;  
	background: transparent;  
  
das ist übgrigens im Sprymenü und in ner einzelnen Datei ausgelagert also nicht im xxx.css

Bau' für dine Probleme testcases - mit jsfiddle z.B. - deren Links kannst du dann posten - das erleichtert es auch potentiellen Helfern einfach "mitzubauen".

Was ist jsfiddle?

1,3 MiB? So einen Mist kann nur Dreamweaver produzieren - trenn dich von dem Schwachsinn so schnell es geht :)

Ich weigere mich, mir das anzusehen.

Das ist die Größe vom PDF die Dreamweaver daten sind unter 100kb groß ;)

[suit]

Wenn ich raus zoome sollte die Seite immernoch mittig stehen sie verschiebt sich allerdings nach links(rechter Rand breiter als linker)

Dann machst etwas, dass du hier nicht zeigst - margin: auto zentriert ziemlich exakt.

Von was für Anwendungsfällen reden wir hier möchte nur nicht das z.B. durch Benutzereinstellungen mein Layout verschoben wird

z.B. ein Linie nach einer Überschrift die immer 0.25em Abstand zum Inhalt (padding) haben soll, aber unabhängig von der Schriftgröße immer exakt 1px stark sein soll.

Ok werd ich mich zu einem späteren Zeitpunkt nochmal mit beschäftigen hauptsache die Seite läuft erstmal das kann ich ja denke ich nachträglich nochmal einbauen

Nachtraglich ist, wenn man beim Design nicht schon darauf geachtet hat, ziemlich "unmöglich".

Aber nur zum Verständniss wo liegt der Vorteil bzw. Nachteil

Es ist wie mit den Jedi und den Sith - der weg zum Jedi ist lang und steinig, der zum Sith schnell und eben.

Dreamwaver ist die Dunkle Seite der Macht: man kommt zwar schnell zu einem Ergebnis, aber ohne das nötige Wissen, diese "Macht" zu kontrollieren, kommt viel Mist raus.

Wenn ich nun rein oder raus zoome springt das Bild nach oben oder unten weg.[/code]

Ohne zu wissen was es tun soll: du hast ziemlich sicher ein problem mit der relativen Positionierung.

ul.MenuBarHorizontal li

Ein ziemlich unsinniger Klassenname - was ist, wenn das Menü später (wenn du eben responsive arbeiten willst) wahlweise horizontal oder vertikal ist?

Richtig: Dreamweaver verbrennen :)

margin-left: 8.83px;
margin-top: 5.5px;

"halbe Pixel" sind selten eine gute Idee.

background: transparent;

background: none erfüllt in diesem Fall seinen Zweck - mit dem Schlüsselwort transparent gibts probleme in alten ies, ja.

das ist übgrigens im Sprymenü und in ner einzelnen Datei ausgelagert also nicht im xxx.css[/code]

Also ziemlich unsinnig :)

Was ist jsfiddle?

http://jsfiddle.net/

Eine wirklich praktische Website um schnell mal HTML, CSS und JavaScript-Geschichten zu testen (online und live).

Das ist die Größe vom PDF die Dreamweaver daten sind unter 100kb groß ;)

Ich arbeite grade an der Website für eine Tourismusregion - die Website hat mehrere hundert Unterseiten - die CSS-Daten haben aktuell etwa 4.500 Zeilen und 75 kB.

Ich wage zu behaupten, dass unter deinen 100 kb grausig viel Mist (von Dreamweaver) ist, den keiner Braucht.

Das Menü der oben angesprochenen Site (ist ein relativ "kompliziertes" Drop-Down) hat etwa 4 kB.

Ich weigere mich auch 100 kB CSS durchzusehen, wenn es dabei um das Zentrieren einer Seite und ein Menü geht :)

btw: bitte zitiere so, dass man weiß was wer geschrieben hat :)

[Wolverine88]

Dann machst etwas, dass du hier nicht zeigst - margin: auto zentriert ziemlich exakt.

wollte gerade den ganzen code reinstellen da sprang mich das problem förmlich an hatte im .body folgende angaben:  
body {  
	font: normal 100.01% Futura Md BT, Futura MdCn BT, Futura Lt BT, Futura LtCn BT, Garamond;  
	width: 517px;  
  
wobei width das problem verursacht hat.

Es ist wie mit den Jedi und den Sith - der weg zum Jedi ist lang und steinig, der zum Sith schnell und eben..

hehe schöner vergleich ich nutze den aber nur als Wysiwyg editor nutze relativ wenig von diesen Automatismen.  
wenn ich fragen darf wie machst du es mit dem Editor in Win ;)

Ohne zu wissen was es tun soll: du hast ziemlich sicher ein problem mit der relativen Positionierung.

denke ich auch der witz aber wie immer ist das es in allen gänigen browsern klappt nur im IE nicht.  
Hier der Code:  
 #wrapper {  
	height: 512px;  
	width: 1024px;  
	margin-top: 71px;  
	margin-right: auto;  
	margin-bottom: 0px;  
	margin-left: auto;  
	background-color: #FFFFFF;  
	}  
#head {  
	background-color: #009;  
	height: 800px;  
	width: 900px;  
}  
#head {  
	background-color: #FFF;  
	height: 45.24px;  
	width: 1024px;  
}  
#content {  
	background-color: #FCFBFD;  
	height: 301px;  
	width: 1024px;  
	margin-right: auto;  
	margin-left: auto;  
}  
#footer {  
	height: 76.54px;  
	width: 853px;  
	margin-left: auto;  
	margin-right: auto;  
	margin-top: 0px;  
	position: relative;  
}  
.content_back {  
	margin-left: 85px;  
	margin-right: 85px;  
	width: 853px;  
	height: 273px;  
	z-index: 1;  
	position: relative;  
  
}  
h3 { font-size:10px;  
	text-align:center}  
.signet {  
	z-index: 20;  
	width: 517px;  
	margin-left: 253px;  
	position: relative;  
	left: 11px;  
	top: -27px;  
}  
Hab mal alles reingestellt um nichts zu vergessen

Ein ziemlich unsinniger Klassenname - was ist, wenn das Menü später (wenn du eben responsive arbeiten willst) wahlweise horizontal oder vertikal ist?

responsive? naja gut das ist halt der von DW vorgebaute Spry kram

das ist übgrigens im Sprymenü und in ner einzelnen Datei ausgelagert also nicht im xxx.css[/code]

Also ziemlich unsinnig :)

why .css ist ja auch ausgelagert um es auf alle unterseiten anwenden zu können

Ich arbeite grade an der Website für eine Tourismusregion - die Website hat mehrere hundert Unterseiten - die CSS-Daten haben aktuell etwa 4.500 Zeilen und 75 kB..

will dich ja nicht nötigen den code durchzugucken aber hier ist der HTML kram ;). das einzige was ich halt selber nicht in seiner strucktu editiert hab ist der spry kram den erspar ich dir......(vorerst);)

[Wolverine88]

hab ich den HTML code doch glatt vergessen;)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rosenbaum.info</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
      <div id="head">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">aufkleben</a>
            <ul>
                <li><a href="#">AUTOMOBILE</a></li>
                <li><a href="#">GEB&Auml;UDE</a></li>
                <li><a href="#">MOTORR&Auml;DER</a></li>
                <li><a href="#">SCHAUFENSTER</a></li>
                <li><a href="#">WERBEFL&Auml;CHEN</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">beschriften</a>
            <ul>
              <li><a href="#">ANH&Auml;NGER</a></li>
              <li><a href="#">BANNER &amp; FAHNEN</a></li>
              <li><a href="#">PLAKATE</a></li>
              <li><a href="#">SCHILDER</a></li>
              <li><a href="#">WEGWEISER</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">kennzeichnen</a>
              <ul>
                <li><a href="#">AUFDRUCK</a> </li>
                <li><a href="#">GRAVUR</a></li>
                <li><a href="#">LASERN</a></li>
                <li><a href="#">PR&Auml;GUNG</a></li>
                <li><a href="#">STEMPEL</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">markieren</a>
            <ul>
              <li><a href="#">AUFKLEBER</a></li>
              <li><a href="#">EMBLEME</a></li>
              <li><a href="#">ETIKETTEN</a></li>
              <li><a href="#">PLAKETTEN</a></li>
              <li><a href="#">SIEGEL</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">signieren</a>
            <ul>
              <li><a href="#">EINZELTEILE</a></li>
              <li><a href="#">MUSTERST&Uuml;CKE</a></li>
              <li><a href="#">SERIENPRODUKTE</a></li>
              <li><a href="#">WERBEARTIKEL</a></li>
              <li><a href="#">URKUNDEN</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="content"><img class="content_back" src="bilder/index_background.png" alt="blumen" width="853" height="273" /><img  class="signet" src="bilder/signet.png" alt="signet zeichentechnik rosenbaum" /></div>
      <div id="footer">
       <h3>Zeichentechnik Rosenabum - Am Zehnthof 52 - 45307 Essen - Tel [phone] - Fax [phone] - www.ztrb.de - [e-mail]</h3></div>
</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
    </script>
</body>
</html>

[Matthias Apsel]

Om nah hoo pez nyeetz, Wolverine88!

Lass bitte den Quatsch, Zitate des Vorpostings zu verändern und deine neu geschriebenen Sachen als CSS-Code auszuzeichnen. Lass einfach die ">"-Zeichen als Zitaterkennung stehen.

Matthias