Hallo,
vor kurzem ist eine Freundin von mir auf mich zugekommen, sie würde eine Homepage brauchen. Und da ich ja Informatik studiere kann ich ja sicher so etwas. Naja, wie eben das Weltbild des normalen Volkes so ist.
Jedenfalls habe ich jetzt tatsächlich eine ?-Version hinbekommen. Das Ganze wird auch im Opera exakt so dargestellt, wie ich mir das gedacht habe.
Oben eben eine Zeile mit Überschrift und Trennlinie. Darunter dann links ein Menü, rechts eine vertikale Liste mit Bildern und in der Mitte eben den Inhalt der Seite. Darunter dann noch eine einfache Zeile mit Credits usw.
Die ganze Seite ist 1100 x 800 Pixel groß und ich hab sie vorher in einem Grafikprogramm entworfen und aus dem dann eben die Schnippsel weiter verwendet (Macht man heute u.U. nicht mehr, aber für meine und insbesondere für die Zwecke der Freundin reicht das wohl erst mal).
Das hier wäre mal der HTML-Code:
Und der Zugehörige CSS-Code:
Wie schon erwähnt, im Opera sieht es exakt so aus, wie in meiner Vorlage.
Stichprobenartig habe ich aber gerade eben ein paar andere Browser getestet (Internet Explorer 9, Firefox 6, Safari WasauchimmermitLionausgeliefertwird)
Dabei sind mir dann einige Fehler aufgefallen, bei denen ich nicht mehr wirklich eine Idee habe, wodurch sie verursacht werden und weswegen ich jetzt nun hier anfragen wollte.
Zunächst mal der IE:
Hier finden sich auf den ersten Blick 3 Darstellungsfehler
Safari und Firefox teilen sich im Prinzip die Probleme und da ist es auch schnell erledigt:
Vielleicht hätte ja jemand eine Idee, wie ich das beheben kann.
Vielen Dank jedenfalls schon jetzt und im Anhang noch einige Grafiken, evtl. zur besseren Darstellung des Problems
vor kurzem ist eine Freundin von mir auf mich zugekommen, sie würde eine Homepage brauchen. Und da ich ja Informatik studiere kann ich ja sicher so etwas. Naja, wie eben das Weltbild des normalen Volkes so ist.
Jedenfalls habe ich jetzt tatsächlich eine ?-Version hinbekommen. Das Ganze wird auch im Opera exakt so dargestellt, wie ich mir das gedacht habe.
Oben eben eine Zeile mit Überschrift und Trennlinie. Darunter dann links ein Menü, rechts eine vertikale Liste mit Bildern und in der Mitte eben den Inhalt der Seite. Darunter dann noch eine einfache Zeile mit Credits usw.
Die ganze Seite ist 1100 x 800 Pixel groß und ich hab sie vorher in einem Grafikprogramm entworfen und aus dem dann eben die Schnippsel weiter verwendet (Macht man heute u.U. nicht mehr, aber für meine und insbesondere für die Zwecke der Freundin reicht das wohl erst mal).
Das hier wäre mal der HTML-Code:
Code:
<body>
<!-- Hintergrundbild -->
<img id = "bg_img" src = "pic_frags/background.png">
<div id = "ersatzBody">
<div id = "headDiv">
</div>
<!-- Menü Elemente hier einfügen -->
<div id = "menuDiv">
<div id = "menu">
<p><a id = "link" href = "alpha.htm">Über Mich</a></p>
<p><a id = "link" href = "alpha.htm">Englisch</a></p>
<p><a id = "link" href = "alpha.htm">Taekwondo</a></p>
<p><a id = "link" href = "alpha.htm">Downloads</a></p>
</div>
</div>
<!-- Bilder zwischen upper_sep und lower_sep einfügen -- Empfehlung: maximal 5 Bilder -->
<div id = "picturesDiv">
<img id = "upper_sep" width = "174" height = "18" src = "pic_frags/upper_pic_sep.png"></img>
<div id = "picBG">
<a href = "alpha.htm"><img id = "pic" src = "pic_frags/testbild.png"></img></a>
</div>
<div id = "picBG">
<a href = "alpha.htm"><img id = "pic" src = "pic_frags/testbild.png"></img></a>
</div>
<div id = "picBG">
<a href = "alpha.htm"><img id = "pic" width = "132" height = "101" src = "pic_frags/testbild.png"></img></a>
</div>
<img id = "lower_sep" width = "174" height = "10" src = "pic_frags/lower_pic_sep.png"></img>
</div>
<!-- Inhalt hier einfügen -->
<div id = "contentDiv">
</div>
<div id = "creditsDiv">
</div>
</div>
</body>
Und der Zugehörige CSS-Code:
Code:
/* Hintergrundbild */
#bg_img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
z-index: 1;
}
#ersatzBody
{
position: relative;
left: 50%;
margin-left: -550px;
z-index: 2;
width: 1100px;
height: 800px;
}
/* Überschrift */
#headDiv
{
background: url(pic_frags/titel.png);
width: 1100;
height: 112;
}
/* Menü */
#menuDiv
{
background: url(pic_frags/menu_border.png);
width: 180;
height: 323;
float: left;
}
#menu
{
text-align: center;
position: relative;
left: 4px;
top: 55px;
}
#menu p
{
line-height: 2;
}
#link
{
color: black;
font-family: tahoma, sans-serif;
font-weight: bold;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
}
#link:visited
{
color: black;
}
#link:hover
{
border-top-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-style:solid;
border-color: black;
}
/* Inhalt */
#contentDiv
{
background: url(pic_frags/content_border.png);
width: 746;
height: 663;
}
/* Bilder links */
#picturesDiv
{
width: 174;
height: 18;
float: right;
}
#picBG
{
width: 174;
height: 107;
background: url(pic_frags/picBG.png);
}
#pic
{
position: relative;
top: 3px;
left: 14px;
}
/* Credits */
#creditsDiv
{
background: url(pic_frags/credits.png);
width: 1100;
height: 25;
clear: both;
}
Wie schon erwähnt, im Opera sieht es exakt so aus, wie in meiner Vorlage.
Stichprobenartig habe ich aber gerade eben ein paar andere Browser getestet (Internet Explorer 9, Firefox 6, Safari WasauchimmermitLionausgeliefertwird)
Dabei sind mir dann einige Fehler aufgefallen, bei denen ich nicht mehr wirklich eine Idee habe, wodurch sie verursacht werden und weswegen ich jetzt nun hier anfragen wollte.
Zunächst mal der IE:
Hier finden sich auf den ersten Blick 3 Darstellungsfehler
- Die Bilder auf der Linken Seite wurden von mir im Opera so positioniert, dass sie mehr oder weniger im Farbverlauf des Hintergrundbildes positioniert wurden, jedenfalls sind die auf eine etwas unschöne Art und Weise verschoben, allerdings im großen und ganzen nichts, womit sich nicht zur Not leben lassen könnte. Vermute aber auch, dass es mit Problem 2 zusammen hängt.
- Das Menü links wurde mit float: left; und die Bilder mit float: right entsprechend positioniert. Dazwischen soll dann ein weiteres <div> den Inhalt der Seite beinhalten. Im Internet Explorer sitzt dieses Content-Div allerdings unter den beiden float-Elementen aber noch vor den "Credits".
- In den ersten Zeilen der CSS habe ich ja ein "Hintergrundbild" so eingebunden, dass es das Browserfenster flächendeckend füllt, was auch im Opera und Firefox / Safari wunderbar funktioniert. Nur im IE bleibt auf der rechten Seite ein hässlicher weißer Streifen, mit dem sich dann nicht mehr sooo gut leben lässt.
Safari und Firefox teilen sich im Prinzip die Probleme und da ist es auch schnell erledigt:
- Wie Punkt zwei beim Internet Explorer oben haben die beiden Browser auch Probleme mit der Positionierung des mittleren Inhaltskontainers nur mit dem Unterschied, dass er bei den beiden Browsern hinter dem Menü auf der linken Seite verschwindet und nicht in der Mitte angeordnet wird.
Vielleicht hätte ja jemand eine Idee, wie ich das beheben kann.
Vielen Dank jedenfalls schon jetzt und im Anhang noch einige Grafiken, evtl. zur besseren Darstellung des Problems