Hallo zusammen,
ich habe einen Inhalt auf der Webseite zentriert.
Das Ergebnis ist bei maximiertem Browserfenster und hoher Bildschirmauflösung korrekt.
Ist das Browserfenster in der Darstellung kleiner, verschwindet die Seite links und lässt sich nicht richtig scrollen.
Ich glaube das Problem in der Positionierung zu finden, weiß aber keine Lösung.
Kann mir bitte jemand helfen? 
Seite:
http://www.cmeesters.de/
CSS:
http://www.cmeesters.de/fileadmin/style_intro.css
Freundliche Grüße,
Christian
Du hast nicht wirklich etwas zentriert. Du hast versucht etwas "herzurichten". Verzichte auf die relative Positionierung, auch absolute ist keine Lösung. Gib dem zu zentrierenden Bereich eine feste Breite und die Eigenschaft "margin: 0 auto;" - dann passt es schon.
Vielen Dank,...
...dieser Tipp hat mir sehr geholfen. - Klasse!
Habe mich zu früh gefreut. Offensichtlich funktioniert das nicht im IE,...
...gibt es da evtl. einen Workaround?
Das funktioniert auch im IE wunderbar, allerdings sollte der HTML-Code valide sein: http://validator.w3.org/check?verbose=…cmeesters.de%2F
Hallo Bandit,
danke für deinen Hinweis.
>allerdings sollte der HTML-Code valide sein: http://validator.w3.org/check?verbos...meesters.de%2F
Das ist er jetzt,...
>Das funktioniert auch im IE wunderbar,
Nein, leider liegst Du damit falsch,...
Freudnliche Grüße,
Christian
Quirks-Modus!
unverständlich
Wozu hast du die ganzen Position-Angaben drin? Die sind völlig unnötig! Mit
margin: 0 auto;
hast du den Content zentriert, jetzt solltest du mit margin oder padding den Abstand oben einbauen.
Also gut:
Anstatt am Anfang:
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
dieses
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
dieser Doctype versetzt den IE in den Standards-Modus (dort funktioniert margin: 0 auto).
Der erste versetzt den IE in den Quirks-Modus (dort kann man raten, was der Browser mit dem Code macht)
Sehr geehrte Damen und Herren,
die Antwort eingangs war sehr hilfreich, die übrigen Lösungsansätze leider nicht der Rede wert.
Für eine möglicherweise entgeldliche, qualifizierte Lösung wäre ich sehr dankbar.
Freundliche Grüße,
Christian
die Antwort eingangs war sehr hilfreich, die übrigen Lösungsansätze leider nicht der Rede wert.
Damit disqualifizierst du dich für jedes Forum!!! Wenn du mit den Hinweisen nichts anfangen kannst, kannst du das den Leuten, die helfen wollen, nicht ankreiden!
- - - Aktualisiert - - -
html, body {
background-color: #9DA9A9;
background-image: url("images/PNGs/intro_bg.png");
background-position: center top;
background-repeat: no-repeat;
height: 100%;
margin: 0px;
padding: 0px;
}
a {
width: 100%;
height: 100%;
}
#content {
margin: 0 auto;
text-align: center;
width: 660px;
padding: 150px 0 0 0;
}
#header {
background-image: url("images/PNGs/intro_header.png");
height: 55px;
left: 150px;
margin-bottom: 75px;
position: relative;
width: 360px;
}
#header span {
display: none;
}
#left {
background-image: url("images/PNGs/intro_l-welsoase.png");
background-position: center;
background-repeat: no-repeat;
float: left;
height: 306px;
width: 30%;
}
#left span {
display: none;
}
#middle {
background-image: url("images/PNGs/intro_ferienwohnung.png");
background-position: center;
background-repeat: no-repeat;
float: left;
height: 306px;
margin: 5%;
margin-bottom: 0%;
margin-top: 0%;
width: 30%;
}
#middle span {
display: none;
}
#right {
background-image: url("images/PNGs/intro_private_homepage.png");
background-position: center;
background-repeat: no-repeat;
float: left;
height: 306px;
width: 30%;
}
#right span {
display: none;
}
#footer {
background-image: url("images/PNGs/intro_footer.png");
background-position: center;
background-repeat: no-repeat;
clear: both;
height: 45px;
width: 100%;
}
#footer span {
display: none;
}
Und dann noch einen richtigen Doctype setzen und dann funktioniert das auch.
Hallo nochmal,
mein offensives Posting war auch in Bezug auf den Autor des "Let me google that for you,..."-Postings geantwortet worden. Die Folgeantworten auf der zweiten Seite habe ich dabei übersehen! - Das war nicht meine Absicht.
Der Doctype war doch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Also kann der Quirks-Modus nicht die Ursache sein,...
STOP!
Gerade ist mir aufgefallen, das mein Template den korrekten Doctype enthält, ich aber im CMS (Typo3) einen anderen generiere.
Das hat mir sehr geholfen!
Vielen Dank!
Freundliche Grüße,
Christian